From 7dd9f4e2c88c8e774da4ffcf476b5898d4e566f6 Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Fri, 5 Apr 2024 12:04:11 -0300
Subject: [PATCH 1/2] implemented support

---
 actions/createTicket.ts          |  47 +++++++
 components/ui/NewTicketModal.tsx | 119 ++++++++++++++++
 fresh.gen.ts                     |   2 +
 islands/NewTicketModal.tsx       |   9 ++
 manifest.gen.ts                  | 224 ++++++++++++++++---------------
 sdk/useUI.ts                     |   2 +
 sections/Content/Support.tsx     |  76 +++++++++++
 7 files changed, 369 insertions(+), 110 deletions(-)
 create mode 100644 actions/createTicket.ts
 create mode 100644 components/ui/NewTicketModal.tsx
 create mode 100644 islands/NewTicketModal.tsx
 create mode 100644 sections/Content/Support.tsx

diff --git a/actions/createTicket.ts b/actions/createTicket.ts
new file mode 100644
index 0000000..038b570
--- /dev/null
+++ b/actions/createTicket.ts
@@ -0,0 +1,47 @@
+export interface Props {
+  email: string;
+  subject: string;
+  content: string;
+}
+
+const signUpCognito = async (
+  props: Props,
+  _req: Request,
+): Promise<unknown | null> => {
+  const params = {
+    fields: [
+      {
+        name: "email",
+        value: props.email,
+      },
+      {
+        name: "TICKET.subject",
+        value: props.subject,
+      },
+      {
+        name: "TICKET.content",
+        value: props.content,
+      },
+    ],
+  };
+  try {
+    const response = await fetch(
+      `https://api.hsforms.com/submissions/v3/integration/submit/43817859/88ccb64a-bb13-4c72-ade6-1bb9e6157946`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(params),
+      },
+    );
+
+    const res = await response.json();
+    return res;
+  } catch (e) {
+    // console.log({ e });
+    return e;
+  }
+};
+
+export default signUpCognito;
diff --git a/components/ui/NewTicketModal.tsx b/components/ui/NewTicketModal.tsx
new file mode 100644
index 0000000..924665a
--- /dev/null
+++ b/components/ui/NewTicketModal.tsx
@@ -0,0 +1,119 @@
+import { useUI } from "../../sdk/useUI.ts";
+import { useState } from "preact/hooks";
+import Modal from "../../components/ui/Modal.tsx";
+import { invoke } from "../../runtime.ts";
+
+const ModalTicket = () => {
+  const { displayNewTicketModal } = useUI();
+  const [email, setEmail] = useState("");
+  const [content, setContent] = useState("");
+  const [subject, setSubject] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmitTicket = async (e: Event) => {
+    e.preventDefault();
+    setSubmitting(true);
+    try {
+      const r = await invoke["deco-sites/ecannadeco"].actions.createTicket({
+        email,
+        subject,
+        content,
+      });
+
+      const resp = r as { inlineMessage?: string };
+
+      if (
+        resp.inlineMessage &&
+        resp.inlineMessage == "Obrigado por enviar o formulário."
+      ) {
+        setEmail("");
+        setContent("");
+        setSubject("");
+
+        console.log({ responseTicker: r });
+        setSubmitting(false);
+
+        alert(
+          "Recebemos seu ticket! Em breve, te retornaremos no email informado.",
+        );
+        displayNewTicketModal.value = false;
+      }
+    } catch (e) {
+      alert("Erro ao enviar ticket. Tente mais tarde");
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      loading="lazy"
+      open={displayNewTicketModal.value}
+      onClose={() => displayNewTicketModal.value = false}
+    >
+      <div class="flex flex-col p-16 gap-3 bg-[#EDEDED] rounded-xl">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+          Novo Ticket de Suporte
+        </h3>
+        <input
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white"
+          placeholder="Seu email"
+          value={email}
+          onChange={(e) => {
+            setEmail(e.currentTarget.value);
+          }}
+        />
+        <input
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white"
+          placeholder="Título do seu ticket"
+          value={subject}
+          onChange={(e) => {
+            setSubject(e.currentTarget.value);
+          }}
+        />
+        <textarea
+          class="input rounded-md text-[#8b8b8b] border-none w-full disabled:bg-[#e3e3e3] bg-white h-32"
+          placeholder="Descreva seu ticket"
+          value={content}
+          onChange={(e) => {
+            setContent(e.currentTarget.value);
+          }}
+        />
+
+        <button
+          class="btn btn-secondary text-white"
+          onClick={handleSubmitTicket}
+          disabled={submitting}
+        >
+          {submitting ? "Enviando..." : "Enviar Ticket"}
+        </button>
+        <button
+          onClick={() => displayNewTicketModal.value = false}
+          class="btn btn-ghost uppercase font-medium"
+          disabled={submitting}
+        >
+          Cancelar
+        </button>
+      </div>
+    </Modal>
+  );
+};
+
+const NewTicketModal = () => {
+  const { displayNewTicketModal } = useUI();
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          displayNewTicketModal.value = true;
+        }}
+        class="btn btn-secondary text-white btn-xs"
+      >
+        Abrir ticket de suporte
+      </button>
+      <ModalTicket />
+    </>
+  );
+};
+
+export default NewTicketModal;
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 00067df..aab1941 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -25,6 +25,7 @@ import * as $Header_Searchbar from "./islands/Header/Searchbar.tsx";
 import * as $MyAccount from "./islands/MyAccount.tsx";
 import * as $MyDocs from "./islands/MyDocs.tsx";
 import * as $MyInfo from "./islands/MyInfo.tsx";
