From 957f6e9b09f83708314f75b53703cb449c9fe3c9 Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Thu, 14 Nov 2024 16:58:57 -0300 Subject: [PATCH 1/9] =?UTF-8?q?feat:=20p=C3=A1gina=20de=20nossas=20lojas?= =?UTF-8?q?=20adicionada,=20mapa=20adicionado,=20conte=C3=BAdo=20adicionad?= =?UTF-8?q?o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../blocks/pages-Nossas%2520Lojas-998808.json | 42 +++++++ components/ui/Icon.tsx | 1 + fresh.gen.ts | 4 + islands/Map.tsx | 47 ++++++++ islands/formsNossasLojas.tsx | 16 +++ manifest.gen.ts | 112 +++++++++--------- sections/Breadcrumb/Breadcrumb.tsx | 20 ++++ sections/NossasLojas/NossasLojas.tsx | 39 ++++++ static/sprites.svg | 1 + static/tailwind.css | 76 +++++++++++- 10 files changed, 301 insertions(+), 57 deletions(-) create mode 100644 .deco/blocks/pages-Nossas%2520Lojas-998808.json create mode 100644 islands/Map.tsx create mode 100644 islands/formsNossasLojas.tsx create mode 100644 sections/Breadcrumb/Breadcrumb.tsx create mode 100644 sections/NossasLojas/NossasLojas.tsx diff --git a/.deco/blocks/pages-Nossas%2520Lojas-998808.json b/.deco/blocks/pages-Nossas%2520Lojas-998808.json new file mode 100644 index 0000000..7b7fd86 --- /dev/null +++ b/.deco/blocks/pages-Nossas%2520Lojas-998808.json @@ -0,0 +1,42 @@ +{ + "name": "Nossas Lojas", + "path": "/nossas-lojas", + "sections": [ + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Header" + } + }, + { + "__resolveType": "site/sections/Breadcrumb/Breadcrumb.tsx", + "route": "Nossas Lojas", + "root": "HOME" + }, + { + "__resolveType": "site/sections/NossasLojas/NossasLojas.tsx", + "title": "Encontre uma loja perto de você!", + "paragraph": "

Em cada loja você vai encontrar detalhes do Mundo Mágico da Alphabeto em cada cantinho. Tudo preparado com muito carinho para receber você e a criançada com muita alegria no nosso universo alegre e colorido. Ah, sempre tem um balão divertido pra criançada começar a brincadeira.

", + "items": [ + { + "paragraph": "

Em cada loja você vai encontrar detalhes do Mundo Mágico da Alphabeto em cada cantinho. Tudo preparado com muito carinho para receber você e a criançada com muita alegria no nosso universo alegre e colorido. Ah, sempre tem um balão divertido pra criançada começar a brincadeira.

", + "title": "Encontre uma loja perto de você!" + } + ], + "apiKey": { + "__resolveType": "website/loaders/secret.ts", + "encrypted": "c023ddfdc61ad47d330a2fc127ae49613294c20e534dcd1e3418027db2d56e061de4731f74558a8bdf6fe577663527ce" + } + }, + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Footer" + } + } + ], + "seo": { + "__resolveType": "website/sections/Seo/SeoV2.tsx" + }, + "__resolveType": "website/pages/Page.tsx" +} \ No newline at end of file diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 54ac161..8f5e3e3 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -10,6 +10,7 @@ export type AvailableIcons = | "chevron-right" | "favorite" | "home_pin" + | "home_icon" | "call" | "local_shipping" | "pan_zoom" diff --git a/fresh.gen.ts b/fresh.gen.ts index e49e188..e863096 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -3,8 +3,10 @@ // This file is automatically updated during development when running `dev.ts`. import * as $_app from "./routes/_app.tsx"; +import * as $Map from "./islands/Map.tsx"; import * as $MinicartFooter from "./islands/MinicartFooter.tsx"; import * as $Notify from "./islands/Notify.tsx"; +import * as $formsNossasLojas from "./islands/formsNossasLojas.tsx"; import { type Manifest } from "$fresh/server.ts"; const manifest = { @@ -12,8 +14,10 @@ const manifest = { "./routes/_app.tsx": $_app, }, islands: { + "./islands/Map.tsx": $Map, "./islands/MinicartFooter.tsx": $MinicartFooter, "./islands/Notify.tsx": $Notify, + "./islands/formsNossasLojas.tsx": $formsNossasLojas, }, baseUrl: import.meta.url, } satisfies Manifest; diff --git a/islands/Map.tsx b/islands/Map.tsx new file mode 100644 index 0000000..a2e8778 --- /dev/null +++ b/islands/Map.tsx @@ -0,0 +1,47 @@ +import { useSignal } from "@preact/signals"; +import { useEffect } from "preact/compat"; + +import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.6"; + +interface Props { + apiKey: string +} + +export default function Map({apiKey}: Props) { + let map; + const current = useSignal("") + + useEffect(() => { + const loader = new Loader({ + apiKey, + version: "weekly", + }) + + loader + .importLibrary("maps") + // deno-lint-ignore no-explicit-any + .then(({ Map }: any) => { + map = new Map(document.getElementById('map')!, { + center: { lat: -34.397, lng: 150.644 }, + zoom: 8, + }) + + map.addListener("click", (e: {latLng: { lat: () => number; lng: () => number } }) => { + const data = ({ + lat: e.latLng.lat(), + lng: e.latLng.lng(), + }) + current.value = `Latitude: ${data.lat}, Longitude: ${data.lng}` + }) + }) + .catch((e) => { + console.error('error:', e) + }) + }, []) + + return( +
+
+
+ ) +} \ No newline at end of file diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx new file mode 100644 index 0000000..012ce62 --- /dev/null +++ b/islands/formsNossasLojas.tsx @@ -0,0 +1,16 @@ +export default function FormsNossasLojas(){ + return( +
+
+

Busque por cidade, CEP, endereço ou loja:

+
+ + +
+
+
+ +
+
+ ) +} \ No newline at end of file diff --git a/manifest.gen.ts b/manifest.gen.ts index 340d7c9..81f87eb 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -15,33 +15,35 @@ import * as $$$3 from "./loaders/minicart.ts"; import * as $$$4 from "./loaders/user.ts"; import * as $$$5 from "./loaders/wishlist.ts"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; -import * as $$$$$$1 from "./sections/Category/CategoryBanner.tsx"; -import * as $$$$$$2 from "./sections/Category/CategoryGrid.tsx"; -import * as $$$$$$3 from "./sections/Component.tsx"; -import * as $$$$$$4 from "./sections/Content/Faq.tsx"; -import * as $$$$$$5 from "./sections/Content/Hero.tsx"; -import * as $$$$$$6 from "./sections/Content/Intro.tsx"; -import * as $$$$$$7 from "./sections/Content/Logos.tsx"; -import * as $$$$$$8 from "./sections/Footer/Footer.tsx"; -import * as $$$$$$9 from "./sections/Header/Header.tsx"; -import * as $$$$$$10 from "./sections/Images/Banner.tsx"; -import * as $$$$$$11 from "./sections/Images/Carousel.tsx"; -import * as $$$$$$12 from "./sections/Images/ImageGallery.tsx"; -import * as $$$$$$13 from "./sections/Images/ShoppableBanner.tsx"; -import * as $$$$$$14 from "./sections/Links/LinkTree.tsx"; -import * as $$$$$$15 from "./sections/Miscellaneous/CampaignTimer.tsx"; -import * as $$$$$$16 from "./sections/Miscellaneous/CookieConsent.tsx"; -import * as $$$$$$17 from "./sections/Newsletter/Newsletter.tsx"; -import * as $$$$$$18 from "./sections/Product/ProductDetails.tsx"; -import * as $$$$$$19 from "./sections/Product/ProductShelf.tsx"; -import * as $$$$$$20 from "./sections/Product/ProductShelfTabbed.tsx"; -import * as $$$$$$21 from "./sections/Product/SearchResult.tsx"; -import * as $$$$$$22 from "./sections/Product/ShelfWithImage.tsx"; -import * as $$$$$$23 from "./sections/Product/Wishlist.tsx"; -import * as $$$$$$24 from "./sections/Session.tsx"; -import * as $$$$$$25 from "./sections/Social/InstagramPosts.tsx"; -import * as $$$$$$26 from "./sections/Social/WhatsApp.tsx"; -import * as $$$$$$27 from "./sections/Theme/Theme.tsx"; +import * as $$$$$$1 from "./sections/Breadcrumb/Breadcrumb.tsx"; +import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx"; +import * as $$$$$$3 from "./sections/Category/CategoryGrid.tsx"; +import * as $$$$$$4 from "./sections/Component.tsx"; +import * as $$$$$$5 from "./sections/Content/Faq.tsx"; +import * as $$$$$$6 from "./sections/Content/Hero.tsx"; +import * as $$$$$$7 from "./sections/Content/Intro.tsx"; +import * as $$$$$$8 from "./sections/Content/Logos.tsx"; +import * as $$$$$$9 from "./sections/Footer/Footer.tsx"; +import * as $$$$$$10 from "./sections/Header/Header.tsx"; +import * as $$$$$$11 from "./sections/Images/Banner.tsx"; +import * as $$$$$$12 from "./sections/Images/Carousel.tsx"; +import * as $$$$$$13 from "./sections/Images/ImageGallery.tsx"; +import * as $$$$$$14 from "./sections/Images/ShoppableBanner.tsx"; +import * as $$$$$$15 from "./sections/Links/LinkTree.tsx"; +import * as $$$$$$16 from "./sections/Miscellaneous/CampaignTimer.tsx"; +import * as $$$$$$17 from "./sections/Miscellaneous/CookieConsent.tsx"; +import * as $$$$$$18 from "./sections/Newsletter/Newsletter.tsx"; +import * as $$$$$$19 from "./sections/NossasLojas/NossasLojas.tsx"; +import * as $$$$$$20 from "./sections/Product/ProductDetails.tsx"; +import * as $$$$$$21 from "./sections/Product/ProductShelf.tsx"; +import * as $$$$$$22 from "./sections/Product/ProductShelfTabbed.tsx"; +import * as $$$$$$23 from "./sections/Product/SearchResult.tsx"; +import * as $$$$$$24 from "./sections/Product/ShelfWithImage.tsx"; +import * as $$$$$$25 from "./sections/Product/Wishlist.tsx"; +import * as $$$$$$26 from "./sections/Session.tsx"; +import * as $$$$$$27 from "./sections/Social/InstagramPosts.tsx"; +import * as $$$$$$28 from "./sections/Social/WhatsApp.tsx"; +import * as $$$$$$29 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { @@ -54,33 +56,35 @@ const manifest = { }, "sections": { "site/sections/Animation/Animation.tsx": $$$$$$0, - "site/sections/Category/CategoryBanner.tsx": $$$$$$1, - "site/sections/Category/CategoryGrid.tsx": $$$$$$2, - "site/sections/Component.tsx": $$$$$$3, - "site/sections/Content/Faq.tsx": $$$$$$4, - "site/sections/Content/Hero.tsx": $$$$$$5, - "site/sections/Content/Intro.tsx": $$$$$$6, - "site/sections/Content/Logos.tsx": $$$$$$7, - "site/sections/Footer/Footer.tsx": $$$$$$8, - "site/sections/Header/Header.tsx": $$$$$$9, - "site/sections/Images/Banner.tsx": $$$$$$10, - "site/sections/Images/Carousel.tsx": $$$$$$11, - "site/sections/Images/ImageGallery.tsx": $$$$$$12, - "site/sections/Images/ShoppableBanner.tsx": $$$$$$13, - "site/sections/Links/LinkTree.tsx": $$$$$$14, - "site/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$15, - "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$16, - "site/sections/Newsletter/Newsletter.tsx": $$$$$$17, - "site/sections/Product/ProductDetails.tsx": $$$$$$18, - "site/sections/Product/ProductShelf.tsx": $$$$$$19, - "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$20, - "site/sections/Product/SearchResult.tsx": $$$$$$21, - "site/sections/Product/ShelfWithImage.tsx": $$$$$$22, - "site/sections/Product/Wishlist.tsx": $$$$$$23, - "site/sections/Session.tsx": $$$$$$24, - "site/sections/Social/InstagramPosts.tsx": $$$$$$25, - "site/sections/Social/WhatsApp.tsx": $$$$$$26, - "site/sections/Theme/Theme.tsx": $$$$$$27, + "site/sections/Breadcrumb/Breadcrumb.tsx": $$$$$$1, + "site/sections/Category/CategoryBanner.tsx": $$$$$$2, + "site/sections/Category/CategoryGrid.tsx": $$$$$$3, + "site/sections/Component.tsx": $$$$$$4, + "site/sections/Content/Faq.tsx": $$$$$$5, + "site/sections/Content/Hero.tsx": $$$$$$6, + "site/sections/Content/Intro.tsx": $$$$$$7, + "site/sections/Content/Logos.tsx": $$$$$$8, + "site/sections/Footer/Footer.tsx": $$$$$$9, + "site/sections/Header/Header.tsx": $$$$$$10, + "site/sections/Images/Banner.tsx": $$$$$$11, + "site/sections/Images/Carousel.tsx": $$$$$$12, + "site/sections/Images/ImageGallery.tsx": $$$$$$13, + "site/sections/Images/ShoppableBanner.tsx": $$$$$$14, + "site/sections/Links/LinkTree.tsx": $$$$$$15, + "site/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$16, + "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$17, + "site/sections/Newsletter/Newsletter.tsx": $$$$$$18, + "site/sections/NossasLojas/NossasLojas.tsx": $$$$$$19, + "site/sections/Product/ProductDetails.tsx": $$$$$$20, + "site/sections/Product/ProductShelf.tsx": $$$$$$21, + "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$22, + "site/sections/Product/SearchResult.tsx": $$$$$$23, + "site/sections/Product/ShelfWithImage.tsx": $$$$$$24, + "site/sections/Product/Wishlist.tsx": $$$$$$25, + "site/sections/Session.tsx": $$$$$$26, + "site/sections/Social/InstagramPosts.tsx": $$$$$$27, + "site/sections/Social/WhatsApp.tsx": $$$$$$28, + "site/sections/Theme/Theme.tsx": $$$$$$29, }, "actions": { "site/actions/minicart/submit.ts": $$$$$$$$$0, diff --git a/sections/Breadcrumb/Breadcrumb.tsx b/sections/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 0000000..2141cb5 --- /dev/null +++ b/sections/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,20 @@ +import Icon from "site/components/ui/Icon.tsx"; + +/**@title Breadcrumb */ +interface BreadcrumbProps { + /**@title Raiz*/ + root: string; + /**@title Rota */ + route: string; +} + +export default function Breadcrumb({ root, route }: BreadcrumbProps) { + return( +
+ + +

