diff --git a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx index 706ceb6a5d..ca4e6d4636 100644 --- a/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx +++ b/web-marketplace/src/components/organisms/PaymentInfoForm/PaymentInfoForm.CardInfo.tsx @@ -1,4 +1,4 @@ -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import { Trans } from '@lingui/react/macro'; import { PaymentElement } from '@stripe/react-stripe-js'; @@ -25,6 +25,7 @@ export const CardInfo = ({ const ctx = useFormContext(); const { register, control, setValue } = ctx; const { handleSave: updateMultiStepData, activeStep, data } = useMultiStep(); + const [isLinkSelected, setIsLinkSelected] = useState(false); const createAccount = useWatch({ control: control, @@ -39,6 +40,10 @@ export const CardInfo = ({ setValue('savePaymentMethod', createAccount); }, [createAccount, setValue]); + useEffect(() => { + if (isLinkSelected) setValue('savePaymentMethod', false); + }, [isLinkSelected, setValue]); + useEffect(() => { updateMultiStepData( { @@ -57,12 +62,15 @@ export const CardInfo = ({ setPaymentInfoValid(event.complete)} + onChange={event => { + setPaymentInfoValid(event.complete); + setIsLinkSelected(event.value.type === 'link'); + }} /> Save my credit card info for next time diff --git a/web-marketplace/src/legacy-pages/BuyCredits/BuyCredits.Form.tsx b/web-marketplace/src/legacy-pages/BuyCredits/BuyCredits.Form.tsx index 0424329ee3..eb225c130a 100644 --- a/web-marketplace/src/legacy-pages/BuyCredits/BuyCredits.Form.tsx +++ b/web-marketplace/src/legacy-pages/BuyCredits/BuyCredits.Form.tsx @@ -115,6 +115,7 @@ export const BuyCreditsForm = ({ const { activeAccount, privActiveAccount } = useAuth(); const [paymentOption, setPaymentOption] = useAtom(paymentOptionAtom); const cardDetailsMissing = useAtomValue(cardDetailsMissingAtom); + const { isModalOpen, modalState,