From 951263c7e29135d91c6c9b581cf650b1dd145ac2 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Wed, 10 Jul 2024 13:57:44 +0700
Subject: [PATCH] more design fix

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
 components/banner.tsx              |  5 ++-
 components/hero.tsx                | 61 +++++++++++-------------------
 components/layout/footer.tsx       |  5 ++-
 components/logo-square.tsx         |  4 +-
 components/product/core-charge.tsx |  6 +--
 components/product/delivery.tsx    |  6 +--
 lib/constants.ts                   | 27 +++++++++++++
 public/car-part-planet/logo.svg    |  2 +-
 8 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/components/banner.tsx b/components/banner.tsx
index 33541178c..a91ed5598 100644
--- a/components/banner.tsx
+++ b/components/banner.tsx
@@ -1,4 +1,5 @@
 import { ChevronDownIcon } from '@heroicons/react/16/solid';
+import { phoneNumber } from 'lib/constants';
 import Tooltip from './tooltip';
 
 function Banner() {
@@ -6,8 +7,8 @@ function Banner() {
     <div className="flex min-h-10 w-full flex-col items-center justify-center gap-x-8 bg-primary p-2 text-sm font-medium text-white md:flex-row md:p-0">
       <span>
         Speak to a Specialist Now:{' '}
-        <a href={`tel:${8882422605}`} className="ml-1">
-          (888) 242-2605
+        <a href={phoneNumber?.link} className="ml-1">
+          {phoneNumber?.title}
         </a>
       </span>
       <div data-tooltip-id="work-hours-tooltip" className="flex items-center">
diff --git a/components/hero.tsx b/components/hero.tsx
index 0367017e4..65584bd31 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,4 +1,4 @@
-import { getMetaobject, getMetaobjects } from 'lib/shopify';
+import { getMetaobject } from 'lib/shopify';
 import kebabCase from 'lodash.kebabcase';
 import Image from 'next/image';
 import { Suspense } from 'react';
@@ -8,9 +8,26 @@ import ImageDisplay from './page/image-display';
 
 const { SITE_NAME } = process.env;
 
-const Offers = async () => {
-  const offers = await getMetaobjects('usp_item');
+const offers = [
+  {
+    title: 'Free Shipping (Commercial Address)',
+    icon: 'truck'
+  },
+  {
+    title: 'Up to 5 Years Unlimited Miles Warranty',
+    icon: 'arrow-path-rounded-square'
+  },
+  {
+    title: 'No Core Charge for 30 Days',
+    icon: 'currency-dollar'
+  },
+  {
+    title: 'Excellent Customer Support',
+    icon: 'star'
+  }
+];
 
+const Offers = () => {
   return (
     <nav aria-label="Offers" className="order-last bg-white lg:order-first">
       <div className="max-w-8xl mx-auto lg:px-8">
@@ -23,10 +40,7 @@ const Offers = async () => {
               key={offer.title}
               className="flex w-full items-center justify-start px-4 lg:justify-center"
             >
-              <DynamicHeroIcon
-                icon={offer.icon_name as string}
-                className="size-7 flex-shrink-0 text-secondary"
-              />
+              <DynamicHeroIcon icon={offer.icon} className="size-7 flex-shrink-0 text-secondary" />
               <p className="px-3 py-4 text-sm font-medium text-gray-800 md:py-5">{offer.title}</p>
             </li>
           ))}
@@ -36,35 +50,6 @@ const Offers = async () => {
   );
 };
 
-const OffersPlaceholder = () => {
-  return (
-    <nav aria-label="Offers" className="order-last bg-white lg:order-first">
-      <div className="max-w-8xl mx-auto lg:px-8">
-        <ul
-          role="list"
-          className="grid animate-pulse grid-cols-1 divide-y divide-gray-200 py-4 md:py-5 lg:grid-cols-4 lg:divide-x lg:divide-y-0"
-        >
-          <li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
-            <div className="size-7 rounded bg-gray-100" />
-            <div className="h-7 w-1/3 rounded bg-slate-100" />
-          </li>
-          <li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
-            <div className="size-7 rounded bg-gray-100" />
-            <div className="h-7 w-1/3 rounded bg-slate-100" />
-          </li>
-          <li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
-            <div className="size-7 rounded bg-gray-100" />
-            <div className="h-7 w-1/3 rounded bg-slate-100" />
-          </li>
-          <li className="flex w-full items-center justify-start gap-2 px-4 lg:justify-center">
-            <div className="size-7 rounded bg-gray-100" />
-            <div className="h-7 w-1/3 rounded bg-slate-100" />
-          </li>
-        </ul>
-      </div>
-    </nav>
-  );
-};
 const HeroImage = async () => {
   const heroImage = await getMetaobject({
     handle: { type: 'hero', handle: `${kebabCase(SITE_NAME)}-hero` }
@@ -98,9 +83,7 @@ const HeroImage = async () => {
 const Hero = () => {
   return (
     <div className="flex flex-col border-b border-gray-200 lg:border-0">
-      <Suspense fallback={<OffersPlaceholder />}>
-        <Offers />
-      </Suspense>
+      <Offers />
       <div className="relative">
         {/* Decorative image and overlay */}
         <div aria-hidden="true" className="absolute inset-0 overflow-hidden">
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
index 1944cf09b..e41b65cd4 100644
--- a/components/layout/footer.tsx
+++ b/components/layout/footer.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 
 import FooterMenu from 'components/layout/footer-menu';
 import LogoSquare from 'components/logo-square';
+import { phoneNumber } from 'lib/constants';
 import { getMenu } from 'lib/shopify';
 import Image from 'next/image';
 import { Suspense } from 'react';
@@ -22,8 +23,8 @@ export default async function Footer() {
           <Link className="flex items-center text-white md:pt-1" href="/">
             <LogoSquare dark />
           </Link>
-          <a href={`tel:${8882422605}`} className="ml-2 text-white">
-            (888) 242-2605
+          <a href={phoneNumber?.link} className="ml-2 text-white">
+            {phoneNumber?.title}
           </a>
           <p className="ml-2">Monday - Friday 9:00am - 8:00pm EST</p>
           <p className="ml-2">Saturday 11:00am - 4:00pm EST</p>
diff --git a/components/logo-square.tsx b/components/logo-square.tsx
index 0e2203d62..f87a0949b 100644
--- a/components/logo-square.tsx
+++ b/components/logo-square.tsx
@@ -3,7 +3,7 @@ import Image from 'next/image';
 const { STORE_PREFIX } = process.env;
 export default function LogoSquare({ dark = false }: { dark?: boolean }) {
   return (
-    <>
+    <div className="w-36 sm:w-auto">
       {dark ? (
         <Image
           src={`/${STORE_PREFIX}/dark-logo.svg`}
@@ -22,6 +22,6 @@ export default function LogoSquare({ dark = false }: { dark?: boolean }) {
           className="h-full w-full"
         />
       )}
-    </>
+    </div>
   );
 }
diff --git a/components/product/core-charge.tsx b/components/product/core-charge.tsx
index 8a8e166df..84a766e80 100644
--- a/components/product/core-charge.tsx
+++ b/components/product/core-charge.tsx
@@ -4,7 +4,7 @@ import { InformationCircleIcon } from '@heroicons/react/20/solid';
 import { ArrowPathRoundedSquareIcon } from '@heroicons/react/24/outline';
 import Price from 'components/price';
 import SideDialog from 'components/side-dialog';
-import { CORE_VARIANT_ID_KEY, CORE_WAIVER } from 'lib/constants';
+import { CORE_VARIANT_ID_KEY, CORE_WAIVER, phoneNumber } from 'lib/constants';
 import { CoreChargeOption, ProductVariant } from 'lib/shopify/types';
 import { cn, createUrl } from 'lib/utils';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
@@ -119,10 +119,10 @@ const CoreCharge = ({ variants }: CoreChargeProps) => {
                     <div className="md:flex md:justify-between">
                       <p className="mt-1 text-blue-700 md:mt-0">
                         <a
-                          href="tel:+18882422605"
+                          href={phoneNumber?.link}
                           className="whitespace-nowrap text-blue-700 hover:text-blue-600"
                         >
-                          (888) 242-2605
+                          {phoneNumber?.title}
                           <span aria-hidden="true"> &rarr;</span>
                         </a>
                       </p>
diff --git a/components/product/delivery.tsx b/components/product/delivery.tsx
index 32ad1d680..af65c814f 100644
--- a/components/product/delivery.tsx
+++ b/components/product/delivery.tsx
@@ -3,7 +3,7 @@
 import { InformationCircleIcon, TruckIcon } from '@heroicons/react/24/outline';
 import Price from 'components/price';
 import SideDialog from 'components/side-dialog';
-import { DELIVERY_OPTION_KEY } from 'lib/constants';
+import { DELIVERY_OPTION_KEY, phoneNumber } from 'lib/constants';
 import { cn, createUrl } from 'lib/utils';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { ReactNode, useState } from 'react';
@@ -168,10 +168,10 @@ const Delivery = () => {
                       <div className="md:flex md:justify-between">
                         <p className="mt-1 text-blue-700 md:mt-0">
                           <a
-                            href="tel:+18882422605"
+                            href={phoneNumber?.link}
                             className="whitespace-nowrap text-blue-700 hover:text-blue-600"
                           >
-                            (888) 242-2605
+                            {phoneNumber?.title}
                             <span aria-hidden="true"> &rarr;</span>
                           </a>
                         </p>
diff --git a/lib/constants.ts b/lib/constants.ts
index a7268aadc..897731343 100644
--- a/lib/constants.ts
+++ b/lib/constants.ts
@@ -87,3 +87,30 @@ export const URL_PREFIXES = [
   '/transfer-cases',
   '/remanufactured-engines'
 ];
+
+const phoneNumberMap: Record<string, { title: string; link: string }> = {
+  'reman-transmission': {
+    title: '(888) 242-2605',
+    link: 'tel:8882422605'
+  },
+  'car-part-planet': {
+    title: '(888) 412-2772',
+    link: 'tel:8884122772'
+  },
+  'reman-engine': {
+    title: '(877) 343-7352',
+    link: 'tel:8773437352'
+  },
+  'engine-locator': {
+    title: '(302) 966-3140',
+    link: 'tel:3029663140'
+  },
+  'transmission-locator': {
+    title: '(302) 966-3141',
+    link: 'tel:3029663141'
+  }
+};
+
+const { STORE_PREFIX } = process.env;
+
+export const phoneNumber = phoneNumberMap[STORE_PREFIX!];
diff --git a/public/car-part-planet/logo.svg b/public/car-part-planet/logo.svg
index adcedd8f7..880440f38 100644
--- a/public/car-part-planet/logo.svg
+++ b/public/car-part-planet/logo.svg
@@ -1,4 +1,4 @@
-<svg width="373" height="40" viewBox="0 0 373 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="373" height="45" viewBox="0 0 373 45" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M118.287 15.1261C117.737 21.2791 112.821 25.5417 106.291 25.5417C99.073 25.5417 93.6074 20.3524 93.6074 13.3402C93.6074 6.29424 99.0022 1.13867 105.637 1.13867C108.491 1.13867 110.553 1.96424 112.029 3.33905V1.65423H118.216V11.5206H111.891C111.342 8.83832 109.141 7.0861 106.22 7.0861C102.611 7.0861 100.134 9.80204 100.134 13.3402C100.134 16.8783 102.608 19.5942 106.22 19.5942C109.141 19.5942 111.237 17.8083 111.753 15.1261H118.287Z" fill="#EF6C00"/>
 <path d="M138.771 19.8324H140.9V25.0216H132.652V24.0579C131.449 24.8835 130.006 25.3653 128.183 25.3653C123.682 25.3653 119.83 21.652 119.83 16.5672C119.83 11.4824 123.678 7.80273 128.183 7.80273C130.006 7.80273 131.449 8.2509 132.652 9.07309V8.21383H140.9V13.4031H138.771V19.8324ZM132.652 19.1787V13.9557C131.553 13.0291 130.522 12.7527 129.491 12.7527C127.429 12.7527 125.848 14.4039 125.848 16.5672C125.848 18.7305 127.429 20.3816 129.491 20.3816C130.522 20.3816 131.553 20.1087 132.652 19.1787Z" fill="#1A1A25"/>
 <path d="M157.913 14.1955C154.786 14.2629 152.825 14.5729 151.245 14.9166V19.8329H154.749V25.0222H142.959V19.8329H145.126V13.407H142.959V8.21772H151.242V9.96994C152.822 8.83436 154.817 7.94141 157.91 7.94141V14.1955H157.913Z" fill="#1A1A25"/>