crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix payments bugs

Browse Source
This commit is contained in:
Hazem Krimi
2021-06-29 15:08:57 +01:00
parent 73d01c87a3
commit 93d0bc7471
1 changed files with 125 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Payments/index.tsx
+125 -88
View File
@@ -102,7 +102,7 @@ const Payments = () => {
.typeError('CVC must be a number') .typeError('CVC must be a number')
.required('CVC is required'), .required('CVC is required'),
}), }),
onSubmit: async ({ number, expMonth, expYear, cvc }) => { onSubmit: async ({ number, expMonth, expYear, cvc }, { resetForm }) => {
try { try {
setPaymentLoading(true); setPaymentLoading(true);
let amount = 0; let amount = 0;
@@ -152,11 +152,15 @@ const Payments = () => {
setPaymentLoading(false); setPaymentLoading(false);
setTransactionsData(transactionsResult); setTransactionsData(transactionsResult);
setSuccess(true); setSuccess(true);
setSelectedChunk(undefined);
resetForm();
setTimeout(() => setSuccess(false), 3000); setTimeout(() => setSuccess(false), 3000);
} }
} catch (err) { } catch (err) {
setPaymentLoading(false); setPaymentLoading(false);
setError(err); setError(err);
setSelectedChunk(undefined);
resetForm();
setTimeout(() => setError(''), 3000); setTimeout(() => setError(''), 3000);
} }
}, },
@@ -235,7 +239,16 @@ const Payments = () => {
</Text> </Text>
<Box> <Box>
<Button <Button
text='Select' text={
transactionsData &&
transactionsData.transactions &&
!!Array.from(transactionsData.transactions).find(
(transaction: any) =>
transaction.selectedOption === 0
)
? 'Paid'
: 'Select'
}
color={role || 'client'} color={role || 'client'}
disabled={ disabled={
selectedChunk === 0 || selectedChunk === 0 ||
@@ -266,14 +279,23 @@ const Payments = () => {
}} }}
> >
<Text variant='headline' weight='bold'> <Text variant='headline' weight='bold'>
#1 #2
</Text> </Text>
<Text variant='headline' weight='bold'> <Text variant='headline' weight='bold'>
{project?.paymentOption.optTwo}% {project?.paymentOption.optTwo}%
</Text> </Text>
<Box> <Box>
<Button <Button
text='Select' text={
transactionsData &&
transactionsData.transactions &&
!!Array.from(transactionsData.transactions).find(
(transaction: any) =>
transaction.selectedOption === 1
)
? 'Paid'
: 'Select'
}
color={role || 'client'} color={role || 'client'}
disabled={ disabled={
selectedChunk === 1 || selectedChunk === 1 ||
@@ -304,14 +326,23 @@ const Payments = () => {
}} }}
> >
<Text variant='headline' weight='bold'> <Text variant='headline' weight='bold'>
#1 #3
</Text> </Text>
<Text variant='headline' weight='bold'> <Text variant='headline' weight='bold'>
{project?.paymentOption.optThree}% {project?.paymentOption.optThree}%
</Text> </Text>
<Box> <Box>
<Button <Button
text='Select' text={
transactionsData &&
transactionsData.transactions &&
!!Array.from(transactionsData.transactions).find(
(transaction: any) =>
transaction.selectedOption === 2
)
? 'Paid'
: 'Select'
}
color={role || 'client'} color={role || 'client'}
disabled={ disabled={
selectedChunk === 2 || selectedChunk === 2 ||
@@ -345,8 +376,12 @@ const Payments = () => {
> >
<Text variant='subheader'>Paid Costs</Text> <Text variant='subheader'>Paid Costs</Text>
<Text variant='subheader' weight='bold'> <Text variant='subheader' weight='bold'>
{project && transactionsData {transactionsData?.remaining_amount && project?.totalPrice
? project.totalPrice - transactionsData.remaining_amount ? project.totalPrice ===
transactionsData.remaining_amount
? project.totalPrice
: project.totalPrice -
transactionsData.remaining_amount
: 0} : 0}
$ $
</Text> </Text>
@@ -366,87 +401,89 @@ const Payments = () => {
</Text> </Text>
</Box> </Box>
</Box> </Box>
<Box {selectedChunk !== undefined && (
background='#FFFFFF' <Box
padding='15px 20px' background='#FFFFFF'
borderRadius='10px' padding='15px 20px'
boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)' borderRadius='10px'
> boxShadow='1px 1px 10px 0px rgba(50, 59, 105, 0.25)'
<Box marginBottom='10px'> >
<Text variant='headline' weight='bold'> <Box marginBottom='10px'>
Pay with Credit Card <Text variant='headline' weight='bold'>
</Text> Pay with Credit Card
</Text>
</Box>
<form onSubmit={paymentForm.handleSubmit}>
<Box marginBottom='25px'>
<Input
name='number'
label='Card Number'
value={paymentForm.values.number}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.number &&
!!paymentForm.errors.number
}
errorMessage={paymentForm.errors.number}
/>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(2, 1fr)'
columnGap='20px'
alignItems='center'
marginBottom='25px'
>
<Input
name='expMonth'
label='Expiary Month'
value={paymentForm.values.expMonth}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.expMonth &&
!!paymentForm.errors.expMonth
}
errorMessage={paymentForm.errors.expMonth}
/>
<Input
name='expYear'
label='Expiary Year'
value={paymentForm.values.expYear}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.expYear &&
!!paymentForm.errors.expYear
}
errorMessage={paymentForm.errors.expYear}
/>
</Box>
<Box marginBottom='25px'>
<Input
name='cvc'
label='CVC'
value={paymentForm.values.cvc}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.cvc && !!paymentForm.errors.cvc
}
errorMessage={paymentForm.errors.cvc}
/>
</Box>
<Button
fullWidth
color={role || 'client'}
text='Pay'
variant='primary-action'
type='submit'
loading={paymentLoading}
/>
</form>
</Box> </Box>
<form onSubmit={paymentForm.handleSubmit}> )}
<Box marginBottom='25px'>
<Input
name='number'
label='Card Number'
value={paymentForm.values.number}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.number &&
!!paymentForm.errors.number
}
errorMessage={paymentForm.errors.number}
/>
</Box>
<Box
display='grid'
gridTemplateColumns='repeat(2, 1fr)'
columnGap='20px'
alignItems='center'
marginBottom='25px'
>
<Input
name='expMonth'
label='Expiary Month'
value={paymentForm.values.expMonth}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.expMonth &&
!!paymentForm.errors.expMonth
}
errorMessage={paymentForm.errors.expMonth}
/>
<Input
name='expYear'
label='Expiary Year'
value={paymentForm.values.expYear}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.expYear &&
!!paymentForm.errors.expYear
}
errorMessage={paymentForm.errors.expYear}
/>
</Box>
<Box marginBottom='25px'>
<Input
name='cvc'
label='CVC'
value={paymentForm.values.cvc}
onChange={paymentForm.handleChange}
onBlur={paymentForm.handleBlur}
error={
paymentForm.touched.cvc && !!paymentForm.errors.cvc
}
errorMessage={paymentForm.errors.cvc}
/>
</Box>
<Button
fullWidth
color={role || 'client'}
text='Pay'
variant='primary-action'
type='submit'
loading={paymentLoading}
/>
</form>
</Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>