From 236fb3d4a78a28ed840c1d10ff3869135b2af829 Mon Sep 17 00:00:00 2001
From: jrphilo <james.philo@me.com>
Date: Thu, 11 Jul 2024 11:42:34 +0200
Subject: [PATCH] feat: hardcode tab sort for now on plps

Signed-off-by: jrphilo <james.philo@me.com>
---
 components/plp/tabs.tsx | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/plp/tabs.tsx b/components/plp/tabs.tsx
index 3104456dd..c417ec1d3 100644
--- a/components/plp/tabs.tsx
+++ b/components/plp/tabs.tsx
@@ -5,6 +5,26 @@ import { getMetaobject } from 'lib/shopify';
 import startCase from 'lodash.startcase';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from './tab-components';
 
+const keySort: { [key: string]: number } = {
+  title: 1,
+  about: 2,
+  upgrades: 3,
+  history: 4,
+  compatability: 5,
+  remanufactured_transmissions: 6,
+  remanufactured_engines: 7,
+  used_transmissions: 8,
+  used_engines: 9,
+  core_return_policy: 10,
+  shipping: 11,
+  remanufactured_transmission_warranty: 12,
+  remanufactured_engine_warranty: 13,
+  used_transmission_warranty: 14,
+  used_engine_warranty: 15,
+  faqs: 16,
+  best_price_guarantee: 17
+};
+
 const TabContent = async ({ id }: { id?: string }) => {
   if (!id) {
     return null;
@@ -31,11 +51,20 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
 
   const isShopifyId = (value?: string) => value?.startsWith('gid://shopify');
 
+  const sortedKeys = keys.sort((a, b) => {
+    const orderA = keySort[a] ?? Infinity;
+    const orderB = keySort[b] ?? Infinity;
+    if (orderA === orderB) {
+      return a.localeCompare(b);
+    }
+    return orderA - orderB;
+  });
+
   return (
     <TabGroup vertical>
       <div className="flex w-full gap-x-10">
         <TabList className="flex shrink-0 basis-1/4 flex-col gap-2">
-          {keys.map((key) => (
+          {sortedKeys.map((key) => (
             <Tab
               key={key}
               className="flex items-center justify-between rounded-sm bg-gray-200/60 p-3 text-left text-sm font-medium text-content-strong focus:outline-none focus:ring-0 data-[selected]:bg-primary data-[selected]:text-white"
@@ -46,7 +75,7 @@ const Tabs = ({ fields }: { fields: { [key: string]: string } }) => {
           ))}
         </TabList>
         <TabPanels className="flex basis-3/4">
-          {keys.map((key) => (
+          {sortedKeys.map((key) => (
             <TabPanel className="flex min-w-full flex-col space-y-5" key={key}>
               {isShopifyId(fields[key]) ? (
                 <TabContent id={fields[key]} />