Compare commits
2 Commits
c636e23b44
...
320a3a8eb0
| Author | SHA1 | Date | |
|---|---|---|---|
| 320a3a8eb0 | |||
| 08f41b6bb3 |
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>ALUXPAY - Payment Gateway</title>
|
||||
<title>%VITE_REACT_APP_STORE_NAME% - Payment Gateway</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
"scripts": {
|
||||
"dev": "concurrently \"npm run server\" \"npm run client\"",
|
||||
"server": "cd backend && npm run dev",
|
||||
"client": "cd frontend && npm start",
|
||||
"client": "cd frontend && npm run dev",
|
||||
"build": "cd frontend && npm run build",
|
||||
"start": "cd backend && npm start",
|
||||
"install-all": "npm install && cd backend && npm install && cd ../frontend && npm install"
|
||||
|
||||
Reference in New Issue
Block a user