fix: agregando detalles al carrito

client/env.config.ts

@@ -5,10 +5,12 @@ export interface EnvConfig {
   VERCEL_ENV: string;
   VERCEL_PROJECT_PRODUCTION_URL: string;
   VERCEL_URL: string;
+  NEXT_PUBLIC_CLIENT_ID:string;
 }
 const env: EnvConfig = {
     API_URL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000',
     APP_URL: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:8080',
+    NEXT_PUBLIC_CLIENT_ID: process.env.NEXT_PUBLIC_CLIENT_ID || '',
     NODE_ENV: process.env.NODE_ENV || 'development',
     VERCEL_ENV: process.env.VERCEL_ENV || '',
     VERCEL_PROJECT_PRODUCTION_URL: process.env.VERCEL_PROJECT_PRODUCTION_URL || '',

client/src/features/cart/components/CartPage/index.tsx

@@ -17,9 +17,9 @@ const CartSection = async () => {
 
         <div className="mb-10 w-full lg:w-1/4">
           <PaymentSummary
-            subtotal={6071}
+            subtotal={0}
             serviceFee={130}
-            discount={20}
+            discount={0}
             paymentMethods={['/svg/Stripe.svg', '/svg/PayPal.png', '/svg/Etherium.png']}
           />
         </div>

client/src/features/cart/components/PaymentSummary/index.tsx

@@ -1,8 +1,10 @@
 'use client';
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import React, { useState } from 'react';
 import Button from '@core/components/Button';
+import { cartStoreAtom } from '@features/cart/store/cart.store';
 import { Paid } from '../Paypal/Paid';
 
 interface PaymentSummaryProps {
@@ -19,7 +21,10 @@ const PaymentSummary: React.FC<PaymentSummaryProps> = ({
   paymentMethods,
 }) => {
   const t = useTranslations<'SumaryCart'>('SumaryCart');
-  const total = subtotal + serviceFee - (subtotal * discount) / 100;
+  const cart = useAtomValue(cartStoreAtom);
+  const price = cart.reduce((acc, item) => acc + parseFloat(item.price as string), 0);
+  const fee = price > 0 ? serviceFee : 0;
+  const total = price + fee - (price * discount) / 100;
 
   const [selectedMethodIndex, setSelectedMethodIndex] = useState<number | null>(null);
 
@@ -33,10 +38,10 @@ const PaymentSummary: React.FC<PaymentSummaryProps> = ({
     <div className="rounded-lg border-2 border-[#21262f] bg-[#222934] p-4 text-white shadow-app-1 md:grow md:p-3 lg:p-4">
       <h3 className="mb-4 text-lg font-semibold">{t('Resumen')}</h3>
       <p className="mb-3 text-sm">
-        {t('Subtotal')}: <span className="float-right">${subtotal.toFixed(2)}</span>
+        {t('Subtotal')}: <span className="float-right">${price}</span>
       </p>
       <p className="mb-10 text-sm">
-        {t('Tarifa')}: <span className="float-right">${serviceFee.toFixed(2)}</span>
+        {t('Tarifa')}: <span className="float-right">${fee}</span>
       </p>
       <div className="mt-4">
         <label htmlFor="coupon" className="mb-3 block text-sm">

client/src/features/cart/components/Paypal/Paid.tsx

@@ -1,8 +1,14 @@
 'use client';
 import { PayPalButtons, PayPalScriptProvider } from '@paypal/react-paypal-js';
+import { useAtomValue } from 'jotai';
+import { cartStoreAtom } from '@features/cart/store/cart.store';
+import env from '@root/env.config';
 export const Paid = () => {
-  const clientId: string = process.env.NEXT_PUBLIC_CLIENT_ID!;
-  const price = '19.99'; // En formato string con dos decimales
+  const clientId: string = env.NEXT_PUBLIC_CLIENT_ID;
+  const cart = useAtomValue(cartStoreAtom);
+  const total = cart.reduce((acc, item) => acc + parseFloat(item.price as string), 0) + 130;
+  const price = total.toString();
+  // const price = prise; // En formato string con dos decimales
   const currency = 'USD'; // Código de moneda, e.g., USD, EUR, etc.
   return (
     <div className="flex items-center justify-center">