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\"><strong><u><span style=\"color: #ff8300\">Política de Privacidade</span></u></strong></a><strong><u><span style=\"color: #ff8300\">.</span></u></strong></p>",
+      "label": "Aceitar"
     }
   ],
   "routes": [
@@ -100,6 +105,9 @@
     "replaces": [],
     "includeScriptsToHead": {
       "includes": []
+    },
+    "includeScriptsToBody": {
+      "includes": []
     }
   },
   "flavor": {

components/InteractiveBanner/InteractiveBanner.tsx

@@ -1,3 +1,4 @@
+// deno-lint-ignore-file
 import { ImageWidget } from "apps/admin/widgets.ts";
 import { Product } from "apps/commerce/types.ts";
 import { LoadingFallbackProps } from "@deco/deco";

fresh.gen.ts

@@ -3,6 +3,7 @@
 // This file is automatically updated during development when running `dev.ts`.
 
 import * as $_app from "./routes/_app.tsx";
+import * as $LgpdButton from "./islands/LgpdButton.tsx";
 import * as $Map from "./islands/Map.tsx";
 import * as $MenuInstitutionalMobile from "./islands/MenuInstitutionalMobile.tsx";
 import * as $MinicartFooter from "./islands/MinicartFooter.tsx";
@@ -18,6 +19,7 @@ const manifest = {
     "./routes/_app.tsx": $_app,
   },
   islands: {
+    "./islands/LgpdButton.tsx": $LgpdButton,
     "./islands/Map.tsx": $Map,
     "./islands/MenuInstitutionalMobile.tsx": $MenuInstitutionalMobile,
     "./islands/MinicartFooter.tsx": $MinicartFooter,

islands/LgpdButton.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "preact/hooks";
+import { RichText } from "apps/admin/widgets.ts";
+
+interface Props {
+    text: RichText;
+    label: string;
+}
+
+export default function LgpdButton({ text, label }: Props) {
+    const [isAccepted, setIsAccepted] = useState(true)
+
+    const handleClick = () => {
+        localStorage.setItem('aceito', JSON.stringify(isAccepted))
+        setIsAccepted(false)
+    }
+
+    const verify = localStorage.getItem('aceito')
+
+    useEffect(() => {
+        setIsAccepted(false)
+        verify === 'true' ? setIsAccepted(false) : setIsAccepted(true)
+    }, [])
+
+    if(isAccepted === false) return null
+
+    return (
+        <>
+            {isAccepted && (
+                <>
+                    <div class="fixed bg-[#000] opacity-40 top-0 w-full mobile:w-[100%] h-[100vh] mobile:h-[100%]"></div>
+                    <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]"
+                            dangerouslySetInnerHTML={{ __html: text ? text : '' }} />
+                        <button
+                            class="max-w-[220px] mobile:max-w-[295px] w-full h-[44px] bg-[#ff8300] pointer text-[#fff] rounded-[8px] font-bold hover:bg-[#F7E0BF] hover:text-[#FF8300] transition duration-200"
+                            onClick={handleClick}>{label}</button>
+                    </div>
+                </>
+            )}
+        </>
+    )
+}

manifest.gen.ts

@@ -47,18 +47,19 @@ import * as $$$$$$27 from "./sections/NossasLojas/NossasLojas.tsx";
 import * as $$$$$$28 from "./sections/NossasLojas/query.ts";
 import * as $$$$$$29 from "./sections/NossasLojas/types.ts";
 import * as $$$$$$30 from "./sections/Policy/Policy.tsx";
-import * as $$$$$$31 from "./sections/Product/ProductDetails.tsx";
-import * as $$$$$$32 from "./sections/Product/ProductShelf.tsx";
-import * as $$$$$$33 from "./sections/Product/ProductShelfTabbed.tsx";
-import * as $$$$$$34 from "./sections/Product/QuickView.tsx";
-import * as $$$$$$35 from "./sections/Product/SearchResult.tsx";
-import * as $$$$$$36 from "./sections/Product/ShelfWithImage.tsx";
-import * as $$$$$$37 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$38 from "./sections/Session.tsx";
-import * as $$$$$$39 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$40 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$41 from "./sections/TabLayout/TabLayout.tsx";
-import * as $$$$$$42 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$31 from "./sections/PopupLGPD/PopupLGPD.tsx";
+import * as $$$$$$32 from "./sections/Product/ProductDetails.tsx";
+import * as $$$$$$33 from "./sections/Product/ProductShelf.tsx";
+import * as $$$$$$34 from "./sections/Product/ProductShelfTabbed.tsx";
+import * as $$$$$$35 from "./sections/Product/QuickView.tsx";
+import * as $$$$$$36 from "./sections/Product/SearchResult.tsx";
+import * as $$$$$$37 from "./sections/Product/ShelfWithImage.tsx";
+import * as $$$$$$38 from "./sections/Product/Wishlist.tsx";
+import * as $$$$$$39 from "./sections/Session.tsx";
+import * as $$$$$$40 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$41 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$42 from "./sections/TabLayout/TabLayout.tsx";
+import * as $$$$$$43 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -103,18 +104,19 @@ const manifest = {
     "site/sections/NossasLojas/query.ts": $$$$$$28,
     "site/sections/NossasLojas/types.ts": $$$$$$29,
     "site/sections/Policy/Policy.tsx": $$$$$$30,
-    "site/sections/Product/ProductDetails.tsx": $$$$$$31,
-    "site/sections/Product/ProductShelf.tsx": $$$$$$32,
-    "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$33,
-    "site/sections/Product/QuickView.tsx": $$$$$$34,
-    "site/sections/Product/SearchResult.tsx": $$$$$$35,
-    "site/sections/Product/ShelfWithImage.tsx": $$$$$$36,
-    "site/sections/Product/Wishlist.tsx": $$$$$$37,
-    "site/sections/Session.tsx": $$$$$$38,
-    "site/sections/Social/InstagramPosts.tsx": $$$$$$39,
-    "site/sections/Social/WhatsApp.tsx": $$$$$$40,
-    "site/sections/TabLayout/TabLayout.tsx": $$$$$$41,
-    "site/sections/Theme/Theme.tsx": $$$$$$42,
+    "site/sections/PopupLGPD/PopupLGPD.tsx": $$$$$$31,
+    "site/sections/Product/ProductDetails.tsx": $$$$$$32,
+    "site/sections/Product/ProductShelf.tsx": $$$$$$33,
+    "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$34,
+    "site/sections/Product/QuickView.tsx": $$$$$$35,
+    "site/sections/Product/SearchResult.tsx": $$$$$$36,
+    "site/sections/Product/ShelfWithImage.tsx": $$$$$$37,
+    "site/sections/Product/Wishlist.tsx": $$$$$$38,
+    "site/sections/Session.tsx": $$$$$$39,
+    "site/sections/Social/InstagramPosts.tsx": $$$$$$40,
+    "site/sections/Social/WhatsApp.tsx": $$$$$$41,
+    "site/sections/TabLayout/TabLayout.tsx": $$$$$$42,
+    "site/sections/Theme/Theme.tsx": $$$$$$43,
   },
   "actions": {
     "site/actions/minicart/submit.ts": $$$$$$$$$0,

sections/PopupLGPD/PopupLGPD.tsx

@@ -0,0 +1,18 @@
+import { RichText } from "apps/admin/widgets.ts";
+import LgpdButton from "site/islands/LgpdButton.tsx";
+
+interface Props {
+    text: RichText;
+    label: string;
+}
+
+export default function PopupLGPD({ text, label }: Props) {
+
+    return (
+        <>
+        <div class="fixed z-[9999] w-full">
+            <LgpdButton text={text} label={label}/>
+        </div>
+        </>
+    )
+}

static/tailwind.css

@@ -3687,6 +3687,9 @@ details.collapse summary::-webkit-details-marker {
 .bottom-4 {
   bottom: 1rem;
 }
+.bottom-5 {
+  bottom: 1.25rem;
+}
 .bottom-6 {
   bottom: 1.5rem;
 }
@@ -3822,6 +3825,9 @@ details.collapse summary::-webkit-details-marker {
 .z-\[-2\] {
   z-index: -2;
 }
+.z-\[9999\] {
+  z-index: 9999;
+}
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -4165,6 +4171,9 @@ details.collapse summary::-webkit-details-marker {
 .h-9 {
   height: 2.25rem;
 }
+.h-\[100vh\] {
+  height: 100vh;
+}
 .h-\[102px\] {
   height: 102px;
 }
@@ -4228,6 +4237,9 @@ details.collapse summary::-webkit-details-marker {
 .h-\[675px\] {
   height: 675px;
 }
+.h-\[74px\] {
+  height: 74px;
+}
 .h-\[80px\] {
   height: 80px;
 }
@@ -4532,6 +4544,9 @@ details.collapse summary::-webkit-details-marker {
 .max-w-7xl {
   max-width: 80rem;
 }
+.max-w-\[1117px\] {
+  max-width: 1117px;
+}
 .max-w-\[139px\] {
   max-width: 139px;
 }
@@ -4544,6 +4559,9 @@ details.collapse summary::-webkit-details-marker {
 .max-w-\[215px\] {
   max-width: 215px;
 }
+.max-w-\[220px\] {
+  max-width: 220px;
+}
 .max-w-\[243px\] {
   max-width: 243px;
 }
@@ -4991,9 +5009,6 @@ details.collapse summary::-webkit-details-marker {
 .rounded-none {
   border-radius: 0px;
 }
-.rounded-sm {
-  border-radius: 0.125rem;
-}
 .rounded-b-\[5px\] {
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
@@ -5162,6 +5177,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
+.bg-\[\#000\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
 .bg-\[\#0D1717\] {
   --tw-bg-opacity: 1;
   background-color: rgb(13 23 23 / var(--tw-bg-opacity));
@@ -5213,6 +5232,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-bg-opacity: 1;
   background-color: rgb(245 244 241 / var(--tw-bg-opacity));
 }
+.bg-\[\#ff8300\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 131 0 / var(--tw-bg-opacity));
+}
 .bg-\[var\(--bg-color\)\] {
   background-color: var(--bg-color);
 }
@@ -5341,6 +5364,9 @@ details.collapse summary::-webkit-details-marker {
 .p-\[10px\] {
   padding: 10px;
 }
+.p-\[20px\] {
+  padding: 20px;
+}
 .p-\[5px\] {
   padding: 5px;
 }
@@ -5889,6 +5915,10 @@ details.collapse summary::-webkit-details-marker {
   --tw-text-opacity: 1;
   color: rgb(126 127 136 / var(--tw-text-opacity));
 }
+.text-\[\#808080\] {
+  --tw-text-opacity: 1;
+  color: rgb(128 128 128 / var(--tw-text-opacity));
+}
 .text-\[\#C5C5C5\] {
   --tw-text-opacity: 1;
   color: rgb(197 197 197 / var(--tw-text-opacity));
@@ -5920,6 +5950,10 @@ details.collapse summary::-webkit-details-marker {
 .text-\[\#e7e7e7e\] {
   color: #e7e7e7e;
 }
+.text-\[\#fff\] {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
 .text-\[\#ffffff\] {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -5995,6 +6029,9 @@ details.collapse summary::-webkit-details-marker {
 .opacity-20 {
   opacity: 0.2;
 }
+.opacity-40 {
+  opacity: 0.4;
+}
 .opacity-50 {
   opacity: 0.5;
 }
@@ -6617,6 +6654,10 @@ details.collapse summary::-webkit-details-marker {
 }
 @media (max-width: 1023px) {
 
+  .mobile\:bottom-10 {
+    bottom: 2.5rem;
+  }
+
   .mobile\:mb-\[45px\] {
     margin-bottom: 45px;
   }
@@ -6661,6 +6702,14 @@ details.collapse summary::-webkit-details-marker {
     display: none;
   }
 
+  .mobile\:h-\[100\%\] {
+    height: 100%;
+  }
+
+  .mobile\:h-\[153px\] {
+    height: 153px;
+  }
+
   .mobile\:h-\[305px\] {
     height: 305px;
   }
@@ -6669,6 +6718,10 @@ details.collapse summary::-webkit-details-marker {
     height: 403px;
   }
 
+  .mobile\:w-\[100\%\] {
+    width: 100%;
+  }
+
   .mobile\:w-\[160px\] {
     width: 160px;
   }
@@ -6681,6 +6734,14 @@ details.collapse summary::-webkit-details-marker {
     min-width: 240px;
   }
 
+  .mobile\:max-w-\[295px\] {
+    max-width: 295px;
+  }
+
+  .mobile\:max-w-\[335px\] {
+    max-width: 335px;
+  }
+
   .mobile\:flex-col {
     flex-direction: column;
   }