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

Added visualisation

Browse Source 
Added return and cancel URL's
This commit is contained in:
matej
2025-09-28 02:29:07 +02:00
parent bc3b86b705
commit a866801535
22 changed files with 2133 additions and 553 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/App.jsx
View File

@@ -1,10 +1,15 @@
"use client"
import React from 'react';
import {Grid, GridItem, Button, Box, Container, Image, Flex, Center, SimpleGrid, 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';
import { PayPalScriptProvider } from '@paypal/react-paypal-js';
import Payment from './pages/Payment.jsx';
import Success from './pages/Success.jsx';
import Cancel from './pages/Cancel.jsx';
import './App.css';
import logo from '/affordableluxurywatches-logo.svg';
// PayPal configuration
const paypalOptions = {
@@ -14,23 +19,55 @@ const paypalOptions = {
};
function App() {
const { toggleColorMode, colorMode } = useColorMode()
return (
<PayPalScriptProvider options={paypalOptions}>
<Router>
<div className="App">
<Routes>
<Route path="/" element={<Payment />} />
<Route path="/payment" element={<Payment />} />
<Route path="/success" element={<Success />} />
<Route path="/cancel" element={<Cancel />} />
<Route path="*" element={
<div className="container mt-5 text-center">
<h2>Page Not Found</h2>
<p>The requested page could not be found.</p>
<a href="/payment" className="btn btn-primary">Go to Payment</a>
</div>
} />
</Routes>
<Container mt="5">
<Grid>
<Box
p="4"
borderWidth="1px"
borderColor="border.disabled"
color="fg.disabled"
>
<Grid
templateColumns={{ base: "1fr", md: "1fr auto" }}
alignItems="center"
p={4}
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>
</Grid>
<Flex direction="row" gap="4" justify="space-between" align="center" mb="10">
</Flex>
<Routes>
<Route path="/" element={<Payment />} />
<Route path="/payment" element={<Payment />} />
<Route path="/success" element={<Success />} />
<Route path="/cancel" element={<Cancel />} />
<Route path="*" element={
<div className="container mt-5 text-center">
<h2>Page Not Found</h2>
<p>The requested page could not be found.</p>
<a href="/payment" className="btn btn-primary">Go to Payment</a>
</div>
} />
</Routes>
<Center mt="5">
<Text textStyle="xs">{import.meta.env.VITE_REACT_APP_STORE_NAME}</Text>
</Center>
</Box>
</Grid>
</Container>
</div>
</Router>
</PayPalScriptProvider>