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
+45 -8
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,6 +401,7 @@ const Payments = () => {
</Text> </Text>
</Box> </Box>
</Box> </Box>
{selectedChunk !== undefined && (
<Box <Box
background='#FFFFFF' background='#FFFFFF'
padding='15px 20px' padding='15px 20px'
@@ -447,6 +483,7 @@ const Payments = () => {
/> />
</form> </form>
</Box> </Box>
)}
</Box> </Box>
</Box> </Box>
</Box> </Box>