Feature/change ecannacard display

components/ui/EcannaCardPage.tsx

@@ -13,6 +13,8 @@ import {
 } from "../../components/ui/CheckoutUpsellModal.tsx";
 import { useUI } from "../../sdk/useUI.ts";
 import { IS_BROWSER } from "$fresh/runtime.ts";
+import domtoimage from "dom-to-image";
+// import puppeteer from "puppeteer";
 
 export interface UserData {
   data: { UserAttributes: { Name: string; Value: string }[] };
@@ -38,6 +40,7 @@ function formatDate(date: Date) {
 
 function EcannaCardPage({ cardSkeleton }: Props) {
   const [isLoading, setIsLoading] = useState(true);
+  const [downloading, setDownloading] = useState(false);
   const [loadingProduct, setLoadingProduct] = useState(true);
   const [userData, setUserData] = useState<UserData>();
   const [created_at, setCreatedAt] = useState<Date>();
@@ -103,6 +106,54 @@ function EcannaCardPage({ cardSkeleton }: Props) {
     }
   }, []); // Passando um array de dependências vazio
 
+  function generateCardImage() {
+    setDownloading(true);
+    const element = document.getElementById("ecannaCard");
+
+    if (element) {
+      // const browser = await puppeteer.launch({});
+      // const page = await browser.newPage();
+      // await page.setContent(element.outerHTML);
+      // const screenshotBuffer = await page.screenshot({
+      //   clip: { x: 0, y: 0, width: 395, height: 260 },
+      // });
+      // await browser.close();
+
+      // const blob = new Blob([screenshotBuffer], { type: 'image/png' });
+      // const url = URL.createObjectURL(blob);
+      // const link = document.createElement('a');
+      // link.href = url;
+      // link.download = ;
+      // document.body.appendChild(link);
+      // link.click();
+      // document.body.removeChild(link);
+      // URL.revokeObjectURL(url);
+
+      domtoimage.toPng(element)
+        .then(function (dataUrl1) {
+          domtoimage.toPng(element)
+            .then(function (dataUrl2) {
+              domtoimage.toPng(element)
+                .then(function (dataUrl3) {
+                  console.log({ dataUrl1 });
+                  const link = document.createElement("a");
+                  link.download = "my-image-name.png";
+                  link.href = dataUrl1;
+                  setDownloading(false);
+                  link.click();
+                });
+            });
+        })
+        .catch(function (error) {
+          setDownloading(false);
+          console.error("Oops, something went wrong!", error);
+        });
+    } else {
+      setDownloading(false);
+      alert("Erro ao gerar carteirinha. Contacte o suporte!");
+    }
+  }
+
   function downloadFile(fileUrl: string, filename: string) {
     // Fetch the file data
     fetch(fileUrl)
@@ -135,7 +186,7 @@ function EcannaCardPage({ cardSkeleton }: Props) {
         {isLoading
           ? <span class="loading loading-spinner loading-xs" />
           : (
-            <div class="relative text-[#1878b8]">
+            <div id="ecannaCard" class="relative text-[#1878b8]">
               {userData && (
                 <div class="absolute z-10 top-[68px] left-[30px]">
                   <Image
@@ -231,10 +282,13 @@ function EcannaCardPage({ cardSkeleton }: Props) {
           type="button"
           class="flex btn btn-primary text-white w-full sm:w-[48%]"
           onClick={() => {
-            alert("Funcionalidade em desenvolvimento!");
+            // generateCardImage();
+            alert("Funcionalidade em Desenvolvimento! Lançaremos em Breve");
           }}
         >
-          <span>Baixar Carteirinha</span> <Icon id="Download" size={19} />
+          <span>Baixar Carteirinha</span> {downloading
+            ? <span class="loading loading-spinner loading-xs" />
+            : <Icon id="Download" size={19} />}
         </button>
         <button
           type="button"

components/ui/Icon.tsx

@@ -23,6 +23,7 @@ export type AvailableIcons =
   | "FilterList"
   | "Heart"
   | "Instagram"
+  | "Info"
   | "QRicon"
   | "CircleCheck"
   | "Linkedin"

components/ui/MyInfo.tsx

@@ -269,7 +269,7 @@ function MyInfo() {
           </h3>
           <div class="flex flex-col items-center">
             {/* Selfie */}
-            <div>
+            <div class="flex flex-col items-center gap-4">
               <label for="selfieInput">
                 <div class="relative h-[144px] w-[108px] shadow-md cursor-pointer">
                   <div class="absolute h-7 w-7 flex justify-center items-center rounded-full bg-black bg-opacity-40 top-[10px] left-[71px]">
@@ -296,6 +296,28 @@ function MyInfo() {
                 class="hidden"
                 onChange={(e) => handleUploadSelfie(e)}
               />
+              <div class="bg-[#e3e3e3] rounded-md p-4 flex flex-col items-center gap-2 text-[10px] text-[#808080]">
+                <span class="flex gap-2">
+                  <Icon id="Info" size={16} />Orientações para foto:
+                </span>
+                <ul class="list-decimal p-2">
+                  <li>
+                    <span>Foto em proporção 3x4</span>
+                  </li>
+                  <li>
+                    <span>Iluminação adequada, sem sombras</span>
+                  </li>
+                  <li>
+                    <span>Fundo claro - preferencialmente branco</span>
+                  </li>
+                  <li>
+                    <span>Rosto olhando para frente, direto para a câmera</span>
+                  </li>
+                  <li>
+                    <span>Retire óculos, chapéus e demais adereços</span>
+                  </li>
+                </ul>
+              </div>
             </div>
 
             {/* Personal info */}

components/ui/PublicPageControl.tsx

@@ -39,6 +39,10 @@ function PublicPageControl(props: Props) {
 
       if (username) {
         window.location.href = props.redirectTo || "/meus-dados";
+      } else {
+        if (IS_BROWSER) {
+          localStorage.setItem("AccessToken", "");
+        }
       }
     } catch (error) {
       console.error("Erro ao carregar dados:", error);

deno.json

@@ -1,6 +1,9 @@
 {
   "imports": {
     "deco-sites/ecannadeco/": "./",
+    "dom-to-image": "https://esm.sh/[email protected]",
+    "puppeteer": "https://deno.land/x/pptr/mod.ts",
+    "deno-canvas": "https://deno.land/x/canvas/mod.ts",
     "datetime": "https://deno.land/[email protected]/datetime/mod.ts",
     "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/[email protected]/",
     "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/[email protected]/",