From d38a20cbaf78e2132292f4cfa5eacf5c48862c95 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Fri, 14 Jun 2024 14:25:27 +0700
Subject: [PATCH] feat: add helpful links

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 app/search/[collection]/page.tsx           |  2 +
 components/layout/search/helpful-links.tsx | 44 ++++++++++++++++++++++
 lib/shopify/index.ts                       |  4 +-
 lib/shopify/queries/collection.ts          |  3 ++
 lib/shopify/types.ts                       |  4 +-
 5 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 components/layout/search/helpful-links.tsx

diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index f0504c129..1a10b32ef 100644
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@@ -14,6 +14,7 @@ import FiltersContainer, {
 import MobileFilters from 'components/layout/search/filters/mobile-filters';
 import SubMenu from 'components/layout/search/filters/sub-menu';
 import Header, { HeaderPlaceholder } from 'components/layout/search/header';
+import HelpfulLinks from 'components/layout/search/helpful-links';
 import ProductsGridPlaceholder from 'components/layout/search/placeholder';
 import SortingMenu from 'components/layout/search/sorting-menu';
 import { Suspense } from 'react';
@@ -92,6 +93,7 @@ export default async function CategorySearchPage(props: {
         <h3 className="sr-only">Filters</h3>
         <Suspense fallback={<FiltersListPlaceholder />} key={`filters-${props.params.collection}`}>
           <FiltersContainer searchParams={props.searchParams} />
+          <HelpfulLinks collection={props.params.collection} />
         </Suspense>
       </aside>
       <div className="lg:col-span-2 xl:col-span-3">
diff --git a/components/layout/search/helpful-links.tsx b/components/layout/search/helpful-links.tsx
new file mode 100644
index 000000000..546fa2d15
--- /dev/null
+++ b/components/layout/search/helpful-links.tsx
@@ -0,0 +1,44 @@
+import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
+import Link from 'next/link';
+
+const LinkItem = async ({
+  collectionLinkId,
+  anchorText
+}: {
+  collectionLinkId: string;
+  anchorText: string;
+}) => {
+  const collection = await getCollection({ id: collectionLinkId });
+
+  if (!collection) return null;
+
+  return (
+    <Link href={collection.path} className="border p-2 text-sm text-gray-600">
+      {anchorText}
+    </Link>
+  );
+};
+const HelpfulLinks = async ({ collection }: { collection: string }) => {
+  const collectionData = await getCollection({ handle: collection });
+  if (!collectionData || !collectionData.helpfulLinks) return null;
+
+  const helpfulLinks = await getMetaobjectsByIds(collectionData.helpfulLinks);
+
+  return (
+    <div className="py-4">
+      <div className="mb-4 text-sm font-medium text-gray-900">Helpful links</div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {helpfulLinks.map((link) => (
+          <LinkItem
+            key={link.id}
+            collectionLinkId={link.collection_link!}
+            anchorText={link.anchor_text!}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HelpfulLinks;
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index 1ffaae701..a44007ba9 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -173,6 +173,7 @@ const reshapeCollection = (collection: ShopifyCollection): Collection | undefine
 
   return {
     ...collection,
+    helpfulLinks: parseMetaFieldValue<string[]>(collection.helpfulLinks),
     path: `/search/${collection.handle}`
   };
 };
@@ -495,7 +496,8 @@ export async function getCollections(): Promise<Collection[]> {
         description: 'All products'
       },
       path: '/search',
-      updatedAt: new Date().toISOString()
+      updatedAt: new Date().toISOString(),
+      helpfulLinks: null
     },
     // Filter out the `hidden` collections.
     // Collections that start with `hidden-*` need to be hidden on the search page.
diff --git a/lib/shopify/queries/collection.ts b/lib/shopify/queries/collection.ts
index 57596d005..f59aec8f1 100644
--- a/lib/shopify/queries/collection.ts
+++ b/lib/shopify/queries/collection.ts
@@ -9,6 +9,9 @@ const collectionFragment = /* GraphQL */ `
     seo {
       ...seo
     }
+    helpfulLinks: metafield(namespace: "custom", key: "helpful_links") {
+      value
+    }
     updatedAt
   }
   ${seoFragment}
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 7443823c4..e8b86f15e 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -31,8 +31,9 @@ export type CartItem = {
   coreCharge?: CartItem;
 };
 
-export type Collection = ShopifyCollection & {
+export type Collection = Omit<ShopifyCollection, 'helpfulLinks'> & {
   path: string;
+  helpfulLinks: string[] | null;
 };
 
 export type Image = {
@@ -186,6 +187,7 @@ export type ShopifyCollection = {
   description: string;
   seo: SEO;
   updatedAt: string;
+  helpfulLinks: { value: string } | null;
 };
 
 export type ShopifyProduct = {