Merge pull request #13 from deco-sites/feature/33009/lgpd

feature/33009/lgpd

.deco/blocks/site.json

@@ -64,6 +64,11 @@
         ]
       },
       "freeShippingBarSettings": {}
+    },
+    {
+      "__resolveType": "site/sections/PopupLGPD/PopupLGPD.tsx",
+      "text": "<p>Se você clicar no botão aceito, consideramos que você aceita o uso de nossos cookies. Verifique nossa <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"/politicas-de-privacidade\">Política de Privacidade.</a></p>",
+      "label": "Aceitar"
     }
   ],
   "routes": [
@@ -108,4 +113,4 @@
   "flavor": {
     "framework": "htmx"
   }
-}
+}

components/InteractiveBanner/InteractiveBanner.tsx

@@ -1,6 +1,6 @@
 import { ImageWidget } from "apps/admin/widgets.ts";
 import { Product } from "apps/commerce/types.ts";
-import { LoadingFallbackProps } from "@deco/deco";
+import Section from "site/components/ui/Section.tsx";
 
 interface InteractiveBannerProduct {
   previewImage?: {
@@ -217,9 +217,4 @@ export default function InteractiveBanner({
   );
 }
 
-export const LoadingFallback = (
-  props: LoadingFallbackProps<InteractiveBannerProps>,
-) => (
-  // deno-lint-ignore no-explicit-any
-  <InteractiveBanner {...(props as any)} loading="lazy" />
-);
+export const LoadingFallback = () => <Section.Placeholder height="635px" />;

fresh.gen.ts

@@ -8,6 +8,7 @@ import * as $MenuInstitutionalMobile from "./islands/MenuInstitutionalMobile.tsx
 import * as $MinicartFooter from "./islands/MinicartFooter.tsx";
 import * as $MultiRangeSlider from "./islands/MultiRangeSlider.tsx";
 import * as $Notify from "./islands/Notify.tsx";
+import * as $PopupLGPD from "./islands/PopupLGPD.tsx";
 import * as $ProductBuyTogether from "./islands/ProductBuyTogether.tsx";
 import * as $ProductTextInfoDiscloujure from "./islands/ProductTextInfoDiscloujure.tsx";
 import * as $ScrollButton from "./islands/ScrollButton.tsx";
@@ -27,6 +28,7 @@ const manifest = {
     "./islands/MinicartFooter.tsx": $MinicartFooter,
     "./islands/MultiRangeSlider.tsx": $MultiRangeSlider,
     "./islands/Notify.tsx": $Notify,
+    "./islands/PopupLGPD.tsx": $PopupLGPD,
     "./islands/ProductBuyTogether.tsx": $ProductBuyTogether,
     "./islands/ProductTextInfoDiscloujure.tsx": $ProductTextInfoDiscloujure,
     "./islands/ScrollButton.tsx": $ScrollButton,

islands/PopupLGPD.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from "preact/hooks";
+import { RichText } from "apps/admin/widgets.ts";
+import { useSignal } from "@preact/signals";
+import Button from "site/components/ui/Button.tsx";
+import { sanitizeHTMLCode } from "site/sdk/htmlSanitizer.ts";
+
+interface Props {
+  /**@title Texto do popup */
+  text: RichText;
+  /**@title Rótulo do botão de aceite */
+  label: string;
+}
+
+const LOCAL_STORAGE_KEY = "accepted_terms";
+
+export default function PopupLGPD({ text, label }: Props) {
+  const isAcceptedTerms = useSignal(true);
+
+  const approveAcceptance = () => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, "true");
+    isAcceptedTerms.value = true;
+  };
+
+  const loadAcceptance = () => {
+    isAcceptedTerms.value = localStorage.getItem(LOCAL_STORAGE_KEY) === "true";
+  };
+
+  useEffect(() => {
+    loadAcceptance();
+  }, []);
+
+  if (isAcceptedTerms.value) return null;
+
+  return (
+    <div class="fixed z-[9999] w-full">
+      <div class="fixed bg-[#000] opacity-40 top-0 w-full mobile:w-[100%] h-[100vh] mobile:h-[100%]" />
+      <div class="fixed bottom-5 mobile:bottom-10 left-[50%] -translate-x-1/2 mobile:flex-col flex items-center justify-between bg-[#F6F6F6] rounded-[8px] p-[20px] w-full max-w-[1117px] mobile:max-w-[335px] h-[74px] mobile:h-[153px]">
+        <p
+          class="text-[14px] mobile:text-center text-[#808080] [&>a]:text-primary [&>a]:font-medium [&>a]:underline"
+          dangerouslySetInnerHTML={{
+            __html: sanitizeHTMLCode(text, {
+              allowedTags: ["a", "strong"],
+              removeWrapperTag: true,
+            }),
+          }}
+        />
+        <Button
+          class="max-w-[220px] mobile:max-w-[295px] w-full h-[44px]"
+          onClick={approveAcceptance}
+        >
+          {label}
+        </Button>
+      </div>
+    </div>
+  );
+}

manifest.gen.ts

@@ -66,20 +66,21 @@ import * as $$$$$$34 from "./sections/NossasLojas/NossasLojas.tsx";
 import * as $$$$$$35 from "./sections/NossasLojas/query.ts";
 import * as $$$$$$36 from "./sections/NossasLojas/types.ts";
 import * as $$$$$$37 from "./sections/Policy/Policy.tsx";
-import * as $$$$$$38 from "./sections/Product/ProductBuyTogether.tsx";
-import * as $$$$$$39 from "./sections/Product/ProductDetails.tsx";
-import * as $$$$$$40 from "./sections/Product/ProductReviews.tsx";
-import * as $$$$$$41 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$42 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$43 from "./sections/Product/QuickView.tsx";
-import * as $$$$$$44 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$45 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$46 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$47 from "./sections/Session.tsx";
-import * as $$$$$$48 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$49 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$50 from "./sections/TabLayout/TabLayout.tsx";
-import * as $$$$$$51 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$38 from "./sections/PopupLGPD/PopupLGPD.tsx";
+import * as $$$$$$39 from "./sections/Product/ProductBuyTogether.tsx";
+import * as $$$$$$40 from "./sections/Product/ProductDetails.tsx";
+import * as $$$$$$41 from "./sections/Product/ProductReviews.tsx";
+import * as $$$$$$42 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$43 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$44 from "./sections/Product/QuickView.tsx";
+import * as $$$$$$45 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$46 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$47 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$48 from "./sections/Session.tsx";
+import * as $$$$$$49 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$50 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$51 from "./sections/TabLayout/TabLayout.tsx";
+import * as $$$$$$52 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -143,20 +144,21 @@ const manifest = {
     "site/sections/NossasLojas/query.ts": $$$$$$35,
     "site/sections/NossasLojas/types.ts": $$$$$$36,
     "site/sections/Policy/Policy.tsx": $$$$$$37,
-    "site/sections/Product/ProductBuyTogether.tsx": $$$$$$38,
-    "site/sections/Product/ProductDetails.tsx": $$$$$$39,
-    "site/sections/Product/ProductReviews.tsx": $$$$$$40,
-    "site/sections/Product/ProductShelf.tsx": $$$$$$41,
-    "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$42,
-    "site/sections/Product/QuickView.tsx": $$$$$$43,
-    "site/sections/Product/SearchResult.tsx": $$$$$$44,
-    "site/sections/Product/ShelfWithImage.tsx": $$$$$$45,
-    "site/sections/Product/Wishlist.tsx": $$$$$$46,
-    "site/sections/Session.tsx": $$$$$$47,
-    "site/sections/Social/InstagramPosts.tsx": $$$$$$48,
-    "site/sections/Social/WhatsApp.tsx": $$$$$$49,
-    "site/sections/TabLayout/TabLayout.tsx": $$$$$$50,
-    "site/sections/Theme/Theme.tsx": $$$$$$51,
+    "site/sections/PopupLGPD/PopupLGPD.tsx": $$$$$$38,
+    "site/sections/Product/ProductBuyTogether.tsx": $$$$$$39,
+    "site/sections/Product/ProductDetails.tsx": $$$$$$40,
+    "site/sections/Product/ProductReviews.tsx": $$$$$$41,
+    "site/sections/Product/ProductShelf.tsx": $$$$$$42,
+    "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$43,
+    "site/sections/Product/QuickView.tsx": $$$$$$44,
+    "site/sections/Product/SearchResult.tsx": $$$$$$45,
+    "site/sections/Product/ShelfWithImage.tsx": $$$$$$46,
+    "site/sections/Product/Wishlist.tsx": $$$$$$47,
+    "site/sections/Session.tsx": $$$$$$48,
+    "site/sections/Social/InstagramPosts.tsx": $$$$$$49,
+    "site/sections/Social/WhatsApp.tsx": $$$$$$50,
+    "site/sections/TabLayout/TabLayout.tsx": $$$$$$51,
+    "site/sections/Theme/Theme.tsx": $$$$$$52,
   },
   "actions": {
     "site/actions/minicart/submit.ts": $$$$$$$$$0,

sections/PopupLGPD/PopupLGPD.tsx

@@ -0,0 +1 @@
+export { default } from "site/islands/PopupLGPD.tsx";