add transmission codes block to homepage

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

app/page.tsx

@@ -1,14 +1,14 @@
 import FAQ from 'components/faq';
 import Hero from 'components/hero';
 import About from 'components/home-page/about';
-import Manufacturers from 'components/home-page/manufacturers';
+import InlinkBlock from 'components/home-page/inlink-block';
 import WhyChoose from 'components/home-page/why-choose';
 import Footer from 'components/layout/footer';
 import { Metadata } from 'next';
 import { Suspense } from 'react';
 
 export const runtime = 'edge';
-const { SITE_NAME, STORE_PREFIX } = process.env;
+const { SITE_NAME } = process.env;
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
@@ -20,17 +20,6 @@ export async function generateMetadata(): Promise<Metadata> {
   };
 }
 
-const manufactureVariant: Record<
-  string,
-  'home' | 'engines' | 'transmissions' | 'remanufactured-engines'
-> = {
-  'reman-transmission': 'transmissions',
-  'car-part-planet': 'home',
-  'reman-engine': 'remanufactured-engines',
-  'transmission-locator': 'transmissions',
-  'engine-locator': 'engines'
-};
-
 export default async function HomePage() {
   return (
     <>
@@ -46,9 +35,7 @@ export default async function HomePage() {
           <FAQ handle="home-page-faqs" />
         </Suspense>
         <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-20">
-          <Suspense>
-            <Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
-          </Suspense>
+          <InlinkBlock />
         </div>
       </div>
       <Suspense>

components/home-page/inlink-block.tsx

@@ -0,0 +1,48 @@
+import Manufacturers from 'components/manufacturers-grid/manufacturers';
+import Tag from 'components/tag';
+import TransmissionCode from 'components/transmission-codes';
+import { getCollection } from 'lib/shopify';
+import { Suspense } from 'react';
+
+const { STORE_PREFIX } = process.env;
+
+const manufactureVariant: Record<
+  string,
+  'home' | 'engines' | 'transmissions' | 'remanufactured-engines'
+> = {
+  'reman-transmission': 'transmissions',
+  'car-part-planet': 'home',
+  'reman-engine': 'remanufactured-engines',
+  'transmission-locator': 'transmissions',
+  'engine-locator': 'engines'
+};
+
+const TransmissionCodesBlock = async () => {
+  const collection = await getCollection({ handle: 'transmissions' });
+
+  if (!collection) {
+    return null;
+  }
+
+  return <TransmissionCode collection={collection} />;
+};
+
+const InlinkBlock = () => {
+  return (
+    <div className="flex flex-col gap-y-3">
+      <Tag text="Get Started" />
+      <div className="space-y-16">
+        {STORE_PREFIX === 'reman-transmission' || STORE_PREFIX === 'transmission-locator' ? (
+          <Suspense>
+            <TransmissionCodesBlock />
+          </Suspense>
+        ) : null}
+        <Suspense>
+          <Manufacturers variant={manufactureVariant[STORE_PREFIX!]} />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export default InlinkBlock;

components/layout/search/bottom-content.tsx

@@ -1,5 +1,5 @@
 import EngineSizes from 'components/engine-sizes';
-import Manufacturers from 'components/home-page/manufacturers';
+import Manufacturers from 'components/manufacturers-grid/manufacturers';
 import Content from 'components/plp/content';
 import Tag from 'components/tag';
 import TransmissionCode from 'components/transmission-codes';

components/manufacturers-grid/manufacturers.tsx

@@ -1,5 +1,5 @@
-import ManufacturersGrid from 'components/manufacturers-grid';
 import { getMetaobjects } from 'lib/shopify';
+import ManufacturersGrid from './grid';
 
 const Manufacturers = async ({
   variant = 'home'

components/plp/tabs.tsx

@@ -6,6 +6,10 @@ import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components';
 const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
   const keys = Object.keys(fields);
 
+  if (!keys.length) {
+    return null;
+  }
+
   return (
     <TabGroup vertical>
       <div className="flex w-full gap-x-10">
@@ -22,8 +26,8 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
         </TabList>
         <TabPanels className="flex basis-3/4">
           {keys.map((key) => (
-            <TabPanel className="flex min-w-full flex-col space-y-5">
-              <RichTextDisplay contentBlocks={JSON.parse(fields[key] || '{}').children} />
+            <TabPanel className="flex min-w-full flex-col space-y-5" key={key}>
+              <RichTextDisplay contentBlocks={JSON.parse(fields[key] || '{}').children || []} />
             </TabPanel>
           ))}
         </TabPanels>

components/transmission-codes/index.tsx

@@ -28,7 +28,7 @@ const TransmissionCode = async ({ collection }: { collection: Collection }) => {
   let transmissionCodes = [] as Metaobject[];
 
   if (
-    (collection.plpType === 'Product Type' || collection.plpType === 'Make') &&
+    ['Product Type', 'Make', 'Home'].includes(collection.plpType) &&
     collection.transmissionCodeLinks
   ) {
     transmissionCodes = await getMetaobjectsByIds(collection.transmissionCodeLinks);

lib/shopify/types.ts

@@ -526,7 +526,8 @@ export type PLPType =
   | 'Model'
   | 'Year'
   | 'Transmission Code'
-  | 'Engine Size';
+  | 'Engine Size'
+  | 'Home';
 
 export type ShopifyCollection = {
   handle: string;