+import * as $NewTicketModal from "./islands/NewTicketModal.tsx";
 import * as $Newsletter from "./islands/Newsletter.tsx";
 import * as $OutOfStock from "./islands/OutOfStock.tsx";
 import * as $PrivatePageControl from "./islands/PrivatePageControl.tsx";
@@ -68,6 +69,7 @@ const manifest = {
     "./islands/MyAccount.tsx": $MyAccount,
     "./islands/MyDocs.tsx": $MyDocs,
     "./islands/MyInfo.tsx": $MyInfo,
+    "./islands/NewTicketModal.tsx": $NewTicketModal,
     "./islands/Newsletter.tsx": $Newsletter,
     "./islands/OutOfStock.tsx": $OutOfStock,
     "./islands/PrivatePageControl.tsx": $PrivatePageControl,
diff --git a/islands/NewTicketModal.tsx b/islands/NewTicketModal.tsx
new file mode 100644
index 0000000..8cf586b
--- /dev/null
+++ b/islands/NewTicketModal.tsx
@@ -0,0 +1,9 @@
+import Component from "deco-sites/ecannadeco/components/ui/NewTicketModal.tsx";
+// import type { Props } from "../../components/ui/MyInfo.tsx";
+
+function Island() {
+  return <Component />;
+  // return <Component {...props} />;
+}
+
+export default Island;
diff --git a/manifest.gen.ts b/manifest.gen.ts
index 04fdb19..a55e307 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -7,14 +7,15 @@ import * as $$$$$$$$$1 from "./actions/checkout.ts";
 import * as $$$$$$$$$2 from "./actions/cognitoSignIn.ts";
 import * as $$$$$$$$$3 from "./actions/cognitoSignUp.ts";
 import * as $$$$$$$$$4 from "./actions/confirmCognitoSignup.ts";
-import * as $$$$$$$$$5 from "./actions/getCids.ts";
-import * as $$$$$$$$$6 from "./actions/getDocs.ts";
-import * as $$$$$$$$$7 from "./actions/getPlans.ts";
-import * as $$$$$$$$$8 from "./actions/getProfile.ts";
-import * as $$$$$$$$$9 from "./actions/getUser.ts";
-import * as $$$$$$$$$10 from "./actions/updateProfile.ts";
-import * as $$$$$$$$$11 from "./actions/updateUserData.ts";
-import * as $$$$$$$$$12 from "./actions/uploadFile.ts";
+import * as $$$$$$$$$5 from "./actions/createTicket.ts";
+import * as $$$$$$$$$6 from "./actions/getCids.ts";
+import * as $$$$$$$$$7 from "./actions/getDocs.ts";
+import * as $$$$$$$$$8 from "./actions/getPlans.ts";
+import * as $$$$$$$$$9 from "./actions/getProfile.ts";
+import * as $$$$$$$$$10 from "./actions/getUser.ts";
+import * as $$$$$$$$$11 from "./actions/updateProfile.ts";
+import * as $$$$$$$$$12 from "./actions/updateUserData.ts";
+import * as $$$$$$$$$13 from "./actions/uploadFile.ts";
 import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
 import * as $$$$$$$$$$$1 from "./apps/site.ts";
 import * as $$$2 from "./loaders/availableIcons.ts";
@@ -42,53 +43,54 @@ import * as $$$$$$16 from "./sections/Content/Intro.tsx";
 import * as $$$$$$17 from "./sections/Content/Logos.tsx";
 import * as $$$$$$18 from "./sections/Content/Partners.tsx";
 import * as $$$$$$19 from "./sections/Content/RichText.tsx";
-import * as $$$$$$20 from "./sections/Content/Table.tsx";
-import * as $$$$$$21 from "./sections/Content/Testimonials.tsx";
-import * as $$$$$$22 from "./sections/Content/TextWithImage.tsx";
-import * as $$$$$$23 from "./sections/Footer/Footer.tsx";
-import * as $$$$$$24 from "./sections/Gallery.tsx";
-import * as $$$$$$25 from "./sections/Header/Header.tsx";
-import * as $$$$$$26 from "./sections/Images/BannerGrid.tsx";
-import * as $$$$$$27 from "./sections/Images/Carousel.tsx";
-import * as $$$$$$28 from "./sections/Images/ImageGallery.tsx";
-import * as $$$$$$29 from "./sections/Images/ShoppableBanner.tsx";
-import * as $$$$$$30 from "./sections/Layout/Container.tsx";
-import * as $$$$$$31 from "./sections/Layout/Flex.tsx";
-import * as $$$$$$32 from "./sections/Layout/Grid.tsx";
-import * as $$$$$$33 from "./sections/Layout/GridItem.tsx";
-import * as $$$$$$34 from "./sections/Links/LinkTree.tsx";
-import * as $$$$$$35 from "./sections/Links/Shortcuts.tsx";
-import * as $$$$$$36 from "./sections/Miscellaneous/CampaignTimer.tsx";
-import * as $$$$$$37 from "./sections/Miscellaneous/Checkout.tsx";
-import * as $$$$$$38 from "./sections/Miscellaneous/ChoosePlanSignup.tsx";
-import * as $$$$$$39 from "./sections/Miscellaneous/ConfirmSignup.tsx";
-import * as $$$$$$40 from "./sections/Miscellaneous/CookieConsent.tsx";
-import * as $$$$$$41 from "./sections/Miscellaneous/EcannaCardPage.tsx";
-import * as $$$$$$42 from "./sections/Miscellaneous/MyAccount.tsx";
-import * as $$$$$$43 from "./sections/Miscellaneous/MyDocs.tsx";
-import * as $$$$$$44 from "./sections/Miscellaneous/MyInfo.tsx";
-import * as $$$$$$45 from "./sections/Miscellaneous/PrivatePageControl.tsx";
-import * as $$$$$$46 from "./sections/Miscellaneous/PublicProfile.tsx";
-import * as $$$$$$47 from "./sections/Miscellaneous/SignIn.tsx";
-import * as $$$$$$49 from "./sections/Miscellaneous/Signout.tsx";
-import * as $$$$$$48 from "./sections/Miscellaneous/SignUp.tsx";
-import * as $$$$$$50 from "./sections/Miscellaneous/Slide.tsx";
-import * as $$$$$$51 from "./sections/Miscellaneous/UserAlerts.tsx";
-import * as $$$$$$52 from "./sections/Newsletter/Newsletter.tsx";
-import * as $$$$$$53 from "./sections/Product/ImageGalleryFrontBack.tsx";
-import * as $$$$$$54 from "./sections/Product/ImageGallerySlider.tsx";
-import * as $$$$$$55 from "./sections/Product/NotFound.tsx";
-import * as $$$$$$56 from "./sections/Product/NotFoundChallenge.tsx";
-import * as $$$$$$57 from "./sections/Product/ProductDetails.tsx";
-import * as $$$$$$58 from "./sections/Product/ProductInfo.tsx";
-import * as $$$$$$59 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$60 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$61 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$62 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$63 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$64 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$65 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$66 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$20 from "./sections/Content/Support.tsx";
+import * as $$$$$$21 from "./sections/Content/Table.tsx";
+import * as $$$$$$22 from "./sections/Content/Testimonials.tsx";
+import * as $$$$$$23 from "./sections/Content/TextWithImage.tsx";
+import * as $$$$$$24 from "./sections/Footer/Footer.tsx";
+import * as $$$$$$25 from "./sections/Gallery.tsx";
+import * as $$$$$$26 from "./sections/Header/Header.tsx";
+import * as $$$$$$27 from "./sections/Images/BannerGrid.tsx";
+import * as $$$$$$28 from "./sections/Images/Carousel.tsx";
+import * as $$$$$$29 from "./sections/Images/ImageGallery.tsx";
+import * as $$$$$$30 from "./sections/Images/ShoppableBanner.tsx";
+import * as $$$$$$31 from "./sections/Layout/Container.tsx";
+import * as $$$$$$32 from "./sections/Layout/Flex.tsx";
+import * as $$$$$$33 from "./sections/Layout/Grid.tsx";
+import * as $$$$$$34 from "./sections/Layout/GridItem.tsx";
+import * as $$$$$$35 from "./sections/Links/LinkTree.tsx";
+import * as $$$$$$36 from "./sections/Links/Shortcuts.tsx";
+import * as $$$$$$37 from "./sections/Miscellaneous/CampaignTimer.tsx";
+import * as $$$$$$38 from "./sections/Miscellaneous/Checkout.tsx";
+import * as $$$$$$39 from "./sections/Miscellaneous/ChoosePlanSignup.tsx";
+import * as $$$$$$40 from "./sections/Miscellaneous/ConfirmSignup.tsx";
+import * as $$$$$$41 from "./sections/Miscellaneous/CookieConsent.tsx";
+import * as $$$$$$42 from "./sections/Miscellaneous/EcannaCardPage.tsx";
+import * as $$$$$$43 from "./sections/Miscellaneous/MyAccount.tsx";
+import * as $$$$$$44 from "./sections/Miscellaneous/MyDocs.tsx";
+import * as $$$$$$45 from "./sections/Miscellaneous/MyInfo.tsx";
+import * as $$$$$$46 from "./sections/Miscellaneous/PrivatePageControl.tsx";
+import * as $$$$$$47 from "./sections/Miscellaneous/PublicProfile.tsx";
+import * as $$$$$$48 from "./sections/Miscellaneous/SignIn.tsx";
+import * as $$$$$$50 from "./sections/Miscellaneous/Signout.tsx";
+import * as $$$$$$49 from "./sections/Miscellaneous/SignUp.tsx";
+import * as $$$$$$51 from "./sections/Miscellaneous/Slide.tsx";
+import * as $$$$$$52 from "./sections/Miscellaneous/UserAlerts.tsx";
+import * as $$$$$$53 from "./sections/Newsletter/Newsletter.tsx";
+import * as $$$$$$54 from "./sections/Product/ImageGalleryFrontBack.tsx";
+import * as $$$$$$55 from "./sections/Product/ImageGallerySlider.tsx";
+import * as $$$$$$56 from "./sections/Product/NotFound.tsx";
+import * as $$$$$$57 from "./sections/Product/NotFoundChallenge.tsx";
+import * as $$$$$$58 from "./sections/Product/ProductDetails.tsx";
+import * as $$$$$$59 from "./sections/Product/ProductInfo.tsx";
+import * as $$$$$$60 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$61 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$62 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$63 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$64 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$65 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$66 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$67 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -121,56 +123,57 @@ const manifest = {
     "deco-sites/ecannadeco/sections/Content/Logos.tsx": $$$$$$17,
     "deco-sites/ecannadeco/sections/Content/Partners.tsx": $$$$$$18,
     "deco-sites/ecannadeco/sections/Content/RichText.tsx": $$$$$$19,
-    "deco-sites/ecannadeco/sections/Content/Table.tsx": $$$$$$20,
-    "deco-sites/ecannadeco/sections/Content/Testimonials.tsx": $$$$$$21,
-    "deco-sites/ecannadeco/sections/Content/TextWithImage.tsx": $$$$$$22,
-    "deco-sites/ecannadeco/sections/Footer/Footer.tsx": $$$$$$23,
-    "deco-sites/ecannadeco/sections/Gallery.tsx": $$$$$$24,
-    "deco-sites/ecannadeco/sections/Header/Header.tsx": $$$$$$25,
-    "deco-sites/ecannadeco/sections/Images/BannerGrid.tsx": $$$$$$26,
-    "deco-sites/ecannadeco/sections/Images/Carousel.tsx": $$$$$$27,
-    "deco-sites/ecannadeco/sections/Images/ImageGallery.tsx": $$$$$$28,
-    "deco-sites/ecannadeco/sections/Images/ShoppableBanner.tsx": $$$$$$29,
-    "deco-sites/ecannadeco/sections/Layout/Container.tsx": $$$$$$30,
-    "deco-sites/ecannadeco/sections/Layout/Flex.tsx": $$$$$$31,
-    "deco-sites/ecannadeco/sections/Layout/Grid.tsx": $$$$$$32,
-    "deco-sites/ecannadeco/sections/Layout/GridItem.tsx": $$$$$$33,
-    "deco-sites/ecannadeco/sections/Links/LinkTree.tsx": $$$$$$34,
-    "deco-sites/ecannadeco/sections/Links/Shortcuts.tsx": $$$$$$35,
-    "deco-sites/ecannadeco/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$36,
-    "deco-sites/ecannadeco/sections/Miscellaneous/Checkout.tsx": $$$$$$37,
+    "deco-sites/ecannadeco/sections/Content/Support.tsx": $$$$$$20,
+    "deco-sites/ecannadeco/sections/Content/Table.tsx": $$$$$$21,
+    "deco-sites/ecannadeco/sections/Content/Testimonials.tsx": $$$$$$22,
+    "deco-sites/ecannadeco/sections/Content/TextWithImage.tsx": $$$$$$23,
+    "deco-sites/ecannadeco/sections/Footer/Footer.tsx": $$$$$$24,
+    "deco-sites/ecannadeco/sections/Gallery.tsx": $$$$$$25,
+    "deco-sites/ecannadeco/sections/Header/Header.tsx": $$$$$$26,
+    "deco-sites/ecannadeco/sections/Images/BannerGrid.tsx": $$$$$$27,
+    "deco-sites/ecannadeco/sections/Images/Carousel.tsx": $$$$$$28,
+    "deco-sites/ecannadeco/sections/Images/ImageGallery.tsx": $$$$$$29,
+    "deco-sites/ecannadeco/sections/Images/ShoppableBanner.tsx": $$$$$$30,
+    "deco-sites/ecannadeco/sections/Layout/Container.tsx": $$$$$$31,
+    "deco-sites/ecannadeco/sections/Layout/Flex.tsx": $$$$$$32,
+    "deco-sites/ecannadeco/sections/Layout/Grid.tsx": $$$$$$33,
+    "deco-sites/ecannadeco/sections/Layout/GridItem.tsx": $$$$$$34,
+    "deco-sites/ecannadeco/sections/Links/LinkTree.tsx": $$$$$$35,
+    "deco-sites/ecannadeco/sections/Links/Shortcuts.tsx": $$$$$$36,
+    "deco-sites/ecannadeco/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$37,
+    "deco-sites/ecannadeco/sections/Miscellaneous/Checkout.tsx": $$$$$$38,
     "deco-sites/ecannadeco/sections/Miscellaneous/ChoosePlanSignup.tsx":
-      $$$$$$38,
-    "deco-sites/ecannadeco/sections/Miscellaneous/ConfirmSignup.tsx": $$$$$$39,
-    "deco-sites/ecannadeco/sections/Miscellaneous/CookieConsent.tsx": $$$$$$40,
-    "deco-sites/ecannadeco/sections/Miscellaneous/EcannaCardPage.tsx": $$$$$$41,
-    "deco-sites/ecannadeco/sections/Miscellaneous/MyAccount.tsx": $$$$$$42,
-    "deco-sites/ecannadeco/sections/Miscellaneous/MyDocs.tsx": $$$$$$43,
-    "deco-sites/ecannadeco/sections/Miscellaneous/MyInfo.tsx": $$$$$$44,
+      $$$$$$39,
+    "deco-sites/ecannadeco/sections/Miscellaneous/ConfirmSignup.tsx": $$$$$$40,
+    "deco-sites/ecannadeco/sections/Miscellaneous/CookieConsent.tsx": $$$$$$41,
+    "deco-sites/ecannadeco/sections/Miscellaneous/EcannaCardPage.tsx": $$$$$$42,
+    "deco-sites/ecannadeco/sections/Miscellaneous/MyAccount.tsx": $$$$$$43,
+    "deco-sites/ecannadeco/sections/Miscellaneous/MyDocs.tsx": $$$$$$44,
+    "deco-sites/ecannadeco/sections/Miscellaneous/MyInfo.tsx": $$$$$$45,
     "deco-sites/ecannadeco/sections/Miscellaneous/PrivatePageControl.tsx":
-      $$$$$$45,
-    "deco-sites/ecannadeco/sections/Miscellaneous/PublicProfile.tsx": $$$$$$46,
-    "deco-sites/ecannadeco/sections/Miscellaneous/SignIn.tsx": $$$$$$47,
-    "deco-sites/ecannadeco/sections/Miscellaneous/Signout.tsx": $$$$$$49,
-    "deco-sites/ecannadeco/sections/Miscellaneous/SignUp.tsx": $$$$$$48,
-    "deco-sites/ecannadeco/sections/Miscellaneous/Slide.tsx": $$$$$$50,
-    "deco-sites/ecannadeco/sections/Miscellaneous/UserAlerts.tsx": $$$$$$51,
-    "deco-sites/ecannadeco/sections/Newsletter/Newsletter.tsx": $$$$$$52,
+      $$$$$$46,
+    "deco-sites/ecannadeco/sections/Miscellaneous/PublicProfile.tsx": $$$$$$47,
+    "deco-sites/ecannadeco/sections/Miscellaneous/SignIn.tsx": $$$$$$48,
+    "deco-sites/ecannadeco/sections/Miscellaneous/Signout.tsx": $$$$$$50,
+    "deco-sites/ecannadeco/sections/Miscellaneous/SignUp.tsx": $$$$$$49,
+    "deco-sites/ecannadeco/sections/Miscellaneous/Slide.tsx": $$$$$$51,
+    "deco-sites/ecannadeco/sections/Miscellaneous/UserAlerts.tsx": $$$$$$52,
+    "deco-sites/ecannadeco/sections/Newsletter/Newsletter.tsx": $$$$$$53,
     "deco-sites/ecannadeco/sections/Product/ImageGalleryFrontBack.tsx":
-      $$$$$$53,
-    "deco-sites/ecannadeco/sections/Product/ImageGallerySlider.tsx": $$$$$$54,
-    "deco-sites/ecannadeco/sections/Product/NotFound.tsx": $$$$$$55,
-    "deco-sites/ecannadeco/sections/Product/NotFoundChallenge.tsx": $$$$$$56,
-    "deco-sites/ecannadeco/sections/Product/ProductDetails.tsx": $$$$$$57,
-    "deco-sites/ecannadeco/sections/Product/ProductInfo.tsx": $$$$$$58,
-    "deco-sites/ecannadeco/sections/Product/ProductShelf.tsx": $$$$$$59,
-    "deco-sites/ecannadeco/sections/Product/ProductShelfTabbed.tsx": $$$$$$60,
-    "deco-sites/ecannadeco/sections/Product/SearchResult.tsx": $$$$$$61,
-    "deco-sites/ecannadeco/sections/Product/ShelfWithImage.tsx": $$$$$$62,
-    "deco-sites/ecannadeco/sections/Product/Wishlist.tsx": $$$$$$63,
-    "deco-sites/ecannadeco/sections/Social/InstagramPosts.tsx": $$$$$$64,
-    "deco-sites/ecannadeco/sections/Social/WhatsApp.tsx": $$$$$$65,
-    "deco-sites/ecannadeco/sections/Theme/Theme.tsx": $$$$$$66,
+      $$$$$$54,
+    "deco-sites/ecannadeco/sections/Product/ImageGallerySlider.tsx": $$$$$$55,
+    "deco-sites/ecannadeco/sections/Product/NotFound.tsx": $$$$$$56,
+    "deco-sites/ecannadeco/sections/Product/NotFoundChallenge.tsx": $$$$$$57,
+    "deco-sites/ecannadeco/sections/Product/ProductDetails.tsx": $$$$$$58,
+    "deco-sites/ecannadeco/sections/Product/ProductInfo.tsx": $$$$$$59,
+    "deco-sites/ecannadeco/sections/Product/ProductShelf.tsx": $$$$$$60,
+    "deco-sites/ecannadeco/sections/Product/ProductShelfTabbed.tsx": $$$$$$61,
+    "deco-sites/ecannadeco/sections/Product/SearchResult.tsx": $$$$$$62,
+    "deco-sites/ecannadeco/sections/Product/ShelfWithImage.tsx": $$$$$$63,
+    "deco-sites/ecannadeco/sections/Product/Wishlist.tsx": $$$$$$64,
+    "deco-sites/ecannadeco/sections/Social/InstagramPosts.tsx": $$$$$$65,
+    "deco-sites/ecannadeco/sections/Social/WhatsApp.tsx": $$$$$$66,
+    "deco-sites/ecannadeco/sections/Theme/Theme.tsx": $$$$$$67,
   },
   "actions": {
     "deco-sites/ecannadeco/actions/changePassword.ts": $$$$$$$$$0,
@@ -178,14 +181,15 @@ const manifest = {
     "deco-sites/ecannadeco/actions/cognitoSignIn.ts": $$$$$$$$$2,
     "deco-sites/ecannadeco/actions/cognitoSignUp.ts": $$$$$$$$$3,
     "deco-sites/ecannadeco/actions/confirmCognitoSignup.ts": $$$$$$$$$4,
-    "deco-sites/ecannadeco/actions/getCids.ts": $$$$$$$$$5,
-    "deco-sites/ecannadeco/actions/getDocs.ts": $$$$$$$$$6,
-    "deco-sites/ecannadeco/actions/getPlans.ts": $$$$$$$$$7,
-    "deco-sites/ecannadeco/actions/getProfile.ts": $$$$$$$$$8,
-    "deco-sites/ecannadeco/actions/getUser.ts": $$$$$$$$$9,
-    "deco-sites/ecannadeco/actions/updateProfile.ts": $$$$$$$$$10,
-    "deco-sites/ecannadeco/actions/updateUserData.ts": $$$$$$$$$11,
-    "deco-sites/ecannadeco/actions/uploadFile.ts": $$$$$$$$$12,
+    "deco-sites/ecannadeco/actions/createTicket.ts": $$$$$$$$$5,
+    "deco-sites/ecannadeco/actions/getCids.ts": $$$$$$$$$6,
+    "deco-sites/ecannadeco/actions/getDocs.ts": $$$$$$$$$7,
+    "deco-sites/ecannadeco/actions/getPlans.ts": $$$$$$$$$8,
+    "deco-sites/ecannadeco/actions/getProfile.ts": $$$$$$$$$9,
+    "deco-sites/ecannadeco/actions/getUser.ts": $$$$$$$$$10,
+    "deco-sites/ecannadeco/actions/updateProfile.ts": $$$$$$$$$11,
+    "deco-sites/ecannadeco/actions/updateUserData.ts": $$$$$$$$$12,
+    "deco-sites/ecannadeco/actions/uploadFile.ts": $$$$$$$$$13,
   },
   "apps": {
     "deco-sites/ecannadeco/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sdk/useUI.ts b/sdk/useUI.ts
index ac0d82b..aca8366 100644
--- a/sdk/useUI.ts
+++ b/sdk/useUI.ts
@@ -10,6 +10,7 @@ const displayMenu = signal(false);
 const displaySearchPopup = signal(false);
 const displaySearchDrawer = signal(false);
 const displayNewDocModal = signal(false);
+const displayNewTicketModal = signal(false);
 const displayPlanLimit = signal(false);
 const updatedData = signal(true);
 const uploadedFile = signal(true);
@@ -23,6 +24,7 @@ const state = {
   displayPlanLimit,
   updatedData,
   uploadedFile,
+  displayNewTicketModal,
 };
 
 // Keyboard event listeners
diff --git a/sections/Content/Support.tsx b/sections/Content/Support.tsx
new file mode 100644
index 0000000..49e9553
--- /dev/null
+++ b/sections/Content/Support.tsx
@@ -0,0 +1,76 @@
+import NewTicketModal from "../../islands/NewTicketModal.tsx";
+
+export interface Question {
+  question: string;
+  /** @format html */
+  answer: string;
+}
+
+export interface Props {
+  title?: string;
+  questions?: Question[];
+}
+
+const DEFAULT_PROPS = {
+  title: "",
+  description: "",
+  questions: [
+    {
+      question: "Como faço para acompanhar o meu pedido?",
+      answer:
+        "Acompanhar o seu pedido é fácil! Assim que o seu pedido for enviado, enviaremos um e-mail de confirmação com um número de rastreamento. Basta clicar no número de rastreamento ou visitar o nosso site e inserir o número de rastreamento na seção designada para obter atualizações em tempo real sobre a localização e o status de entrega do seu pedido.",
+    },
+    {
+      question: "Qual é a política de devolução?",
+      answer:
+        "Oferecemos uma política de devolução sem complicações. Se você não estiver completamente satisfeito(a) com a sua compra, pode devolver o item em até 30 dias após a entrega para obter um reembolso total ou troca. Certifique-se de que o item esteja sem uso, na embalagem original e acompanhado do recibo. Entre em contato com a nossa equipe de atendimento ao cliente e eles o(a) orientarão pelo processo de devolução.",
+    },
+  ],
+  contact: {
+    title: "",
+    description: "",
+    button: {
+      text: "",
+      link: "",
+    },
+  },
+};
+
+function Question({ question, answer }: Question) {
+  return (
+    <details class="collapse collapse-arrow border-t bg-[#EDEDED]">
+      <summary class="collapse-title text-lg font-medium">
+        {question}
+      </summary>
+      <div class="collapse-content">
+        <div
+          dangerouslySetInnerHTML={{ __html: answer }}
+        />
+      </div>
+    </details>
+  );
+}
+
+export default function FAQ(props: Props) {
+  const {
+    questions = [],
+    title,
+  } = { ...DEFAULT_PROPS, ...props };
+
+  return (
+    <div class="w-full flex justify-center">
+      <div class="w-[90%] max-w-[800px] px-4 py-8 flex flex-col gap-4 items-center justify-center">
+        <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center mb-10">
+          {title}
+        </h3>
+        <div class="join join-vertical w-full flex flex-col gap-2">
+          {questions.map((question) => <Question {...question} />)}
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs">Não encontrou resposta para sua pergunta?</span>
+          <NewTicketModal />
+        </div>
+      </div>
+    </div>
+  );
+}

From 695b3294b7483550fce639707c97de84b13f78d2 Mon Sep 17 00:00:00 2001
From: Guilherme Baufaker <baufaker@gmail.com>
Date: Fri, 5 Apr 2024 17:52:48 -0300
Subject: [PATCH 2/2] implemented delete document

---
 actions/deleteDocument.ts |  31 +++++++++
 components/ui/Modal.tsx   |   4 +-
 components/ui/MyDocs.tsx  | 138 +++++++++++++++++++++++++++++---------
 manifest.gen.ts           |  34 +++++-----
 sdk/useUI.ts              |   2 +
 5 files changed, 162 insertions(+), 47 deletions(-)
 create mode 100644 actions/deleteDocument.ts

diff --git a/actions/deleteDocument.ts b/actions/deleteDocument.ts
new file mode 100644
index 0000000..d650ab6
--- /dev/null
+++ b/actions/deleteDocument.ts
@@ -0,0 +1,31 @@
+export interface Props {
+  docId: string;
+  token: string;
+}
+
+const signUpCognito = async (
+  props: Props,
+  _req: Request,
+): Promise<unknown | null> => {
+  console.log({ docId: props.docId });
+  try {
+    const response = await fetch(
+      `http://localhost:3000/documents/${props.docId}`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: props.token,
+        },
+      },
+    );
+
+    const res = await response.json();
+    return res;
+  } catch (e) {
+    // console.log({ e });
+    return e;
+  }
+};
+
+export default signUpCognito;
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index 1b026ee..ea240fe 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -48,7 +48,9 @@ function Modal(props: Props) {
       />
       <div class="modal">
         {!lazy.value && children}
-        <label class="modal-backdrop" for={id}>Close</label>
+        <label class="modal-backdrop fixed w-screen h-screen" for={id}>
+          Close
+        </label>
       </div>
     </>
   );
diff --git a/components/ui/MyDocs.tsx b/components/ui/MyDocs.tsx
index f8f389c..85557a0 100644
--- a/components/ui/MyDocs.tsx
+++ b/components/ui/MyDocs.tsx
@@ -1,12 +1,14 @@
 import Icon from "../../components/ui/Icon.tsx";
 import Modal from "../../components/ui/Modal.tsx";
 import PageWrap from "../../components/ui/PageWrap.tsx";
+import Loading from "../../components/daisy/Loading.tsx";
 import { useEffect, useState } from "preact/hooks";
 import { useUI } from "../../sdk/useUI.ts";
 import { h } from "preact";
 import { invoke } from "../../runtime.ts";
 
 interface DocListType {
+  _id: string;
   title: string;
   file_url: string;
   created_at: Date;
@@ -14,32 +16,111 @@ interface DocListType {
   status: string;
 }
 
-const DocList = ({ docs }: { docs: DocListType[] }) => {
-  const { displayNewDocModal } = useUI();
+const DocList = (
+  { docs, onFinishDelete }: { docs: DocListType[]; onFinishDelete: () => void },
+) => {
+  const { displayNewDocModal, displayConfirmDeleteDoc } = useUI();
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [deleteId, setDeleteId] = useState("");
+
+  const handleDelete = async ({ id }: { id: string }) => {
+    setIsDeleting(true);
+    try {
+      const r = await invoke["deco-sites/ecannadeco"].actions.deleteDocument({
+        docId: id,
+        token: localStorage.getItem("AccessToken") || "",
+      });
+
+      const resp = r as { message?: string };
+
+      if (resp.message) {
+        alert(`Algo deu errado: ${resp.message}`);
+      } else {
+        onFinishDelete();
+      }
+
+      setIsDeleting(false);
+    } catch (e) {
+      console.log({ e });
+      alert("Não foi possível apagar o documento. Tente mais tarde.");
+      setIsDeleting(false);
+    }
+  };
+
+  const ModalConfirmDelete = ({ id }: { id: string }) => {
+    return (
+      <Modal
+        open={displayConfirmDeleteDoc.value}
+        onClose={() => displayConfirmDeleteDoc.value = false}
+      >
+        <div class="flex flex-col p-16 gap-3 bg-[#EDEDED] rounded-xl">
+          <h3 class="text-2xl text-[#8b8b8b] font-semibold text-center">
+            Tem certeza que deseja deletar este documento?
+          </h3>
+          <div class="flex flex-col items-center gap-2">
+            <button
+              class="btn bg-red-500 text-white"
+              onClick={() => {
+                handleDelete({ id });
+                displayConfirmDeleteDoc.value = false;
+              }}
+            >
+              Deletar
+            </button>
+            <button
+              class="btn btn-ghost"
+              onClick={() => {
+                setDeleteId("");
+                displayConfirmDeleteDoc.value = false;
+              }}
+            >
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </Modal>
+    );
+  };
+
   if (docs.length) {
     return (
-      <ul>
-        {docs.map((d) => {
-          return (
-            <li class="flex items-center gap-4">
-              <a class="w-full" href={d.file_url}>
-                <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
-                  <div class="flex gap-2">
-                    <span class="text-[#8F8D8D]">
-                      <Icon id="Anexo" size={24} />
+      <>
+        <ul>
+          {docs.map((d) => {
+            return (
+              <li class="flex items-center gap-4">
+                <a class="w-full" href={d.file_url}>
+                  <div class="flex justify-between rounded-md bg-[#C8C8C8] w-full px-5 h-10 items-center">
+                    <div class="flex gap-2">
+                      <span class="text-[#8F8D8D]">
+                        <Icon id="Anexo" size={24} />
+                      </span>
+                      <span class="text-[#393939] font-semibold">
+                        {d.title}
+                      </span>
+                    </div>
+                    <span class="text-[#8F8D8D] flex justify-end w-6">
+                      <Icon id="Download" height={19} />
                     </span>
-                    <span class="text-[#393939] font-semibold">{d.title}</span>
                   </div>
-                  <span class="text-[#8F8D8D] flex justify-end w-6">
-                    <Icon id="Download" height={19} />
-                  </span>
-                </div>
-              </a>
-              <Icon id="Trash" size={24} />
-            </li>
-          );
-        })}
-      </ul>
+                </a>
+                <ModalConfirmDelete id={d._id} />
+                {isDeleting
+                  ? <Loading style="loading-spinner" size="loading-md" />
+                  : (
+                    <Icon
+                      onClick={() => {
+                        displayConfirmDeleteDoc.value = true;
+                      }}
+                      id="Trash"
+                      size={24}
+                    />
+                  )}
+              </li>
+            );
+          })}
+        </ul>
+      </>
     );
   } else {
     return (
@@ -106,8 +187,6 @@ const NewDocModal = ({ onFinishCreate }: { onFinishCreate: () => void }) => {
     formData.append("title", docTitle);
     formData.append("category", docCategory);
 
-    console.log({ file, docTitle, docCategory });
-
     try {
       const response = await fetch("http://localhost:3000/documents", {
         method: "POST",
@@ -216,7 +295,6 @@ function MyDocs() {
       invoke["deco-sites/ecannadeco"].actions.getDocs({
         token: accessToken,
       }).then((r) => {
-        console.log({ documents: r });
         setDocs((r as { docs: DocListType[] }).docs);
         setIsLoading(false);
       });
@@ -261,29 +339,29 @@ function MyDocs() {
       </div>
       <div class="flex flex-col gap-3">
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
-          Dados Pessoais
+          Documentos de Anvisa
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={anvisaDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={anvisaDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos Médicos
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={medicalDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={medicalDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos Judiciais
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={habeasDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={habeasDocs} />}
         <h2 class="text-[#8b8b8b] font-semibold mb-1 mt-10 w-full">
           Documentos de Identificação
         </h2>
         {isLoading
           ? <span class="loading loading-spinner text-black"></span>
-          : <DocList docs={idDocs} />}
+          : <DocList onFinishDelete={getDocuments} docs={idDocs} />}
       </div>
     </PageWrap>
   );
diff --git a/manifest.gen.ts b/manifest.gen.ts
index a55e307..aa84c74 100644
--- a/manifest.gen.ts
+++ b/manifest.gen.ts
@@ -8,14 +8,15 @@ import * as $$$$$$$$$2 from "./actions/cognitoSignIn.ts";
 import * as $$$$$$$$$3 from "./actions/cognitoSignUp.ts";
 import * as $$$$$$$$$4 from "./actions/confirmCognitoSignup.ts";
 import * as $$$$$$$$$5 from "./actions/createTicket.ts";
-import * as $$$$$$$$$6 from "./actions/getCids.ts";
-import * as $$$$$$$$$7 from "./actions/getDocs.ts";
-import * as $$$$$$$$$8 from "./actions/getPlans.ts";
-import * as $$$$$$$$$9 from "./actions/getProfile.ts";
-import * as $$$$$$$$$10 from "./actions/getUser.ts";
-import * as $$$$$$$$$11 from "./actions/updateProfile.ts";
-import * as $$$$$$$$$12 from "./actions/updateUserData.ts";
-import * as $$$$$$$$$13 from "./actions/uploadFile.ts";
+import * as $$$$$$$$$6 from "./actions/deleteDocument.ts";
+import * as $$$$$$$$$7 from "./actions/getCids.ts";
+import * as $$$$$$$$$8 from "./actions/getDocs.ts";
+import * as $$$$$$$$$9 from "./actions/getPlans.ts";
+import * as $$$$$$$$$10 from "./actions/getProfile.ts";
+import * as $$$$$$$$$11 from "./actions/getUser.ts";
+import * as $$$$$$$$$12 from "./actions/updateProfile.ts";
+import * as $$$$$$$$$13 from "./actions/updateUserData.ts";
+import * as $$$$$$$$$14 from "./actions/uploadFile.ts";
 import * as $$$$$$$$$$$0 from "./apps/decohub.ts";
 import * as $$$$$$$$$$$1 from "./apps/site.ts";
 import * as $$$2 from "./loaders/availableIcons.ts";
@@ -182,14 +183,15 @@ const manifest = {
     "deco-sites/ecannadeco/actions/cognitoSignUp.ts": $$$$$$$$$3,
     "deco-sites/ecannadeco/actions/confirmCognitoSignup.ts": $$$$$$$$$4,
     "deco-sites/ecannadeco/actions/createTicket.ts": $$$$$$$$$5,
-    "deco-sites/ecannadeco/actions/getCids.ts": $$$$$$$$$6,
-    "deco-sites/ecannadeco/actions/getDocs.ts": $$$$$$$$$7,
-    "deco-sites/ecannadeco/actions/getPlans.ts": $$$$$$$$$8,
-    "deco-sites/ecannadeco/actions/getProfile.ts": $$$$$$$$$9,
-    "deco-sites/ecannadeco/actions/getUser.ts": $$$$$$$$$10,
-    "deco-sites/ecannadeco/actions/updateProfile.ts": $$$$$$$$$11,
-    "deco-sites/ecannadeco/actions/updateUserData.ts": $$$$$$$$$12,
-    "deco-sites/ecannadeco/actions/uploadFile.ts": $$$$$$$$$13,
+    "deco-sites/ecannadeco/actions/deleteDocument.ts": $$$$$$$$$6,
+    "deco-sites/ecannadeco/actions/getCids.ts": $$$$$$$$$7,
+    "deco-sites/ecannadeco/actions/getDocs.ts": $$$$$$$$$8,
+    "deco-sites/ecannadeco/actions/getPlans.ts": $$$$$$$$$9,
+    "deco-sites/ecannadeco/actions/getProfile.ts": $$$$$$$$$10,
+    "deco-sites/ecannadeco/actions/getUser.ts": $$$$$$$$$11,
+    "deco-sites/ecannadeco/actions/updateProfile.ts": $$$$$$$$$12,
+    "deco-sites/ecannadeco/actions/updateUserData.ts": $$$$$$$$$13,
+    "deco-sites/ecannadeco/actions/uploadFile.ts": $$$$$$$$$14,
   },
   "apps": {
     "deco-sites/ecannadeco/apps/decohub.ts": $$$$$$$$$$$0,
diff --git a/sdk/useUI.ts b/sdk/useUI.ts
index aca8366..cfe5fd6 100644
--- a/sdk/useUI.ts
+++ b/sdk/useUI.ts
@@ -11,6 +11,7 @@ const displaySearchPopup = signal(false);
 const displaySearchDrawer = signal(false);
 const displayNewDocModal = signal(false);
 const displayNewTicketModal = signal(false);
+const displayConfirmDeleteDoc = signal(false);
 const displayPlanLimit = signal(false);
 const updatedData = signal(true);
 const uploadedFile = signal(true);
@@ -25,6 +26,7 @@ const state = {
   updatedData,
   uploadedFile,
   displayNewTicketModal,
+  displayConfirmDeleteDoc,
 };
 
 // Keyboard event listeners