From 08f41b6bb37f764a0ee6a98e89dcd262a06c8877 Mon Sep 17 00:00:00 2001
From: matej <matej@dpoint.si>
Date: Sun, 28 Sep 2025 14:59:29 +0200
Subject: [PATCH] Cleaned up unused classNames and imported Components

---
 frontend/src/App.jsx                     |   3 +-
 frontend/src/components/PayPalButton.jsx |   2 +-
 frontend/src/pages/Cancel.jsx            | 156 +++++++++++------------
 frontend/src/pages/Payment.jsx           |  99 +++++++-------
 frontend/src/pages/Success.jsx           |  38 +++---
 5 files changed, 147 insertions(+), 151 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e510f66..8dc14b6 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,6 @@
 "use client"
 import React from 'react';
-import {Grid, GridItem, Button, Box, Container, Image, Flex, Center, SimpleGrid, Text} from "@chakra-ui/react"
+import {Grid, Button, Box, Container, Image, Flex, Center, Text} from "@chakra-ui/react"
 import { LuMoon, LuSun } from "react-icons/lu";
 import { useColorMode } from "@/components/ui/color-mode"
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
@@ -25,7 +25,6 @@ function App() {
             <Router>
                 <div className="App">
                     <Container mt="5">
-
                         <Grid>
                             <Box
                                 p="4"
diff --git a/frontend/src/components/PayPalButton.jsx b/frontend/src/components/PayPalButton.jsx
index c475752..791752e 100644
--- a/frontend/src/components/PayPalButton.jsx
+++ b/frontend/src/components/PayPalButton.jsx
@@ -52,7 +52,7 @@ const PayPalButton = ({ orderData, onCreateOrder, onCaptureOrder, loading }) =>
     }
 
     return (
-        <div className="paypal-button-wrapper">
+        <div>
             {paypalError && (
                 <Alert.Root mb="5" status="warning">
                     <Alert.Indicator />
diff --git a/frontend/src/pages/Cancel.jsx b/frontend/src/pages/Cancel.jsx
index bffc7f5..d6ecee3 100644
--- a/frontend/src/pages/Cancel.jsx
+++ b/frontend/src/pages/Cancel.jsx
@@ -3,9 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 import {
     Alert,
     Text,
-    Spinner,
     Center,
-    VStack,
     HStack,
     Button,
     Accordion,
@@ -37,7 +35,7 @@ const Cancel = () => {
     };
 
     return (
-        <div className="payment-container">
+        <div>
             <Alert.Root status="error" title="Payment Cancelled">
                 <Alert.Indicator />
                 <Alert.Content>
@@ -48,89 +46,89 @@ const Cancel = () => {
                 </Alert.Content>
             </Alert.Root>
 
-                    {/*<div className={`payment-status-icon ${getIconClass()}`}>*/}
-                    {/*    <i className={getIconName()}></i>*/}
-                    {/*</div>*/}
+            {/*<div className={`payment-status-icon ${getIconClass()}`}>*/}
+            {/*    <i className={getIconName()}></i>*/}
+            {/*</div>*/}
 
-                    {/*<h2 className={`mb-3 ${getTitleClass()}`}>*/}
-                    {/*    {getTitle()}*/}
-                    {/*</h2>*/}
+            {/*<h2 className={`mb-3 ${getTitleClass()}`}>*/}
+            {/*    {getTitle()}*/}
+            {/*</h2>*/}
 
-                    {/*<p className="lead mb-4">*/}
-                    {/*    {getErrorMessage()}*/}
-                    {/*</p>*/}
+            {/*<p className="lead mb-4">*/}
+            {/*    {getErrorMessage()}*/}
+            {/*</p>*/}
 
-                    {orderId && (
-                        <div className="alert alert-info">
-                            <strong>Order ID:</strong>
-                            <span className="badge bg-secondary ms-2">{orderId}</span>
-                            <br />
-                            <small className="mt-2 d-block">
-                                Your order is still pending. You can complete the payment to process your order.
-                            </small>
-                        </div>
-                    )}
+            {orderId && (
+                <div className="alert alert-info">
+                    <strong>Order ID:</strong>
+                    <span className="badge bg-secondary ms-2">{orderId}</span>
+                    <br/>
+                    <small className="mt-2 d-block">
+                        Your order is still pending. You can complete the payment to process your order.
+                    </small>
+                </div>
+            )}
 
-                    {paypalToken && (
-                        <div className="mt-3">
-                            <small className="text-muted">
-                                <strong>PayPal Reference:</strong> {paypalToken}
-                            </small>
-                        </div>
-                    )}
+            {paypalToken && (
+                <div className="mt-3">
+                    <small className="text-muted">
+                        <strong>PayPal Reference:</strong> {paypalToken}
+                    </small>
+                </div>
+            )}
 
-                    <Center mt="5" mb="5" gap="5">
-                        <HStack>
-                            <Button
-                                variant="outline"
-                                onClick={handleRetryPayment}
-                            >
-                                <LuRepeat /> Try Payment Again
-                            </Button>
-                        </HStack>
-                        <a
-                            href={cancelUrl}
+            <Center mt="5" mb="5" gap="5">
+                <HStack>
+                    <Button
+                        variant="outline"
+                        onClick={handleRetryPayment}
+                    >
+                        <LuRepeat/> Try Payment Again
+                    </Button>
+                </HStack>
+                <a
+                    href={cancelUrl}
+                >
+                    <HStack>
+                        <Button
+                            variant="outline"
                         >
-                            <HStack>
-                                <Button
-                                    variant="outline"
-                                >
-                                    <LuMoveLeft /> Back to the Store
-                                </Button>
-                            </HStack>
-                        </a>
-                    </Center>
-                    <Accordion.Root multiple defaultValue={["a", "b"]}>
-                        <Accordion.Item value="a">
-                            <Accordion.ItemTrigger>
-                                <Span flex="1">If you're experiencing issues with payment:</Span>
-                                <Accordion.ItemIndicator />
-                            </Accordion.ItemTrigger>
-                            <Accordion.ItemContent>
-                                <Accordion.ItemBody>
-                                    <Box ml="5" as="ul" listStyleType="circle">
-                                        <li>Check your internet connection</li>
-                                        <li>Ensure your PayPal account has sufficient funds</li>
-                                        <li>Try using a different payment method</li>
-                                        <li>Contact our support team if the problem persists</li>
-                                    </Box>
-                                </Accordion.ItemBody>
-                            </Accordion.ItemContent>
-                        </Accordion.Item>
-                        <Accordion.Item value="b">
-                            <Accordion.ItemTrigger>
-                                <Span flex="1">Need Help?</Span>
-                                <Accordion.ItemIndicator />
-                            </Accordion.ItemTrigger>
-                            <Accordion.ItemContent>
-                                <Accordion.ItemBody>Text</Accordion.ItemBody>
-                            </Accordion.ItemContent>
-                        </Accordion.Item>
-                    </Accordion.Root>
+                            <LuMoveLeft/> Back to the Store
+                        </Button>
+                    </HStack>
+                </a>
+            </Center>
+            <Accordion.Root multiple defaultValue={["a", "b"]}>
+                <Accordion.Item value="a">
+                    <Accordion.ItemTrigger>
+                        <Span flex="1">If you're experiencing issues with payment:</Span>
+                        <Accordion.ItemIndicator/>
+                    </Accordion.ItemTrigger>
+                    <Accordion.ItemContent>
+                        <Accordion.ItemBody>
+                            <Box ml="5" as="ul" listStyleType="circle">
+                                <li>Check your internet connection</li>
+                                <li>Ensure your PayPal account has sufficient funds</li>
+                                <li>Try using a different payment method</li>
+                                <li>Contact our support team if the problem persists</li>
+                            </Box>
+                        </Accordion.ItemBody>
+                    </Accordion.ItemContent>
+                </Accordion.Item>
+                <Accordion.Item value="b">
+                    <Accordion.ItemTrigger>
+                        <Span flex="1">Need Help?</Span>
+                        <Accordion.ItemIndicator/>
+                    </Accordion.ItemTrigger>
+                    <Accordion.ItemContent>
+                        <Accordion.ItemBody>Text</Accordion.ItemBody>
+                    </Accordion.ItemContent>
+                </Accordion.Item>
+            </Accordion.Root>
 
-                    <Center>
-                        <Text textStyle="xs">Contact Support: {import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
-                    </Center>
+            <Center>
+                <Text textStyle="xs">Contact Support: {import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
+            </Center>
         </div>
     );
 };
diff --git a/frontend/src/pages/Payment.jsx b/frontend/src/pages/Payment.jsx
index 4161304..19a0c27 100644
--- a/frontend/src/pages/Payment.jsx
+++ b/frontend/src/pages/Payment.jsx
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import {
     Alert,
     Heading,
-    DataList,
     Timeline,
     Text,
     Spinner,
@@ -12,7 +11,7 @@ import {
     EmptyState,
     VStack, HStack
 } from "@chakra-ui/react"
-import { LuShoppingBasket, LuPackageCheck, LuLoaderCircle, LuMail } from "react-icons/lu";
+import { LuShoppingBasket, LuPackageCheck, LuMail } from "react-icons/lu";
 import { useSearchParams, useNavigate } from 'react-router-dom';
 import OrderSummary from '../components/OrderSummary.jsx';
 import PayPalButton from '../components/PayPalButton.jsx';
@@ -170,7 +169,7 @@ const Payment = () => {
     }
 
     return (
-        <div className="payment-container">
+        <div>
             <Heading as="h1" fontSize="2xl" textAlign="center" mb="10">Secure Payment with PayPal</Heading>
             {order.length === 0 ?
                 <Center>
@@ -266,54 +265,58 @@ const Payment = () => {
                 </GridItem>
             </Grid>
             }
+            {error && (
+                <Alert.Root status="error" mb="5">
+                    <Alert.Indicator/>
+                    <Alert.Content>
+                        <Alert.Title>{error}</Alert.Title>
+                        <Alert.Description>
+                            <Text mb="2">We're available via email and usually respond within a few hours. So don't
+                                hesitate to reach out if you need assistance - we're here to help.</Text>
+                            <HStack>
+                                <LuMail/>
+                                <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
+                            </HStack>
+                        </Alert.Description>
+                    </Alert.Content>
+                </Alert.Root>
+            )}
 
+            {backendStatus && (
+                <Alert.Root status="info" mb="5">
+                    <Alert.Indicator/>
+                    <Alert.Content>
+                        <Alert.Title>Payment system connected</Alert.Title>
+                        <Alert.Description>
+                            <Text mb="2">We're available via email and usually respond within a few hours. So don't
+                                hesitate to reach out if you need assistance - we're here to help.</Text>
+                            <HStack>
+                                <LuMail/>
+                                <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
+                            </HStack>
 
-            <div className="payment-card">
+                        </Alert.Description>
+                    </Alert.Content>
+                </Alert.Root>
+            )}
 
-                <div className="payment-body">
-                    {error && (
-                        <div className="error-message">
-                            <i className="fas fa-exclamation-triangle me-2"></i>
-                            {error}
-                        </div>
-                    )}
-
-                    {backendStatus && (
-                        <Alert.Root status="info" mb="5">
-                            <Alert.Indicator />
-                            <Alert.Content>
-                                <Alert.Title>Payment system connected</Alert.Title>
-                                <Alert.Description>
-                                    <Text mb="2">We're available via email and usually respond within a few hours. So don't hesitate to reach out if you need assistance - we're here to help.</Text>
-                                    <HStack>
-                                        <LuMail />
-                                        <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
-                                    </HStack>
-
-                                </Alert.Description>
-                            </Alert.Content>
-                        </Alert.Root>
-                    )}
-
-                    {/* Debug info for development */}
-                    {import.meta.env.VITE_NODE_ENV === 'development' && (
-                        <Alert.Root status="info" colorPalette="teal">
-                            <Alert.Indicator />
-                            <Alert.Content>
-                                <Alert.Title>Debug Info</Alert.Title>
-                                <Alert.Description>
-                                    <small>
-                                        <strong>Order ID:</strong> {orderData.wc_order_id}<br/>
-                                        <strong>Total:</strong> ${orderData.total}<br/>
-                                        <strong>PayPal Order:</strong> {paypalOrderId || 'Not created yet'}<br/>
-                                        <strong>Backend:</strong> {backendStatus ? '✅ Connected' : '❌ Disconnected'}
-                                    </small>
-                                </Alert.Description>
-                            </Alert.Content>
-                        </Alert.Root>
-                    )}
-                </div>
-            </div>
+            {/* Debug info for development */}
+            {import.meta.env.VITE_NODE_ENV === 'development' && (
+                <Alert.Root status="info" colorPalette="teal">
+                    <Alert.Indicator/>
+                    <Alert.Content>
+                        <Alert.Title>Debug Info</Alert.Title>
+                        <Alert.Description>
+                            <small>
+                                <strong>Order ID:</strong> {orderData.wc_order_id}<br/>
+                                <strong>Total:</strong> ${orderData.total}<br/>
+                                <strong>PayPal Order:</strong> {paypalOrderId || 'Not created yet'}<br/>
+                                <strong>Backend:</strong> {backendStatus ? '✅ Connected' : '❌ Disconnected'}
+                            </small>
+                        </Alert.Description>
+                    </Alert.Content>
+                </Alert.Root>
+            )}
         </div>
     );
 };
diff --git a/frontend/src/pages/Success.jsx b/frontend/src/pages/Success.jsx
index 3cc6b43..6f80792 100644
--- a/frontend/src/pages/Success.jsx
+++ b/frontend/src/pages/Success.jsx
@@ -76,14 +76,15 @@ const Success = () => {
     }
 
     return (
-        <div className="payment-container">
+        <div>
             <Alert.Root status="success" title="Payment Successful!" mb="5">
-                <Alert.Indicator />
+                <Alert.Indicator/>
                 <Alert.Content>
                     <Alert.Title>Payment Successful!</Alert.Title>
                     <Alert.Description>
                         <Text>Thank you for your payment. Your transaction has been completed successfully.</Text>
-                        <Text>A confirmation email has been sent to your email address with all the transaction details.</Text>
+                        <Text>A confirmation email has been sent to your email address with all the transaction
+                            details.</Text>
                         <Text>Redirecting you back to checkout in <strong>{countdown}</strong> seconds...</Text>
                     </Alert.Description>
                 </Alert.Content>
@@ -131,25 +132,20 @@ const Success = () => {
                 )}
             </DataList.Root>
 
-
-
-            <div className="payment-card">
-                <div className="payment-body text-center">
-                    <Center mt="5" mb="5">
-                        <a
-                            href={returnUrl}
+            <Center mt="5" mb="5">
+                <a
+                    href={returnUrl}
+                >
+                    <HStack>
+                        <Button
+                            variant="outline"
                         >
-                            <HStack>
-                                <Button
-                                    variant="outline"
-                                >
-                                    <LuMoveLeft /> Back to the Store
-                                </Button>
-                            </HStack>
-                        </a>
-                    </Center>
-                </div>
-            </div>
+                            <LuMoveLeft/> Back to the Store
+                        </Button>
+                    </HStack>
+                </a>
+            </Center>
+
         </div>
     );
 };