diff --git a/app/components/root/generic-error.tsx b/app/components/root/generic-error.tsx index 4f97b61d..01010f06 100644 --- a/app/components/root/generic-error.tsx +++ b/app/components/root/generic-error.tsx @@ -1,5 +1,5 @@ import Link from "~/components/link"; -import { PageHeader, Text } from "~/modules/text"; +import { Section } from "~/components/section"; export function GenericError({ error, @@ -17,31 +17,32 @@ export function GenericError({ } return ( - <> - - - {description} - - {error?.stack && ( - 
-        )}
-        
-          Take me to the home page
-        
-      
-    
+    

+      
{heading}

+      
{description}

+      {error?.stack && (
+        
+      )}
+      
+        Take me to the home page
+      
+    

   );
 }
 
diff --git a/app/lib/root.ts b/app/lib/root.ts
index 54aba704..da0387d0 100644
--- a/app/lib/root.ts
+++ b/app/lib/root.ts
@@ -131,8 +131,8 @@ async function getColorsConfigs(context: AppLoadContext) {
   return metaobjects.nodes.map(({ id, name, value }) => {
     return {
       id,
-      name: name.value,
-      value: value.value,
+      name: name?.value,
+      value: value?.value,
     };
   }) as ColorSwatch[];
 }
diff --git a/app/modules/text.tsx b/app/modules/text.tsx
index f7ebda0c..d47acce3 100644
--- a/app/modules/text.tsx
+++ b/app/modules/text.tsx
@@ -97,64 +97,6 @@ export function Heading({
   );
 }
 
-export function Section({
-  as: Component = "section",
-  children,
-  className,
-  divider = "none",
-  display = "grid",
-  heading,
-  padding = "all",
-  ...props
-}: {
-  as?: React.ElementType;
-  children?: React.ReactNode;
-  className?: string;
-  divider?: "none" | "top" | "bottom" | "both";
-  display?: "grid" | "flex";
-  heading?: string;
-  padding?: "x" | "y" | "swimlane" | "all";
-  [key: string]: any;
-}) {
-  const paddings = {
-    x: "px-6 md:px-8 lg:px-12",
-    y: "py-6 md:py-8 lg:py-12",
-    swimlane: "pt-4 md:pt-8 lg:pt-12 md:pb-4 lg:pb-8",
-    all: "p-6 md:p-8 lg:p-12",
-  };
-
-  const dividers = {
-    none: "border-none",
-    top: "border-t border-line-subtle",
-    bottom: "border-b border-line-subtle",
-    both: "border-y border-line-subtle",
-  };
-
-  const displays = {
-    flex: "flex",
-    grid: "grid",
-  };
-
-  const styles = clsx(
-    "w-full gap-4 md:gap-8",
-    displays[display],
-    missingClass(className, "\\mp[xy]?-") && paddings[padding],
-    dividers[divider],
-    className,
-  );
-
-  return (
-    
-      {heading && (
-        
-          {heading}
-        
-      )}
-      {children}
-    
-  );
-}
-
 export function PageHeader({
   children,
   className,
diff --git a/app/routes/($locale).account.$.tsx b/app/routes/($locale).account.$.tsx
index f5be70bc..57df27d4 100644
--- a/app/routes/($locale).account.$.tsx
+++ b/app/routes/($locale).account.$.tsx
@@ -3,7 +3,6 @@ import { type LoaderFunctionArgs, redirect } from "@shopify/remix-oxygen";
 // fallback wild card for all unauthenticated routes in account section
 export async function loader({ context, params }: LoaderFunctionArgs) {
   await context.customerAccount.handleAuthStatus();
-
-  const locale = params.locale;
+  let locale = params.locale;
   return redirect(locale ? `/${locale}/account` : "/account");
 }
diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx
index f4a4f548..455c77e6 100644
--- a/app/routes/($locale).account.tsx
+++ b/app/routes/($locale).account.tsx
@@ -9,7 +9,10 @@ import {
 } from "@remix-run/react";
 import { flattenConnection } from "@shopify/hydrogen";
 import { type LoaderFunctionArgs, defer } from "@shopify/remix-oxygen";
-import type { CustomerDetailsFragment } from "customer-accountapi.generated";
+import type {
+  CustomerDetailsFragment,
+  CustomerDetailsQuery,
+} from "customer-accountapi.generated";
 import { Suspense } from "react";
 import { AccountDetails } from "~/components/account/account-details";
 import { AccountAddressBook } from "~/components/account/address-book";
@@ -29,9 +32,10 @@ import {
 export let headers = routeHeaders;
 
 export async function loader({ context }: LoaderFunctionArgs) {
-  let { data, errors } = await context.customerAccount.query(
-    CUSTOMER_DETAILS_QUERY,
-  );
+  let { data, errors } =
+    await context.customerAccount.query(
+      CUSTOMER_DETAILS_QUERY,
+    );
 
   /**
    * If the customer failed to load, we assume their access token is invalid.
diff --git a/app/routes/($locale).account_.authorize.ts b/app/routes/($locale).account_.authorize.ts
index cd66dc90..48af280e 100644
--- a/app/routes/($locale).account_.authorize.ts
+++ b/app/routes/($locale).account_.authorize.ts
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
 
-export async function loader({ context, params }: LoaderFunctionArgs) {
+export async function loader({ context }: LoaderFunctionArgs) {
   return context.customerAccount.authorize();
 }
diff --git a/app/routes/($locale).account_.login.tsx b/app/routes/($locale).account_.login.tsx
index 2183f6da..e97666f7 100644
--- a/app/routes/($locale).account_.login.tsx
+++ b/app/routes/($locale).account_.login.tsx
@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs } from "@shopify/remix-oxygen";
 
-export async function loader({ params, request, context }: LoaderFunctionArgs) {
+export async function loader({ context }: LoaderFunctionArgs) {
   return context.customerAccount.login();
 }
diff --git a/app/routes/($locale).account_.logout.ts b/app/routes/($locale).account_.logout.ts
index a9bf7163..b409fc65 100644
--- a/app/routes/($locale).account_.logout.ts
+++ b/app/routes/($locale).account_.logout.ts
@@ -11,12 +11,10 @@ export async function doLogout(context: AppLoadContext) {
 }
 
 export async function loader({ params }: LoaderFunctionArgs) {
-  const locale = params.locale;
+  let locale = params.locale;
   return redirect(locale ? `/${locale}` : "/");
 }
 
-export const action: ActionFunction = async ({
-  context,
-}: ActionFunctionArgs) => {
+export let action: ActionFunction = async ({ context }: ActionFunctionArgs) => {
   return doLogout(context);
 };
diff --git a/app/routes/($locale).policies.$policyHandle.tsx b/app/routes/($locale).policies.$policyHandle.tsx
index e4044083..53c8f302 100644
--- a/app/routes/($locale).policies.$policyHandle.tsx
+++ b/app/routes/($locale).policies.$policyHandle.tsx
@@ -3,73 +3,65 @@ import { type LoaderFunctionArgs, json } from "@shopify/remix-oxygen";
 import invariant from "tiny-invariant";
 import { routeHeaders } from "~/data/cache";
 import { seoPayload } from "~/lib/seo.server";
-import { PageHeader, Section } from "~/modules/text";
-import { Button } from "~/modules/button";
+import type { PoliciesHandleQuery } from "storefrontapi.generated";
+import { Section } from "~/components/section";
+import { BreadCrumb } from "~/components/breadcrumb";
+import Link from "~/components/link";
 
-export const headers = routeHeaders;
+export let headers = routeHeaders;
 
 export async function loader({ request, params, context }: LoaderFunctionArgs) {
   invariant(params.policyHandle, "Missing policy handle");
 
-  const policyName = params.policyHandle.replace(
+  let policyName = params.policyHandle.replace(
     /-([a-z])/g,
     (_: unknown, m1: string) => m1.toUpperCase(),
   ) as "privacyPolicy" | "shippingPolicy" | "termsOfService" | "refundPolicy";
 
-  const data = await context.storefront.query(POLICY_CONTENT_QUERY, {
-    variables: {
-      privacyPolicy: false,
-      shippingPolicy: false,
-      termsOfService: false,
-      refundPolicy: false,
-      [policyName]: true,
-      language: context.storefront.i18n.language,
+  let data = await context.storefront.query(
+    POLICY_CONTENT_QUERY,
+    {
+      variables: {
+        privacyPolicy: false,
+        shippingPolicy: false,
+        termsOfService: false,
+        refundPolicy: false,
+        [policyName]: true,
+        language: context.storefront.i18n.language,
+      },
     },
-  });
+  );
 
   invariant(data, "No data returned from Shopify API");
-  const policy = data.shop?.[policyName];
+  let policy = data.shop?.[policyName];
 
   if (!policy) {
     throw new Response(null, { status: 404 });
   }
 
-  const seo = seoPayload.policy({ policy, url: request.url });
+  let seo = seoPayload.policy({ policy, url: request.url });
 
   return json({ policy, seo });
 }
 
 export default function Policies() {
-  const { policy } = useLoaderData();
+  let { policy } = useLoaderData();
 
   return (
-    <>
-      

-        
-          
-        
-        

-          

-        

-      

-    
+    

+      
+      
Policies

+      
+        ← Back to Policies
+      
+      

+        

+      

+    

   );
 }
 
diff --git a/app/routes/($locale).policies._index.tsx b/app/routes/($locale).policies._index.tsx
index f14488e4..f255b0ef 100644
--- a/app/routes/($locale).policies._index.tsx
+++ b/app/routes/($locale).policies._index.tsx
@@ -7,19 +7,23 @@ import invariant from "tiny-invariant";
 import { routeHeaders } from "~/data/cache";
 import { seoPayload } from "~/lib/seo.server";
 import type { NonNullableFields } from "~/lib/type";
-import { Heading, PageHeader, Section } from "~/modules/text";
 import { Link } from "~/components/link";
+import type { PoliciesIndexQuery } from "storefrontapi.generated";
+import { BreadCrumb } from "~/components/breadcrumb";
+import { Section } from "~/components/section";
+import { FileText } from "@phosphor-icons/react";
 
-export const headers = routeHeaders;
+export let headers = routeHeaders;
 
 export async function loader({
   request,
   context: { storefront },
 }: LoaderFunctionArgs) {
-  const data = await storefront.query(POLICIES_QUERY);
+  let data = await storefront.query(POLICIES_QUERY);
 
   invariant(data, "No data returned from Shopify API");
-  const policies = Object.values(
+
+  let policies = Object.values(
     data.shop as NonNullableFields,
   ).filter(Boolean);
 
@@ -27,7 +31,7 @@ export async function loader({
     throw new Response("Not found", { status: 404 });
   }
 
-  const seo = seoPayload.policies({ policies, url: request.url });
+  let seo = seoPayload.policies({ policies, url: request.url });
 
   return json({
     policies,
@@ -35,28 +39,37 @@ export async function loader({
   });
 }
 
-export const meta: MetaFunction = ({ data }) => {
-  return getSeoMeta(data!.seo as SeoConfig);
+export let meta: MetaFunction = ({ data }) => {
+  return getSeoMeta(data.seo as SeoConfig);
 };
 
 export default function Policies() {
-  const { policies } = useLoaderData();
+  let { policies } = useLoaderData();
 
   return (
-    <>
-      
-      

+    

+      
+      
Policies

+      

         {policies.map((policy) => {
-          return (
-            policy && (
-              
-                {policy.title}
-              
-            )
-          );
+          if (policy) {
+            return (
+              policy && (
+                
+                  
+                  {policy.title}
+                
+              )
+            );
+          }
+          return null;
         })}
-      

-    
+      
+    

   );
 }
 
diff --git a/app/routes/($locale).search.tsx b/app/routes/($locale).search.tsx
index 8960f8cd..7d107605 100644
--- a/app/routes/($locale).search.tsx
+++ b/app/routes/($locale).search.tsx
@@ -30,7 +30,10 @@ export async function loader({
 }: LoaderFunctionArgs) {
   let { searchParams } = new URL(request.url);
   let searchTerm = searchParams.get("q");
-  let products: PaginatedProductsSearchQuery["products"] = null;
+  let products: PaginatedProductsSearchQuery["products"] = {
+    nodes: [],
+    pageInfo: null,
+  };
 
   if (searchTerm) {
     let variables = getPaginationVariables(request, {
@@ -51,7 +54,7 @@ export async function loader({
     products = data.products;
   }
 
-  let noResults = products?.nodes?.length === 0;
+  let hasResults = products?.nodes?.length > 0;
 
   return defer({
     seo: seoPayload.collection({
@@ -64,11 +67,11 @@ export async function loader({
         description: "Search results",
         seo: {
           title: "Search",
-          description: noResults
-            ? searchTerm
+          description: hasResults
+            ? `Showing ${products.nodes.length} search results for "${searchTerm}"`
+            : searchTerm
               ? `No results found for "${searchTerm}"`
-              : "Search our store"
-            : `Showing ${products.nodes.length} search results for "${searchTerm}"`,
+              : "Search our store",
         },
         metafields: [],
         products,
@@ -77,9 +80,9 @@ export async function loader({
     }),
     searchTerm,
     products,
-    noResultRecommendations: noResults
-      ? getNoResultRecommendations(storefront)
-      : Promise.resolve(null),
+    recommendations: hasResults
+      ? Promise.resolve(null)
+      : getRecommendations(storefront),
   });
 }
 
@@ -90,10 +93,10 @@ export let meta = ({ matches }: MetaArgs) => {
 const POPULAR_SEARCHES = ["French Linen", "Shirt", "Cotton"];
 
 export default function Search() {
-  let { searchTerm, products, noResultRecommendations } =
+  let { searchTerm, products, recommendations } =
     useLoaderData();
   let [searchKey, setSearchKey] = useState(searchTerm);
-  let noResults = products?.nodes?.length === 0;
+  let hasResults = products?.nodes?.length > 0;
 
   useEffect(() => {
     setSearchKey(searchTerm);
@@ -140,12 +143,7 @@ export default function Search() {
           
         
       
-      {noResults ? (
-        
-      ) : (
+      {hasResults ? (
         
           {({
             nodes,
@@ -189,6 +187,8 @@ export default function Search() {
             );
           }}
         
+      ) : (
+        
       )}
       
-          {(result) => {
-            if (!result) {
+          {(data) => {
+            if (!data) {
               return null;
             }
-            let { featuredProducts } = result;
+            let { featuredProducts } = data;
             return (
-              

-                
Trending Products

+              

+                
Trending Products

                 
                   {featuredProducts.nodes.map((product) => (
                     ((props, ref) => {
   let { page } = useLoaderData();
-  let { paddingTop, paddingBottom, ...rest } = props;
 
   if (page) {
     return (
-      

-        

-          
-            

-          
+      

+        

+          
+            Home
+          
+          /
+          pages
+          /
+          {page.title}
         

-      

+        
{page.title}

+        

+      

     );
   }
-  return 
;
+  return 
;
 });
 
 export default Page;
@@ -51,33 +45,10 @@ export let schema: HydrogenComponentSchema = {
   },
   inspector: [
     {
-      group: "Page",
-      inputs: [
-        {
-          type: "range",
-          label: "Top padding",
-          name: "paddingTop",
-          configs: {
-            min: 0,
-            max: 100,
-            step: 4,
-            unit: "px",
-          },
-          defaultValue: 32,
-        },
-        {
-          type: "range",
-          label: "Bottom padding",
-          name: "paddingBottom",
-          configs: {
-            min: 0,
-            max: 100,
-            step: 4,
-            unit: "px",
-          },
-          defaultValue: 32,
-        },
-      ],
+      group: "Layout",
+      inputs: layoutInputs.filter(
+        (input) => input.name !== "gap" && input.name !== "borderRadius",
+      ),
     },
   ],
 };
diff --git a/package-lock.json b/package-lock.json
index 64deb06a..d0c7674e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@weaverse/pilot",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@weaverse/pilot",
-      "version": "3.2.2",
+      "version": "3.2.3",
       "dependencies": {
         "@fontsource/poppins": "5.1.0",
         "@graphql-codegen/cli": "5.0.3",
diff --git a/package.json b/package.json
index 526fa407..c7d587fb 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@weaverse/pilot",
   "private": true,
   "sideEffects": false,
-  "version": "3.2.2",
+  "version": "3.2.3",
   "type": "module",
   "author": "Weaverse",
   "scripts": {