Fixes currency code not showing on product detail page and in cart (v…

…ercel#1104)
thomasledoux1 · Jul 25, 2023 · 37d7522 · 37d7522
1 parent 59fc2bc
commit 37d7522
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
@@ -127,15 +127,15 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                                   {item.merchandise.product.title}
                                 </span>
                                 {item.merchandise.title !== DEFAULT_OPTION ? (
-                                  <p className="text-sm text-neutral-800">
+                                  <p className="text-sm text-neutral-400 dark:text-neutral-600">
                                     {item.merchandise.title}
                                   </p>
                                 ) : null}
                               </div>
                             </Link>
                             <div className="flex h-16 flex-col justify-between">
                               <Price
-                                className="flex flex-col justify-between space-y-2 text-sm"
+                                className="flex justify-end space-y-2 text-right text-sm"
                                 amount={item.cost.totalAmount.amount}
                                 currencyCode={item.cost.totalAmount.currencyCode}
                               />

diff --git a/components/label.tsx b/components/label.tsx
@@ -24,6 +24,7 @@ const Label = ({
           className="flex-none rounded-full bg-blue-600 p-2 text-white"
           amount={amount}
           currencyCode={currencyCode}
+          currencyCodeClassName="hidden @[275px]/label:inline"
         />
       </div>
     </div>

diff --git a/components/price.tsx b/components/price.tsx
@@ -1,18 +1,23 @@
+import clsx from 'clsx';
+
 const Price = ({
   amount,
+  className,
   currencyCode = 'USD',
-  ...props
+  currencyCodeClassName
 }: {
   amount: string;
+  className?: string;
   currencyCode: string;
+  currencyCodeClassName?: string;
 } & React.ComponentProps<'p'>) => (
-  <p suppressHydrationWarning={true} {...props}>
+  <p suppressHydrationWarning={true} className={className}>
     {`${new Intl.NumberFormat(undefined, {
       style: 'currency',
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
     }).format(parseFloat(amount))}`}
-    <span className="hidden @[275px]/label:inline">{` ${currencyCode}`}</span>
+    <span className={clsx('ml-1 inline', currencyCodeClassName)}>{`${currencyCode}`}</span>
   </p>
 );