From 37d7522d87ff75f3bc612be01ddc655a802bb9cf Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Tue, 25 Jul 2023 08:13:53 -0500
Subject: [PATCH] Fixes currency code not showing on product detail page and in
 cart (#1104)

---
 components/cart/modal.tsx |  4 ++--
 components/label.tsx      |  1 +
 components/price.tsx      | 11 ++++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 0c20ede64..547621975 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -127,7 +127,7 @@ 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}
@@ -135,7 +135,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
                             </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
index 471fe7a25..e49efce40 100644
--- 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
index 1ec29fe93..e7090148d 100644
--- 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>
 );