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

Author: sashko9807

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)

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
         }
 

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} />
       })}
     </>

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
 }
 

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)