matej/AluxPay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: matej:c636e23b44b301402c138aeeeb4699bc1ad15804
Branches Tags
matej:main
..
compare: matej:320a3a8eb0613ca3b436e82b1a7e963606cf1345
Branches Tags
matej:main

2 Commits
c636e23b44 ... 320a3a8eb0

Author SHA1 Message Date
matej
320a3a8eb0 Fixed running concurrently backend & frontend 
Added Site title to index.html
 2025-09-28 19:22:50 +02:00
matej
08f41b6bb3 Cleaned up unused classNames and imported Components 2025-09-28 14:59:29 +02:00
7 changed files with 149 additions and 153 deletions
Expand all files Collapse all files

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

3
frontend/src/App.jsx
View File

@@ -1,6 +1,6 @@
"use client" "use client"
import React from 'react'; 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 { LuMoon, LuSun } from "react-icons/lu";
import { useColorMode } from "@/components/ui/color-mode" import { useColorMode } from "@/components/ui/color-mode"
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
@@ -25,7 +25,6 @@ function App() {
<Router> <Router>
<div className="App"> <div className="App">
<Container mt="5"> <Container mt="5">
<Grid> <Grid>
<Box <Box
p="4" p="4"

2
frontend/src/components/PayPalButton.jsx
View File

@@ -52,7 +52,7 @@ const PayPalButton = ({ orderData, onCreateOrder, onCaptureOrder, loading }) =>
} }
return ( return (
<div className="paypal-button-wrapper"> <div>
{paypalError && ( {paypalError && (
<Alert.Root mb="5" status="warning"> <Alert.Root mb="5" status="warning">
<Alert.Indicator /> <Alert.Indicator />

14
frontend/src/pages/Cancel.jsx
View File

@@ -3,9 +3,7 @@ import { useSearchParams } from 'react-router-dom';
import { import {
Alert, Alert,
Text, Text,
Spinner,
Center, Center,
VStack,
HStack, HStack,
Button, Button,
Accordion, Accordion,
@@ -37,7 +35,7 @@ const Cancel = () => {
}; };
return ( return (
<div className="payment-container"> <div>
<Alert.Root status="error" title="Payment Cancelled"> <Alert.Root status="error" title="Payment Cancelled">
<Alert.Indicator /> <Alert.Indicator />
<Alert.Content> <Alert.Content>
@@ -64,7 +62,7 @@ const Cancel = () => {
<div className="alert alert-info"> <div className="alert alert-info">
<strong>Order ID:</strong> <strong>Order ID:</strong>
<span className="badge bg-secondary ms-2">{orderId}</span> <span className="badge bg-secondary ms-2">{orderId}</span>
<br /> <br/>
<small className="mt-2 d-block"> <small className="mt-2 d-block">
Your order is still pending. You can complete the payment to process your order. Your order is still pending. You can complete the payment to process your order.
</small> </small>
@@ -85,7 +83,7 @@ const Cancel = () => {
variant="outline" variant="outline"
onClick={handleRetryPayment} onClick={handleRetryPayment}
> >
<LuRepeat /> Try Payment Again <LuRepeat/> Try Payment Again
</Button> </Button>
</HStack> </HStack>
<a <a
@@ -95,7 +93,7 @@ const Cancel = () => {
<Button <Button
variant="outline" variant="outline"
> >
<LuMoveLeft /> Back to the Store <LuMoveLeft/> Back to the Store
</Button> </Button>
</HStack> </HStack>
</a> </a>
@@ -104,7 +102,7 @@ const Cancel = () => {
<Accordion.Item value="a"> <Accordion.Item value="a">
<Accordion.ItemTrigger> <Accordion.ItemTrigger>
<Span flex="1">If you're experiencing issues with payment:</Span> <Span flex="1">If you're experiencing issues with payment:</Span>
<Accordion.ItemIndicator /> <Accordion.ItemIndicator/>
</Accordion.ItemTrigger> </Accordion.ItemTrigger>
<Accordion.ItemContent> <Accordion.ItemContent>
<Accordion.ItemBody> <Accordion.ItemBody>
@@ -120,7 +118,7 @@ const Cancel = () => {
<Accordion.Item value="b"> <Accordion.Item value="b">
<Accordion.ItemTrigger> <Accordion.ItemTrigger>
<Span flex="1">Need Help?</Span> <Span flex="1">Need Help?</Span>
<Accordion.ItemIndicator /> <Accordion.ItemIndicator/>
</Accordion.ItemTrigger> </Accordion.ItemTrigger>
<Accordion.ItemContent> <Accordion.ItemContent>
<Accordion.ItemBody>Text</Accordion.ItemBody> <Accordion.ItemBody>Text</Accordion.ItemBody>

39
frontend/src/pages/Payment.jsx
View File

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { import {
Alert, Alert,
Heading, Heading,
DataList,
Timeline, Timeline,
Text, Text,
Spinner, Spinner,
@@ -12,7 +11,7 @@ import {
EmptyState, EmptyState,
VStack, HStack VStack, HStack
} from "@chakra-ui/react" } 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 { useSearchParams, useNavigate } from 'react-router-dom';
import OrderSummary from '../components/OrderSummary.jsx'; import OrderSummary from '../components/OrderSummary.jsx';
import PayPalButton from '../components/PayPalButton.jsx'; import PayPalButton from '../components/PayPalButton.jsx';
@@ -170,7 +169,7 @@ const Payment = () => {
} }
return ( return (
<div className="payment-container"> <div>
<Heading as="h1" fontSize="2xl" textAlign="center" mb="10">Secure Payment with PayPal</Heading> <Heading as="h1" fontSize="2xl" textAlign="center" mb="10">Secure Payment with PayPal</Heading>
{order.length === 0 ? {order.length === 0 ?
<Center> <Center>
@@ -266,27 +265,33 @@ const Payment = () => {
</GridItem> </GridItem>
</Grid> </Grid>
} }
<div className="payment-card">
<div className="payment-body">
{error && ( {error && (
<div className="error-message"> <Alert.Root status="error" mb="5">
<i className="fas fa-exclamation-triangle me-2"></i> <Alert.Indicator/>
{error} <Alert.Content>
</div> <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 && ( {backendStatus && (
<Alert.Root status="info" mb="5"> <Alert.Root status="info" mb="5">
<Alert.Indicator /> <Alert.Indicator/>
<Alert.Content> <Alert.Content>
<Alert.Title>Payment system connected</Alert.Title> <Alert.Title>Payment system connected</Alert.Title>
<Alert.Description> <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> <HStack>
<LuMail /> <LuMail/>
<Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text> <Text>{import.meta.env.VITE_REACT_APP_SUPPORT_EMAIL}</Text>
</HStack> </HStack>
@@ -298,7 +303,7 @@ const Payment = () => {
{/* Debug info for development */} {/* Debug info for development */}
{import.meta.env.VITE_NODE_ENV === 'development' && ( {import.meta.env.VITE_NODE_ENV === 'development' && (
<Alert.Root status="info" colorPalette="teal"> <Alert.Root status="info" colorPalette="teal">
<Alert.Indicator /> <Alert.Indicator/>
<Alert.Content> <Alert.Content>
<Alert.Title>Debug Info</Alert.Title> <Alert.Title>Debug Info</Alert.Title>
<Alert.Description> <Alert.Description>
@@ -313,8 +318,6 @@ const Payment = () => {
</Alert.Root> </Alert.Root>
)} )}
</div> </div>
</div>
</div>
); );
}; };

16
frontend/src/pages/Success.jsx
View File

@@ -76,14 +76,15 @@ const Success = () => {
} }
return ( return (
<div className="payment-container"> <div>
<Alert.Root status="success" title="Payment Successful!" mb="5"> <Alert.Root status="success" title="Payment Successful!" mb="5">
<Alert.Indicator /> <Alert.Indicator/>
<Alert.Content> <Alert.Content>
<Alert.Title>Payment Successful!</Alert.Title> <Alert.Title>Payment Successful!</Alert.Title>
<Alert.Description> <Alert.Description>
<Text>Thank you for your payment. Your transaction has been completed successfully.</Text> <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> <Text>Redirecting you back to checkout in <strong>{countdown}</strong> seconds...</Text>
</Alert.Description> </Alert.Description>
</Alert.Content> </Alert.Content>
@@ -131,10 +132,6 @@ const Success = () => {
)} )}
</DataList.Root> </DataList.Root>
<div className="payment-card">
<div className="payment-body text-center">
<Center mt="5" mb="5"> <Center mt="5" mb="5">
<a <a
href={returnUrl} href={returnUrl}
@@ -143,13 +140,12 @@ const Success = () => {
<Button <Button
variant="outline" variant="outline"
> >
<LuMoveLeft /> Back to the Store <LuMoveLeft/> Back to the Store
</Button> </Button>
</HStack> </HStack>
</a> </a>
</Center> </Center>
</div>
</div>
</div> </div>
); );
}; };

2
package.json
View File

@@ -6,7 +6,7 @@
"scripts": { "scripts": {
"dev": "concurrently \"npm run server\" \"npm run client\"", "dev": "concurrently \"npm run server\" \"npm run client\"",
"server": "cd backend && npm run dev", "server": "cd backend && npm run dev",
"client": "cd frontend && npm start", "client": "cd frontend && npm run dev",
"build": "cd frontend && npm run build", "build": "cd frontend && npm run build",
"start": "cd backend && npm start", "start": "cd backend && npm start",
"install-all": "npm install && cd backend && npm install && cd ../frontend && npm install" "install-all": "npm install && cd backend && npm install && cd ../frontend && npm install"