From f4384d8309b4e38124abc5819ff227a1a55197cc Mon Sep 17 00:00:00 2001
From: Aleksandar Petkov <sashko506@gmail.com>
Date: Wed, 4 Dec 2024 19:25:29 +0200
Subject: [PATCH] fix: Reported new donation flow issues (#1979)

* fix: Reported new donation flow issues

* fix: Non-anonymous donation being flagged as anonymous

* fix: E2E test breakage

* chore: Remove redundant console log
---
 e2e/pages/web-pages/donation/donation.page.ts |  2 +-
 .../client/donation-flow/DonationFlowForm.tsx | 28 ++++++++++---------
 .../donation-flow/alerts/AlertsColumn.tsx     |  1 +
 .../contexts/DonationFlowProvider.tsx         |  2 +-
 src/service/stripeClient.ts                   |  2 +-
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/e2e/pages/web-pages/donation/donation.page.ts b/e2e/pages/web-pages/donation/donation.page.ts
index a5d58287d..df4a4e392 100644
--- a/e2e/pages/web-pages/donation/donation.page.ts
+++ b/e2e/pages/web-pages/donation/donation.page.ts
@@ -56,7 +56,7 @@ export class DonationPage extends CampaignsPage {
     bgLocalizationValidation['informed-agree-with'] + ' ' + bgLocalizationValidation.gdpr
   private readonly enPrivacyCheckboxText =
     enLocalizationValidation['informed-agree-with'] + ' ' + enLocalizationValidation.gdpr
-  private readonly bgStripeErrorNoBalanceText = 'Картата Ви не разполага с достатъчно средства.'
+  private readonly bgStripeErrorNoBalanceText = 'В картата ви няма достатъчно средства. Опитайте с друга.'
 
   async checkPageUrlByRegExp(urlRegExpAsString?: string, timeoutParam = 10000): Promise<void> {
     await this.page.waitForTimeout(1000)
diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx
index b4a14ee90..7ee93d06a 100644
--- a/src/components/client/donation-flow/DonationFlowForm.tsx
+++ b/src/components/client/donation-flow/DonationFlowForm.tsx
@@ -101,6 +101,18 @@ export const validationSchema: yup.SchemaOf<DonationFormData> = yup
 export function DonationFlowForm() {
   const formikRef = useRef<FormikProps<DonationFormData> | null>(null)
   const { t } = useTranslation('donation-flow')
+  const { campaign, setupIntent, paymentError, setPaymentError, idempotencyKey } = useDonationFlow()
+  const stripe = useStripe()
+  const elements = useElements()
+  const router = useRouter()
+  const updateSetupIntentMutation = useUpdateSetupIntent()
+  const cancelSetupIntentMutation = useCancelSetupIntent()
+  const paymentMethodSectionRef = React.useRef<HTMLDivElement>(null)
+  const authenticationSectionRef = React.useRef<HTMLDivElement>(null)
+  const stripeChargeRef = React.useRef<string>(idempotencyKey)
+  const [showCancelDialog, setShowCancelDialog] = React.useState(false)
+  const [submitPaymentLoading, setSubmitPaymentLoading] = React.useState(false)
+  const { data: { user: person } = { user: null } } = useCurrentPerson()
   const { data: session } = useSession({
     required: false,
     onUnauthenticated: () => {
@@ -117,17 +129,6 @@ export function DonationFlowForm() {
     formikRef.current?.setFieldValue('email', '')
     formikRef.current?.setFieldValue('isAnonymous', true, false)
   }, [session])
-  const { campaign, setupIntent, paymentError, setPaymentError, idempotencyKey } = useDonationFlow()
-  const stripe = useStripe()
-  const elements = useElements()
-  const router = useRouter()
-  const updateSetupIntentMutation = useUpdateSetupIntent()
-  const cancelSetupIntentMutation = useCancelSetupIntent()
-  const paymentMethodSectionRef = React.useRef<HTMLDivElement>(null)
-  const authenticationSectionRef = React.useRef<HTMLDivElement>(null)
-  const [showCancelDialog, setShowCancelDialog] = React.useState(false)
-  const [submitPaymentLoading, setSubmitPaymentLoading] = React.useState(false)
-  const { data: { user: person } = { user: null } } = useCurrentPerson()
 
   return (
     <Formik
@@ -186,6 +187,7 @@ export function DonationFlowForm() {
                 return_url: `${window.location.origin}/${routes.campaigns.donationStatus(
                   campaign.slug,
                 )}`,
+                personId: !values.isAnonymous && session?.user && person?.id ? person.id : null,
               },
             },
           })
@@ -197,7 +199,7 @@ export function DonationFlowForm() {
             campaign,
             values,
             session,
-            idempotencyKey,
+            stripeChargeRef.current,
           )
           router.push(
             `${window.location.origin}${routes.campaigns.donationStatus(campaign.slug)}?p_status=${
@@ -210,7 +212,7 @@ export function DonationFlowForm() {
             type: 'invalid_request_error',
             message: (error as StripeError).message ?? t('step.summary.alerts.error'),
           })
-
+          stripeChargeRef.current = crypto.randomUUID()
           return
         }
 
diff --git a/src/components/client/donation-flow/alerts/AlertsColumn.tsx b/src/components/client/donation-flow/alerts/AlertsColumn.tsx
index 8bfba674a..335772d81 100644
--- a/src/components/client/donation-flow/alerts/AlertsColumn.tsx
+++ b/src/components/client/donation-flow/alerts/AlertsColumn.tsx
@@ -60,6 +60,7 @@ function AlertsColumn({
     <>
       {updatedRefArray.map((ref, index) => {
         const alert = alerts[ref.current?.id as keyof typeof alerts]
+        if (!alert) return null
         return <AnchoredAlert key={index} sectionRef={ref} {...alert} />
       })}
     </>
diff --git a/src/components/client/donation-flow/contexts/DonationFlowProvider.tsx b/src/components/client/donation-flow/contexts/DonationFlowProvider.tsx
index c8676bb1d..c1a8167be 100644
--- a/src/components/client/donation-flow/contexts/DonationFlowProvider.tsx
+++ b/src/components/client/donation-flow/contexts/DonationFlowProvider.tsx
@@ -10,7 +10,7 @@ type DonationContext = {
   paymentError: StripeError | null
   setPaymentError: React.Dispatch<React.SetStateAction<StripeError | null>>
   campaign: CampaignResponse
-  stripe: StripeType | null
+  stripe: Promise<StripeType | null>
   idempotencyKey: string
 }
 
diff --git a/src/service/stripeClient.ts b/src/service/stripeClient.ts
index 8ba7c964c..adda96283 100644
--- a/src/service/stripeClient.ts
+++ b/src/service/stripeClient.ts
@@ -4,4 +4,4 @@ const {
   publicRuntimeConfig: { STRIPE_PUBLISHABLE_KEY },
 } = getConfig()
 
-export const stripe = await loadStripe(STRIPE_PUBLISHABLE_KEY)
+export const stripe = loadStripe(STRIPE_PUBLISHABLE_KEY)