From 05a9b9d1244bdf8273107ae4b75b7eb1551728be Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Tue, 2 Apr 2024 00:56:15 -0300
Subject: [PATCH 1/2] finished styling myaccount

---
 components/ui/Icon.tsx      |   2 +
 components/ui/MyAccount.tsx | 311 ++++++++++++++++++++++++------------
 static/sprites.svg          |  20 +++
 3 files changed, 227 insertions(+), 106 deletions(-)

diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx
index 1f28577..7005c85 100644
--- a/components/ui/Icon.tsx
+++ b/components/ui/Icon.tsx
@@ -5,6 +5,7 @@ export type AvailableIcons =
   | "ArrowsPointingOut"
   | "Anexo"
   | "Bars3"
+  | "Check"
   | "ChevronLeft"
   | "ChevronRight"
   | "ChevronUp"
@@ -22,6 +23,7 @@ export type AvailableIcons =
   | "FilterList"
   | "Heart"
   | "Instagram"
+  | "CircleCheck"
   | "Linkedin"
   | "Minus"
   | "MapPin"
diff --git a/components/ui/MyAccount.tsx b/components/ui/MyAccount.tsx
index 0e23d00..8da8d4d 100644
--- a/components/ui/MyAccount.tsx
+++ b/components/ui/MyAccount.tsx
@@ -6,6 +6,10 @@
 import { useEffect, useState } from "preact/hooks";
 import { invoke } from "../../runtime.ts";
 import { Plan } from "../../components/ui/Checkout.tsx";
