From 943e51818bbe947a1770fba9e280d35eb0505a97 Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 17 Dec 2024 10:27:47 +0700 Subject: [PATCH 1/8] Fix search page logic --- app/routes/($locale).search.tsx | 48 ++++++++++++++++----------------- 1 file changed, 24 insertions(+), 24 deletions(-) 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) => ( Date: Tue, 17 Dec 2024 10:27:59 +0700 Subject: [PATCH 2/8] Update policies page layout --- app/routes/($locale).policies._index.tsx | 53 +++++++++++++++--------- 1 file changed, 33 insertions(+), 20 deletions(-) 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; })} -
- +
+ ); } From 4de51ff47e4093115e7a985dd9536c7d4c720d32 Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 17 Dec 2024 10:42:26 +0700 Subject: [PATCH 3/8] Update policy details page --- .../($locale).policies.$policyHandle.tsx | 78 +++++++++---------- 1 file changed, 35 insertions(+), 43 deletions(-) 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 + +
+
+
+
); } From 92e9186e65be02fb02c3c354def842878a97779b Mon Sep 17 00:00:00 2001 From: hta218 Date: Tue, 17 Dec 2024 11:05:42 +0700 Subject: [PATCH 4/8] Update generic error component style --- app/components/root/generic-error.tsx | 53 ++++++++--------- app/modules/text.tsx | 58 ------------------- .../collection-list/collection-card.tsx | 1 - 3 files changed, 27 insertions(+), 85 deletions(-) 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/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/sections/collection-list/collection-card.tsx b/app/sections/collection-list/collection-card.tsx
index 38849d25..1a220711 100644
--- a/app/sections/collection-list/collection-card.tsx
+++ b/app/sections/collection-list/collection-card.tsx
@@ -1,7 +1,6 @@
 import { Image } from "@shopify/hydrogen";
 import type { Collection } from "@shopify/hydrogen/storefront-api-types";
 import { Link } from "~/components/link";
-import { Heading } from "~/modules/text";
 
 export function CollectionCard({
   collection,

From f3c84ccdd286b69c026e3f63fb378ab8c06a27b7 Mon Sep 17 00:00:00 2001
From: hta218 
Date: Tue, 17 Dec 2024 12:05:32 +0700
Subject: [PATCH 5/8] Update regular page section

---
 app/sections/page.tsx | 79 ++++++++++++++-----------------------------
 1 file changed, 25 insertions(+), 54 deletions(-)

diff --git a/app/sections/page.tsx b/app/sections/page.tsx
index bf619009..e8b6304d 100644
--- a/app/sections/page.tsx
+++ b/app/sections/page.tsx
@@ -1,43 +1,37 @@
 import { useLoaderData } from "@remix-run/react";
-import type {
-  HydrogenComponentProps,
-  HydrogenComponentSchema,
-} from "@weaverse/hydrogen";
+import type { HydrogenComponentSchema } from "@weaverse/hydrogen";
 import { forwardRef } from "react";
 import type { PageDetailsQuery } from "storefrontapi.generated";
-import { PageHeader } from "~/modules/text";
+import { Link } from "~/components/link";
+import { layoutInputs, Section, type SectionProps } from "~/components/section";
 
-interface PageProps extends HydrogenComponentProps {
-  paddingTop: number;
-  paddingBottom: number;
-}
+interface PageProps extends SectionProps {}
 
 let Page = forwardRef((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",
+      ),
     },
   ],
 };

From 3b64f55cbcbaa101990e95216bfc65660f0bd90e Mon Sep 17 00:00:00 2001
From: hta218 
Date: Tue, 17 Dec 2024 15:32:26 +0700
Subject: [PATCH 6/8] Refine account routes

---
 app/routes/($locale).account.$.tsx         |  3 +--
 app/routes/($locale).account.tsx           | 12 ++++++++----
 app/routes/($locale).account_.authorize.ts |  2 +-
 app/routes/($locale).account_.login.tsx    |  2 +-
 app/routes/($locale).account_.logout.ts    |  6 ++----
 5 files changed, 13 insertions(+), 12 deletions(-)

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);
 };

From e322a71572bb188a11c17f0a35500d059c8cdb33 Mon Sep 17 00:00:00 2001
From: hta218 
Date: Tue, 17 Dec 2024 15:34:44 +0700
Subject: [PATCH 7/8] Fix get color configs from metaobject

---
 app/lib/root.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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[];
 }

From 8b86aa917307b9134abee912af96537ae83d8cd6 Mon Sep 17 00:00:00 2001
From: hta218 
Date: Tue, 17 Dec 2024 15:35:02 +0700
Subject: [PATCH 8/8] v3.2.3

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

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": {