Bugfix/new donation flow issues (#1962)

* Improve transaction popup message * Donation page fix card size * Do not disable the Amount form for Bank transaction * Validate the Amount field when card or bank is not selected * Fix Amount validation when transaction fees included * Fix wrong modal actions on close and continue * Add fullstop character in message * Remove duplicated Terms & GDPR fields * Fix route locale for Privacy Policy in Donation Component * Revert "Do not disable the Amount form for Bank transaction" This reverts commit 2ceeef5. * Revert Amount validation for bank payment
podkrepi-bg · Oct 29, 2024 · f3725c7 · f3725c7
1 parent 0ecb5a5
commit f3725c7
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/public/locales/en/donation-flow.json b/public/locales/en/donation-flow.json
@@ -106,7 +106,7 @@
       },
       "noregister": {
         "label": "Continue without registration",
-        "description": "You will not be able to get a donation certificate or a list of your donations. If you still want to receive a receipt, please share your email - it will not be visible in the platform"
+        "description": "You will not be able to get a donation certificate or a list of your donations. If you still want to receive a receipt, please share your email - it will not be visible in the platform."
       },
       "field": {
         "password": "Password",
@@ -128,7 +128,7 @@
       "donation": "Donation",
       "transaction": {
         "title": "Transaction",
-        "description": "The transaction is only to compensate the transfer and is calculated based on your method of payment. \"Podkrepi.bg\" works with 0% commission"
+        "description": "The transaction is only to compensate the transfer and is calculated based on your method of payment. \"Podkrepi.bg\" works with 0% commission."
       },
       "total": "Total",
       "field": {

diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx
@@ -226,15 +226,15 @@ export function DonationFlowForm() {
               <ConfirmationDialog
                 isOpen={showCancelDialog}
                 handleCancel={() => {
-                  cancelSetupIntentMutation.mutate({ id: setupIntent.id })
-                  router.push(routes.campaigns.viewCampaignBySlug(campaign.slug))
+                  setShowCancelDialog(false)
                 }}
                 title={t('cancel-dialog.title')}
                 content={t('cancel-dialog.content')}
                 confirmButtonLabel={t('cancel-dialog.btn-continue')}
                 cancelButtonLabel={t('cancel-dialog.btn-cancel')}
                 handleConfirm={() => {
-                  setShowCancelDialog(false)
+                  cancelSetupIntentMutation.mutate({ id: setupIntent.id })
+                  router.push(routes.campaigns.viewCampaignBySlug(campaign.slug))
                 }}
               />
               <Button

diff --git a/src/components/client/donation-flow/DonationFlowStatusPage.tsx b/src/components/client/donation-flow/DonationFlowStatusPage.tsx
@@ -168,7 +168,7 @@ export default function DonationFlowStatusPage({ slug }: { slug: string }) {
             text={t('status.success.link.return')}
           />
         </Grid2>
-        <Grid2>
+        <Grid2 size={{ xs: 12, md: 6 }}>
           <LinkCard href={routes.campaigns.index} text={t('status.success.link.see')} />
         </Grid2>
         <Grid2 size={{ xs: 12, md: 6 }}>

diff --git a/src/components/client/donation-flow/steps/Amount.tsx b/src/components/client/donation-flow/steps/Amount.tsx
@@ -30,7 +30,7 @@ export const amountValidation = {
     then: yup.string().required(),
   }),
   finalAmount: yup.number().when('payment', {
-    is: 'card',
+    is: (payment: string | null) => ['card', null].includes(payment),
     then: () =>
       yup.number().min(1, 'donation-flow:step.amount.field.final-amount.error').required(),
   }),
@@ -70,6 +70,9 @@ export default function Amount({ disabled, sectionRef, error }: SelectDonationAm
         ? toMoney(Number(formik.values.otherAmount))
         : Number(formik.values.amountChosen)
 
+    // Do not perform calculations if amount is not set
+    if (amountChosen === 0) return
+
     if (formik.values.cardIncludeFees) {
       formik.setFieldValue('amountWithoutFees', amountChosen)
       formik.setFieldValue(

diff --git a/src/components/client/donation-flow/steps/authentication/InlineRegisterForm.tsx b/src/components/client/donation-flow/steps/authentication/InlineRegisterForm.tsx
@@ -166,10 +166,6 @@ export default function InlineRegisterForm() {
             </FormHelperText>
           )}
         </Grid>
-        <Grid item xs={12}>
-          <AcceptTermsField name="registerTerms" />
-          <AcceptPrivacyPolicyField name="registerGdpr" />
-        </Grid>
 
         <Grid item xs={12}>
           <Button

diff --git a/src/components/common/form/AcceptPrivacyPolicyField.tsx b/src/components/common/form/AcceptPrivacyPolicyField.tsx
@@ -1,5 +1,6 @@
 import { useTranslation } from 'next-i18next'
 import { Typography } from '@mui/material'
+import { useRouter } from 'next/router'
 
 import { routes } from 'common/routes'
 import ExternalLink from 'components/common/ExternalLink'
@@ -18,6 +19,8 @@ export default function AcceptPrivacyPolicyField({
   ...rest
 }: AcceptGDPRFieldProps) {
   const { t } = useTranslation()
+  const { locale } = useRouter()
+
   return (
     <CheckboxField
       name={name}
@@ -26,7 +29,9 @@ export default function AcceptPrivacyPolicyField({
       label={
         <Typography variant="body2">
           {t('validation:informed-agree-with')}{' '}
-          <ExternalLink href={routes.privacyPolicy}>{t('validation:gdpr')}</ExternalLink>
+          <ExternalLink href={`/${locale}${routes.privacyPolicy}`}>
+            {t('validation:gdpr')}
+          </ExternalLink>
         </Typography>
       }
       {...rest}