{root} | {route}

+ +
+ ) +} \ No newline at end of file diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx new file mode 100644 index 0000000..73a2f8a --- /dev/null +++ b/sections/NossasLojas/NossasLojas.tsx @@ -0,0 +1,39 @@ +import { Secret } from "apps/website/loaders/secret.ts"; +import { type RichText } from "apps/admin/widgets.ts"; + +import Map from "../../islands/Map.tsx" +import FormsNossasLojas from "site/islands/formsNossasLojas.tsx"; + +/**@title Conteúdo*/ +interface NossasLojasProps { + /**@title Título na página*/ + title?: string; + /**@title Parágrafo*/ + paragraph: RichText; +} + +interface ContentProps { + /**@title Itens*/ + items: NossasLojasProps[]; + + apiKey: Secret; +} + +export default function NossasLojas({ items, apiKey }: ContentProps) { + return ( +
+
+ {items.map((content, index) => ( +
+

{content.title}

+

+

+ ))} + +
+
+ +
+
+ ); +} diff --git a/static/sprites.svg b/static/sprites.svg index 8ab2897..421282b 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -7,6 +7,7 @@ + diff --git a/static/tailwind.css b/static/tailwind.css index 13ed1be..dc19cde 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -3889,21 +3889,36 @@ details.collapse summary::-webkit-details-marker { .mb-9 { margin-bottom: 2.25rem; } +.mb-\[100px\] { + margin-bottom: 100px; +} .mb-\[10px\] { margin-bottom: 10px; } +.mb-\[13px\] { + margin-bottom: 13px; +} .mb-\[14px\] { margin-bottom: 14px; } .mb-\[17px\] { margin-bottom: 17px; } +.mb-\[40px\] { + margin-bottom: 40px; +} .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } +.ml-\[40px\] { + margin-left: 40px; +} +.ml-\[4px\] { + margin-left: 4px; +} .mr-2 { margin-right: 0.5rem; } @@ -3913,6 +3928,9 @@ details.collapse summary::-webkit-details-marker { .mr-6 { margin-right: 1.5rem; } +.mr-\[40px\] { + margin-right: 40px; +} .mt-10 { margin-top: 2.5rem; } @@ -3934,6 +3952,9 @@ details.collapse summary::-webkit-details-marker { .mt-\[10px\] { margin-top: 10px; } +.mt-\[20px\] { + margin-top: 20px; +} .mt-\[22px\] { margin-top: 22px; } @@ -4042,6 +4063,9 @@ details.collapse summary::-webkit-details-marker { .h-\[3px\] { height: 3px; } +.h-\[44px\] { + height: 44px; +} .h-\[50px\] { height: 50px; } @@ -4054,6 +4078,9 @@ details.collapse summary::-webkit-details-marker { .h-\[60px\] { height: 60px; } +.h-\[675px\] { + height: 675px; +} .h-fit { height: -moz-fit-content; height: fit-content; @@ -4164,12 +4191,18 @@ details.collapse summary::-webkit-details-marker { .w-8 { width: 2rem; } +.w-\[100\%\] { + width: 100%; +} .w-\[10px\] { width: 10px; } .w-\[18px\] { width: 18px; } +.w-\[20\%\] { + width: 20%; +} .w-\[243px\] { width: 243px; } @@ -4197,6 +4230,9 @@ details.collapse summary::-webkit-details-marker { .w-\[335px\] { width: 335px; } +.w-\[34\%\] { + width: 34%; +} .w-\[363px\] { width: 363px; } @@ -4209,6 +4245,9 @@ details.collapse summary::-webkit-details-marker { .w-\[522px\] { width: 522px; } +.w-\[64\%\] { + width: 64%; +} .w-\[73px\] { width: 73px; } @@ -4646,6 +4685,9 @@ details.collapse summary::-webkit-details-marker { .rounded-\[6px\] { border-radius: 6px; } +.rounded-\[8px\] { + border-radius: 8px; +} .rounded-badge { border-radius: var(--rounded-badge, 1.9rem); } @@ -4667,9 +4709,6 @@ details.collapse summary::-webkit-details-marker { .rounded-none { border-radius: 0px; } -.rounded-sm { - border-radius: 0.125rem; -} .rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; @@ -4706,6 +4745,9 @@ details.collapse summary::-webkit-details-marker { .border-2 { border-width: 2px; } +.border-\[1px\] { + border-width: 1px; +} .border-b { border-bottom-width: 1px; } @@ -4788,6 +4830,10 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity)); } +.bg-\[\#FF8300\] { + --tw-bg-opacity: 1; + background-color: rgb(255 131 0 / var(--tw-bg-opacity)); +} .bg-\[\#f5f4f1\] { --tw-bg-opacity: 1; background-color: rgb(245 244 241 / var(--tw-bg-opacity)); @@ -5003,6 +5049,10 @@ details.collapse summary::-webkit-details-marker { padding-top: 14px; padding-bottom: 14px; } +.py-\[15px\] { + padding-top: 15px; + padding-bottom: 15px; +} .\!pr-0 { padding-right: 0px !important; } @@ -5060,6 +5110,9 @@ details.collapse summary::-webkit-details-marker { .pl-\[10px\] { padding-left: 10px; } +.pl-\[20px\] { + padding-left: 20px; +} .pr-2 { padding-right: 0.5rem; } @@ -5075,6 +5128,9 @@ details.collapse summary::-webkit-details-marker { .pr-\[18px\] { padding-right: 18px; } +.pr-\[43px\] { + padding-right: 43px; +} .pr-\[60px\] { padding-right: 60px; } @@ -5135,6 +5191,9 @@ details.collapse summary::-webkit-details-marker { .font-\[\#676767\] { font-family: #676767; } +.font-\[beccaPerry\] { + font-family: beccaPerry; +} .font-beccaPerry { font-family: BeccaPerry, sans-serif; } @@ -5202,6 +5261,9 @@ details.collapse summary::-webkit-details-marker { .text-\[40px\] { font-size: 40px; } +.text-\[44px\] { + font-size: 44px; +} .text-\[48px\] { font-size: 48px; } @@ -5362,6 +5424,10 @@ details.collapse summary::-webkit-details-marker { --tw-text-opacity: 1; color: rgb(214 222 35 / var(--tw-text-opacity)); } +.text-\[\#FF8300\] { + --tw-text-opacity: 1; + color: rgb(255 131 0 / var(--tw-text-opacity)); +} .text-\[\#FF859A\] { --tw-text-opacity: 1; color: rgb(255 133 154 / var(--tw-text-opacity)); @@ -5373,6 +5439,10 @@ details.collapse summary::-webkit-details-marker { .text-\[\#e7e7e7e\] { color: #e7e7e7e; } +.text-\[\#ffffff\] { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} .text-accent { --tw-text-opacity: 1; color: var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity))); From 495cd23e3bd20a5442d4d13c3f6fd4171876bc8c Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Mon, 18 Nov 2024 16:09:07 -0300 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20espa=C3=A7o=20das=20lojas=20adicion?= =?UTF-8?q?ado=20e=20configurado=20para=20desktop=20e=20tablet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ui/Icon.tsx | 1 + islands/formsNossasLojas.tsx | 88 +++++++++++++++++++++++++++++++++++- static/sprites.svg | 1 + static/tailwind.css | 40 ++++++++++++++++ 4 files changed, 129 insertions(+), 1 deletion(-) diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 8f5e3e3..0987c05 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -21,6 +21,7 @@ export type AvailableIcons = | "trash" | "location_pin" | "close-search" + | "logo_store" | "plus" | "minus"; diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index 012ce62..6cec237 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -1,3 +1,51 @@ +import Icon from "site/components/ui/Icon.tsx"; + +const lojas = [ + { + loja: "Shopping Manauara", + city: "Manaus", + address: "Avenida Mário Ypiranga", + number: "1300", + neighborhood: "Adrianópolis", + cep: "69053-165", + phone: "+55 92 9448-1001", + timeOpenSunday: "12:00", + timeCloseSunday: "21:00", + timeOpenWeek: "10:00", + timeCloseWeek: "22:00" + }, + { + loja: "Shopping Manauara", + city: "Manaus", + address: "Avenida Mário Ypiranga", + number: "1300", + neighborhood: "Adrianópolis", + cep: "69053-165", + phone: "+55 92 9448-1001", + timeOpenSunday: "12:00", + timeCloseSunday: "21:00", + timeOpenWeek: "10:00", + timeCloseWeek: "22:00" + }, + { + loja: "Shopping Manauara", + city: "Manaus", + address: "Avenida Mário Ypiranga", + number: "1300", + neighborhood: "Adrianópolis", + cep: "69053-165", + phone: "+55 92 9448-1001", + timeOpenSunday: "12:00", + timeCloseSunday: "21:00", + timeOpenWeek: "10:00", + timeCloseWeek: "22:00" + } +] + +const days = [ + "Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado" +] + export default function FormsNossasLojas(){ return(
@@ -8,8 +56,46 @@ export default function FormsNossasLojas(){ -
+
+ {lojas.map((store, index) => ( +
+
+
+ +

{store.loja}

+
+
+

{store.city}

+

{store.address}, {store.number} - {store.neighborhood}

+

CEP: {store.cep}

+
+
+

{store.phone}

+ +
+
+ +
+
+
+

Horários de funcionamento:

+
+ {days.map((index) => ( +

{index}: + { + index == 'Domingo' ? `${store.timeOpenSunday}h às ${store.timeCloseSunday}h` + : + `${store.timeOpenWeek}h às ${store.timeCloseWeek}h` + } +

+ )) + } +
+
+
+ )) + }
) diff --git a/static/sprites.svg b/static/sprites.svg index 421282b..5db857a 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -38,4 +38,5 @@ + diff --git a/static/tailwind.css b/static/tailwind.css index dc19cde..0d75077 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -4051,6 +4051,9 @@ details.collapse summary::-webkit-details-marker { .h-\[18px\] { height: 18px; } +.h-\[194px\] { + height: 194px; +} .h-\[210px\] { height: 210px; } @@ -4063,6 +4066,9 @@ details.collapse summary::-webkit-details-marker { .h-\[3px\] { height: 3px; } +.h-\[420px\] { + height: 420px; +} .h-\[44px\] { height: 44px; } @@ -4203,6 +4209,9 @@ details.collapse summary::-webkit-details-marker { .w-\[20\%\] { width: 20%; } +.w-\[221px\] { + width: 221px; +} .w-\[243px\] { width: 243px; } @@ -4242,6 +4251,9 @@ details.collapse summary::-webkit-details-marker { .w-\[4px\] { width: 4px; } +.w-\[50\%\] { + width: 50%; +} .w-\[522px\] { width: 522px; } @@ -4251,6 +4263,9 @@ details.collapse summary::-webkit-details-marker { .w-\[73px\] { width: 73px; } +.w-\[95\%\] { + width: 95%; +} .w-\[calc\(100\%-48px\)\] { width: calc(100% - 48px); } @@ -4780,6 +4795,10 @@ details.collapse summary::-webkit-details-marker { --tw-border-opacity: 1; border-color: rgb(247 224 191 / var(--tw-border-opacity)); } +.border-\[\#FF8300\] { + --tw-border-opacity: 1; + border-color: rgb(255 131 0 / var(--tw-border-opacity)); +} .border-\[\#FF859A\] { --tw-border-opacity: 1; border-color: rgb(255 133 154 / var(--tw-border-opacity)); @@ -4818,6 +4837,10 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(13 23 23 / var(--tw-bg-opacity)); } +.bg-\[\#33D26B\] { + --tw-bg-opacity: 1; + background-color: rgb(51 210 107 / var(--tw-bg-opacity)); +} .bg-\[\#45D268\] { --tw-bg-opacity: 1; background-color: rgb(69 210 104 / var(--tw-bg-opacity)); @@ -4830,6 +4853,10 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity)); } +.bg-\[\#FDF6ED\] { + --tw-bg-opacity: 1; + background-color: rgb(253 246 237 / var(--tw-bg-opacity)); +} .bg-\[\#FF8300\] { --tw-bg-opacity: 1; background-color: rgb(255 131 0 / var(--tw-bg-opacity)); @@ -4997,6 +5024,10 @@ details.collapse summary::-webkit-details-marker { padding-left: 2rem; padding-right: 2rem; } +.px-\[10px\] { + padding-left: 10px; + padding-right: 10px; +} .px-\[12px\] { padding-left: 12px; padding-right: 12px; @@ -5080,6 +5111,9 @@ details.collapse summary::-webkit-details-marker { .pb-\[10px\] { padding-bottom: 10px; } +.pb-\[14px\] { + padding-bottom: 14px; +} .pb-\[15px\] { padding-bottom: 15px; } @@ -5267,6 +5301,9 @@ details.collapse summary::-webkit-details-marker { .text-\[48px\] { font-size: 48px; } +.text-\[65\%\] { + font-size: 65%; +} .text-\[80px\] { font-size: 80px; } @@ -5297,6 +5334,9 @@ details.collapse summary::-webkit-details-marker { .\!font-medium { font-weight: 500 !important; } +.font-\[12px\] { + font-weight: 12px; +} .font-bold { font-weight: 700; } From 99e5a709d62619a402e2532f585a4c8e896be28c Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Tue, 19 Nov 2024 16:16:47 -0300 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20maps=20e=20marker=20adicionado,=20l?= =?UTF-8?q?ojas=20buscadas=20atrav=C3=A9s=20de=20query?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../blocks/pages-Nossas%2520Lojas-998808.json | 3 +- islands/Map.tsx | 20 ++- islands/formsNossasLojas.tsx | 161 +++++++++++------- manifest.gen.ts | 42 ++--- sections/NossasLojas/NossasLojas.tsx | 25 ++- sections/NossasLojas/query.ts | 29 ++++ static/tailwind.css | 23 ++- 7 files changed, 216 insertions(+), 87 deletions(-) create mode 100644 sections/NossasLojas/query.ts diff --git a/.deco/blocks/pages-Nossas%2520Lojas-998808.json b/.deco/blocks/pages-Nossas%2520Lojas-998808.json index 7b7fd86..c0dc467 100644 --- a/.deco/blocks/pages-Nossas%2520Lojas-998808.json +++ b/.deco/blocks/pages-Nossas%2520Lojas-998808.json @@ -25,7 +25,8 @@ ], "apiKey": { "__resolveType": "website/loaders/secret.ts", - "encrypted": "c023ddfdc61ad47d330a2fc127ae49613294c20e534dcd1e3418027db2d56e061de4731f74558a8bdf6fe577663527ce" + "encrypted": "0bb9088851f809ab67eb0416474dd8ecac774558aa52006e414eb59cd74ae01cf0e04c3341174e6964b0a5bb06d97cd1", + "name": "GOOGLE_MAPS_API_KEY" } }, { diff --git a/islands/Map.tsx b/islands/Map.tsx index a2e8778..0336b19 100644 --- a/islands/Map.tsx +++ b/islands/Map.tsx @@ -1,3 +1,4 @@ +// deno-lint-ignore-file import { useSignal } from "@preact/signals"; import { useEffect } from "preact/compat"; @@ -8,10 +9,11 @@ interface Props { } export default function Map({apiKey}: Props) { - let map; + let pin: any; const current = useSignal("") useEffect(() => { + let map: any; const loader = new Loader({ apiKey, version: "weekly", @@ -22,18 +24,30 @@ export default function Map({apiKey}: Props) { // deno-lint-ignore no-explicit-any .then(({ Map }: any) => { map = new Map(document.getElementById('map')!, { - center: { lat: -34.397, lng: 150.644 }, + center: { lat: -23.5489, lng: -46.6388 }, zoom: 8, + mapId: 'DEMO_ID' }) - + map.addListener("click", (e: {latLng: { lat: () => number; lng: () => number } }) => { const data = ({ lat: e.latLng.lat(), lng: e.latLng.lng(), }) current.value = `Latitude: ${data.lat}, Longitude: ${data.lng}` + + pin.setPosition(data.lat, data.lng); + }) + + loader + .importLibrary("marker") + .then(({ AdvancedMarkerElement }) => { + pin = new AdvancedMarkerElement({ + position: { lat: -23.5489, lng: -46.6388 }, + map: map, }) }) + }) .catch((e) => { console.error('error:', e) }) diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index 6cec237..224b5aa 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -1,76 +1,82 @@ import Icon from "site/components/ui/Icon.tsx"; -const lojas = [ - { - loja: "Shopping Manauara", - city: "Manaus", - address: "Avenida Mário Ypiranga", - number: "1300", - neighborhood: "Adrianópolis", - cep: "69053-165", - phone: "+55 92 9448-1001", - timeOpenSunday: "12:00", - timeCloseSunday: "21:00", - timeOpenWeek: "10:00", - timeCloseWeek: "22:00" - }, - { - loja: "Shopping Manauara", - city: "Manaus", - address: "Avenida Mário Ypiranga", - number: "1300", - neighborhood: "Adrianópolis", - cep: "69053-165", - phone: "+55 92 9448-1001", - timeOpenSunday: "12:00", - timeCloseSunday: "21:00", - timeOpenWeek: "10:00", - timeCloseWeek: "22:00" +import { useState } from "preact/compat"; + +interface StoreInfo { + distance: number, + name: string, + id: number, + address: { + postalCode: string, + city: string, + state: string, + neighborhood: string, + street: string, + number: number + location: { + latitude: number, + longitude: number + }, }, - { - loja: "Shopping Manauara", - city: "Manaus", - address: "Avenida Mário Ypiranga", - number: "1300", - neighborhood: "Adrianópolis", - cep: "69053-165", - phone: "+55 92 9448-1001", - timeOpenSunday: "12:00", - timeCloseSunday: "21:00", - timeOpenWeek: "10:00", - timeCloseWeek: "22:00" - } -] + businessHours: string[] + } + +interface Stores { + stores: StoreInfo[] +} const days = [ "Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado" ] -export default function FormsNossasLojas(){ +export default function FormsNossasLojas({ stores }: Stores){ + const [showFiltered, setShowFiltered] = useState(false) + const [queryInput, setQueryInput] = useState("") + const [filtered, setFiltered] = useState([]) + const [IsCicked, setIsClicked] = useState(null) + + const handleClick = (index: number) => { + setIsClicked(index) + } + + const handleFilter = () => { + const result = stores.filter((store) => { + return Object.values(store).some((value) => + value.toString().toLowerCase().includes(queryInput.toLowerCase()) + ) + } + ) + setShowFiltered(!showFiltered) + setFiltered(result) + } + return(

Busque por cidade, CEP, endereço ou loja:

- - + ) => setQueryInput(e.currentTarget.value)} type="text" placeholder="Buscar"/> +
-
- {lojas.map((store, index) => ( -
+
+ + {showFiltered ? ( + filtered?.map((store, index) => ( + <> +
handleClick(index)} key={index} class={`flex justify-between items-center w-[95%] h-[194px] border ${IsCicked === index ? "border-[#FF8300]": "border-[#F5F4F1]" } rounded-[8px] px-[10px] mb-[16px]`}>
- -

{store.loja}

+ +

{store.name}

-

{store.city}

-

{store.address}, {store.number} - {store.neighborhood}

-

CEP: {store.cep}

+

{store.address.state}

+

{store.address.street}, {store.address.number} - {store.address.neighborhood}

+

CEP: {store.address.postalCode}

-

{store.phone}

+

+55 0 0000-0000

@@ -83,9 +89,9 @@ export default function FormsNossasLojas(){ {days.map((index) => (

{index}: { - index == 'Domingo' ? `${store.timeOpenSunday}h às ${store.timeCloseSunday}h` + index == 'Domingo' ? `${store.businessHours}h às ${store.businessHours}h` : - `${store.timeOpenWeek}h às ${store.timeCloseWeek}h` + `${store.businessHours}h às ${store.businessHours}h` }

)) @@ -93,9 +99,50 @@ export default function FormsNossasLojas(){
- )) - - } +
+ + ))) : ( + + stores.map((store, index) => ( + <> +
handleClick(index)} key={index} class={`flex justify-between items-center w-[95%] h-[194px] border ${IsCicked === index ? "border-[#FF8300]": "border-[#F5F4F1]" } rounded-[8px] px-[10px] mb-[16px]`}> +
+
+ +

{store.name}

+
+
+

{store.address.state}

+

{store.address.street}, {store.address.number} - {store.address.neighborhood}

+

CEP: {store.address.postalCode}

+
+
+

+55 0 0000-0000

+ +
+
+ +
+
+
+

Horários de funcionamento:

+
+ {days.map((index) => ( +

{index}: + { + index == 'Domingo' ? `${store.businessHours}h às ${store.businessHours}h` + : + `${store.businessHours}h às ${store.businessHours}h` + } +

+ )) + } +
+
+
+
+ + )))}
) diff --git a/manifest.gen.ts b/manifest.gen.ts index 81f87eb..bce2b33 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -34,16 +34,17 @@ import * as $$$$$$16 from "./sections/Miscellaneous/CampaignTimer.tsx"; import * as $$$$$$17 from "./sections/Miscellaneous/CookieConsent.tsx"; import * as $$$$$$18 from "./sections/Newsletter/Newsletter.tsx"; import * as $$$$$$19 from "./sections/NossasLojas/NossasLojas.tsx"; -import * as $$$$$$20 from "./sections/Product/ProductDetails.tsx"; -import * as $$$$$$21 from "./sections/Product/ProductShelf.tsx"; -import * as $$$$$$22 from "./sections/Product/ProductShelfTabbed.tsx"; -import * as $$$$$$23 from "./sections/Product/SearchResult.tsx"; -import * as $$$$$$24 from "./sections/Product/ShelfWithImage.tsx"; -import * as $$$$$$25 from "./sections/Product/Wishlist.tsx"; -import * as $$$$$$26 from "./sections/Session.tsx"; -import * as $$$$$$27 from "./sections/Social/InstagramPosts.tsx"; -import * as $$$$$$28 from "./sections/Social/WhatsApp.tsx"; -import * as $$$$$$29 from "./sections/Theme/Theme.tsx"; +import * as $$$$$$20 from "./sections/NossasLojas/query.ts"; +import * as $$$$$$21 from "./sections/Product/ProductDetails.tsx"; +import * as $$$$$$22 from "./sections/Product/ProductShelf.tsx"; +import * as $$$$$$23 from "./sections/Product/ProductShelfTabbed.tsx"; +import * as $$$$$$24 from "./sections/Product/SearchResult.tsx"; +import * as $$$$$$25 from "./sections/Product/ShelfWithImage.tsx"; +import * as $$$$$$26 from "./sections/Product/Wishlist.tsx"; +import * as $$$$$$27 from "./sections/Session.tsx"; +import * as $$$$$$28 from "./sections/Social/InstagramPosts.tsx"; +import * as $$$$$$29 from "./sections/Social/WhatsApp.tsx"; +import * as $$$$$$30 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { @@ -75,16 +76,17 @@ const manifest = { "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$17, "site/sections/Newsletter/Newsletter.tsx": $$$$$$18, "site/sections/NossasLojas/NossasLojas.tsx": $$$$$$19, - "site/sections/Product/ProductDetails.tsx": $$$$$$20, - "site/sections/Product/ProductShelf.tsx": $$$$$$21, - "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$22, - "site/sections/Product/SearchResult.tsx": $$$$$$23, - "site/sections/Product/ShelfWithImage.tsx": $$$$$$24, - "site/sections/Product/Wishlist.tsx": $$$$$$25, - "site/sections/Session.tsx": $$$$$$26, - "site/sections/Social/InstagramPosts.tsx": $$$$$$27, - "site/sections/Social/WhatsApp.tsx": $$$$$$28, - "site/sections/Theme/Theme.tsx": $$$$$$29, + "site/sections/NossasLojas/query.ts": $$$$$$20, + "site/sections/Product/ProductDetails.tsx": $$$$$$21, + "site/sections/Product/ProductShelf.tsx": $$$$$$22, + "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$23, + "site/sections/Product/SearchResult.tsx": $$$$$$24, + "site/sections/Product/ShelfWithImage.tsx": $$$$$$25, + "site/sections/Product/Wishlist.tsx": $$$$$$26, + "site/sections/Session.tsx": $$$$$$27, + "site/sections/Social/InstagramPosts.tsx": $$$$$$28, + "site/sections/Social/WhatsApp.tsx": $$$$$$29, + "site/sections/Theme/Theme.tsx": $$$$$$30, }, "actions": { "site/actions/minicart/submit.ts": $$$$$$$$$0, diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx index 73a2f8a..bde41e5 100644 --- a/sections/NossasLojas/NossasLojas.tsx +++ b/sections/NossasLojas/NossasLojas.tsx @@ -1,9 +1,12 @@ import { Secret } from "apps/website/loaders/secret.ts"; import { type RichText } from "apps/admin/widgets.ts"; -import Map from "../../islands/Map.tsx" +import Map from "site/islands/Map.tsx"; import FormsNossasLojas from "site/islands/formsNossasLojas.tsx"; +import { AppContext } from "site/apps/deco/vtex.ts"; +import { query } from "site/sections/NossasLojas/query.ts"; + /**@title Conteúdo*/ interface NossasLojasProps { /**@title Título na página*/ @@ -19,7 +22,23 @@ interface ContentProps { apiKey: Secret; } -export default function NossasLojas({ items, apiKey }: ContentProps) { +export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx: AppContext){ + + const { io } = await ctx.invoke.vtex.loaders.config() + // deno-lint-ignore no-explicit-any + const response = await io.query({ + variables: {}, + query: query + }) + console.log(response) + + const stores = response.getStores.items + return { + items, apiKey, stores + } +} + +export default function NossasLojas({ items, apiKey, stores }: Awaited>) { return (
@@ -29,7 +48,7 @@ export default function NossasLojas({ items, apiKey }: ContentProps) {

))} - +
diff --git a/sections/NossasLojas/query.ts b/sections/NossasLojas/query.ts new file mode 100644 index 0000000..b73c484 --- /dev/null +++ b/sections/NossasLojas/query.ts @@ -0,0 +1,29 @@ +export const query = ` + +query getStores($latitude: Float, $longitude: Float, $filterByTag: String) { + getStores(latitude: $latitude, longitude: $longitude, keyword: $filterByTag) + @context(provider: "vtex.store-locator") { + items { + name + id + address { + postalCode + city + state + neighborhood + street + number + location { + latitude + longitude + } + } + businessHours { + dayOfWeek + openingTime + closingTime + } + } + } + } + ` \ No newline at end of file diff --git a/static/tailwind.css b/static/tailwind.css index 0d75077..75bb989 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -3861,6 +3861,10 @@ details.collapse summary::-webkit-details-marker { margin-top: 5rem; margin-bottom: 5rem; } +.my-4 { + margin-top: 1rem; + margin-bottom: 1rem; +} .my-8 { margin-top: 2rem; margin-bottom: 2rem; @@ -3901,6 +3905,9 @@ details.collapse summary::-webkit-details-marker { .mb-\[14px\] { margin-bottom: 14px; } +.mb-\[16px\] { + margin-bottom: 16px; +} .mb-\[17px\] { margin-bottom: 17px; } @@ -4063,12 +4070,12 @@ details.collapse summary::-webkit-details-marker { .h-\[35px\] { height: 35px; } +.h-\[370px\] { + height: 370px; +} .h-\[3px\] { height: 3px; } -.h-\[420px\] { - height: 420px; -} .h-\[44px\] { height: 44px; } @@ -4784,6 +4791,9 @@ details.collapse summary::-webkit-details-marker { .border-dashed { border-style: dashed; } +.border-dotted { + border-style: dotted; +} .border-none { border-style: none; } @@ -4791,6 +4801,10 @@ details.collapse summary::-webkit-details-marker { --tw-border-opacity: 1; border-color: rgb(201 207 207 / var(--tw-border-opacity)); } +.border-\[\#F5F4F1\] { + --tw-border-opacity: 1; + border-color: rgb(245 244 241 / var(--tw-border-opacity)); +} .border-\[\#F7E0BF\] { --tw-border-opacity: 1; border-color: rgb(247 224 191 / var(--tw-border-opacity)); @@ -5198,6 +5212,9 @@ details.collapse summary::-webkit-details-marker { .pt-\[23px\] { padding-top: 23px; } +.pt-\[2px\] { + padding-top: 2px; +} .pt-\[30px\] { padding-top: 30px; } From 5ce1f5e4ec76d3e59b20f66a8953e43734ac5a8d Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Thu, 21 Nov 2024 09:30:55 -0300 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20recebimento=20das=20informa=C3=A7?= =?UTF-8?q?=C3=B5es=20via=20graphQL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- islands/formsNossasLojas.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index 224b5aa..1a7f495 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -18,7 +18,11 @@ interface StoreInfo { longitude: number }, }, - businessHours: string[] + businessHours: { + dayOfWeek: string, + openingTime: number, + closingTime: number, + } } interface Stores { @@ -89,9 +93,9 @@ export default function FormsNossasLojas({ stores }: Stores){ {days.map((index) => (

{index}: { - index == 'Domingo' ? `${store.businessHours}h às ${store.businessHours}h` + index == 'Domingo' ? `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` : - `${store.businessHours}h às ${store.businessHours}h` + `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` }

)) @@ -130,9 +134,9 @@ export default function FormsNossasLojas({ stores }: Stores){ {days.map((index) => (

{index}: { - index == 'Domingo' ? `${store.businessHours}h às ${store.businessHours}h` + index == 'Domingo' ? `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` : - `${store.businessHours}h às ${store.businessHours}h` + `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` }

)) From 6c4ca23a2c6c1976f219dcb77b2f6bba1e9a4a12 Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Tue, 26 Nov 2024 15:31:54 -0300 Subject: [PATCH 5/9] feat: ajustes nas lojas --- .../blocks/pages-Nossas%2520Lojas-998808.json | 11 +- .../pages-Pol%25C3%25ADticas-246564.json | 128 ++++++++ .github/workflows/deco-deploy.yaml | 3 +- components/footer/CopyrightRow.tsx | 96 +++--- components/ui/Icon.tsx | 5 +- deno.json | 28 +- fresh.gen.ts | 6 +- islands/Map.tsx | 51 +++- islands/MenuInstitutionalMobile.tsx | 57 ++++ islands/ScrollButton.tsx | 31 ++ islands/formsNossasLojas.tsx | 277 +++++++++--------- manifest.gen.ts | 70 +++-- sections/Breadcrumb/Breadcrumb.tsx | 20 -- .../BreadcrumbInstitucional/Breadcrumb.tsx | 40 +++ sections/Component.tsx | 4 +- .../MenuInstitucional/MenuInstitucional.tsx | 99 +++++++ sections/NossasLojas/NossasLojas.tsx | 39 ++- sections/NossasLojas/query.ts | 2 +- sections/NossasLojas/types.ts | 53 ++++ sections/Policy/Policy.tsx | 41 +++ static/sprites.svg | 5 + static/tailwind.css | 151 +++++++++- 22 files changed, 938 insertions(+), 279 deletions(-) create mode 100644 .deco/blocks/pages-Pol%25C3%25ADticas-246564.json create mode 100644 islands/MenuInstitutionalMobile.tsx create mode 100644 islands/ScrollButton.tsx delete mode 100644 sections/Breadcrumb/Breadcrumb.tsx create mode 100644 sections/BreadcrumbInstitucional/Breadcrumb.tsx create mode 100644 sections/MenuInstitucional/MenuInstitucional.tsx create mode 100644 sections/NossasLojas/types.ts create mode 100644 sections/Policy/Policy.tsx diff --git a/.deco/blocks/pages-Nossas%2520Lojas-998808.json b/.deco/blocks/pages-Nossas%2520Lojas-998808.json index c0dc467..d4eea48 100644 --- a/.deco/blocks/pages-Nossas%2520Lojas-998808.json +++ b/.deco/blocks/pages-Nossas%2520Lojas-998808.json @@ -9,9 +9,14 @@ } }, { - "__resolveType": "site/sections/Breadcrumb/Breadcrumb.tsx", - "route": "Nossas Lojas", - "root": "HOME" + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx", + "root": "HOME", + "path": "Ajuda", + "showText": false, + "route": "Nossas Lojas" + } }, { "__resolveType": "site/sections/NossasLojas/NossasLojas.tsx", diff --git a/.deco/blocks/pages-Pol%25C3%25ADticas-246564.json b/.deco/blocks/pages-Pol%25C3%25ADticas-246564.json new file mode 100644 index 0000000..00c8d24 --- /dev/null +++ b/.deco/blocks/pages-Pol%25C3%25ADticas-246564.json @@ -0,0 +1,128 @@ +{ + "name": "Políticas", + "path": "/politicas-de-privacidade", + "sections": [ + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Header" + } + }, + { + "__resolveType": "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx", + "root": "HOME", + "path": "Ajuda", + "route": "Políticas de privacidade ", + "showText": true + }, + { + "__resolveType": "site/sections/Policy/Policy.tsx", + "items": [ + { + "title": "Políticas de privacidade", + "subtitle": "Lorem", + "paragraph": "

Lorem ipsum dolor sit amet consectetur. Integer nisi tristique quis sit ornare orci massa viverra tellus. Sed libero aenean vitae pellentesque eget. Risus ultrices fames sit arcu tempus mi id vivamus. Erat elementum erat id fermentum sed nibh in maecenas. In sed duis pulvinar nam ac porta lectus. Purus risus blandit montes lacus et nibh feugiat tristique laoreet. Lacus ut ultricies donec fermentum montes viverra. Donec fames consectetur id adipiscing turpis volutpat convallis consectetur. Dictum lectus sit iaculis nam mattis. Faucibus volutpat amet donec ut. Cras dictumst blandit ullamcorper sapien risus quam.
Luctus sit cursus ipsum aliquam eu scelerisque. Nunc morbi amet id proin vitae ut. Dolor nibh tristique blandit cursus tincidunt. Aliquam aliquam massa sit platea pellentesque. Augue quam et amet sit vel elementum egestas enim sed. Ullamcorper diam luctus gravida nunc purus. Ligula non elit in erat duis condimentum urna diam adipiscing.
Arcu laoreet et tempus sed ac faucibus massa ultricies tellus. Vestibulum tempor viverra viverra id sociis lacus ut ac. Ornare vitae ut egestas praesent mi consectetur. Mauris ultricies sed neque fermentum mollis dolor aliquet mi. Ullamcorper varius feugiat a urna. Natoque adipiscing nam adipiscing volutpat sed mauris adipiscing sollicitudin gravida. Odio pellentesque curabitur ornare sit. Tristique mollis condimentum euismod bibendum gravida amet.
Elementum odio velit semper duis quis tempor praesent consequat pharetra. Blandit nec felis ut elit tempus arcu nibh mauris. Sed leo fermentum nisl lectus varius consectetur. Non odio consequat vitae accumsan ac nisl vitae et volutpat. Sed maecenas fames lobortis diam vitae mus in nunc. Egestas odio donec lacus nam sit tempor. Sed diam viverra libero fringilla. Nibh enim sit diam id. Id sed risus pulvinar tellus quis fringilla. Scelerisque augue aliquam senectus turpis elit ut habitasse.

" + }, + { + "title": "Endereço de IP:", + "subtitle": "Lorem ipsum dolor sit amet consectetur.", + "paragraph": "

  • Lorem ipsum dolor sit amet consectetur. Integer nisi tristique quis sit ornare orci massa viverra tellus. Sed libero aenean vitae pellentesque eget. Risus ultrices fames sit arcu tempus mi id vivamus. Erat elementum erat id fermentum sed nibh in maecenas. In sed duis pulvinar nam ac porta lectus.

  • Purus risus blandit montes lacus et nibh feugiat tristique laoreet. Lacus ut ultricies donec fermentum montes viverra. Donec fames consectetur id adipiscing turpis volutpat convallis consectetur.

  • Dictum lectus sit iaculis nam mattis. Faucibus volutpat amet donec ut. Cras dictumst blandit ullamcorper sapien risus quam.

  • Luctus sit cursus ipsum aliquam eu scelerisque. Nunc morbi amet id proin vitae ut. Dolor nibh tristique blandit cursus tincidunt. Aliquam aliquam massa sit platea pellentesque. Augue quam et amet sit vel elementum egestas enim sed. Ullamcorper diam luctus gravida nunc purus. Ligula non elit in erat duis condimentum urna diam adipiscing.

" + }, + { + "title": "Cookies:", + "subtitle": "Lorem ipsum dolor sit amet consectetur.", + "paragraph": "

  1. Lorem ipsum dolor sit amet consectetur. Integer nisi tristique quis sit ornare orci massa viverra tellus. Sed libero aenean vitae pellentesque eget. Risus ultrices fames sit arcu tempus mi id vivamus. Erat elementum erat id fermentum sed nibh in maecenas. In sed duis pulvinar nam ac porta lectus.

  2. Purus risus blandit montes lacus et nibh feugiat tristique laoreet. Lacus ut ultricies donec fermentum montes viverra. Donec fames consectetur id adipiscing turpis volutpat convallis consectetur.

  3. Dictum lectus sit iaculis nam mattis. Faucibus volutpat amet donec ut. Cras dictumst blandit ullamcorper sapien risus quam.

  4. Luctus sit cursus ipsum aliquam eu scelerisque. Nunc morbi amet id proin vitae ut. Dolor nibh tristique blandit cursus tincidunt. Aliquam aliquam massa sit platea pellentesque. Augue quam et amet sit vel elementum egestas enim sed. Ullamcorper diam luctus gravida nunc purus. Ligula non elit in erat duis condimentum urna diam adipiscing.

" + }, + { + "title": "Obtenção e uso das informações", + "paragraph": "

Lorem ipsum dolor sit amet consectetur. Bibendum tellus iaculis volutpat fringilla proin tincidunt nulla libero mattis. Enim suscipit sed sem eu in. Volutpat adipiscing vulputate vestibulum elementum. Ultrices massa ac quam elit pretium tempus nec cursus. Nunc pellentesque lacus sit vulputate tellus massa sit tempor viverra. Arcu rhoncus dictum tristique purus. A feugiat non cursus nunc interdum ultrices nibh suspendisse. Diam et facilisis faucibus tristique nunc. Suspendisse urna vulputate et lectus commodo facilisi magna amet. Convallis tempor habitant pulvinar elementum nec sit tempor massa etiam.

" + }, + { + "paragraph": "

Lorem ipsum dolor sit amet consectetur. Bibendum tellus iaculis volutpat fringilla proin tincidunt nulla libero mattis. Enim suscipit sed sem eu in. Volutpat adipiscing vulputate vestibulum elementum. Ultrices massa ac quam elit pretium tempus nec cursus. Nunc pellentesque lacus sit vulputate tellus massa sit tempor viverra. Arcu rhoncus dictum tristique purus. A feugiat non cursus nunc interdum ultrices nibh suspendisse. Diam et facilisis faucibus tristique nunc. Suspendisse urna vulputate et lectus commodo facilisi magna amet. Convallis tempor habitant pulvinar elementum nec sit tempor massa etiam.

", + "title": "Envio de comunicados e mensagens publicitárias" + }, + { + "paragraph": "

Lorem ipsum dolor sit amet consectetur. Bibendum tellus iaculis volutpat fringilla proin tincidunt nulla libero mattis. Enim suscipit sed sem eu in. Volutpat adipiscing vulputate vestibulum elementum. Ultrices massa ac quam elit pretium tempus nec cursus. Nunc pellentesque lacus sit vulputate tellus massa sit tempor viverra. Arcu rhoncus dictum tristique purus. A feugiat non cursus nunc interdum ultrices nibh suspendisse. Diam et facilisis faucibus tristique nunc. Suspendisse urna vulputate et lectus commodo facilisi magna amet. Convallis tempor habitant pulvinar elementum nec sit tempor massa etiam.

", + "title": "Modificações de nossa política de privacidade " + } + ], + "Menu": { + "__resolveType": "site/sections/MenuInstitucional/MenuInstitucional.tsx", + "institutionalTitle": "Ajuda", + "supportTitle": "Fale conosco", + "institutionalLinks": [ + { + "label": "Políticas de privacidade", + "route": "/politicas-de-privacidade" + }, + { + "label": "Troca e devolução", + "route": "/troca-e-devolucao" + }, + { + "label": "Termos e condições", + "route": "/termos-e-condicoes" + }, + { + "label": "Formas de pagamento", + "route": "/formas-de-pagamento" + }, + { + "route": "/formas-de-entrega", + "label": "Formas de entrega" + } + ], + "supportLinks": [ + { + "route": "/fale-conosco", + "label": "Fale conosco" + }, + { + "route": "/duvidas-frequentes", + "label": "Dúvidas frequentes" + } + ], + "links": [ + { + "route": "/politicas-de-privacidade", + "label": "Políticas de privacidade" + }, + { + "route": "/troca-e-devolucao", + "label": "Troca e devolução" + }, + { + "route": "/termos-e-condicoes", + "label": "Termos e condições" + }, + { + "route": "/formas-de-pagamento", + "label": "Formas de pagamento" + }, + { + "route": "/formas-de-entrega", + "label": "Formas de entrega" + }, + { + "route": "/fale-conosco", + "label": "Fale conosco" + }, + { + "route": "/duvidas-frequentes", + "label": "Dúvidas frequentes" + } + ] + } + }, + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Footer" + } + } + ], + "seo": { + "__resolveType": "website/sections/Seo/SeoV2.tsx" + }, + "__resolveType": "website/pages/Page.tsx" +} \ No newline at end of file diff --git a/.github/workflows/deco-deploy.yaml b/.github/workflows/deco-deploy.yaml index f9a360a..fb9edd3 100644 --- a/.github/workflows/deco-deploy.yaml +++ b/.github/workflows/deco-deploy.yaml @@ -1,4 +1,3 @@ - name: Deploy on: push: @@ -21,3 +20,5 @@ jobs: - name: Deco Deploy uses: deco-cx/deploy@v0 + with: + deno_version: '2.x' diff --git a/components/footer/CopyrightRow.tsx b/components/footer/CopyrightRow.tsx index 2664201..4bf635f 100644 --- a/components/footer/CopyrightRow.tsx +++ b/components/footer/CopyrightRow.tsx @@ -2,55 +2,55 @@ import Image from "apps/website/components/Image.tsx"; import { CardFlag, TecnologiesLogo } from "site/components/footer/types.ts"; interface Props { - copyright: string; - cardFlags: CardFlag[]; - tecnologiesLogo: TecnologiesLogo; + copyright: string; + cardFlags: CardFlag[]; + tecnologiesLogo: TecnologiesLogo; } export default function CopyrightRow(props: Props) { - const copyText = props.copyright.replace( - "{{year}}", - new Date().getFullYear().toString(), - ); - return ( -
-
-

- {copyText} -

-
- - Logo da Econverse - - - Logo da VTEX - -
-
    - {props.cardFlags.map((flag) => ( -
  • - {`Logo -
    • - ))} -
-
+ const copyText = props.copyright.replace( + "{{year}}", + new Date().getFullYear().toString(), + ); + return ( +
+
+

+ {copyText} +

+
+ + Logo da Econverse + + + Logo da VTEX +
- ); +
    + {props.cardFlags.map((flag) => ( +
  • + {`Logo +
    • + ))} +
+
+
+ ); } diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 0987c05..82c4315 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -8,6 +8,8 @@ export type AvailableIcons = | "account_circle" | "close" | "chevron-right" + | "chevron-right-institutional" + | "chevron-up" | "favorite" | "home_pin" | "home_icon" @@ -23,7 +25,8 @@ export type AvailableIcons = | "close-search" | "logo_store" | "plus" - | "minus"; + | "minus" + | "whatsappIcon"; interface Props extends JSX.SVGAttributes { /** diff --git a/deno.json b/deno.json index 945326f..c1cbd11 100644 --- a/deno.json +++ b/deno.json @@ -1,6 +1,6 @@ { "imports": { - "$fresh/": "https://deno.land/x/fresh@1.6.8/", + "$fresh/": "https://deno.land/x/fresh@1.7.3/", "preact": "npm:preact@10.23.1", "preact-render-to-string": "npm:preact-render-to-string@6.4.2", "@cliffy/prompt": "jsr:@cliffy/prompt@^1.0.0-rc.5", @@ -29,15 +29,15 @@ "@zaubrik/djwt": "jsr:@zaubrik/djwt@^3.0.2", "fast-json-patch": "npm:fast-json-patch@^3.1.1", "https://esm.sh/*preact-render-to-string@6.3.1": "npm:preact-render-to-string@6.4.2", - "@deco/deco": "jsr:@deco/deco@1.102.3", + "@deco/deco": "jsr:@deco/deco@1.107.0", "simple-git": "npm:simple-git@^3.25.0", "std/": "https://deno.land/std@0.190.0/", - "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.102.3/", - "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.59.16/", + "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.107.1/", + "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.64.2/", "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2", "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1", "daisyui": "npm:daisyui@4.6.0", - "@deco/dev": "jsr:@deco/dev@1.102.0", + "@deco/dev": "jsr:@deco/dev@1.107.0", "site/": "./" }, "tasks": { @@ -55,10 +55,12 @@ "build": "deno run -A dev.ts build", "preview": "deno run -A main.ts", "generate-icons": "deno run -A --unstable static/generate-icons.ts", - "dev": "deno run -A --env --unstable --unstable-hmr dev.ts", + "dev": "deno run -A --env --unstable-kv --unstable-hmr dev.ts", "reload": "deno cache -r https://deco.cx/run" }, - "githooks": { "pre-commit": "check" }, + "githooks": { + "pre-commit": "check" + }, "exclude": [ "node_modules", "static/", @@ -68,9 +70,17 @@ ".deco" ], "lint": { - "rules": { "exclude": ["no-window"], "tags": ["fresh", "recommended"] } + "rules": { + "exclude": [ + "no-window" + ], + "tags": [ + "fresh", + "recommended" + ] + } }, - "nodeModulesDir": true, + "nodeModulesDir": "auto", "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact", diff --git a/fresh.gen.ts b/fresh.gen.ts index e863096..2bd846f 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -4,10 +4,12 @@ import * as $_app from "./routes/_app.tsx"; import * as $Map from "./islands/Map.tsx"; +import * as $MenuInstitutionalMobile from "./islands/MenuInstitutionalMobile.tsx"; import * as $MinicartFooter from "./islands/MinicartFooter.tsx"; import * as $Notify from "./islands/Notify.tsx"; +import * as $ScrollButton from "./islands/ScrollButton.tsx"; import * as $formsNossasLojas from "./islands/formsNossasLojas.tsx"; -import { type Manifest } from "$fresh/server.ts"; +import type { Manifest } from "$fresh/server.ts"; const manifest = { routes: { @@ -15,8 +17,10 @@ const manifest = { }, islands: { "./islands/Map.tsx": $Map, + "./islands/MenuInstitutionalMobile.tsx": $MenuInstitutionalMobile, "./islands/MinicartFooter.tsx": $MinicartFooter, "./islands/Notify.tsx": $Notify, + "./islands/ScrollButton.tsx": $ScrollButton, "./islands/formsNossasLojas.tsx": $formsNossasLojas, }, baseUrl: import.meta.url, diff --git a/islands/Map.tsx b/islands/Map.tsx index 0336b19..0fbeae6 100644 --- a/islands/Map.tsx +++ b/islands/Map.tsx @@ -1,14 +1,36 @@ // deno-lint-ignore-file -import { useSignal } from "@preact/signals"; +import { effect, signal, useSignal } from "@preact/signals"; import { useEffect } from "preact/compat"; import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.6"; interface Props { - apiKey: string + apiKey: string, + stores: StoreInfo[]; } -export default function Map({apiKey}: Props) { +interface StoreInfo { + address: { + location: { + latitude: number; + longitude: number; + }; + }; +} + +interface Zoom { + lat: number, + lng: number, + zoom: number +} + +export const zoom = signal({ + lat: -23.5489, + lng: -46.6388, + zoom: 8 +}) + +export default function Map({apiKey, stores}: Props) { let pin: any; const current = useSignal("") @@ -24,8 +46,8 @@ export default function Map({apiKey}: Props) { // deno-lint-ignore no-explicit-any .then(({ Map }: any) => { map = new Map(document.getElementById('map')!, { - center: { lat: -23.5489, lng: -46.6388 }, - zoom: 8, + center: { lat: zoom.value.lat, lng: zoom.value.lng }, + zoom: zoom.value.zoom, mapId: 'DEMO_ID' }) @@ -42,20 +64,29 @@ export default function Map({apiKey}: Props) { loader .importLibrary("marker") .then(({ AdvancedMarkerElement }) => { - pin = new AdvancedMarkerElement({ - position: { lat: -23.5489, lng: -46.6388 }, - map: map, + const positions = stores.map(store => ({ + lat: store.address.location.latitude, + lng: store.address.location.longitude + })); + + positions.forEach(position => { + pin = new AdvancedMarkerElement({ + position: position, + map: map, + }) }) }) }) .catch((e) => { console.error('error:', e) }) - }, []) + + + },[zoom.value]) return(
-
+
) } \ No newline at end of file diff --git a/islands/MenuInstitutionalMobile.tsx b/islands/MenuInstitutionalMobile.tsx new file mode 100644 index 0000000..6a61405 --- /dev/null +++ b/islands/MenuInstitutionalMobile.tsx @@ -0,0 +1,57 @@ +import { useState } from "preact/hooks"; +import Icon from "site/components/ui/Icon.tsx"; + +interface MenuProps { + links: LinkProps[]; + label: string; +} + +interface LinkProps { + /**@title Rota */ + route: string; + /**@title Rota */ + label: string; +} + +export default function MenuInstitutionalMobile({ links, label }: MenuProps) { + const [navigation, setNavigation] = useState(false); + + return ( + + ); +} diff --git a/islands/ScrollButton.tsx b/islands/ScrollButton.tsx new file mode 100644 index 0000000..c2a1895 --- /dev/null +++ b/islands/ScrollButton.tsx @@ -0,0 +1,31 @@ +import { useState, useEffect } from "preact/hooks"; +import Icon from "site/components/ui/Icon.tsx"; + +export default function ScrollButton() { + const [isVisible, setisVisible] = useState(false) + + useEffect(() => { + const activateButton = () => { + if(window.scrollY > 375){ + setisVisible(true) + } else { + setisVisible(false) + } + } + + self.addEventListener('scroll', activateButton) + return () => removeEventListener('scroll', activateButton) + }, []) + + const scroll = () => { + window.scrollTo({top: 0, behavior: 'smooth'}) + } + + return( +
+ {isVisible && + + } +
+ ) +} \ No newline at end of file diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index 1a7f495..5bd977a 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -1,153 +1,158 @@ import Icon from "site/components/ui/Icon.tsx"; import { useState } from "preact/compat"; +import { zoom } from "site/islands/Map.tsx"; +import { ItemWithWhatsapp } from "site/sections/NossasLojas/types.ts"; interface StoreInfo { - distance: number, - name: string, - id: number, - address: { - postalCode: string, - city: string, - state: string, - neighborhood: string, - street: string, - number: number - location: { - latitude: number, - longitude: number - }, - }, - businessHours: { - dayOfWeek: string, - openingTime: number, - closingTime: number, - } - } + name: string; + id: string; + address: { + postalCode: string; + city: string; + state: string; + neighborhood: string; + street: string; + number: string; + location: { + latitude: number; + longitude: number; + }; + }; + businessHours: Array<{ + dayOfWeek: string; + openingTime: string; + closingTime: string; + }>; +} interface Stores { - stores: StoreInfo[] + stores: ItemWithWhatsapp[]; } const days = [ - "Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado" + "Domingo", + "Segunda-feira", + "Terça-feira", + "Quarta-feira", + "Quinta-feira", + "Sexta-feira", + "Sábado" ] -export default function FormsNossasLojas({ stores }: Stores){ - const [showFiltered, setShowFiltered] = useState(false) - const [queryInput, setQueryInput] = useState("") - const [filtered, setFiltered] = useState([]) - const [IsCicked, setIsClicked] = useState(null) +export default function FormsNossasLojas({ stores }: Stores) { + const [showFiltered, setShowFiltered] = useState(false); + const [queryInput, setQueryInput] = useState(""); + const [filtered, setFiltered] = useState([]); + const [IsCicked, setIsClicked] = useState(null); - const handleClick = (index: number) => { - setIsClicked(index) - } + const handleClick = (index: number) => { + setIsClicked(index); + }; - const handleFilter = () => { - const result = stores.filter((store) => { - return Object.values(store).some((value) => - value.toString().toLowerCase().includes(queryInput.toLowerCase()) - ) - } - ) - setShowFiltered(!showFiltered) - setFiltered(result) - } + const handleFilter = () => { + const result = stores.filter((store) => { + return Object.values(store).some((value) => + value.toString().toLowerCase().includes(queryInput.toLowerCase()) + ); + }); + setShowFiltered(!showFiltered); + setFiltered(result); + }; - return( -
-
-

Busque por cidade, CEP, endereço ou loja:

-
- ) => setQueryInput(e.currentTarget.value)} type="text" placeholder="Buscar"/> - -
-
-
- - {showFiltered ? ( - filtered?.map((store, index) => ( - <> -
handleClick(index)} key={index} class={`flex justify-between items-center w-[95%] h-[194px] border ${IsCicked === index ? "border-[#FF8300]": "border-[#F5F4F1]" } rounded-[8px] px-[10px] mb-[16px]`}> -
-
- -

{store.name}

-
-
-

{store.address.state}

-

{store.address.street}, {store.address.number} - {store.address.neighborhood}

-

CEP: {store.address.postalCode}

-
-
-

+55 0 0000-0000

- -
-
- -
-
-
-

Horários de funcionamento:

-
- {days.map((index) => ( -

{index}: - { - index == 'Domingo' ? `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` - : - `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` - } -

- )) - } -
-
+ const content = showFiltered ? filtered : stores + + return ( +
+
+

+ Busque por cidade, CEP, endereço ou loja: +

+
+ ) => + setQueryInput(e.currentTarget.value)} + type="text" + placeholder="Buscar" + /> + +
+
+
+ {content?.map((store, index) => ( + <> +
handleClick(index)} + key={index} + class={`flex mobile:flex-col mobile:justify-start justify-between items-left w-[95%] h-[194px] mobile:h-[403px] border ${ + IsCicked === index ? "border-[#FF8300]" : "border-[#F5F4F1]" + } rounded-[8px] px-[10px] mb-[16px]`} + > +
+
+ +

+ {store.name} +

+
+
+

{store.address.state}

+

+ {store.address.street}, {store.address.number} -{" "} + {store.address.neighborhood} +

+

CEP: {store.address.postalCode}

+
+
+

+ {store.whatsapp} +

+
-
- - ))) : ( - - stores.map((store, index) => ( - <> -
handleClick(index)} key={index} class={`flex justify-between items-center w-[95%] h-[194px] border ${IsCicked === index ? "border-[#FF8300]": "border-[#F5F4F1]" } rounded-[8px] px-[10px] mb-[16px]`}> -
-
- -

{store.name}

-
-
-

{store.address.state}

-

{store.address.street}, {store.address.number} - {store.address.neighborhood}

-

CEP: {store.address.postalCode}

-
-
-

+55 0 0000-0000

- -
-
- -
-
-
-

Horários de funcionamento:

-
- {days.map((index) => ( -

{index}: - { - index == 'Domingo' ? `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` - : - `${store.businessHours.openingTime}h às ${store.businessHours.closingTime}h` - } -

- )) - } -
-
+
+
-
- - )))} -
-
- ) -} \ No newline at end of file +
+
+

+ Horários de funcionamento: +

+
+ {store.businessHours.map((hour, index) => ( +

+ {days[hour.dayOfWeek]}: + `{hour.openingTime.slice(0, 5)}h às {hour.closingTime.slice(0, 5)}h` +

+ ))} +
+
+
+
+ + ))} +
+
+ ); +} diff --git a/manifest.gen.ts b/manifest.gen.ts index bce2b33..84c33d6 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -15,7 +15,7 @@ import * as $$$3 from "./loaders/minicart.ts"; import * as $$$4 from "./loaders/user.ts"; import * as $$$5 from "./loaders/wishlist.ts"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; -import * as $$$$$$1 from "./sections/Breadcrumb/Breadcrumb.tsx"; +import * as $$$$$$1 from "./sections/BreadcrumbInstitucional/Breadcrumb.tsx"; import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx"; import * as $$$$$$3 from "./sections/Category/CategoryGrid.tsx"; import * as $$$$$$4 from "./sections/Component.tsx"; @@ -30,21 +30,24 @@ import * as $$$$$$12 from "./sections/Images/Carousel.tsx"; import * as $$$$$$13 from "./sections/Images/ImageGallery.tsx"; import * as $$$$$$14 from "./sections/Images/ShoppableBanner.tsx"; import * as $$$$$$15 from "./sections/Links/LinkTree.tsx"; -import * as $$$$$$16 from "./sections/Miscellaneous/CampaignTimer.tsx"; -import * as $$$$$$17 from "./sections/Miscellaneous/CookieConsent.tsx"; -import * as $$$$$$18 from "./sections/Newsletter/Newsletter.tsx"; -import * as $$$$$$19 from "./sections/NossasLojas/NossasLojas.tsx"; -import * as $$$$$$20 from "./sections/NossasLojas/query.ts"; -import * as $$$$$$21 from "./sections/Product/ProductDetails.tsx"; -import * as $$$$$$22 from "./sections/Product/ProductShelf.tsx"; -import * as $$$$$$23 from "./sections/Product/ProductShelfTabbed.tsx"; -import * as $$$$$$24 from "./sections/Product/SearchResult.tsx"; -import * as $$$$$$25 from "./sections/Product/ShelfWithImage.tsx"; -import * as $$$$$$26 from "./sections/Product/Wishlist.tsx"; -import * as $$$$$$27 from "./sections/Session.tsx"; -import * as $$$$$$28 from "./sections/Social/InstagramPosts.tsx"; -import * as $$$$$$29 from "./sections/Social/WhatsApp.tsx"; -import * as $$$$$$30 from "./sections/Theme/Theme.tsx"; +import * as $$$$$$16 from "./sections/MenuInstitucional/MenuInstitucional.tsx"; +import * as $$$$$$17 from "./sections/Miscellaneous/CampaignTimer.tsx"; +import * as $$$$$$18 from "./sections/Miscellaneous/CookieConsent.tsx"; +import * as $$$$$$19 from "./sections/Newsletter/Newsletter.tsx"; +import * as $$$$$$20 from "./sections/NossasLojas/NossasLojas.tsx"; +import * as $$$$$$21 from "./sections/NossasLojas/query.ts"; +import * as $$$$$$22 from "./sections/NossasLojas/types.ts"; +import * as $$$$$$23 from "./sections/Policy/Policy.tsx"; +import * as $$$$$$24 from "./sections/Product/ProductDetails.tsx"; +import * as $$$$$$25 from "./sections/Product/ProductShelf.tsx"; +import * as $$$$$$26 from "./sections/Product/ProductShelfTabbed.tsx"; +import * as $$$$$$27 from "./sections/Product/SearchResult.tsx"; +import * as $$$$$$28 from "./sections/Product/ShelfWithImage.tsx"; +import * as $$$$$$29 from "./sections/Product/Wishlist.tsx"; +import * as $$$$$$30 from "./sections/Session.tsx"; +import * as $$$$$$31 from "./sections/Social/InstagramPosts.tsx"; +import * as $$$$$$32 from "./sections/Social/WhatsApp.tsx"; +import * as $$$$$$33 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { @@ -57,7 +60,7 @@ const manifest = { }, "sections": { "site/sections/Animation/Animation.tsx": $$$$$$0, - "site/sections/Breadcrumb/Breadcrumb.tsx": $$$$$$1, + "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx": $$$$$$1, "site/sections/Category/CategoryBanner.tsx": $$$$$$2, "site/sections/Category/CategoryGrid.tsx": $$$$$$3, "site/sections/Component.tsx": $$$$$$4, @@ -72,21 +75,24 @@ const manifest = { "site/sections/Images/ImageGallery.tsx": $$$$$$13, "site/sections/Images/ShoppableBanner.tsx": $$$$$$14, "site/sections/Links/LinkTree.tsx": $$$$$$15, - "site/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$16, - "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$17, - "site/sections/Newsletter/Newsletter.tsx": $$$$$$18, - "site/sections/NossasLojas/NossasLojas.tsx": $$$$$$19, - "site/sections/NossasLojas/query.ts": $$$$$$20, - "site/sections/Product/ProductDetails.tsx": $$$$$$21, - "site/sections/Product/ProductShelf.tsx": $$$$$$22, - "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$23, - "site/sections/Product/SearchResult.tsx": $$$$$$24, - "site/sections/Product/ShelfWithImage.tsx": $$$$$$25, - "site/sections/Product/Wishlist.tsx": $$$$$$26, - "site/sections/Session.tsx": $$$$$$27, - "site/sections/Social/InstagramPosts.tsx": $$$$$$28, - "site/sections/Social/WhatsApp.tsx": $$$$$$29, - "site/sections/Theme/Theme.tsx": $$$$$$30, + "site/sections/MenuInstitucional/MenuInstitucional.tsx": $$$$$$16, + "site/sections/Miscellaneous/CampaignTimer.tsx": $$$$$$17, + "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$18, + "site/sections/Newsletter/Newsletter.tsx": $$$$$$19, + "site/sections/NossasLojas/NossasLojas.tsx": $$$$$$20, + "site/sections/NossasLojas/query.ts": $$$$$$21, + "site/sections/NossasLojas/types.ts": $$$$$$22, + "site/sections/Policy/Policy.tsx": $$$$$$23, + "site/sections/Product/ProductDetails.tsx": $$$$$$24, + "site/sections/Product/ProductShelf.tsx": $$$$$$25, + "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$26, + "site/sections/Product/SearchResult.tsx": $$$$$$27, + "site/sections/Product/ShelfWithImage.tsx": $$$$$$28, + "site/sections/Product/Wishlist.tsx": $$$$$$29, + "site/sections/Session.tsx": $$$$$$30, + "site/sections/Social/InstagramPosts.tsx": $$$$$$31, + "site/sections/Social/WhatsApp.tsx": $$$$$$32, + "site/sections/Theme/Theme.tsx": $$$$$$33, }, "actions": { "site/actions/minicart/submit.ts": $$$$$$$$$0, diff --git a/sections/Breadcrumb/Breadcrumb.tsx b/sections/Breadcrumb/Breadcrumb.tsx deleted file mode 100644 index 2141cb5..0000000 --- a/sections/Breadcrumb/Breadcrumb.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Icon from "site/components/ui/Icon.tsx"; - -/**@title Breadcrumb */ -interface BreadcrumbProps { - /**@title Raiz*/ - root: string; - /**@title Rota */ - route: string; -} - -export default function Breadcrumb({ root, route }: BreadcrumbProps) { - return( -
- - -

{root} | {route}

- -
- ) -} \ No newline at end of file diff --git a/sections/BreadcrumbInstitucional/Breadcrumb.tsx b/sections/BreadcrumbInstitucional/Breadcrumb.tsx new file mode 100644 index 0000000..a6c6df0 --- /dev/null +++ b/sections/BreadcrumbInstitucional/Breadcrumb.tsx @@ -0,0 +1,40 @@ +import Icon from "site/components/ui/Icon.tsx"; + +interface BreadcrumbProps { + /**@title Raiz*/ + root: string; + /**@title Habilitar Caminho */ + showText: boolean; + /**@title Caminho */ + path?: string; + /**@title Rota Final */ + route: string; +} + +export default function Breadcrumb( + { root, showText, path, route }: BreadcrumbProps, +) { + return ( +
+ + +
+ + {root} + + {showText && + ( + <> +

|

+

+ {path} +

+ + )} +

|

+

{route}

+
+ +
+ ); +} diff --git a/sections/Component.tsx b/sections/Component.tsx index 6cda691..3bc407e 100644 --- a/sections/Component.tsx +++ b/sections/Component.tsx @@ -1,9 +1,9 @@ // deno-lint-ignore-file no-explicit-any +import { type SectionProps } from "@deco/deco"; +import { useSection } from "@deco/deco/hooks"; import { Component, type ComponentType } from "preact"; import { toFileUrl } from "std/path/mod.ts"; import type { AppContext } from "../apps/site.ts"; -import { useSection } from "@deco/deco/hooks"; -import { type SectionProps } from "@deco/deco"; interface Props { component: string; props?: Record; diff --git a/sections/MenuInstitucional/MenuInstitucional.tsx b/sections/MenuInstitucional/MenuInstitucional.tsx new file mode 100644 index 0000000..dcda91d --- /dev/null +++ b/sections/MenuInstitucional/MenuInstitucional.tsx @@ -0,0 +1,99 @@ +import Icon from "site/components/ui/Icon.tsx"; +import MenuInstitutionalMobile from "site/islands/MenuInstitutionalMobile.tsx"; + +/**@title Menu */ +interface MenuProps { + /**@title Menu Institucional*/ + institutionalTitle: string; + /**@title Menu Suporte*/ + supportTitle: string; + /**@title Rotas institucionais*/ + institutionalLinks: LinkProps[]; + /**@title Rotas suporte*/ + supportLinks: LinkProps[]; + /**@title Menu Mobile*/ + links: LinkProps[] +} + +/**@title Rota: {{ label }}*/ +interface LinkProps { + /**@title Rota*/ + route: string; + /**@title Etiqueta*/ + label: string; +} + +export const loader = (menu: MenuProps, req: Request) => { + const currentPath = new URL(req.url).pathname; + const matchingLink = menu.links?.find((link) => link.route === currentPath) + return { + ...menu, + currentPath, + label: matchingLink ? matchingLink.label : "Menu", + }; +}; + +export default function MenuInstitucional( + { + institutionalTitle, + supportTitle, + institutionalLinks, + supportLinks, + currentPath, + label, + links, + }: ReturnType, +) { + + return ( + <> + +
+
+
+

{institutionalTitle}

+
+
+ {institutionalLinks?.map(({ route, label }, index) => ( +
  • + + {label} + + +
    • + ))} +
    +
    +
    +
    +
    +

    {supportTitle}

    +
    +
    + {supportLinks?.map(({ route, label }, index) => ( +
  • + + {label} + +
    • + ))} +
    +
    +
    + + ); +} + diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx index bde41e5..eb0fe12 100644 --- a/sections/NossasLojas/NossasLojas.tsx +++ b/sections/NossasLojas/NossasLojas.tsx @@ -6,6 +6,7 @@ import FormsNossasLojas from "site/islands/formsNossasLojas.tsx"; import { AppContext } from "site/apps/deco/vtex.ts"; import { query } from "site/sections/NossasLojas/query.ts"; +import { Data } from "./types.ts" /**@title Conteúdo*/ interface NossasLojasProps { @@ -22,17 +23,39 @@ interface ContentProps { apiKey: Secret; } +interface MasterDataResponse { + store_id: string, + whatsapp: string, +} + export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx: AppContext){ + try { + const masterdataStoreNumbers = await ctx.invoke.vtex.loaders.masterdata.searchDocuments({ + acronym: "SM", + fields:"store_id,whatsapp", + where: "store_id is not null" + }) + } catch(e){ + console.log(e) + } + + const masterdataStoreNumbers = [] const { io } = await ctx.invoke.vtex.loaders.config() - // deno-lint-ignore no-explicit-any - const response = await io.query({ + + const response = await io.query({ variables: {}, query: query }) - console.log(response) - const stores = response.getStores.items + + const stores = response.getStores.items.map(item => { + const storeNumber = masterdataStoreNumbers.find(storeNumber => storeNumber.store_id === item.id) + return { + ...item, + whatsapp: storeNumber?.whatsapp + } + }) return { items, apiKey, stores } @@ -40,18 +63,18 @@ export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx export default function NossasLojas({ items, apiKey, stores }: Awaited>) { return ( -
    -
    +
    +
    {items.map((content, index) => (
    -

    {content.title}

    +

    {content.title}

    ))}
    - +
    ); diff --git a/sections/NossasLojas/query.ts b/sections/NossasLojas/query.ts index b73c484..66f53fc 100644 --- a/sections/NossasLojas/query.ts +++ b/sections/NossasLojas/query.ts @@ -26,4 +26,4 @@ query getStores($latitude: Float, $longitude: Float, $filterByTag: String) { } } } - ` \ No newline at end of file + `; \ No newline at end of file diff --git a/sections/NossasLojas/types.ts b/sections/NossasLojas/types.ts new file mode 100644 index 0000000..87afc22 --- /dev/null +++ b/sections/NossasLojas/types.ts @@ -0,0 +1,53 @@ + + + export interface Data { + getStores: GetStores + } + + export interface GetStores { + items: Item[] + __typename: string + } + + export interface Item { + distance: number + name: string + instructions: string + id: string + isActive: boolean + address: Address + pickupHolidays: any[] + businessHours: BusinessHour[] + __typename: string + } + + export interface ItemWithWhatsapp extends Item { + whatsapp: string | undefined + } + + export interface Address { + postalCode: string + country: any + city: string + state: string + neighborhood?: string + street: string + number?: string + complement: string + reference: string + location: Location + __typename: string + } + + export interface Location { + latitude: number + longitude: number + __typename: string + } + + export interface BusinessHour { + dayOfWeek: number + openingTime: string + closingTime: string + __typename: string + } \ No newline at end of file diff --git a/sections/Policy/Policy.tsx b/sections/Policy/Policy.tsx new file mode 100644 index 0000000..6d0a080 --- /dev/null +++ b/sections/Policy/Policy.tsx @@ -0,0 +1,41 @@ +import type { RichText } from "apps/admin/widgets.ts"; +import { Section } from "@deco/deco/blocks"; + +/**@title {{ title }}*/ +interface PolicyProps { + /**@title Título*/ + title: string; + + /**@title Subtítulo */ + subtitle?: string; + + /**@title Texto */ + paragraph: RichText; +} + +interface ItemsProps { + items: PolicyProps[]; + + Menu: Section +} + +export default function Policy({ items, Menu: { Component: MenuInstitucional, props } }: ItemsProps) { + return ( +
    + +
    + {items.map((content, index) => ( +
    +
    +

    {content.title}

    +

    {content.subtitle}

    +
    +
    +

    +

    +
    + ))} +
    +
    + ); +} diff --git a/static/sprites.svg b/static/sprites.svg index 5db857a..6d77724 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -5,6 +5,8 @@ + + @@ -31,6 +33,9 @@ + + + diff --git a/static/tailwind.css b/static/tailwind.css index 75bb989..23039ca 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -3733,6 +3733,9 @@ details.collapse summary::-webkit-details-marker { .right-\[14px\] { right: 14px; } +.right-\[40px\] { + right: 40px; +} .right-\[85px\] { right: 85px; } @@ -3769,6 +3772,9 @@ details.collapse summary::-webkit-details-marker { .top-\[70px\] { top: 70px; } +.top-\[80\%\] { + top: 80%; +} .z-0 { z-index: 0; } @@ -3869,6 +3875,10 @@ details.collapse summary::-webkit-details-marker { margin-top: 2rem; margin-bottom: 2rem; } +.my-\[20px\] { + margin-top: 20px; + margin-bottom: 20px; +} .-mt-12 { margin-top: -3rem; } @@ -3911,6 +3921,9 @@ details.collapse summary::-webkit-details-marker { .mb-\[17px\] { margin-bottom: 17px; } +.mb-\[20px\] { + margin-bottom: 20px; +} .mb-\[40px\] { margin-bottom: 40px; } @@ -3926,6 +3939,9 @@ details.collapse summary::-webkit-details-marker { .ml-\[4px\] { margin-left: 4px; } +.ml-\[8px\] { + margin-left: 8px; +} .mr-2 { margin-right: 0.5rem; } @@ -3935,8 +3951,11 @@ details.collapse summary::-webkit-details-marker { .mr-6 { margin-right: 1.5rem; } -.mr-\[40px\] { - margin-right: 40px; +.mr-\[10px\] { + margin-right: 10px; +} +.mr-\[8px\] { + margin-right: 8px; } .mt-10 { margin-top: 2.5rem; @@ -3956,6 +3975,12 @@ details.collapse summary::-webkit-details-marker { .mt-8 { margin-top: 2rem; } +.mt-\[-20px\] { + margin-top: -20px; +} +.mt-\[0px\] { + margin-top: 0px; +} .mt-\[10px\] { margin-top: 10px; } @@ -3968,6 +3993,9 @@ details.collapse summary::-webkit-details-marker { .mt-\[30px\] { margin-top: 30px; } +.mt-\[44px\] { + margin-top: 44px; +} .mt-\[5px\] { margin-top: 5px; } @@ -4061,6 +4089,9 @@ details.collapse summary::-webkit-details-marker { .h-\[194px\] { height: 194px; } +.h-\[1px\] { + height: 1px; +} .h-\[210px\] { height: 210px; } @@ -4076,6 +4107,9 @@ details.collapse summary::-webkit-details-marker { .h-\[3px\] { height: 3px; } +.h-\[40px\] { + height: 40px; +} .h-\[44px\] { height: 44px; } @@ -4213,8 +4247,8 @@ details.collapse summary::-webkit-details-marker { .w-\[18px\] { width: 18px; } -.w-\[20\%\] { - width: 20%; +.w-\[197px\] { + width: 197px; } .w-\[221px\] { width: 221px; @@ -4255,6 +4289,9 @@ details.collapse summary::-webkit-details-marker { .w-\[400px\] { width: 400px; } +.w-\[40px\] { + width: 40px; +} .w-\[4px\] { width: 4px; } @@ -4483,6 +4520,9 @@ details.collapse summary::-webkit-details-marker { .list-disc { list-style-type: disc; } +.list-none { + list-style-type: none; +} .auto-cols-max { grid-auto-columns: max-content; } @@ -4704,6 +4744,15 @@ details.collapse summary::-webkit-details-marker { .rounded-\[3px\] { border-radius: 3px; } +.rounded-\[4px\] { + border-radius: 4px; +} +.rounded-\[50\%\] { + border-radius: 50%; +} +.rounded-\[5px\] { + border-radius: 5px; +} .rounded-\[6px\] { border-radius: 6px; } @@ -4731,6 +4780,10 @@ details.collapse summary::-webkit-details-marker { .rounded-none { border-radius: 0px; } +.rounded-b-\[5px\] { + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; +} .rounded-l { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; @@ -4779,6 +4832,12 @@ details.collapse summary::-webkit-details-marker { .border-b-\[1px\] { border-bottom-width: 1px; } +.border-l { + border-left-width: 1px; +} +.border-r { + border-right-width: 1px; +} .border-t { border-top-width: 1px; } @@ -4863,10 +4922,18 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(201 207 207 / var(--tw-bg-opacity)); } +.bg-\[\#D6DE23\] { + --tw-bg-opacity: 1; + background-color: rgb(214 222 35 / var(--tw-bg-opacity)); +} .bg-\[\#F6F6F6\] { --tw-bg-opacity: 1; background-color: rgb(246 246 246 / var(--tw-bg-opacity)); } +.bg-\[\#F7E0BF\] { + --tw-bg-opacity: 1; + background-color: rgb(247 224 191 / var(--tw-bg-opacity)); +} .bg-\[\#FDF6ED\] { --tw-bg-opacity: 1; background-color: rgb(253 246 237 / var(--tw-bg-opacity)); @@ -4875,6 +4942,10 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(255 131 0 / var(--tw-bg-opacity)); } +.bg-\[\#FFFFFF\] { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); +} .bg-\[\#f5f4f1\] { --tw-bg-opacity: 1; background-color: rgb(245 244 241 / var(--tw-bg-opacity)); @@ -5002,6 +5073,9 @@ details.collapse summary::-webkit-details-marker { .p-\[10px\] { padding: 10px; } +.p-\[8px\] { + padding: 8px; +} .px-0 { padding-left: 0px; padding-right: 0px; @@ -5090,6 +5164,10 @@ details.collapse summary::-webkit-details-marker { padding-top: 10px; padding-bottom: 10px; } +.py-\[13px\] { + padding-top: 13px; + padding-bottom: 13px; +} .py-\[14px\] { padding-top: 14px; padding-bottom: 14px; @@ -5294,6 +5372,9 @@ details.collapse summary::-webkit-details-marker { .text-\[18px\] { font-size: 18px; } +.text-\[20px\] { + font-size: 20px; +} .text-\[24px\] { font-size: 24px; } @@ -5375,9 +5456,6 @@ details.collapse summary::-webkit-details-marker { .uppercase { text-transform: uppercase; } -.lowercase { - text-transform: lowercase; -} .capitalize { text-transform: capitalize; } @@ -5457,6 +5535,10 @@ details.collapse summary::-webkit-details-marker { .text-\[\#1e1e1e99\] { color: #1e1e1e99; } +.text-\[\#353535\] { + --tw-text-opacity: 1; + color: rgb(53 53 53 / var(--tw-text-opacity)); +} .text-\[\#616B6B\] { --tw-text-opacity: 1; color: rgb(97 107 107 / var(--tw-text-opacity)); @@ -5876,6 +5958,9 @@ details.collapse summary::-webkit-details-marker { .first\:mt-1:first-child { margin-top: 0.25rem; } +.first\:mt-\[10px\]:first-child { + margin-top: 10px; +} .first\:pl-5:first-child { padding-left: 1.25rem; } @@ -6073,22 +6158,74 @@ details.collapse summary::-webkit-details-marker { } @media (max-width: 1023px) { + .mobile\:mb-\[45px\] { + margin-bottom: 45px; + } + + .mobile\:ml-0 { + margin-left: 0px; + } + + .mobile\:mt-\[10px\] { + margin-top: 10px; + } + + .mobile\:mt-\[20px\] { + margin-top: 20px; + } + + .mobile\:flex { + display: flex; + } + + .mobile\:hidden { + display: none; + } + + .mobile\:h-\[305px\] { + height: 305px; + } + + .mobile\:h-\[403px\] { + height: 403px; + } + .mobile\:w-full { width: 100%; } + .mobile\:flex-col { + flex-direction: column; + } + .mobile\:flex-col-reverse { flex-direction: column-reverse; } + .mobile\:justify-start { + justify-content: flex-start; + } + .mobile\:px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } + .mobile\:pr-0 { + padding-right: 0px; + } + .mobile\:text-center { text-align: center; } + + .mobile\:text-\[14px\] { + font-size: 14px; + } + + .mobile\:text-\[32px\] { + font-size: 32px; + } } @media (min-width: 1024px) { From ff79a168dac3dfb4dff7796b741151ac4d278934 Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Fri, 29 Nov 2024 15:43:21 -0300 Subject: [PATCH 6/9] ajuste no loader de nossas lojas --- loaders/searchDocuments.ts | 69 ++++++++++++++++++++++++++++ manifest.gen.ts | 10 ++-- sections/NossasLojas/NossasLojas.tsx | 17 +++---- sections/NossasLojas/types.ts | 1 + 4 files changed, 83 insertions(+), 14 deletions(-) create mode 100644 loaders/searchDocuments.ts diff --git a/loaders/searchDocuments.ts b/loaders/searchDocuments.ts new file mode 100644 index 0000000..07db3be --- /dev/null +++ b/loaders/searchDocuments.ts @@ -0,0 +1,69 @@ +import { AppContext } from "site/apps/site.ts"; +import { resourceRange } from "apps/vtex/utils/resourceRange.ts"; +import type { Document } from "apps/vtex/utils/types.ts"; +import { parseCookie } from "apps/vtex/utils/vtexId.ts"; + +interface Props { + /** + * @description Two-letter string that identifies the data entity. + */ + acronym: string; + /** + * @description Names of the fields that will be returned per document, separated by a comma ,. It is possible to fetch all fields using _all as the value of this query parameter. However, in order to avoid permission errors, we strongly recommend informing only the names of the exact fields that will be used. + */ + fields?: string; + /** + * @description Specification of filters. + */ + where?: string; + /** + * @description Inform a field name plus ASC to sort results by this field value in ascending order or DESC to sort by descending order. + */ + sort?: string; + /** + * @description Number of documents to be returned. + * @default 10 + * @maxValue 100 + * @minValue 1 + */ + take?: number; + /** + * @description Skip how many documents + * @default 0 + * @maxValue 100 + * @minValue 0 + */ + skip?: number; +} + +/** + * @title Search documents - VTEX + * @docs https://developers.vtex.com/docs/api-reference/masterdata-api#get-/api/dataentities/-acronym-/search + */ +export default async function loader( + props: Props, + req: Request, + ctx: AppContext, +): Promise { + // @deno-ignore + const { vcs } = await ctx.invoke.vtex.loaders.config(); + const { acronym, fields, where, sort, skip = 0, take = 10 } = props; + const { cookie } = parseCookie(req.headers, "alphabeto"); + const limits = resourceRange(skip, take); + + const documents = await vcs["GET /api/dataentities/:acronym/search"]({ + acronym, + _fields: fields, + _where: where, + _sort: sort, + }, { + headers: { + accept: "application/vnd.vtex.ds.v10+json", + "content-type": "application/json", + //cookie, + "REST-Range": `resources=${limits.from}-${limits.to}`, + }, + }).then((response) => response.json()); + + return documents; +} diff --git a/manifest.gen.ts b/manifest.gen.ts index 84c33d6..c638c5b 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -12,8 +12,9 @@ import * as $$$0 from "./loaders/availableIcons.ts"; import * as $$$1 from "./loaders/geolocation.ts"; import * as $$$2 from "./loaders/icons.ts"; import * as $$$3 from "./loaders/minicart.ts"; -import * as $$$4 from "./loaders/user.ts"; -import * as $$$5 from "./loaders/wishlist.ts"; +import * as $$$4 from "./loaders/searchDocuments.ts"; +import * as $$$5 from "./loaders/user.ts"; +import * as $$$6 from "./loaders/wishlist.ts"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; import * as $$$$$$1 from "./sections/BreadcrumbInstitucional/Breadcrumb.tsx"; import * as $$$$$$2 from "./sections/Category/CategoryBanner.tsx"; @@ -55,8 +56,9 @@ const manifest = { "site/loaders/geolocation.ts": $$$1, "site/loaders/icons.ts": $$$2, "site/loaders/minicart.ts": $$$3, - "site/loaders/user.ts": $$$4, - "site/loaders/wishlist.ts": $$$5, + "site/loaders/searchDocuments.ts": $$$4, + "site/loaders/user.ts": $$$5, + "site/loaders/wishlist.ts": $$$6, }, "sections": { "site/sections/Animation/Animation.tsx": $$$$$$0, diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx index eb0fe12..fb32fe4 100644 --- a/sections/NossasLojas/NossasLojas.tsx +++ b/sections/NossasLojas/NossasLojas.tsx @@ -1,3 +1,4 @@ +// deno-lint-ignore-file import { Secret } from "apps/website/loaders/secret.ts"; import { type RichText } from "apps/admin/widgets.ts"; @@ -30,17 +31,13 @@ interface MasterDataResponse { export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx: AppContext){ - try { - const masterdataStoreNumbers = await ctx.invoke.vtex.loaders.masterdata.searchDocuments({ - acronym: "SM", - fields:"store_id,whatsapp", - where: "store_id is not null" - }) - } catch(e){ - console.log(e) - } + // @deno-ignore + const masterdataStoreNumbers = await ctx.invoke.site.loaders.searchDocuments({ + acronym: "SM", + fields:"store_id,whatsapp", + where: "active=true" + }) as unknown as MasterDataResponse[] - const masterdataStoreNumbers = [] const { io } = await ctx.invoke.vtex.loaders.config() const response = await io.query({ diff --git a/sections/NossasLojas/types.ts b/sections/NossasLojas/types.ts index 87afc22..55742f4 100644 --- a/sections/NossasLojas/types.ts +++ b/sections/NossasLojas/types.ts @@ -1,3 +1,4 @@ +// deno-lint-ignore-file export interface Data { From 6e9da6646ee4c04f7a1ce58375d39065dd87bfed Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Tue, 10 Dec 2024 11:01:32 -0300 Subject: [PATCH 7/9] feat: renderizacao das informacoes do master data --- .../blocks/pages-Nossas%2520Lojas-998808.json | 13 +- islands/formsNossasLojas.tsx | 8 +- loaders/searchDocuments.ts | 126 ++++++++++-------- sections/NossasLojas/NossasLojas.tsx | 4 +- static/tailwind.css | 10 +- 5 files changed, 88 insertions(+), 73 deletions(-) diff --git a/.deco/blocks/pages-Nossas%2520Lojas-998808.json b/.deco/blocks/pages-Nossas%2520Lojas-998808.json index d4eea48..bf24dbd 100644 --- a/.deco/blocks/pages-Nossas%2520Lojas-998808.json +++ b/.deco/blocks/pages-Nossas%2520Lojas-998808.json @@ -9,14 +9,11 @@ } }, { - "__resolveType": "website/sections/Rendering/Lazy.tsx", - "section": { - "__resolveType": "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx", - "root": "HOME", - "path": "Ajuda", - "showText": false, - "route": "Nossas Lojas" - } + "__resolveType": "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx", + "root": "HOME", + "path": "Ajuda", + "showText": false, + "route": "Nossas Lojas" }, { "__resolveType": "site/sections/NossasLojas/NossasLojas.tsx", diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index 5bd977a..b4f2b66 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -103,7 +103,7 @@ export default function FormsNossasLojas({ stores }: Stores) { {store.name}

    -
    +

    {store.address.state}

    {store.address.street}, {store.address.number} -{" "} @@ -111,12 +111,12 @@ export default function FormsNossasLojas({ stores }: Stores) {

    CEP: {store.address.postalCode}

    -
    +

    {store.whatsapp}

    -
    diff --git a/loaders/searchDocuments.ts b/loaders/searchDocuments.ts index 07db3be..8fe77a9 100644 --- a/loaders/searchDocuments.ts +++ b/loaders/searchDocuments.ts @@ -1,69 +1,81 @@ -import { AppContext } from "site/apps/site.ts"; -import { resourceRange } from "apps/vtex/utils/resourceRange.ts"; +import { AppContext } from "site/apps/deco/vtex.ts"; import type { Document } from "apps/vtex/utils/types.ts"; -import { parseCookie } from "apps/vtex/utils/vtexId.ts"; - interface Props { - /** - * @description Two-letter string that identifies the data entity. - */ - acronym: string; - /** - * @description Names of the fields that will be returned per document, separated by a comma ,. It is possible to fetch all fields using _all as the value of this query parameter. However, in order to avoid permission errors, we strongly recommend informing only the names of the exact fields that will be used. - */ - fields?: string; - /** - * @description Specification of filters. - */ - where?: string; - /** - * @description Inform a field name plus ASC to sort results by this field value in ascending order or DESC to sort by descending order. - */ - sort?: string; - /** - * @description Number of documents to be returned. - * @default 10 - * @maxValue 100 - * @minValue 1 - */ - take?: number; - /** - * @description Skip how many documents - * @default 0 - * @maxValue 100 - * @minValue 0 - */ - skip?: number; + /** + * @description Two-letter string that identifies the data entity. + */ + acronym: string; + /** + * @description Names of the fields that will be returned per document, separated by a comma ,. It is possible to fetch all fields using _all as the value of this query parameter. However, in order to avoid permission errors, we strongly recommend informing only the names of the exact fields that will be used. + */ + fields?: string; + /** + * @description Specification of filters. + */ + where?: string; + /** + * @description Inform a field name plus ASC to sort results by this field value in ascending order or DESC to sort by descending order. + */ + sort?: string; + /** + * @description Number of documents to be returned. + * @default 10 + * @maxValue 100 + * @minValue 1 + */ + take?: number; + /** + * @description Skip how many documents + * @default 0 + * @maxValue 100 + * @minValue 0 + */ + skip?: number; +} + +export function resourceRange( + skip: number, + take: number, +) { + const from = Math.max(skip, 0); + const to = from + take; + + return { + from, + to, + }; } + /** * @title Search documents - VTEX * @docs https://developers.vtex.com/docs/api-reference/masterdata-api#get-/api/dataentities/-acronym-/search */ export default async function loader( - props: Props, - req: Request, - ctx: AppContext, + props: Props, + _req: Request, + _ctx: AppContext, ): Promise { - // @deno-ignore - const { vcs } = await ctx.invoke.vtex.loaders.config(); - const { acronym, fields, where, sort, skip = 0, take = 10 } = props; - const { cookie } = parseCookie(req.headers, "alphabeto"); - const limits = resourceRange(skip, take); + const { acronym, fields, where, sort, skip = 0, take = 10 } = props; + const limits = resourceRange(skip, take); - const documents = await vcs["GET /api/dataentities/:acronym/search"]({ - acronym, - _fields: fields, - _where: where, - _sort: sort, - }, { - headers: { - accept: "application/vnd.vtex.ds.v10+json", - "content-type": "application/json", - //cookie, - "REST-Range": `resources=${limits.from}-${limits.to}`, - }, - }).then((response) => response.json()); + const url = new URL( + `https://alphabeto.vtexcommercestable.com.br/api/dataentities/${acronym}/search`, + ); + if (fields) url.searchParams.append("_fields", fields); + if (where) url.searchParams.append("_where", where); + if (sort) url.searchParams.append("_sort", sort); - return documents; -} + const documents = await fetch( + url.href, + { + headers: { + accept: "application/vnd.vtex.ds.v10+json", + "content-type": "application/json", + "REST-Range": `resources=${limits.from}-${limits.to}`, + }, + }, + ).then((res) => res.json()); + + return documents; +} \ No newline at end of file diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx index fb32fe4..71a96c0 100644 --- a/sections/NossasLojas/NossasLojas.tsx +++ b/sections/NossasLojas/NossasLojas.tsx @@ -35,7 +35,7 @@ export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx const masterdataStoreNumbers = await ctx.invoke.site.loaders.searchDocuments({ acronym: "SM", fields:"store_id,whatsapp", - where: "active=true" + take: 500, }) as unknown as MasterDataResponse[] const { io } = await ctx.invoke.vtex.loaders.config() @@ -64,7 +64,7 @@ export default function NossasLojas({ items, apiKey, stores }: Awaited {items.map((content, index) => (
    -

    {content.title}

    +

    {content.title}

    ))} diff --git a/static/tailwind.css b/static/tailwind.css index 23039ca..603110f 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -3951,8 +3951,11 @@ details.collapse summary::-webkit-details-marker { .mr-6 { margin-right: 1.5rem; } -.mr-\[10px\] { - margin-right: 10px; +.mr-\[24px\] { + margin-right: 24px; +} +.mr-\[4px\] { + margin-right: 4px; } .mr-\[8px\] { margin-right: 8px; @@ -4256,6 +4259,9 @@ details.collapse summary::-webkit-details-marker { .w-\[243px\] { width: 243px; } +.w-\[266px\] { + width: 266px; +} .w-\[287px\] { width: 287px; } From 42acb97df6695c032cef8f8f69cc87939e10c48b Mon Sep 17 00:00:00 2001 From: Felipe Campos Date: Tue, 10 Dec 2024 12:58:09 -0300 Subject: [PATCH 8/9] fix: pontos de pr resolvidos --- islands/formsNossasLojas.tsx | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx index b4f2b66..847a5cd 100644 --- a/islands/formsNossasLojas.tsx +++ b/islands/formsNossasLojas.tsx @@ -41,13 +41,12 @@ const days = [ ] export default function FormsNossasLojas({ stores }: Stores) { - const [showFiltered, setShowFiltered] = useState(false); const [queryInput, setQueryInput] = useState(""); const [filtered, setFiltered] = useState([]); - const [IsCicked, setIsClicked] = useState(null); + const [selectedIndex, setSelectedIndex] = useState(null); - const handleClick = (index: number) => { - setIsClicked(index); + const handleClick = (id: string) => { + setSelectedIndex(id); }; const handleFilter = () => { @@ -56,11 +55,10 @@ export default function FormsNossasLojas({ stores }: Stores) { value.toString().toLowerCase().includes(queryInput.toLowerCase()) ); }); - setShowFiltered(!showFiltered); setFiltered(result); }; - const content = showFiltered ? filtered : stores + const content = filtered.length === 0 ? stores : filtered return (
    @@ -68,7 +66,11 @@ export default function FormsNossasLojas({ stores }: Stores) {

    Busque por cidade, CEP, endereço ou loja:

    -
    + { + e.preventDefault(); + handleFilter() + }}>
    +