From 688bb7426d479339d61218d9667c6ad8725b0099 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Thu, 7 Nov 2024 13:40:01 -0600
Subject: [PATCH 1/2] chore: add localization to product detail add to cart
 button

---
 core/vibes/soul/sections/product-detail/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
index feaf6297f..8fafac735 100644
--- a/core/vibes/soul/sections/product-detail/index.tsx
+++ b/core/vibes/soul/sections/product-detail/index.tsx
@@ -1,6 +1,7 @@
 import { Price, PriceLabel } from '@/vibes/soul/primitives/price-label';
 import { Rating } from '@/vibes/soul/primitives/rating';
 import { ProductGallery } from '@/vibes/soul/sections/product-detail/product-gallery';
+import { useTranslations } from 'next-intl';
 
 import { ProductDetailForm, ProductDetailFormAction } from './product-detail-form';
 import { Field } from './schema';
@@ -24,6 +25,8 @@ type Props<F extends Field> = {
 };
 
 export function ProductDetail<F extends Field>({ product, action, fields }: Props<F>) {
+  const t = useTranslations('Components.AddToCartButton');
+
   return (
     <section className="@container">
       <div className="mx-auto grid w-full max-w-screen-xl grid-cols-1 items-stretch gap-x-8 gap-y-10 px-4 py-10 @xl:px-6 @xl:py-14 @2xl:grid-cols-2 @4xl:px-8 @4xl:py-20 @5xl:gap-x-16">
@@ -53,7 +56,12 @@ export function ProductDetail<F extends Field>({ product, action, fields }: Prop
             <p className="mb-6 text-contrast-500">{product.description}</p>
           )}
 
-          <ProductDetailForm action={action} fields={fields} productId={product.id} />
+          <ProductDetailForm
+            action={action}
+            fields={fields}
+            productId={product.id}
+            ctaLabel={t('addToCart')}
+          />
         </div>
       </div>
     </section>

From 4b735e1a1285a95f9fde1470d6a97c0e3974b7f1 Mon Sep 17 00:00:00 2001
From: jamesqquick <james.q.quick@gmail.com>
Date: Fri, 8 Nov 2024 11:30:00 -0600
Subject: [PATCH 2/2] chore: ProductDetail to accept ctaLabel prop instead of
 handling localization internally

---
 core/app/[locale]/(default)/product/[slug]/page.tsx | 5 ++++-
 core/vibes/soul/sections/product-detail/index.tsx   | 7 +++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/core/app/[locale]/(default)/product/[slug]/page.tsx b/core/app/[locale]/(default)/product/[slug]/page.tsx
index 4985bee45..1675ff418 100644
--- a/core/app/[locale]/(default)/product/[slug]/page.tsx
+++ b/core/app/[locale]/(default)/product/[slug]/page.tsx
@@ -74,6 +74,9 @@ export default async function Product({ params: { locale, slug }, searchParams }
   setRequestLocale(locale);
 
   const t = await getTranslations('Product');
+  const c = await getTranslations('Components');
+
+  const ctaLabel = c('AddToCartButton.addToCart')
 
   const format = await getFormatter();
 
@@ -324,7 +327,7 @@ export default async function Product({ params: { locale, slug }, searchParams }
 
   return (
     <>
-      <ProductDetail action={addToCart} fields={formattedFields} product={formattedProduct} />
+      <ProductDetail action={addToCart} fields={formattedFields} product={formattedProduct} ctaLabel={ctaLabel} />
 
       <ProductDescription
         accordions={accordions}
diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
index 8fafac735..c923231f8 100644
--- a/core/vibes/soul/sections/product-detail/index.tsx
+++ b/core/vibes/soul/sections/product-detail/index.tsx
@@ -1,7 +1,6 @@
 import { Price, PriceLabel } from '@/vibes/soul/primitives/price-label';
 import { Rating } from '@/vibes/soul/primitives/rating';
 import { ProductGallery } from '@/vibes/soul/sections/product-detail/product-gallery';
-import { useTranslations } from 'next-intl';
 
 import { ProductDetailForm, ProductDetailFormAction } from './product-detail-form';
 import { Field } from './schema';
@@ -22,10 +21,10 @@ type Props<F extends Field> = {
   product: ProductDetailProduct;
   action: ProductDetailFormAction<F>;
   fields: F[];
+  ctaLabel: string;
 };
 
-export function ProductDetail<F extends Field>({ product, action, fields }: Props<F>) {
-  const t = useTranslations('Components.AddToCartButton');
+export function ProductDetail<F extends Field>({ product, action, fields, ctaLabel }: Props<F>) {
 
   return (
     <section className="@container">
@@ -60,7 +59,7 @@ export function ProductDetail<F extends Field>({ product, action, fields }: Prop
             action={action}
             fields={fields}
             productId={product.id}
-            ctaLabel={t('addToCart')}
+            ctaLabel={ctaLabel}
           />
         </div>
       </div>