jlengrand/adyen-web-demo
1
0
Fork 0
mirror of https://github.com/jlengrand/adyen-web-demo.git synced 2026-03-10 08:01:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add review component

Browse Source
This commit is contained in:
Steve Chalco
2022-03-27 20:41:37 -07:00
parent e4486aa720
commit 4979298cfa
2 changed files with 9 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/client/src/components/CheckoutBuilder/CheckoutBuilder.tsx
View File

@@ -40,7 +40,7 @@ const CheckoutBuilder = ({ options: { value, currency, countryCode, component },
case 2: case 2:
return <ApiConfig configuration={{ ...configuration }} setConfiguration={setConfiguration}/>; return <ApiConfig configuration={{ ...configuration }} setConfiguration={setConfiguration}/>;
case 3: case 3:
return <ReviewForm />; return <ReviewForm configuration={{ ...configuration }}/>;
default: default:
throw new Error('Unknown step'); throw new Error('Unknown step');
} }

92
packages/client/src/components/CheckoutBuilder/ReviewForm.tsx
View File

@@ -1,87 +1,11 @@
import * as React from 'react'; import * as React from 'react';
import Typography from '@mui/material/Typography'; import JSONInput from 'react-json-editor-ajrm';
import List from '@mui/material/List'; import { dark_vscode_tribute, localeEn } from '../../helpers/jsonEditor';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Grid from '@mui/material/Grid';
const products = [ const ReviewForm = (props: any) => {
{ const { configuration } = props;
name: 'Product 1',
desc: 'A nice thing',
price: '$9.99'
},
{
name: 'Product 2',
desc: 'Another thing',
price: '$3.45'
},
{
name: 'Product 3',
desc: 'Something else',
price: '$6.51'
},
{
name: 'Product 4',
desc: 'Best thing of all',
price: '$14.11'
},
{ name: 'Shipping', desc: '', price: 'Free' }
];
const addresses = ['1 MUI Drive', 'Reactville', 'Anytown', '99999', 'USA'];
const payments = [
{ name: 'Card type', detail: 'Visa' },
{ name: 'Card holder', detail: 'Mr John Smith' },
{ name: 'Card number', detail: 'xxxx-xxxx-xxxx-1234' },
{ name: 'Expiry date', detail: '04/2024' }
];
export default function Review() { return <JSONInput viewOnly={true} placeholder={configuration} colors={dark_vscode_tribute} locale={localeEn} height="700px" width="100%" />;
return ( };
<React.Fragment>
<Typography variant="h6" gutterBottom> export default ReviewForm;
Order summary
</Typography>
<List disablePadding>
{products.map(product => (
<ListItem key={product.name} sx={{ py: 1, px: 0 }}>
<ListItemText primary={product.name} secondary={product.desc} />
<Typography variant="body2">{product.price}</Typography>
</ListItem>
))}
<ListItem sx={{ py: 1, px: 0 }}>
<ListItemText primary="Total" />
<Typography variant="subtitle1" sx={{ fontWeight: 700 }}>
$34.06
</Typography>
</ListItem>
</List>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Shipping
</Typography>
<Typography gutterBottom>John Smith</Typography>
<Typography gutterBottom>{addresses.join(', ')}</Typography>
</Grid>
<Grid item container direction="column" xs={12} sm={6}>
<Typography variant="h6" gutterBottom sx={{ mt: 2 }}>
Payment details
</Typography>
<Grid container>
{payments.map(payment => (
<React.Fragment key={payment.name}>
<Grid item xs={6}>
<Typography gutterBottom>{payment.name}</Typography>
</Grid>
<Grid item xs={6}>
<Typography gutterBottom>{payment.detail}</Typography>
</Grid>
</React.Fragment>
))}
</Grid>
</Grid>
</Grid>
</React.Fragment>
);
}