+import PageWrap from "../../components/ui/PageWrap.tsx";
+import Icon from "../../components/ui/Icon.tsx";
+import Slider from "../../components/ui/Slider.tsx";
+import SliderJS from "../../islands/SliderJS.tsx";
 
 function MyAccount() {
   const [isLoading, setIsLoading] = useState(false);
@@ -105,130 +109,225 @@ function MyAccount() {
   };
 
   return (
-    <div class="container flex justify-center">
-      <div class="w-[70%] p-16 bg-slate-300">
-        {isLoading
-          ? <span class="loading loading-spinner text-green-600"></span>
-          : (
-            <div class="flex flex-col gap-4">
-              <div class="flex justify-center mb-8">
-                <h3 class="text-xl font-semibold">Minha Conta</h3>
-              </div>
-              <div>
-                <label class="input input-bordered flex items-center gap-2">
-                  <div class="label">
-                    <span class="label-text">Email</span>
-                  </div>
-                  <input
-                    placeholder="Email"
-                    name="email"
-                    disabled
-                    value={email}
-                  />
-                </label>
-              </div>
-              <div>
-                <h3>Alterar Senha</h3>
-                <label class="input input-bordered flex items-center gap-2">
-                  <div class="label">
-                    <span class="label-text">Senha Atual</span>
-                  </div>
-                  <input
-                    type="password"
-                    placeholder="até 8 caracteres"
-                    name="currentPassword"
-                    value={currentPassword}
-                    onChange={(e) =>
-                      e.target &&
-                      setCurrentPassword(e.currentTarget.value)}
-                    disabled={isChanging}
-                  />
-                </label>
-                <label class="input input-bordered flex items-center gap-2">
+    <PageWrap>
+      {isLoading
+        ? <span class="loading loading-spinner text-green-600"></span>
+        : (
+          <div class="flex flex-col gap-3 w-full">
+            <div class="flex justify-center">
+              <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+                Minha Conta
+              </h3>
+            </div>
+            <div class="flex flex-col gap-3">
+              <label class="form-control w-full">
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">
+                    Email
+                  </span>
+                </div>
+                <input
+                  placeholder="Email"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                  name="name"
+                  disabled
+                  value={email}
+                />
+              </label>
+            </div>
+            <div class="w-full sm:w-[60%] md:w-[40%] flex flex-col gap-3">
+              <h2 class="text-[#8b8b8b] font-semibold mb-4 w-full">
+                Alterar Senha
+              </h2>
+              <label class="form-control w-full">
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">
+                    Senha Atual
+                  </span>
+                </div>
+                <input
+                  type="password"
+                  placeholder="*********"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                  name="currentPassword"
+                  value={currentPassword}
+                  onChange={(e) =>
+                    e.target &&
+                    setCurrentPassword(e.currentTarget.value)}
+                  disabled={isChanging}
+                />
+              </label>
+              <label class="form-control w-full">
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">
+                    Nova Senha
+                  </span>
+                </div>
+                <input
+                  type="password"
+                  placeholder="*********"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                  name="newPassword"
+                  value={newPassword}
+                  onChange={(e) =>
+                    e.target &&
+                    setNewPassword(e.currentTarget.value)}
+                  disabled={isChanging}
+                />
+              </label>
+              <label
+                class={`form-control w-full ${
+                  confirmNewPassword !== newPassword && "input-error"
+                }`}
+              >
+                <div class="label pb-1">
+                  <span class="label-text text-xs text-[#585858]">
+                    Confirmar Nova Senha
+                  </span>
+                </div>
+                <input
+                  type="password"
+                  placeholder="*********"
+                  class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3]"
+                  name="confirmNewPassword"
+                  value={confirmNewPassword}
+                  onChange={(e) =>
+                    e.target &&
+                    setConfirmNewPassword(e.currentTarget.value)}
+                  disabled={isChanging}
+                />
+                {confirmNewPassword !== newPassword && (
                   <div class="label">
-                    <span class="label-text">Nova Senha</span>
+                    <span class="label-text-alt"></span>
+                    <span class="label-text-alt text-red-500">
+                      Não é igual à nova senha
+                    </span>
                   </div>
-                  <input
-                    type="password"
-                    placeholder="até 8 caracteres"
-                    name="newPassword"
-                    value={newPassword}
-                    onChange={(e) =>
-                      e.target &&
-                      setNewPassword(e.currentTarget.value)}
-                    disabled={isChanging}
-                  />
-                </label>
-                <label
-                  class={`input input-bordered flex items-center gap-2 ${
-                    confirmNewPassword !== newPassword && "input-error"
-                  }`}
+                )}
+              </label>
+              <div class="w-full flex justify-end">
+                <button
+                  class="btn btn-primary text-white"
+                  onClick={handleChangePassword}
                 >
-                  <div class="label">
-                    <span class="label-text">Confirmar Nova Senha</span>
-                  </div>
-                  <input
-                    type="password"
-                    placeholder="até 8 caracteres"
-                    name="ConfirmNewPassword"
-                    value={confirmNewPassword}
-                    onChange={(e) =>
-                      e.target &&
-                      setConfirmNewPassword(e.currentTarget.value)}
-                    disabled={isChanging}
-                  />
-                  {confirmNewPassword !== newPassword && (
-                    <div class="label">
-                      <span class="label-text-alt"></span>
-                      <span class="label-text-alt text-red-500">
-                        Não é igual à nova senha
-                      </span>
-                    </div>
-                  )}
-                </label>
-
-                <button class="btn btn-outline" onClick={handleChangePassword}>
                   Alterar Senha{" "}
                   {isChanging && (
                     <span class="loading loading-spinner text-green-600"></span>
                   )}
                 </button>
               </div>
-              <div>
-                <h3>Plano</h3>
-                <select
-                  class="select select-bordered"
-                  value={newPlan?.name}
-                  onChange={(e) =>
-                    e.target &&
-                    setNewPlan(
-                      plans.find((p) => p.name === e.currentTarget.value),
-                    )}
-                >
-                  {plans.map((plan) => (
-                    <option
-                      value={plan.skus[0]}
-                      onClick={(e) =>
-                        e.target &&
+            </div>
+            <div>
+              <h2 class="text-[#8b8b8b] font-semibold mb-4 mt-10 w-full">
+                Plano
+              </h2>
+              {/* <div class="flex gap-3"> */}
+              <Slider class="carousel gap-3 max-w-[105%]">
+                {plans.map((plan, i) => (
+                  <Slider.Item class="carousel-item" index={i}>
+                    <div
+                      class="bg-white rounded-md p-3 flex flex-col justify-between"
+                      onClick={() =>
                         setNewPlan(
-                          plans.find((p) => p.name === e.currentTarget.value),
+                          plans.find((p) =>
+                            p.name === plan.name
+                          ),
                         )}
                     >
-                      {plan.name + (plan.name == currentPlan ? " (atual)" : "")}
-                    </option>
-                  ))}
-                </select>
+                      <div class="flex items-center gap-4">
+                        <div
+                          class={`h-8 w-8 rounded-full ${
+                            plan.name == (newPlan?.name || currentPlan)
+                              ? "bg-primary flex items-center justify-center"
+                              : "bg-white"
+                          }`}
+                          style={{
+                            "box-shadow": "inset 1px 3px 7px rgb(0 0 0 / 20%)",
+                          }}
+                        >
+                          {plan.name == (newPlan?.name || currentPlan) && (
+                            <Icon class="text-white" id="Check" size={19} />
+                          )}
+                        </div>
+                        <div class="flex flex-col text-[#898989]">
+                          <span class=" uppercase text-sm">{plan.name}</span>
+                          <span class="text-xs">
+                            {"R$ " + (plan.price / 100).toFixed(2) + "/" +
+                              (plan.period === "MONTHLY" && "mês")}
+                          </span>
+                        </div>
+                      </div>
+                      <div class="flex flex-col gap-2">
+                        {plan.name === "FREE" && (
+                          <span class="text-xs font-semibold mt-2 text-primary">
+                            30 dias grátis
+                          </span>
+                        )}
+                        <ul class="flex flex-col gap-3">
+                          <li class="flex gap-3 items-center">
+                            <Icon
+                              class="text-primary"
+                              id="CircleCheck"
+                              size={17}
+                            />
+                            <span class="text-[10px]">
+                              Carteirinha digital oficial
+                            </span>
+                          </li>
+                          <li class="flex gap-3 items-center">
+                            <Icon
+                              class="text-primary"
+                              id="CircleCheck"
+                              size={17}
+                            />
+                            <span class="text-[10px]">
+                              Upload até 2 documentos
+                            </span>
+                          </li>
+                          <li
+                            class={`flex gap-3 items-center ${
+                              plan.name == "FREE" && "opacity-20"
+                            }`}
+                          >
+                            <Icon
+                              class="text-primary"
+                              id="CircleCheck"
+                              size={17}
+                            />
+                            <span class="text-[10px]">
+                              Upload ilimitado de documentos
+                            </span>
+                          </li>
+                          <li
+                            class={`flex gap-3 items-center ${
+                              plan.name == "FREE" && "opacity-20"
+                            }`}
+                          >
+                            <Icon
+                              class="text-primary"
+                              id="CircleCheck"
+                              size={17}
+                            />
+                            <span class="text-[10px]">Carteirinha física</span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </Slider.Item>
+                ))}
+              </Slider>
+              <div class="flex justify-end mt-4">
                 <button
-                  class="btn btn-outline"
-                  disabled={newPlan?.name == currentPlan}
+                  class="btn btn-primary text-white"
+                  disabled={(newPlan?.name || currentPlan) == currentPlan}
                 >
                   Alterar Plano
                 </button>
               </div>
             </div>
-          )}
-      </div>
-    </div>
+          </div>
+        )}
+    </PageWrap>
   );
 }
 
