From ee1ce09508cba4b3e182e439094965f6269c30af Mon Sep 17 00:00:00 2001
From: matej <matej@dpoint.si>
Date: Sun, 12 Oct 2025 00:45:36 +0200
Subject: [PATCH] Fixed order total mismatch issue on cancelled page Fixed
 token validation issue Fixed issue displaying shipping method and fee on
 checkout Added Light only theme Fixed positioning issue on mobile view

---
 backend/routes/payment.js                |  7 +++-
 frontend/src/App.jsx                     | 10 ++---
 frontend/src/components/OrderSummary.jsx |  3 +-
 frontend/src/main.jsx                    | 11 ++++--
 frontend/src/pages/Cancel.jsx            | 47 +++++++++++++++++++-----
 frontend/src/pages/Payment.jsx           |  2 +-
 frontend/src/theme.js                    |  8 ++++
 7 files changed, 66 insertions(+), 22 deletions(-)
 create mode 100644 frontend/src/theme.js

diff --git a/backend/routes/payment.js b/backend/routes/payment.js
index 7eb8e4c..042d4ad 100644
--- a/backend/routes/payment.js
+++ b/backend/routes/payment.js
@@ -160,17 +160,20 @@ router.post('/capture-order', validateCaptureOrder, async (req, res) => {
             tokenLength: token?.length
         });
 
+        // Declare tokenData at function scope
+        let tokenData = null;
+
         // Verify token (optional in development)
         const skipTokenValidation = process.env.NODE_ENV === 'development' && process.env.SKIP_TOKEN_VALIDATION === 'true';
 
         if (token && !skipTokenValidation) {
-            const tokenData = verifyToken(token);
+            tokenData = verifyToken(token);
             console.log('Token verification result:', {
                 isValid: !!tokenData,
                 tokenData: tokenData
             });
 
-            if (!tokenData || tokenData.wc_order_id !== parseInt(wc_order_id)) {
+            if (!tokenData || tokenData.wc_order_id !== String(wc_order_id)) {
                 console.error('Token validation failed:', {
                     tokenData,
                     expectedOrderId: wc_order_id,
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 8dc14b6..46fac6d 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -39,11 +39,11 @@ function App() {
                                     gap={4}
                                 >
                                     <Image width="550px" src={logo} className="logo react" alt="React logo" />
-                                    <Center>
-                                        <Button variant="outline" onClick={toggleColorMode} >
-                                        {colorMode === "light" ? <><LuSun /> Toggle Light mode</> : <><LuMoon /> Toogle Dark mode</>}
-                                        </Button>
-                                    </Center>
+                                    {/*<Center>*/}
+                                    {/*    <Button variant="outline" onClick={toggleColorMode} >*/}
+                                    {/*    {colorMode === "light" ? <><LuSun /> Toggle Light mode</> : <><LuMoon /> Toogle Dark mode</>}*/}
+                                    {/*    </Button>*/}
+                                    {/*</Center>*/}
                                 </Grid>
                                 <Flex direction="row" gap="4" justify="space-between" align="center" mb="10">
 
diff --git a/frontend/src/components/OrderSummary.jsx b/frontend/src/components/OrderSummary.jsx
index b1ebf26..21a2e7a 100644
--- a/frontend/src/components/OrderSummary.jsx
+++ b/frontend/src/components/OrderSummary.jsx
@@ -65,6 +65,7 @@ const OrderSummary = ({ orderData, loading, order }) => {
                         <DataList.ItemValue>{orderData.customer_email}</DataList.ItemValue>
                     </DataList.Item>
                 )}*/}
+                                {order.shipping.method &&
                                 <DataList.Item pt="4">
                                     <DataList.ItemLabel>
                                         <Badge colorPalette="teal" variant="solid">
@@ -72,7 +73,7 @@ const OrderSummary = ({ orderData, loading, order }) => {
                                         </Badge>
                                     </DataList.ItemLabel>
                                     <DataList.ItemValue>{formatCurrency(order.shipping.total, orderData.currency)}</DataList.ItemValue>
-                                </DataList.Item>
+                                </DataList.Item> }
                             </> }
                             <DataList.Item pt="4" textStyle="xl">
                                 <DataList.ItemLabel><strong>Total Amount:</strong></DataList.ItemLabel>
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index ab13ea0..f696279 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -1,13 +1,18 @@
 import { Provider } from "@/components/ui/provider"
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ChakraProvider } from "@chakra-ui/react";
+import { system } from "./theme";
 import './index.css'
 import App from './App.jsx'
+import {ThemeProvider} from "next-themes";
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-      <Provider>
-          <App />
-      </Provider>
+      <ChakraProvider value={system}>
+          <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
+            <App />
+          </ThemeProvider>
+      </ChakraProvider>
   </StrictMode>,
 )
diff --git a/frontend/src/pages/Cancel.jsx b/frontend/src/pages/Cancel.jsx
index d6ecee3..9a4816a 100644
--- a/frontend/src/pages/Cancel.jsx
+++ b/frontend/src/pages/Cancel.jsx
@@ -16,20 +16,40 @@ const Cancel = () => {
     const [searchParams] = useSearchParams();
 
     const error = searchParams.get('error');
-    const orderId = searchParams.get('order_id');
+    const orderId = searchParams.get('order_id') || searchParams.get('wc_order_id');
     const paypalToken = searchParams.get('token');
-
+    const orderTotal = searchParams.get('total');
+    const currency = searchParams.get('currency') || 'USD';
+    const description = searchParams.get('description');
+    const customerEmail = searchParams.get('customer_email');
     const cancelUrl = searchParams.get('cancel_url');
+    const returnUrl = searchParams.get('return_url');
+
+    const formatCurrency = (amount, curr = 'USD') => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: curr,
+        }).format(parseFloat(amount));
+    };
+
+    const getErrorMessage = () => {
+        if (error) {
+            return decodeURIComponent(error);
+        }
+        return 'Your payment was cancelled. You can try again or choose a different payment method.';
+    };
 
     const handleRetryPayment = () => {
-        // Build the payment URL with original parameters
         const paymentUrl = new URL('/payment', window.location.origin);
 
-        if (orderId) {
-            paymentUrl.searchParams.set('wc_order_id', orderId);
-            // You might want to fetch original order details here
-            paymentUrl.searchParams.set('total', '25.99'); // This should come from order data
-        }
+        // Preserve all original order parameters
+        if (orderId) paymentUrl.searchParams.set('wc_order_id', orderId);
+        if (orderTotal) paymentUrl.searchParams.set('total', orderTotal);
+        if (currency) paymentUrl.searchParams.set('currency', currency);
+        if (description) paymentUrl.searchParams.set('description', description);
+        if (customerEmail) paymentUrl.searchParams.set('customer_email', customerEmail);
+        if (returnUrl) paymentUrl.searchParams.set('return_url', returnUrl);
+        if (cancelUrl) paymentUrl.searchParams.set('cancel_url', cancelUrl);
 
         window.location.href = paymentUrl.toString();
     };
