From f8ef1b635073733933f78515dff84a7fa18c6136 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Mon, 8 Jul 2024 22:17:38 +0700
Subject: [PATCH] address Hanna reviews

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 app/page.tsx                                  |  8 ++-
 app/search/[collection]/page.tsx              | 32 +----------
 components/engine-sizes/index.tsx             | 38 +++++++------
 components/home-page/manufacturers.tsx        | 10 +---
 components/layout/search/bottom-content.tsx   | 56 +++++++++++++++++++
 components/layout/search/filters/sub-menu.tsx | 20 ++++++-
 .../manufacturers-grid/button-group.tsx       |  2 +-
 components/plp/content.tsx                    | 15 ++---
 components/plp/default-content.tsx            |  4 +-
 components/plp/dynamic-content.tsx            |  4 +-
 components/transmission-codes/index.tsx       | 43 +++++++-------
 11 files changed, 134 insertions(+), 98 deletions(-)
 create mode 100644 components/layout/search/bottom-content.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 7d7cb9669..3700e23c1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -45,9 +45,11 @@ export default async function HomePage() {
         <Suspense>
           <FAQ handle="home-page-faqs" />
         </Suspense>
-        <Suspense>
-          <Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
-        </Suspense>
+        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-20">
+          <Suspense>
+            <Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
+          </Suspense>
+        </div>
       </div>
       <Suspense>
         <Footer />
diff --git a/app/search/[collection]/page.tsx b/app/search/[collection]/page.tsx
index dbb3a43e8..e64446dc5 100644
--- a/app/search/[collection]/page.tsx
+++ b/app/search/[collection]/page.tsx
@@ -4,12 +4,10 @@ import { notFound } from 'next/navigation';
 
 import Breadcrumb from 'components/breadcrumb';
 import BreadcrumbHome from 'components/breadcrumb/breadcrumb-home';
-import EngineSizes from 'components/engine-sizes';
-import FAQ from 'components/faq';
 import YMMFilters, { YMMFiltersPlaceholder } from 'components/filters';
-import Manufacturers from 'components/home-page/manufacturers';
 import ProductsList from 'components/layout/products-list';
 import { getProductsInCollection } from 'components/layout/products-list/actions';
+import BottomContent from 'components/layout/search/bottom-content';
 import FiltersContainer, {
   FiltersListPlaceholder
 } from 'components/layout/search/filters/filters-container';
@@ -19,8 +17,6 @@ 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 Content from 'components/plp/content';
-import TransmissionCode from 'components/transmission-codes';
 import { Suspense } from 'react';
 
 export async function generateMetadata({
@@ -85,24 +81,12 @@ async function CategoryPage({
   );
 }
 
-const manufactureVariantMap: Record<
-  string,
-  'engines' | 'transmissions' | 'remanufactured-engines' | 'transfer-cases'
-> = {
-  transmissions: 'transmissions',
-  engines: 'engines',
-  'remanufactured-engines': 'remanufactured-engines',
-  'transfer-cases': 'transfer-cases'
-};
-
 export default async function CategorySearchPage(props: {
   params: { collection: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const collectionHandle = props.params.collection;
 
-  const [partType, make] = collectionHandle.split('_');
-
   return (
     <>
       <div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
@@ -139,20 +123,8 @@ export default async function CategorySearchPage(props: {
         </div>
       </div>
       <Suspense>
-        <Content collection={collectionHandle} />
+        <BottomContent collectionHandle={collectionHandle} />
       </Suspense>
-      <FAQ handle="plp-faqs" />
-      <Suspense>
-        <TransmissionCode collectionHandle={collectionHandle} />
-      </Suspense>
-      <Suspense>
-        <EngineSizes collectionHandle={collectionHandle} />
-      </Suspense>
-      {!make ? (
-        <Suspense>
-          <Manufacturers variant={manufactureVariantMap[partType || 'engines']} />
-        </Suspense>
-      ) : null}
     </>
   );
 }
diff --git a/components/engine-sizes/index.tsx b/components/engine-sizes/index.tsx
index 1ba2cc92b..ba833c1b9 100644
--- a/components/engine-sizes/index.tsx
+++ b/components/engine-sizes/index.tsx
@@ -1,5 +1,6 @@
+import { StarIcon } from '@heroicons/react/24/outline';
 import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import { Metaobject } from 'lib/shopify/types';
+import { Collection, Metaobject } from 'lib/shopify/types';
 import Link from 'next/link';
 
 const { STORE_PREFIX } = process.env;
@@ -20,9 +21,8 @@ const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title
   );
 };
 
-const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) => {
-  const collection = await getCollection({ handle: collectionHandle });
-  if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
+const EngineSizes = async ({ collection }: { collection: Collection }) => {
+  if (!collection.plpType || !validStores.includes(STORE_PREFIX!)) {
     return null;
   }
 
@@ -37,19 +37,23 @@ const EngineSizes = async ({ collectionHandle }: { collectionHandle: string }) =
   }
 
   return (
-    <div className="px-6 py-10">
-      <div className="mx-auto max-w-7xl">
-        <h3 className="mb-6 text-3xl font-semibold lg:text-4xl">Browse Engines By Engine Sizes</h3>
-        <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
-          <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {engineSizes.map((engineSize) => (
-              <LinkBlock
-                collectionId={engineSize.collection_link}
-                title={engineSize.engine_size}
-                key={engineSize.id}
-              />
-            ))}
-          </div>
+    <div>
+      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
+        Browse Engines By Engine Sizes
+      </h3>
+      <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
+        <p className="flex items-center gap-2">
+          <StarIcon className="size-4" />
+          <span className="font-medium text-blue-800">Popular Engine Sizes</span>
+        </p>
+        <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
+          {engineSizes.map((engineSize) => (
+            <LinkBlock
+              collectionId={engineSize.collection_link}
+              title={engineSize.engine_size}
+              key={engineSize.id}
+            />
+          ))}
         </div>
       </div>
     </div>
diff --git a/components/home-page/manufacturers.tsx b/components/home-page/manufacturers.tsx
index b0f83870a..23b93f4ab 100644
--- a/components/home-page/manufacturers.tsx
+++ b/components/home-page/manufacturers.tsx
@@ -1,5 +1,4 @@
 import ManufacturersGrid from 'components/manufacturers-grid';
-import Tag from 'components/tag';
 import { getMetaobjects } from 'lib/shopify';
 
 const Manufacturers = async ({
@@ -17,12 +16,9 @@ const Manufacturers = async ({
   };
 
   return (
-    <div className="px-6 py-20">
-      <div className="mx-auto flex max-w-7xl flex-col gap-3">
-        <Tag text="Get Started" />
-        <h3 className="mb-3 text-3xl font-semibold lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
-        <ManufacturersGrid manufacturers={manufacturers} variant={variant} />
-      </div>
+    <div>
+      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{`Browse ${title[variant]} By Manufacturer`}</h3>
+      <ManufacturersGrid manufacturers={manufacturers} variant={variant} />
     </div>
   );
 };
diff --git a/components/layout/search/bottom-content.tsx b/components/layout/search/bottom-content.tsx
new file mode 100644
index 000000000..45cbee47a
--- /dev/null
+++ b/components/layout/search/bottom-content.tsx
@@ -0,0 +1,56 @@
+import EngineSizes from 'components/engine-sizes';
+import Manufacturers from 'components/home-page/manufacturers';
+import Content from 'components/plp/content';
+import Tag from 'components/tag';
+import TransmissionCode from 'components/transmission-codes';
+import { getCollection } from 'lib/shopify';
+import { Suspense } from 'react';
+
+const manufactureVariantMap: Record<
+  string,
+  'engines' | 'transmissions' | 'remanufactured-engines' | 'transfer-cases'
+> = {
+  transmissions: 'transmissions',
+  engines: 'engines',
+  'remanufactured-engines': 'remanufactured-engines',
+  'transfer-cases': 'transfer-cases'
+};
+
+const BottomContent = async ({ collectionHandle }: { collectionHandle: string }) => {
+  const collection = await getCollection({ handle: collectionHandle });
+
+  if (
+    !collection ||
+    (!collection.dynamicContent && !collection.transmissionCodeLinks && !collection.engineSizeLinks)
+  ) {
+    return null;
+  }
+
+  const [partType] = collectionHandle.split('_');
+
+  return (
+    <div className="mx-auto my-10 flex max-w-7xl flex-col gap-3 px-6">
+      <Suspense>
+        <Content collection={collection} />
+      </Suspense>
+      <div className="mt-10 space-y-3">
+        <Tag text="Get Started" />
+        <div className="space-y-16">
+          <Suspense>
+            <TransmissionCode collection={collection} />
+          </Suspense>
+          {!collection.plpType || collection.plpType === 'Product Type' ? (
+            <Suspense>
+              <Manufacturers variant={manufactureVariantMap[partType || 'engines']} />
+            </Suspense>
+          ) : null}
+          <Suspense>
+            <EngineSizes collection={collection} />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomContent;
diff --git a/components/layout/search/filters/sub-menu.tsx b/components/layout/search/filters/sub-menu.tsx
index 490d5368f..8f86b4b28 100644
--- a/components/layout/search/filters/sub-menu.tsx
+++ b/components/layout/search/filters/sub-menu.tsx
@@ -18,6 +18,17 @@ const MenuItem = async ({ collectionId, title }: { collectionId?: string; title:
     </li>
   );
 };
+
+const sortOptions = (options: Metaobject[], displayField: string) => {
+  return options.toSorted((a, b) =>
+    get(a, displayField).toLowerCase().localeCompare(get(b, displayField).toLowerCase())
+  );
+};
+
+const sortYearOptions = (options: Metaobject[]) => {
+  return options.toSorted((a, b) => parseInt(get(b, 'year'), 10) - parseInt(get(a, 'year'), 10));
+};
+
 const SubMenu = async ({ collection }: { collection: string }) => {
   const collectionData = await getCollection({ handle: collection });
 
@@ -29,19 +40,22 @@ const SubMenu = async ({ collection }: { collection: string }) => {
   if (collectionData.plpType === 'Product Type' && collectionData.lhnLinks) {
     displayField = 'make';
     title = 'Make';
-    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+    const response = await getMetaobjectsByIds(collectionData.lhnLinks);
+    subMenu = sortOptions(response, displayField);
   }
 
   if (collectionData.plpType === 'Make' && collectionData.lhnLinks) {
     displayField = 'model';
     title = 'Model';
-    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+    const response = await getMetaobjectsByIds(collectionData.lhnLinks);
+    subMenu = sortOptions(response, displayField);
   }
 
   if (collectionData.plpType === 'Model' && collectionData.lhnLinks) {
     displayField = 'year';
     title = 'Year';
-    subMenu = await getMetaobjectsByIds(collectionData.lhnLinks);
+    const response = await getMetaobjectsByIds(collectionData.lhnLinks);
+    subMenu = sortYearOptions(response);
   }
 
   return subMenu.length ? (
diff --git a/components/manufacturers-grid/button-group.tsx b/components/manufacturers-grid/button-group.tsx
index 6532f6685..29e2a8fec 100644
--- a/components/manufacturers-grid/button-group.tsx
+++ b/components/manufacturers-grid/button-group.tsx
@@ -17,7 +17,7 @@ const ButtonGroup = ({ manufacturer }: { manufacturer: Metaobject }) => {
   };
 
   return (
-    <div className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center md:gap-0">
+    <div className="flex flex-col items-start justify-between gap-2 md:flex-row md:items-center md:gap-x-2">
       <button
         className="flex items-center gap-1 rounded border border-primary px-1 py-0.5 text-xs text-primary"
         onClick={() => handleClick('engines')}
diff --git a/components/plp/content.tsx b/components/plp/content.tsx
index ed2aaa6ab..d3dfefc03 100644
--- a/components/plp/content.tsx
+++ b/components/plp/content.tsx
@@ -1,19 +1,14 @@
-import { getCollection, getMetaobject } from 'lib/shopify';
+import { getMetaobject } from 'lib/shopify';
+import { Collection } from 'lib/shopify/types';
 import DefaultContent from './default-content';
 import DynamicContent from './dynamic-content';
 
-const Content = async ({ collection }: { collection: string }) => {
-  const collectionData = await getCollection({ handle: collection });
-
-  if (!collectionData) {
-    return null;
-  }
-
-  if (!collectionData.dynamicContent) {
+const Content = async ({ collection }: { collection: Collection }) => {
+  if (!collection.dynamicContent) {
     return <DefaultContent />;
   }
 
-  const content = await getMetaobject({ id: collectionData.dynamicContent });
+  const content = await getMetaobject({ id: collection.dynamicContent });
   if (!content) {
     return <DefaultContent />;
   }
diff --git a/components/plp/default-content.tsx b/components/plp/default-content.tsx
index 4884f1d22..921b11046 100644
--- a/components/plp/default-content.tsx
+++ b/components/plp/default-content.tsx
@@ -13,9 +13,9 @@ const DefaultContent = async () => {
   const sectionIds = defaultPLPContent.sections ? JSON.parse(defaultPLPContent.sections) : [];
 
   return (
-    <div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
+    <div className="spacy-y-3">
       <Tag text="Learn More" />
-      <h3 className="mb-5 text-3xl font-bold leading-loose text-black-700">
+      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
         {defaultPLPContent.title}
       </h3>
       <Suspense fallback={<TabsPlaceholder />}>
diff --git a/components/plp/dynamic-content.tsx b/components/plp/dynamic-content.tsx
index a589adfa3..d82e95920 100644
--- a/components/plp/dynamic-content.tsx
+++ b/components/plp/dynamic-content.tsx
@@ -7,9 +7,9 @@ const DynamicContent = async ({ content }: { content: Metaobject }) => {
   const sectionIds = content.sections ? JSON.parse(content.sections) : [];
 
   return (
-    <div className="mx-auto mt-6 max-w-screen-2xl px-8 pb-10">
+    <div className="space-y-3">
       <Tag text="Learn More" />
-      <h3 className="mb-5 text-3xl font-bold leading-loose text-black-700">{content.title}</h3>
+      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">{content.title}</h3>
       <Suspense fallback={<TabsPlaceholder />}>
         <Tabs tabItemIds={sectionIds} />
       </Suspense>
diff --git a/components/transmission-codes/index.tsx b/components/transmission-codes/index.tsx
index 62f70b6fe..9f0014d7f 100644
--- a/components/transmission-codes/index.tsx
+++ b/components/transmission-codes/index.tsx
@@ -1,7 +1,6 @@
 import { StarIcon } from '@heroicons/react/24/outline';
-import Tag from 'components/tag';
 import { getCollection, getMetaobjectsByIds } from 'lib/shopify';
-import { Metaobject } from 'lib/shopify/types';
+import { Collection, Metaobject } from 'lib/shopify/types';
 import Link from 'next/link';
 
 const { STORE_PREFIX } = process.env;
@@ -21,9 +20,8 @@ const LinkBlock = async ({ collectionId, title }: { collectionId?: string; title
     </Link>
   );
 };
-const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string }) => {
-  const collection = await getCollection({ handle: collectionHandle });
-  if (!collection || !collection.plpType || !validStores.includes(STORE_PREFIX!)) {
+const TransmissionCode = async ({ collection }: { collection: Collection }) => {
+  if (!collection.plpType || !validStores.includes(STORE_PREFIX!)) {
     return null;
   }
 
@@ -41,24 +39,23 @@ const TransmissionCode = async ({ collectionHandle }: { collectionHandle: string
   }
 
   return (
-    <div className="px-6 py-10">
-      <div className="mx-auto flex max-w-7xl flex-col gap-3">
-        <Tag text="Get Started" />
-        <h3 className="mb-3 text-3xl font-semibold lg:text-4xl">{`Browse By Transmission Code`}</h3>
-        <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
-          <p className="flex items-center gap-2">
-            <StarIcon className="size-4" />
-            <span className="font-medium text-blue-800">Popular Transmission Codes</span>
-          </p>
-          <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
-            {transmissionCodes.map((transmissionCode) => (
-              <LinkBlock
-                collectionId={transmissionCode.collection_link}
-                title={transmissionCode.transmission_code}
-                key={transmissionCode.id}
-              />
-            ))}
-          </div>
+    <div>
+      <h3 className="mb-3 text-3xl font-semibold text-black-700 lg:text-4xl">
+        Browse By Transmission Code
+      </h3>
+      <div className="h-auto max-h-[700px] w-full overflow-auto rounded px-10 py-6 shadow">
+        <p className="flex items-center gap-2">
+          <StarIcon className="size-4" />
+          <span className="font-medium text-blue-800">Popular Transmission Codes</span>
+        </p>
+        <div className="mt-6 grid grid-cols-2 gap-x-12 gap-y-5 md:grid-cols-3 md:gap-y-8 lg:grid-cols-4 xl:grid-cols-5">
+          {transmissionCodes.map((transmissionCode) => (
+            <LinkBlock
+              collectionId={transmissionCode.collection_link}
+              title={transmissionCode.transmission_code}
+              key={transmissionCode.id}
+            />
+          ))}
         </div>
       </div>
     </div>