Cleaned up unused classNames and imported Components

This commit is contained in:
2025-09-28 14:59:29 +02:00
parent c636e23b44
commit 08f41b6bb3
5 changed files with 147 additions and 151 deletions

View File

@@ -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"

View File

@@ -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 />

View File

@@ -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>

View File

@@ -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,16 +265,21 @@ const Payment = () => {
</GridItem>
</Grid>
}
<div className="payment-card">
<div className="payment-body">
{error && (
<div className="error-message">
<i className="fas fa-exclamation-triangle me-2"></i>
{error}
</div>
<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 && (
@@ -284,7 +288,8 @@ const Payment = () => {
<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>
<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>
@@ -313,8 +318,6 @@ const Payment = () => {
</Alert.Root>
)}
</div>
</div>
</div>
);
};

View File

@@ -76,14 +76,15 @@ const Success = () => {
}
return (
<div className="payment-container">
<div>
<Alert.Root status="success" title="Payment Successful!" mb="5">
<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,10 +132,6 @@ const Success = () => {
)}
</DataList.Root>
<div className="payment-card">
<div className="payment-body text-center">
<Center mt="5" mb="5">
<a
href={returnUrl}
@@ -148,8 +145,7 @@ const Success = () => {
</HStack>
</a>
</Center>
</div>
</div>
</div>
);
};