@@ -41,7 +61,7 @@ const Cancel = () => {
                 <Alert.Content>
                     <Alert.Title>Payment Cancelled</Alert.Title>
                     <Alert.Description>
-                        <Text>Your payment was cancelled. You can try again or choose a different payment method.</Text>
+                        <Text>{getErrorMessage()}</Text>
                     </Alert.Description>
                 </Alert.Content>
             </Alert.Root>
@@ -63,6 +83,13 @@ const Cancel = () => {
                     <strong>Order ID:</strong>
                     <span className="badge bg-secondary ms-2">{orderId}</span>
                     <br/>
+                    {orderTotal && (
+                        <>
+                            <strong>Order Total:</strong>
+                            <span className="ms-2">{formatCurrency(orderTotal, currency)}</span>
+                            <br/>
+                        </>
+                    )}
                     <small className="mt-2 d-block">
                         Your order is still pending. You can complete the payment to process your order.
                     </small>
@@ -121,7 +148,7 @@ const Cancel = () => {
                         <Accordion.ItemIndicator/>
                     </Accordion.ItemTrigger>
                     <Accordion.ItemContent>
-                        <Accordion.ItemBody>Text</Accordion.ItemBody>
+                        <Accordion.ItemBody>Contact Support: Reach us anytime at {import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL} or through live chat.</Accordion.ItemBody>
                     </Accordion.ItemContent>
                 </Accordion.Item>
             </Accordion.Root>
diff --git a/frontend/src/pages/Payment.jsx b/frontend/src/pages/Payment.jsx
index e475864..872c6b9 100644
--- a/frontend/src/pages/Payment.jsx
+++ b/frontend/src/pages/Payment.jsx
@@ -190,7 +190,7 @@ const Payment = () => {
             <Grid
                 templateColumns={{ base: "1fr", md: "repeat(3, 1fr)" }}
                 templateRows="repeat(1, 1fr)"
-                gap="6"
+                // gap="6"
             >
                 <GridItem colSpan={2}>
                     <Center>
diff --git a/frontend/src/theme.js b/frontend/src/theme.js
new file mode 100644
index 0000000..7019fe4
--- /dev/null
+++ b/frontend/src/theme.js
@@ -0,0 +1,8 @@
+import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react";
+
+const config = defineConfig({
+    // put tokens/recipes if you need; not required just to force light mode
+    theme: {},
+});
+
+export const system = createSystem(defaultConfig, config);
\ No newline at end of file