From c577a84fe44ca4eccbbc3df24298e50b3526d010 Mon Sep 17 00:00:00 2001
From: jrphilo <james.philo@me.com>
Date: Fri, 12 Jul 2024 09:43:33 +0200
Subject: [PATCH] feat: dynamic USPs

Signed-off-by: jrphilo <james.philo@me.com>
---
 components/product/special-offer.tsx | 40 ++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/components/product/special-offer.tsx b/components/product/special-offer.tsx
index 5bc8bc933..536937cf1 100644
--- a/components/product/special-offer.tsx
+++ b/components/product/special-offer.tsx
@@ -7,23 +7,41 @@ import {
   UsersIcon
 } from '@heroicons/react/24/outline';
 
+const { STORE_PREFIX } = process.env;
+
+const storeConfig = {
+  'reman-transmission': {
+    shippingTitle: 'Flat Rate Shipping',
+    shippingText: 'We offer a flat $299 shipping fee to commercial addresses',
+    warrantyTitle: 'Unbeatable Warranty',
+    warrantyText: 'Up to 5 years with unlimited miles'
+  },
+
+  default: {
+    shippingTitle: 'Free Shipping',
+    shippingText: 'We offer free shipping to commercial addresses',
+    warrantyTitle: 'Standard Warranty',
+    warrantyText: 'Up to 3 years with unlimited miles'
+  }
+};
+
+const config = storeConfig[STORE_PREFIX] || storeConfig.default;
+
 const SpecialOffer = () => {
   return (
     <div className="mt-10 grid grid-cols-2 gap-y-5 xl:grid-cols-3">
       <div className="flex items-start gap-3">
-        <TruckIcon className="size-12 text-primary" />
+        <TruckIcon className="size-10 text-primary" />
         <div className="flex flex-col">
-          <span className="font-medium uppercase">Flat Rate Shipping</span>
-          <span className="text-sm font-light">
-            We offer a flat $299 shipping fee to commercial addresses
-          </span>
+          <span className="font-medium uppercase">{config.shippingTitle}</span>
+          <span className="mr-2.5 text-sm font-light">{config.shippingText}</span>
         </div>
       </div>
       <div className="flex items-start gap-3">
         <CurrencyDollarIcon className="size-10 text-primary" />
         <div className="flex flex-col">
           <span className="font-medium uppercase">Best Price Guarantee</span>
-          <span className="text-sm font-light">
+          <span className="mr-2.5 text-sm font-light">
             We will match or beat any competitor&apos;s pricing
           </span>
         </div>
@@ -31,8 +49,8 @@ const SpecialOffer = () => {
       <div className="flex items-start gap-3">
         <ShieldCheckIcon className="size-8 text-primary" />
         <div className="flex flex-col">
-          <span className="font-medium uppercase">Unbeatable Warranty</span>
-          <span className="text-sm font-light">Up to 5 years with unlimited miles</span>
+          <span className="font-medium uppercase">{config.warrantyTitle}</span>
+          <span className="mr-2.5 text-sm font-light">{config.warrantyText}</span>
         </div>
       </div>
 
@@ -40,7 +58,7 @@ const SpecialOffer = () => {
         <UsersIcon className="size-10 text-primary" />
         <div className="flex flex-col">
           <span className="font-medium uppercase">Excellent Support</span>
-          <span className="text-sm font-light">
+          <span className="mr-2.5 text-sm font-light">
             End-to-end, expert care from our customer service team
           </span>
         </div>
@@ -50,7 +68,7 @@ const SpecialOffer = () => {
         <ArrowPathIcon className="size-10 text-primary" />
         <div className="flex flex-col">
           <span className="font-medium uppercase">Core Charge Waiver</span>
-          <span className="text-sm font-light">
+          <span className="mr-2.5 text-sm font-light">
             Avoid the core charge by returning within 30 days
           </span>
         </div>
@@ -60,7 +78,7 @@ const SpecialOffer = () => {
         <StarIcon className="size-10 text-primary" />
         <div className="flex flex-col">
           <span className="font-medium uppercase">Free Core Return</span>
-          <span className="text-sm font-light">
+          <span className="mr-2.5 text-sm font-light">
             Unlike competitors, we pay for the return of your core
           </span>
         </div>