[MKT-1013]feat/add-seolp-coupon-code-to-checkout

src/components/cloud-object-storage/HeroSection.tsx

@@ -2,8 +2,13 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { HighlightText } from '../components/HighlightText';
 import { getImage } from '@/lib/getImage';
+import { PromoCodeName } from '@/lib/types';
+
+export const HeroSection = ({ textContent, couponCode }: { textContent; couponCode?: PromoCodeName }) => {
+  const checkoutUrl = couponCode
+    ? `/cloud-object-storage/checkout?couponCode=${couponCode}`
+    : '/cloud-object-storage/checkout';
 
-export const HeroSection = ({ textContent }) => {
   return (
     <section
       className="flex h-min w-full flex-col items-center justify-between gap-8 px-5 pt-28 lg:flex-row lg:gap-16 lg:px-10 lg:pt-10 xl:px-32 3xl:px-80"
@@ -25,7 +30,7 @@ export const HeroSection = ({ textContent }) => {
         <p className="text-base font-normal leading-tight text-gray-55 lg:text-xl">{textContent.description}</p>
         <div className="flex flex-row gap-4">
           <Link
-            href="/cloud-object-storage/checkout"
+            href={checkoutUrl}
             className="z-10 flex h-min w-min items-center justify-center whitespace-nowrap rounded-sm-6 bg-primary px-6 py-4 text-base font-normal text-white hover:bg-primary-dark"
           >
             {textContent.cta}

src/components/cloud-object-storage/PriceCardSection.tsx

@@ -6,13 +6,18 @@ import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import { Code, CodeBlock, Gauge, HandCoins, Headset, LockSimple, Resize, Star } from '@phosphor-icons/react';
 import { currencyService } from '@/services/currency.service';
+import { PromoCodeName } from '@/lib/types';
 import { useEffect, useState } from 'react';
 
 interface PriceCardSectionProps {
   textContent: CloudObjectStorageText['PriceCardSection'];
+  couponCode?: PromoCodeName;
 }
 
-export const CloudObjectStoragePriceCardSection = ({ textContent }: PriceCardSectionProps): JSX.Element => {
+export const CloudObjectStoragePriceCardSection = ({
+  textContent,
+  couponCode,
+}: PriceCardSectionProps): JSX.Element => {
   const router = useRouter();
   const iconMap = [HandCoins, LockSimple, CodeBlock, Gauge, Resize, Code, Star, Headset];
   const [currency, setCurrency] = useState("€");
@@ -28,6 +33,10 @@ export const CloudObjectStoragePriceCardSection = ({ textContent }: PriceCardSec
     })
   }, []);
 
+  const checkoutUrl = couponCode
+    ? `/cloud-object-storage/checkout?couponCode=${couponCode}`
+    : '/cloud-object-storage/checkout';
+
   const getPrice = (currencyValue: string) => {
   if (currencyValue === 'usd') return 8;
   return 7;
@@ -72,7 +81,7 @@ export const CloudObjectStoragePriceCardSection = ({ textContent }: PriceCardSec
               <Button
                 className="!w-full"
                 text={textContent.cardText.cta}
-                onClick={() => router.push('/cloud-object-storage/checkout')}
+                onClick={() => router.push(checkoutUrl)}
               />
             </div>
 

src/pages/cloud-object-storage/free-cloud-object-storage.tsx

@@ -13,6 +13,9 @@ import FAQSection from '@/components/shared/sections/FaqSection';
 import { GetServerSidePropsContext } from 'next';
 import Script from 'next/script';
 import { sm_breadcrumb_list, sm_faq } from '@/components/utils/schema-markup-generator';
+import { PromoCodeName } from '@/lib/types';
+
+const CHECKOUT_COUPON = PromoCodeName.seolp;
 
 interface FreeCloudObjectStorageProps {
   metatagsDescription: MetatagsDescription[];
@@ -43,9 +46,9 @@ const FreeCloudObjectStorage = ({
       </Script>
       <Layout title={metatags.title} description={metatags.description}>
       <Navbar cta={['default']} lang={lang} textContent={navbarText} fixed />
-      <HeroSection textContent={textContent.HeroSection} />
+      <HeroSection textContent={textContent.HeroSection} couponCode={CHECKOUT_COUPON} />
 
-      <CloudObjectStoragePriceCardSection textContent={textContent.PriceCardSection} />
+      <CloudObjectStoragePriceCardSection textContent={textContent.PriceCardSection} couponCode={CHECKOUT_COUPON} />
 
       <PredictablePricingSection textContent={textContent.PredictablePricingSection} />
 

src/pages/cloud-storage-backup-solutions.tsx

@@ -75,7 +75,7 @@ const CloudStorageBackupSolutions = ({
     {
       imageUrl: '/images/cloud-storage-backup-solutions/internxt_s3.webp',
       animationDirection: 'left',
-      redirect: '/cloud-object-storage/checkout',
+      redirect: `/cloud-object-storage/checkout?couponCode=${PromoCodeName.seolp}`,
       textContent: textContent.WhatWeDo.square2,
     },
   ];