fix locale string

wendilunar · Sep 11, 2024 · cdd1f4b · cdd1f4b
1 parent 7cbd6f7
commit cdd1f4b
Showing 1 changed file with 34 additions and 7 deletions.
diff --git a/src/components/CartSheet.tsx b/src/components/CartSheet.tsx
@@ -1,5 +1,12 @@
 import { Button } from "./ui/button";
-import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "./ui/sheet";
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetFooter,
+    SheetHeader,
+    SheetTitle
+} from "./ui/sheet";
 import { useStore } from "@nanostores/react";
 import { cart, isCartSheetOpen, removeCartItems } from "@/stores/cart-store";
 import { ScrollArea } from "./ui/scroll-area";
@@ -16,7 +23,9 @@ export default function CartSheet() {
             <SheetContent side="right" className="w-full">
                 <SheetHeader>
                     <SheetTitle className="text-3xl font-extrabold">Basket</SheetTitle>
-                    <SheetDescription className="font-medium">To remove an item, click on the trash can.</SheetDescription>
+                    <SheetDescription className="font-medium">
+                        To remove an item, click on the trash can.
+                    </SheetDescription>
                 </SheetHeader>
 
                 <CartItems c={c} />
@@ -26,12 +35,23 @@ export default function CartSheet() {
                         <div className="flex w-full flex-col items-start">
                             <p className="text-sm font-normal text-foreground/80">Subtotal</p>
                             <p className="text-2xl font-bold text-foreground">
-                                ${parseFloat(c?.cost?.subtotalAmount?.amount ?? "0.00").toFixed(2)}{" "}
-                                <span className="text-xs font-normal text-foreground/80">USD + shipping</span>
+                                $
+                                {parseFloat(
+                                    c?.cost?.subtotalAmount?.amount ?? "0.00"
+                                ).toLocaleString("en-US", {
+                                    minimumFractionDigits: 2,
+                                    maximumFractionDigits: 2
+                                })}
+                                <span className="ml-2 text-xs font-normal text-foreground/80">
+                                    USD + shipping
+                                </span>
                             </p>
                         </div>
                         <Button className="w-full font-bold" asChild size="lg">
-                            <a href={c?.lines.nodes.length > 0 ? c?.checkoutUrl : "#"} rel="noreferrer">
+                            <a
+                                href={c?.lines.nodes.length > 0 ? c?.checkoutUrl : "#"}
+                                rel="noreferrer"
+                            >
                                 <StarIcon className="mr-2 size-5 fill-primary-foreground disabled:cursor-not-allowed" />
                                 Checkout
                             </a>
@@ -65,10 +85,17 @@ function CartItem({ line }: { line: z.infer<typeof CartItemResult> }) {
     return (
         <div className="mt-2 flex w-full flex-row items-center justify-between gap-4 rounded-md border bg-neutral-400/20 p-4">
             <div className="flex w-full flex-row items-center gap-4">
-                <img src={line?.merchandise?.image?.url} alt={line?.merchandise?.image?.altText || ""} className="size-20 rounded-md" />
+                <img
+                    src={line?.merchandise?.image?.url}
+                    alt={line?.merchandise?.image?.altText || ""}
+                    className="size-20 rounded-md"
+                />
                 <div className="flex w-full flex-col items-start gap-1">
                     <p className="text-sm font-medium text-foreground/80">
-                        {line?.merchandise?.product?.title} {line?.merchandise?.title === "Default Title" ? "" : "- " + line?.merchandise?.title}
+                        {line?.merchandise?.product?.title}{" "}
+                        {line?.merchandise?.title === "Default Title"
+                            ? ""
+                            : "- " + line?.merchandise?.title}
                     </p>
                     <p className="text-sm font-normal text-foreground/80">
                         {line?.quantity} x ${line?.cost?.totalAmount?.amount}