diff --git a/static/sprites.svg b/static/sprites.svg
index 566d337..8bf490c 100644
--- a/static/sprites.svg
+++ b/static/sprites.svg
@@ -1,4 +1,24 @@
 <svg style="display:none">
+	<symbol fill="none" viewBox="0 0 16 16" id="Check" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#aa)">
+	<path d="M6 10.78 3.22 8l-.947.94L6 12.667l8-8-.94-.94L6 10.78Z" fill="currentColor"/>
+	</g>
+	<defs>
+	<clipPath id="aa">
+	<path fill="#fff" d="M0 0h16v16H0z"/>
+	</clipPath>
+	</defs>
+	</symbol>
+	<symbol fill="none" viewBox="0 0 17 17" id="CircleCheck" xmlns="http://www.w3.org/2000/svg">
+	<g clip-path="url(#aa)">
+	<path d="m12.335 5.369-4.668 4.668L5.124 7.5l-.999.999 3.542 3.541 5.666-5.666-.998-1.006ZM9.083 1.417A7.086 7.086 0 0 0 2 8.5a7.086 7.086 0 0 0 7.083 7.083A7.086 7.086 0 0 0 16.167 8.5a7.086 7.086 0 0 0-7.084-7.083Zm0 12.75A5.665 5.665 0 0 1 3.417 8.5a5.665 5.665 0 0 1 5.666-5.667A5.665 5.665 0 0 1 14.75 8.5a5.665 5.665 0 0 1-5.667 5.666Z" fill="currentColor"/>
+	</g>
+	<defs>
+	<clipPath id="aa">
+	<path fill="#fff" d="M0 0h17v17H0z"/>
+	</clipPath>
+	</defs>
+	</symbol>
 	<symbol fill="none" viewBox="0 0 33 33" id="MedCanna" xmlns="http://www.w3.org/2000/svg">
 	<g clip-path="url(#aa)">
 	<path fill-rule="evenodd" clip-rule="evenodd" d="M16.468.329c4.002-.007 4.209-.007 4.608.116.232.07.56.225.735.341.18.116.425.342.554.503.13.161.303.464.548 1.064l.032 7.315 8.09.032.354.149c.193.077.47.238.612.348.142.11.348.309.451.432.103.122.264.4.516 1.005v9.023l-.18.387a3.954 3.954 0 0 1-.394.645 2.869 2.869 0 0 1-.528.464 2.865 2.865 0 0 1-.639.303c-.277.09-.915.103-8.282.103l-.032 8.089-.161.386a3.14 3.14 0 0 1-.387.677 2.755 2.755 0 0 1-.554.503c-.174.116-.503.27-.735.341-.4.116-.619.123-4.576.123-3.642 0-4.202-.013-4.512-.103a5.37 5.37 0 0 1-.644-.252 3.065 3.065 0 0 1-.574-.425c-.155-.155-.374-.47-.683-1.122l-.064-8.185-4.061-.032c-3.03-.026-4.119-.058-4.286-.116a3.273 3.273 0 0 1-.542-.29 2.65 2.65 0 0 1-.528-.464c-.116-.142-.29-.432-.574-1.032v-9.023l.161-.387c.09-.219.245-.496.355-.618a3.61 3.61 0 0 1 .451-.432c.142-.11.419-.271.967-.497l8.089-.032.032-7.444.2-.42c.11-.231.328-.547.483-.702.155-.154.4-.341.542-.419.141-.07.418-.18.612-.245.316-.096.812-.103 4.544-.11Zm-.477 10.615c-.071.239-.174.638-.226.883-.058.252-.142.754-.193 1.128a28.508 28.508 0 0 0-.161 1.45c-.039.426-.071.954-.071 1.18 0 .219-.02.4-.052.4-.026.006-.322-.368-.664-.819a21.522 21.522 0 0 0-1.063-1.302 6.6 6.6 0 0 0-.703-.664c-.141-.103-.322-.18-.406-.18-.103 0-.154.051-.18.18-.02.097.006.361.058.593.051.232.206.71.335 1.064.129.354.419 1.024.638 1.482.226.458.522 1.05.67 1.308.149.252.271.49.271.529 0 .039-.238-.02-.535-.122-.29-.11-.818-.265-1.173-.361-.354-.09-.812-.162-1.018-.162-.27 0-.374.026-.4.097-.02.052.013.161.071.245.058.077.232.245.387.367.154.123.535.38.844.568.316.193.915.515 1.34.728.426.213.78.406.793.432.007.026-.122.096-.29.154-.174.065-.47.207-.663.323-.194.116-.355.258-.355.309 0 .077.11.097.612.084a5.06 5.06 0 0 0 1.322-.2c.393-.103.76-.206.825-.226.103-.038.11.02.11.697 0 .431.031.799.07.889.045.077.11.161.148.187a.468.468 0 0 0 .213.052c.09 0 .206-.078.277-.175.116-.16.136-.277.13-.934 0-.42.006-.76.012-.76.013 0 .129.038.258.096.135.052.515.155.838.232.329.07.844.148 1.147.168.387.032.56.019.593-.033.032-.045.013-.122-.032-.18-.039-.052-.31-.206-.593-.342a9.515 9.515 0 0 0-.645-.296c-.103-.039 0-.11.516-.348.354-.168.934-.477 1.289-.683.354-.207.786-.484.967-.613.174-.129.406-.335.503-.457.103-.123.167-.245.154-.284-.013-.039-.193-.07-.406-.084-.251-.013-.606.039-1.057.155-.374.09-.909.251-1.192.354-.284.104-.522.18-.535.168-.007-.006.09-.2.219-.432.129-.232.4-.754.606-1.16.206-.406.47-.986.6-1.289.122-.303.296-.786.392-1.076.09-.297.168-.677.168-.858 0-.251-.026-.328-.116-.36-.058-.026-.18-.007-.27.038-.091.045-.271.168-.413.284-.136.11-.503.502-.812.876-.31.374-.742.928-.96 1.244-.213.31-.407.555-.42.548-.013-.013-.058-.516-.096-1.115-.046-.6-.123-1.412-.174-1.805a23.42 23.42 0 0 0-.194-1.192 14.17 14.17 0 0 0-.225-.902 2.684 2.684 0 0 0-.271-.645c-.077-.122-.193-.232-.251-.245-.052-.013-.174.071-.271.18-.09.104-.226.387-.29.632Z" fill="currentColor"/>

From bcf79a94982ec888d84c5f80b307cc8bb21e527e Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Tue, 2 Apr 2024 01:21:58 -0300
Subject: [PATCH 2/2] fixed cids include function

---
 components/ui/MyInfo.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/components/ui/MyInfo.tsx b/components/ui/MyInfo.tsx
index 2275e59..6f0c1f4 100644
--- a/components/ui/MyInfo.tsx
+++ b/components/ui/MyInfo.tsx
@@ -420,7 +420,14 @@ function MyInfo() {
                       <li
                         class="cursor-pointer"
                         onClick={() => {
-                          setCids([...cids, cid]);
+                          if (
+                            !cids.find((c) =>
+                              (c as { full_code: string }).full_code ===
+                                cid.full_code
+                            )
+                          ) {
+                            setCids([...cids, cid]);
+                          }
                         }}
                       >
                         {cid.full_code} - {cid.name}