feat(core): use next-intl to format dates and currencies

.changeset/curly-trees-stare.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+use next-intl formatter to properly localize dates & prices

apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx

@@ -8,6 +8,7 @@ import {
 import { Tag, TagContent } from '@bigcommerce/components/tag';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
+import { getFormatter } from 'next-intl/server';
 
 import { getBlogPost } from '~/client/queries/get-blog-post';
 import { BcImage } from '~/components/bc-image';
@@ -32,7 +33,8 @@ export async function generateMetadata({ params: { blogId } }: Props): Promise<M
  };
 }
 
-export default async function BlogPostPage({ params: { blogId } }: Props) {
+export default async function BlogPostPage({ params: { blogId, locale } }: Props) {
+ const format = await getFormatter({ locale });
  const blogPost = await getBlogPost(+blogId);
 
  if (!blogPost || !blogPost.isVisibleInNavigation) {
@@ -45,7 +47,7 @@ export default async function BlogPostPage({ params: { blogId } }: Props) {
 
  <div className="mb-8 flex">
  <BlogPostDate className="mb-0">
- {new Intl.DateTimeFormat('en-US').format(new Date(blogPost.publishedDate.utc))}
+ {format.dateTime(new Date(blogPost.publishedDate.utc))}
  </BlogPostDate>
  {blogPost.author ? <BlogPostAuthor>, by {blogPost.author}</BlogPostAuthor> : null}
  </div>
@@ -67,7 +69,7 @@ export default async function BlogPostPage({ params: { blogId } }: Props) {
  </BlogPostTitle>
  <BlogPostDate variant="inBanner">
  <span className="text-primary">
- {new Intl.DateTimeFormat('en-US').format(new Date(blogPost.publishedDate.utc))}
+ {format.dateTime(new Date(blogPost.publishedDate.utc))}
  </span>
  </BlogPostDate>
  </BlogPostBanner>

apps/core/app/[locale]/(default)/cart/_components/cart-item.tsx

@@ -1,5 +1,5 @@
 import { NextIntlClientProvider } from 'next-intl';
-import { getMessages } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages } from 'next-intl/server';
 
 import { getCart } from '~/client/queries/get-cart';
 import { ExistingResultType } from '~/client/util';
@@ -15,18 +15,13 @@ export type Product =
 export const CartItem = async ({
  currencyCode,
  product,
- locale,
 }: {
  currencyCode: string;
  product: Product;
- locale: string;
 }) => {
+ const locale = await getLocale();
  const messages = await getMessages({ locale });
-
- const currencyFormatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: currencyCode,
- });
+ const format = await getFormatter({ locale });
 
  return (
  <li>
@@ -88,7 +83,7 @@ export const CartItem = async ({
  <div key={selectedOption.entityId}>
  <span>{selectedOption.name}:</span>{' '}
  <span className="font-semibold">
- {Intl.DateTimeFormat().format(new Date(selectedOption.date.utc))}
+ {format.dateTime(new Date(selectedOption.date.utc))}
  </span>
  </div>
  );
@@ -106,7 +101,10 @@ export const CartItem = async ({
 
  <div>
  <p className="inline-flex w-24 justify-center text-lg font-bold">
- {currencyFormatter.format(product.extendedSalePrice.value)}
+ {format.number(product.extendedSalePrice.value, {
+ style: 'currency',
+ currency: currencyCode,
+ })}
  </p>
  </div>
 

apps/core/app/[locale]/(default)/cart/_components/checkout-summary.tsx

@@ -1,6 +1,6 @@
 import { AlertCircle } from 'lucide-react';
 import { NextIntlClientProvider } from 'next-intl';
-import { getMessages, getTranslations } from 'next-intl/server';
+import { getFormatter, getLocale, getMessages, getTranslations } from 'next-intl/server';
 import { toast } from 'react-hot-toast';
 
 import { getCheckout } from '~/client/queries/get-checkout';
@@ -10,8 +10,10 @@ import { getShippingCountries } from '../_actions/get-shipping-countries';
 import { CouponCode } from './coupon-code';
 import { ShippingEstimator } from './shipping-estimator';
 
-export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; locale: string }) => {
+export const CheckoutSummary = async ({ cartId }: { cartId: string }) => {
+ const locale = await getLocale();
  const t = await getTranslations({ locale, namespace: 'Cart.CheckoutSummary' });
+ const format = await getFormatter({ locale });
  const messages = await getMessages({ locale });
 
  const [checkout, shippingCountries] = await Promise.all([
@@ -27,16 +29,16 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
  return null;
  }
 
- const currencyFormatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: checkout.cart?.currencyCode,
- });
-
  return (
  <>
  <div className="flex justify-between border-t border-t-gray-200 py-4">
  <span className="font-semibold">{t('subTotal')}</span>
- <span>{currencyFormatter.format(checkout.subtotal?.value || 0)}</span>
+ <span>
+ {format.number(checkout.subtotal?.value || 0, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </div>
 
  <NextIntlClientProvider locale={locale} messages={{ Cart: messages.Cart ?? {} }}>
@@ -46,7 +48,13 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
  {checkout.cart?.discountedAmount && (
  <div className="flex justify-between border-t border-t-gray-200 py-4">
  <span className="font-semibold">{t('discounts')}</span>
- <span>-{currencyFormatter.format(checkout.cart.discountedAmount.value)}</span>
+ <span>
+ -
+ {format.number(checkout.cart.discountedAmount.value, {
+ style: 'currency',
+ currency: checkout.cart.currencyCode,
+ })}
+ </span>
  </div>
  )}
 
@@ -57,13 +65,23 @@ export const CheckoutSummary = async ({ cartId, locale }: { cartId: string; loca
  {checkout.taxTotal && (
  <div className="flex justify-between border-t border-t-gray-200 py-4">
  <span className="font-semibold">{t('tax')}</span>
- <span>{currencyFormatter.format(checkout.taxTotal.value)}</span>
+ <span>
+ {format.number(checkout.taxTotal.value, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </div>
  )}
 
  <div className="flex justify-between border-t border-t-gray-200 py-4 text-xl font-bold lg:text-2xl">
  {t('grandTotal')}
- <span>{currencyFormatter.format(checkout.grandTotal?.value || 0)}</span>
+ <span>
+ {format.number(checkout.grandTotal?.value || 0, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </div>
  </>
  );

apps/core/app/[locale]/(default)/cart/_components/coupon-code.tsx

@@ -4,7 +4,7 @@ import { Button } from '@bigcommerce/components/button';
 import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '@bigcommerce/components/form';
 import { Input } from '@bigcommerce/components/input';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
@@ -37,16 +37,13 @@ const SubmitButton = () => {
 
 export const CouponCode = ({ checkout }: { checkout: ExistingResultType<typeof getCheckout> }) => {
  const t = useTranslations('Cart.CheckoutSummary');
+ const format = useFormatter();
+
  const [showAddCoupon, setShowAddCoupon] = useState(false);
  const [selectedCoupon, setSelectedCoupon] = useState<Checkout['coupons'][number] | null>(
  checkout.coupons.at(0) || null,
  );
 
- const currencyFormatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: checkout.cart?.currencyCode,
- });
-
  useEffect(() => {
  if (checkout.coupons[0]) {
  setSelectedCoupon(checkout.coupons[0]);
@@ -84,7 +81,12 @@ export const CouponCode = ({ checkout }: { checkout: ExistingResultType<typeof g
  <span className="font-semibold">
  {t('coupon')} ({selectedCoupon.code})
  </span>
- <span>{currencyFormatter.format(selectedCoupon.discountedAmount.value * -1)}</span>
+ <span>
+ {format.number(selectedCoupon.discountedAmount.value * -1, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </div>
  <form action={onSubmitRemoveCouponCode}>
  <input name="checkoutEntityId" type="hidden" value={checkout.entityId} />

apps/core/app/[locale]/(default)/cart/_components/shipping-estimator.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Button } from '@bigcommerce/components/button';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
 import { getCheckout } from '~/client/queries/get-checkout';
@@ -20,15 +20,11 @@ export const ShippingEstimator = ({
  shippingCountries: ExistingResultType<typeof getShippingCountries>;
 }) => {
  const t = useTranslations('Cart.CheckoutSummary');
+ const format = useFormatter();
 
  const [showShippingInfo, setShowShippingInfo] = useState(false);
  const [showShippingOptions, setShowShippingOptions] = useState(false);
 
- const currencyFormatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: checkout.cart?.currencyCode,
- });
-
  const selectedShippingConsignment = checkout.shippingConsignments?.find(
  (shippingConsignment) => shippingConsignment.selectedShippingOption,
  );
@@ -60,7 +56,12 @@ export const ShippingEstimator = ({
  <div className="flex justify-between">
  <span className="font-semibold">{t('shippingCost')}</span>
  {selectedShippingConsignment ? (
- <span>{currencyFormatter.format(checkout.shippingCostTotal?.value || 0)}</span>
+ <span>
+ {format.number(checkout.shippingCostTotal?.value || 0, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  ) : (
  <Button
  aria-controls="shipping-options"
@@ -113,7 +114,12 @@ export const ShippingEstimator = ({
  {Boolean(checkout.handlingCostTotal?.value) && (
  <div className="flex justify-between border-t border-t-gray-200 py-4">
  <span className="font-semibold">{t('handlingCost')}</span>
- <span>{currencyFormatter.format(checkout.handlingCostTotal?.value || 0)}</span>
+ <span>
+ {format.number(checkout.handlingCostTotal?.value || 0, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </div>
  )}
  </>

apps/core/app/[locale]/(default)/cart/_components/shipping-options.tsx

@@ -4,7 +4,7 @@ import { Label } from '@bigcommerce/components/label';
 import { Message } from '@bigcommerce/components/message';
 import { RadioGroup, RadioItem } from '@bigcommerce/components/radio-group';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
+import { useFormatter, useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
@@ -50,6 +50,7 @@ export const ShippingOptions = ({
  availableShippingOptions: AvailableShippingOptions[] | null;
 }) => {
  const t = useTranslations('Cart.ShippingCost');
+ const format = useFormatter();
 
  const shippingOptions = availableShippingOptions?.map(
  ({ cost, description, entityId: shippingOptionEntityId, isRecommended }) => ({
@@ -60,11 +61,6 @@ export const ShippingOptions = ({
  }),
  );
 
- const currencyFormatter = new Intl.NumberFormat('en-US', {
- style: 'currency',
- currency: checkout.cart?.currencyCode,
- });
-
  const onSubmit = async (formData: FormData) => {
  const { status } = await submitShippingCosts(formData, checkout.entityId, consignmentEntityId);
 
@@ -98,7 +94,12 @@ export const ShippingOptions = ({
  >
  <p className="inline-flex w-full justify-between">
  <span>{option.description}</span>
- <span>{currencyFormatter.format(option.cost)}</span>
+ <span>
+ {format.number(option.cost, {
+ style: 'currency',
+ currency: checkout.cart?.currencyCode,
+ })}
+ </span>
  </p>
  </Label>
  </div>

apps/core/app/[locale]/(default)/cart/page.tsx

@@ -65,26 +65,16 @@ export default async function CartPage({ params: { locale } }: Props) {
  <div className="pb-12 md:grid md:grid-cols-2 md:gap-8 lg:grid-cols-3">
  <ul className="col-span-2">
  {cart.lineItems.physicalItems.map((product) => (
- <CartItem
- currencyCode={cart.currencyCode}
- key={product.entityId}
- locale={locale}
- product={product}
- />
+ <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
  ))}
 
  {cart.lineItems.digitalItems.map((product) => (
- <CartItem
- currencyCode={cart.currencyCode}
- key={product.entityId}
- locale={locale}
- product={product}
- />
+ <CartItem currencyCode={cart.currencyCode} key={product.entityId} product={product} />
  ))}
  </ul>
 
  <div className="col-span-1 col-start-2 lg:col-start-3">
- <CheckoutSummary cartId={cartId} locale={locale} />
+ <CheckoutSummary cartId={cartId} />
 
  <Suspense fallback={t('loading')}>
  <CheckoutButton cartId={cartId} label={t('proceedToCheckout')} />