feat: update currency display to PEN in Orders, ProductCard, and Checkout components

Author: diegotc86

src/routes/account/orders/index.tsx

@@ -53,9 +53,9 @@ export default function Orders({ loaderData }: Route.ComponentProps) {
                       Total
                     </dt>
                     <dd className="mt-1 font-medium text-foreground">
-                      {order.totalAmount.toLocaleString("en-US", {
+                      {order.totalAmount.toLocaleString("es-PE", {
                         style: "currency",
-                        currency: "USD",
+                        currency: "PEN",
                       })}
                     </dd>
                   </div>
@@ -102,19 +102,19 @@ export default function Orders({ loaderData }: Route.ComponentProps) {
                               {item.title}
                             </div>
                             <div className="mt-1 sm:hidden">
-                              {item.quantity} × ${item.price.toFixed(2)}
+                              {item.quantity} × S/{item.price.toFixed(2)}
                             </div>
                           </div>
                         </div>
                       </td>
                       <td className="py-6 pr-8 text-center hidden sm:table-cell">
-                        ${item.price.toFixed(2)}
+                        S/{item.price.toFixed(2)}
                       </td>
                       <td className="py-6 pr-8 text-center hidden sm:table-cell">
                         {item.quantity}
                       </td>
                       <td className="py-6 pr-8 whitespace-nowrap text-center font-medium text-foreground">
-                        ${(item.price * item.quantity).toFixed(2)}
+                        S/{(item.price * item.quantity).toFixed(2)}
                       </td>
                     </tr>
                   ))}

src/routes/cart/index.tsx

@@ -90,7 +90,7 @@ export default function Cart({ loaderData }: Route.ComponentProps) {
           ))}
           <div className="flex justify-between p-6 text-base font-medium border-b">
             <p>Total</p>
-            <p>${total.toFixed(2)}</p>
+            <p>S/{total.toFixed(2)}</p>
           </div>
           <div className="p-6">
             <Button size="lg" className="w-full" asChild>

src/routes/category/components/product-card/index.tsx

@@ -25,7 +25,7 @@ export function ProductCard({ product }: ProductCardProps) {
         <div className="flex grow flex-col gap-2 p-4">
           <h2 className="text-sm font-medium">{product.title}</h2>
           <p className="text-sm text-muted-foreground">{product.description}</p>
-          <p className="mt-auto text-base font-medium">${product.price}</p>
+          <p className="mt-auto text-base font-medium">S/{product.price}</p>
         </div>
         {product.isOnSale && (
           <span className="absolute top-0 right-0 rounded-bl-xl bg-primary px-2 py-1 text-sm font-medium text-primary-foreground">

src/routes/checkout/index.tsx

@@ -86,7 +86,7 @@ export async function action({ request }: Route.ActionArgs) {
   const token = formData.get("token") as string;
 
   const body = {
-    amount: 2000,
+    amount: 2000, // TODO: Calculate total dynamically
     currency_code: "PEN",
     email: shippingDetails.email,
     source_id: token,
@@ -97,14 +97,15 @@ export async function action({ request }: Route.ActionArgs) {
     method: "POST",
     headers: {
       "content-type": "application/json",
-      Authorization: `Bearer sk_test_EC8oOLd3ZiCTKqjN`,
+      Authorization: `Bearer sk_test_EC8oOLd3ZiCTKqjN`, // TODO: Use environment variable
     },
     body: JSON.stringify(body),
   });
 
   if (!response.ok) {
     const errorData = await response.json();
     console.error("Error creating charge:", errorData);
+    // TODO: Handle error appropriately
     throw new Error("Error processing payment");
   }
 
@@ -118,7 +119,7 @@ export async function action({ request }: Route.ActionArgs) {
 
   // TODO
   // @ts-expect-error Arreglar el tipo de shippingDetails
-  const { id: orderId } = await createOrder(items, shippingDetails);
+  const { id: orderId } = await createOrder(items, shippingDetails); // TODO: Add payment information to the order
 
   await deleteRemoteCart(request);
   const session = await getSession(request.headers.get("Cookie"));
@@ -155,6 +156,7 @@ export default function Checkout({ loaderData }: Route.ComponentProps) {
   const navigation = useNavigation();
   const submit = useSubmit();
   const loading = navigation.state === "submitting";
+
   const [culqui, setCulqui] = useState<CulqiInstance | null>(null);
   const scriptRef = useRef<HTMLScriptElement | null>(null);
 
@@ -221,13 +223,18 @@ export default function Checkout({ loaderData }: Route.ComponentProps) {
       .then((CulqiCheckout) => {
         const config = {
           settings: {
-            currency: "USD",
+            currency: "PEN",
             amount: total * 100,
           },
           client: {
             email: user?.email,
           },
-          options: {},
+          options: {
+            paymentMethods: {
+              tarjeta: true,
+              yape: false,
+            },
+          },
           appearance: {},
         };
 
@@ -297,14 +304,14 @@ export default function Checkout({ loaderData }: Route.ComponentProps) {
                     <div className="flex text-sm font-medium gap-4 items-center self-end">
                       <p>{quantity}</p>
                       <X className="w-4 h-4" />
-                      <p>${product.price.toFixed(2)}</p>
+                      <p>S/{product.price.toFixed(2)}</p>
                     </div>
                   </div>
                 </div>
               ))}
               <div className="flex justify-between p-6 text-base font-medium">
                 <p>Total</p>
-                <p>${total.toFixed(2)}</p>
+                <p>S/{total.toFixed(2)}</p>
               </div>
             </div>
           </div>

src/routes/product/index.tsx

@@ -41,7 +41,7 @@ export default function Product({ loaderData }: Route.ComponentProps) {
             <h1 className="text-3xl leading-9 font-bold mb-3">
               {product.title}
             </h1>
-            <p className="text-3xl leading-9 mb-6">${product.price}</p>
+            <p className="text-3xl leading-9 mb-6">S/{product.price}</p>
             <p className="text-sm leading-5 text-muted-foreground mb-10">
               {product.description}
             </p>