crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-31 01:05:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes currency code not showing on product detail page and in cart (#1104)

Browse Source
This commit is contained in:
Michael Novotny 2023-07-25 08:13:53 -05:00 committed by GitHub
parent 59fc2bc2e9
commit 37d7522d87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/cart/modal.tsx
View File

@ -127,7 +127,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
{item.merchandise.product.title} {item.merchandise.product.title}
</span> </span>
{item.merchandise.title !== DEFAULT_OPTION ? ( {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} {item.merchandise.title}
</p> </p>
) : null} ) : null}
@ -135,7 +135,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</Link> </Link>
<div className="flex h-16 flex-col justify-between"> <div className="flex h-16 flex-col justify-between">
<Price <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} amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode} currencyCode={item.cost.totalAmount.currencyCode}
/> />

1
components/label.tsx
View File

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

11
components/price.tsx
View File

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