Merge pull request #9 from deco-sites/feature/29771/notfound

Feature/29771/notfound

.deco/blocks/pages-Category%2520Page-69217.json

@@ -56,7 +56,38 @@
           "variant": "aside",
           "pagination": "show-more"
         },
-        "startingPage": 1
+        "startingPage": 1,
+        "productShelf": {
+          "__resolveType": "site/sections/Product/ProductShelf.tsx",
+          "products": {
+            "__resolveType": "wake/loaders/productList.ts",
+            "first": 12,
+            "sortDirection": "ASC",
+            "sortKey": "DISCOUNT",
+            "filters": {
+              "attributes": {
+                "id": [],
+                "name": [],
+                "type": [],
+                "value": []
+              },
+              "brandId": [],
+              "categoryId": [],
+              "ean": [],
+              "productId": [],
+              "productVariantId": [],
+              "sameParentAs": [],
+              "sku": [],
+              "stocks": {
+                "dcId": [],
+                "dcName": []
+              },
+              "prices": {}
+            }
+          },
+          "title": "Veja por Lançamentos",
+          "cta": "VER TODOS"
+        }
       }
     },
     {

.deco/blocks/pages-My%2520New%2520Page-506121.json

@@ -122,7 +122,7 @@
     {
       "__resolveType": "website/sections/Rendering/Lazy.tsx",
       "section": {
-        "__resolveType": "site/sections/Footer/Footer.tsx"
+        "__resolveType": "Footer"
       }
     }
   ],

.deco/blocks/pages-Search%2520Page-514254.json

