From 9c32a8b3159c2bd4f64024fff74e3f4b130a2ce0 Mon Sep 17 00:00:00 2001 From: Aleksandar Petkov Date: Sun, 24 Nov 2024 05:09:47 -0500 Subject: [PATCH 1/4] fix: Reported new donation flow issues --- src/components/client/donation-flow/DonationFlowForm.tsx | 5 +++-- src/components/client/donation-flow/alerts/AlertsColumn.tsx | 1 + .../client/donation-flow/contexts/DonationFlowProvider.tsx | 2 +- src/service/stripeClient.ts | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx index b4a14ee90..80535de15 100644 --- a/src/components/client/donation-flow/DonationFlowForm.tsx +++ b/src/components/client/donation-flow/DonationFlowForm.tsx @@ -125,6 +125,7 @@ export function DonationFlowForm() { const cancelSetupIntentMutation = useCancelSetupIntent() const paymentMethodSectionRef = React.useRef(null) const authenticationSectionRef = React.useRef(null) + const stripeChargeRef = React.useRef(idempotencyKey) const [showCancelDialog, setShowCancelDialog] = React.useState(false) const [submitPaymentLoading, setSubmitPaymentLoading] = React.useState(false) const { data: { user: person } = { user: null } } = useCurrentPerson() @@ -197,7 +198,7 @@ export function DonationFlowForm() { campaign, values, session, - idempotencyKey, + stripeChargeRef.current, ) router.push( `${window.location.origin}${routes.campaigns.donationStatus(campaign.slug)}?p_status=${ @@ -210,7 +211,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 })} 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> campaign: CampaignResponse - stripe: StripeType | null + stripe: Promise 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) From cf8a64563e16e3f3e9180ce46391caf93ffef104 Mon Sep 17 00:00:00 2001 From: Aleksandar Petkov Date: Sun, 24 Nov 2024 07:41:16 -0500 Subject: [PATCH 2/4] fix: Non-anonymous donation being flagged as anonymous --- .../client/donation-flow/DonationFlowForm.tsx | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx index 80535de15..3e565cd73 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 = yup export function DonationFlowForm() { const formikRef = useRef | 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(null) + const authenticationSectionRef = React.useRef(null) + const stripeChargeRef = React.useRef(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,18 +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(null) - const authenticationSectionRef = React.useRef(null) - const stripeChargeRef = React.useRef(idempotencyKey) - const [showCancelDialog, setShowCancelDialog] = React.useState(false) - const [submitPaymentLoading, setSubmitPaymentLoading] = React.useState(false) - const { data: { user: person } = { user: null } } = useCurrentPerson() return ( Date: Tue, 26 Nov 2024 19:40:07 +0200 Subject: [PATCH 3/4] fix: E2E test breakage --- e2e/pages/web-pages/donation/donation.page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 { await this.page.waitForTimeout(1000) From b194590549576573624c9797ed34b74db62d3df6 Mon Sep 17 00:00:00 2001 From: Aleksandar Petkov Date: Wed, 4 Dec 2024 19:14:58 +0200 Subject: [PATCH 4/4] chore: Remove redundant console log --- src/components/client/donation-flow/DonationFlowForm.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/client/donation-flow/DonationFlowForm.tsx b/src/components/client/donation-flow/DonationFlowForm.tsx index 3e565cd73..7ee93d06a 100644 --- a/src/components/client/donation-flow/DonationFlowForm.tsx +++ b/src/components/client/donation-flow/DonationFlowForm.tsx @@ -174,7 +174,6 @@ export function DonationFlowForm() { // Update the setup intent with the latest calculated amount try { - console.log(!values.isAnonymous, session?.user, person?.id) const updatedIntent = await updateSetupIntentMutation.mutateAsync({ id: setupIntent.id, idempotencyKey,