@@ -42,14 +42,50 @@
       }
     },
     {
-      "__resolveType": "website/sections/Rendering/Lazy.tsx",
-      "section": {
-        "__resolveType": "site/sections/Product/SearchResult.tsx",
-        "page": {
-          "__resolveType": "wake/loaders/productListingPage.ts",
-          "limit": 12,
-          "operation": "AND",
-          "sort": "NAME:ASC",
+      "__resolveType": "site/sections/Product/SearchResult.tsx",
+      "page": {
+        "__resolveType": "wake/loaders/productListingPage.ts",
+        "limit": 12,
+        "operation": "AND",
+        "sort": "NAME:ASC",
+        "filters": {
+          "attributes": {
+            "id": [],
+            "name": [],
+            "type": [],
+            "value": []
+          },
+          "brandId": [],
+          "categoryId": [],
+          "ean": [],
+          "productId": [],
+          "productVariantId": [],
+          "sameParentAs": [],
+          "sku": [],
+          "stocks": {
+            "dcId": [],
+            "dcName": []
+          },
+          "prices": {}
+        },
+        "pageOffset": 0
+      },
+      "layout": {
+        "columns": {
+          "mobile": 2,
+          "desktop": 4
+        },
+        "variant": "aside",
+        "pagination": "show-more"
+      },
+      "startingPage": 1,
+      "productShelf": {
+        "__resolveType": "site/sections/Product/ProductShelf.tsx",
+        "products": {
+          "__resolveType": "wake/loaders/productList.ts",
+          "first": 12,
+          "sortDirection": "ASC",
+          "sortKey": "DISCOUNT",
           "filters": {
             "attributes": {
               "id": [],
@@ -69,18 +105,10 @@
               "dcName": []
             },
             "prices": {}
-          },
-          "pageOffset": 0
-        },
-        "layout": {
-          "columns": {
-            "mobile": 2,
-            "desktop": 4
-          },
-          "variant": "aside",
-          "pagination": "show-more"
+          }
         },
-        "startingPage": 1
+        "title": "Veja os lançamentos",
+        "cta": "VER TODOS"
       }
     },
     {

.deco/blocks/pages-home-c4bcbfb771e9.json

@@ -858,7 +858,9 @@
     {
       "__resolveType": "website/sections/Rendering/Lazy.tsx",
       "section": {
-        "__resolveType": "site/sections/LGPD/PopupLGPD.tsx"
+        "__resolveType": "site/sections/LGPD/PopupLGPD.tsx",
+        "text": "<p><span>Para sua maior segurança, atualizamos as </span><strong><span>Políticas de Privacidade e Termos de Uso</span></strong><span> do site. <br>Ao continuar navegando, entendemos que você está ciente e de acordo com elas.</span></p>",
+        "btnText": "CONCORDAR E FECHAR"
       }
     }
   ],

.deco/blocks/site.json

@@ -62,7 +62,10 @@
     "includeScriptsToHead": {
       "includes": []
     },
-    "enabled": true
+    "enabled": true,
+    "includeScriptsToBody": {
+      "includes": []
+    }
   },
   "flavor": {
     "framework": "htmx"

.github/workflows/deco-deploy.yaml

@@ -1,4 +1,3 @@
-
 name: Deploy
 on:
   push:
@@ -13,7 +12,7 @@ jobs:
     permissions:
       id-token: write # Needed for auth with Deno Deploy
       contents: read # Needed to clone the repository
-    
+
     steps:
       - name: Clone repository
         uses: actions/checkout@v3
@@ -22,7 +21,7 @@ jobs:
         uses: denoland/setup-deno@v1
         with:
           deno-version: v2.x
-      
+
       - uses: actions/cache@v3
         with:
           path: |
@@ -33,7 +32,7 @@ jobs:
       - name: Build step
         shell: bash
         run: "deno run -A dev.ts build"
-      
+
       - name: Clean unnecessary files
         shell: bash
         run: |
@@ -43,10 +42,10 @@ jobs:
           rm -rf CHANGELOG.md
           rm -rf README.md
           rm -rf .vscode
-      
+
       - name: Upload to Deno Deploy
         uses: denoland/deployctl@v1
         with:
           project: "deco-sites-${{ github.event.repository.name }}"
           entrypoint: "./main.ts"
-          exclude: "node_modules"
+          exclude: "node_modules"

components/search/SearchResult.tsx

@@ -3,6 +3,11 @@ import { mapProductToAnalyticsItem } from "apps/commerce/utils/productToAnalytic
 import ProductCard from "../../components/product/ProductCard.tsx";
 import Filters from "../../components/search/Filters.tsx";
 import Icon from "../../components/ui/Icon.tsx";
+import Searchbar, {
+  type SearchbarProps,
+} from "../../components/search/Searchbar/Form.tsx";
+import { type Section as SectionType } from "@deco/deco/blocks";
+import { ShelfComponent } from "../../sections/Product/ProductShelf.tsx";
 import { clx } from "../../sdk/clx.ts";
 import { useId } from "../../sdk/useId.ts";
 import { useOffer } from "../../sdk/useOffer.ts";
@@ -21,20 +26,100 @@ export interface Layout {
 }
 export interface Props {
   /** @title Integration */
-  page: ProductListingPage | null;
+  page?: ProductListingPage | null;
   layout?: Layout;
   /** @description 0 for ?page=0 as your first page */
   startingPage?: 0 | 1;
   /** @hidden */
   partial?: "hideMore" | "hideLess";
+
+  searchbar: SearchbarProps;
+
+  productShelf: SectionType<ShelfComponent>;
+
+  searchParams?: string | null;
 }
-function NotFound() {
+function NotFound({ searchbar, productShelf, searchParams }: Props) {
   return (
-    <div class="w-full flex justify-center items-center py-10">
-      <span>Not Found!</span>
-    </div>
+    <>
+      {searchParams
+        ? (
+          <div class="w-full flex flex-col justify-center items-center">
+            <div class="w-full flex flex-col justify-center items-center py-10">
+              <Icon
+                id="faceIcon"
+                width="70"
+                height="69"
+                class="mt-[87px] mb-[40px]"
+              />
+              <span class="font-[PP-Hatton] text-center text-[24px] mobile:text-[20px] w-[526px] mobile:w-[333px]">
+                OPS... Não encontramos nenhum resultado para:
+              </span>
+            </div>
+            <div class="w-[526px] mobile:w-[89.4%]">
+              <Searchbar {...searchbar} placeholder="Faça sua busca aqui" />
+            </div>
+            <div class="flex justify-start ml-[-120px] mobile:ml-[0px] flex-col font-[Montserrat] text-[14px]">
+              <li class="marker:text-[#BD87ED]">
+                Verifique se a palavra foi digitada corretamente;
+              </li>
+              <li class="marker:text-[#BD87ED]">
+                Tente palavras menos específicas;
+              </li>
+              <li class="marker:text-[#BD87ED]">
+                Tente palavras-chave diferentes;
+              </li>
+              <li class="marker:text-[#BD87ED]">Faça buscas relacionadas.</li>
+            </div>
+          </div>
+        )
+        : (
+          <div class="w-full flex justify-around items-center py-[120px] phone:flex-col">
+            <div>
+              <h1 class="font-[PP-Hatton] text-[200px] phone:text-[127px] text-[#A3E3FF]">
+                404
+              </h1>
+            </div>
+            <div class="flex flex-col justify-start phone:ml-[20px] gap-6">
+              <div class="flex flex-col ">
+                <span class="font-[PP-Hatton] font-bold text-[30px] phone:text-[20px] mb-[20px]">
+                  Página não encontrada
+                </span>
+                <span class="font-[Montserrat] text-[16px] phone:text-[14px] phone:w-[335px]">
+                  A página que você procura não existe ou não está disponível
+                </span>
+              </div>
+              <div class="flex justify-start flex-col font-[Montserrat] text-[14px]">
+                <span class="font-bold text-[16px] mb-[20px]">
+                  Causas possíveis
+                </span>
+                <li class="marker:text-[#BD87ED] mb-[16px]">
+                  O conteúdo não está mais no ar;
+                </li>
+                <li class="marker:text-[#BD87ED] mb-[16px]">
+                  A página mudou de lugar;
+                </li>
+                <li class="marker:text-[#BD87ED] mb-[16px]">
+                  O servidor está fora do ar;
+                </li>
+                <li class="marker:text-[#BD87ED] mb-[16px]">
+                  Você digitou o endereço errado
+                </li>
+              </div>
+              <a
+                href="/"
+                class="btn no-animation w-[335px] h-[45px] uppercase text-[#8F2AED] border-[1px] border-[#8F2AED] bg-none hover:bg-[#8F2AED] hover:text-[#FFF]"
+              >
+                Voltar para o início
+              </a>
+            </div>
+          </div>
+        )}
+      <productShelf.Component {...productShelf.props} />
+    </>
   );
 }
+
 const useUrlRebased = (overrides: string | undefined, base: string) => {
   let url: string | undefined = undefined;
   if (overrides) {
@@ -299,14 +384,17 @@ function Result(props: SectionProps<typeof loader>) {
 }
 function SearchResult({ page, ...props }: SectionProps<typeof loader>) {
   if (!page) {
-    return <NotFound />;
+    return <NotFound {...props} />;
   }
   return <Result {...props} page={page} />;
 }
 export const loader = (props: Props, req: Request) => {
+  const url = new URL(req.url);
+  const searchParams = url.search ?? null;
   return {
     ...props,
-    url: req.url,
+    url: url.href,
+    searchParams,
   };
 };
 export default SearchResult;

fresh.gen.ts

@@ -6,6 +6,7 @@ import * as $_app from "./routes/_app.tsx";
 import * as $Accordion from "./islands/Accordion.tsx";
 import * as $AccordionItem from "./islands/AccordionItem.tsx";
 import * as $ButtonMenuInstitucionalMobile from "./islands/ButtonMenuInstitucionalMobile.tsx";
+import * as $Popup from "./islands/Popup.tsx";
 import type { Manifest } from "$fresh/server.ts";
 import * as $Popup from "./islands/Popup.tsx";
 

manifest.gen.ts

@@ -49,10 +49,11 @@ import * as $$$$$$32 from "./sections/Product/ProductShelfTabbed.tsx";
 import * as $$$$$$33 from "./sections/Product/SearchResult.tsx";
 import * as $$$$$$34 from "./sections/Product/ShelfWithImage.tsx";
 import * as $$$$$$35 from "./sections/Product/Wishlist.tsx";
-import * as $$$$$$36 from "./sections/Session.tsx";
-import * as $$$$$$37 from "./sections/Social/InstagramPosts.tsx";
-import * as $$$$$$38 from "./sections/Social/WhatsApp.tsx";
-import * as $$$$$$39 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$36 from "./sections/Quem Somos/quemSomos.tsx";
+import * as $$$$$$37 from "./sections/Session.tsx";
+import * as $$$$$$38 from "./sections/Social/InstagramPosts.tsx";
+import * as $$$$$$39 from "./sections/Social/WhatsApp.tsx";
+import * as $$$$$$40 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "loaders": {
@@ -99,10 +100,11 @@ const manifest = {
     "site/sections/Product/SearchResult.tsx": $$$$$$33,
     "site/sections/Product/ShelfWithImage.tsx": $$$$$$34,
     "site/sections/Product/Wishlist.tsx": $$$$$$35,
-    "site/sections/Session.tsx": $$$$$$36,
-    "site/sections/Social/InstagramPosts.tsx": $$$$$$37,
-    "site/sections/Social/WhatsApp.tsx": $$$$$$38,
-    "site/sections/Theme/Theme.tsx": $$$$$$39,
+    "site/sections/Quem Somos/quemSomos.tsx": $$$$$$36,
+    "site/sections/Session.tsx": $$$$$$37,
+    "site/sections/Social/InstagramPosts.tsx": $$$$$$38,
+    "site/sections/Social/WhatsApp.tsx": $$$$$$39,
+    "site/sections/Theme/Theme.tsx": $$$$$$40,
   },
   "actions": {
     "site/actions/minicart/submit.ts": $$$$$$$$$0,

sections/Product/ProductShelf.tsx

@@ -7,10 +7,16 @@ import Section, {
 import { useOffer } from "../../sdk/useOffer.ts";
 import { useSendEvent } from "../../sdk/useSendEvent.ts";
 import { type LoadingFallbackProps } from "@deco/deco";
+import { JSX } from "preact";
+
+export type ShelfComponent = JSX.Element;
+
 export interface Props extends SectionHeaderProps {
   products: Product[] | null;
 }
-export default function ProductShelf({ products, title, cta }: Props) {
+export default function ProductShelf(
+  { products, title, cta }: Props,
+): ShelfComponent | null {
   if (!products || products.length === 0) {
     return null;
   }