From 66782abae265147cb3b0ade9d7a4231f327f2986 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 13:31:12 +0530 Subject: [PATCH 1/8] Enable claim to bank in claim flow --- .../Claim/Link/MantecaFlowManager.tsx | 8 ++++++-- .../Claim/Link/views/MantecaReviewStep.tsx | 15 +++++++++++---- src/components/Common/CountryList.tsx | 4 ++-- src/components/Common/CountryListRouter.tsx | 17 ++++++++++++++--- .../Global/PeanutActionDetailsCard/index.tsx | 16 ++++++++++------ 5 files changed, 43 insertions(+), 17 deletions(-) diff --git a/src/components/Claim/Link/MantecaFlowManager.tsx b/src/components/Claim/Link/MantecaFlowManager.tsx index ead46215f..014deeb16 100644 --- a/src/components/Claim/Link/MantecaFlowManager.tsx +++ b/src/components/Claim/Link/MantecaFlowManager.tsx @@ -19,12 +19,14 @@ interface MantecaFlowManagerProps { } const MantecaFlowManager: FC = ({ claimLinkData, amount, attachment }) => { - const { setClaimToMercadoPago } = useClaimBankFlow() + const { setClaimToMercadoPago, selectedCountry } = useClaimBankFlow() const [currentStep, setCurrentStep] = useState(MercadoPagoStep.DETAILS) const router = useRouter() const [destinationAddress, setDestinationAddress] = useState('') const isSuccess = currentStep === MercadoPagoStep.SUCCESS + const selectedCurrency = selectedCountry?.currency || 'ARS' + const logo = selectedCountry?.id ? undefined : MERCADO_PAGO const renderStepDetails = () => { if (currentStep === MercadoPagoStep.DETAILS) { @@ -43,6 +45,7 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount claimLink={claimLinkData.link} destinationAddress={destinationAddress} amount={amount} + currency={selectedCurrency} /> ) } @@ -88,7 +91,8 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount tokenSymbol={claimLinkData.tokenSymbol} message={attachment.message} fileUrl={attachment.attachmentUrl} - logo={isSuccess ? undefined : MERCADO_PAGO} + logo={isSuccess ? undefined : logo} + countryCodeForFlag={selectedCountry?.id?.toLowerCase()} /> {renderStepDetails()} diff --git a/src/components/Claim/Link/views/MantecaReviewStep.tsx b/src/components/Claim/Link/views/MantecaReviewStep.tsx index 2ea5bb388..fe1c882a0 100644 --- a/src/components/Claim/Link/views/MantecaReviewStep.tsx +++ b/src/components/Claim/Link/views/MantecaReviewStep.tsx @@ -14,12 +14,19 @@ interface MantecaReviewStepProps { claimLink: string destinationAddress: string amount: string + currency: string } -const MantecaReviewStep: FC = ({ setCurrentStep, claimLink, destinationAddress, amount }) => { +const MantecaReviewStep: FC = ({ + setCurrentStep, + claimLink, + destinationAddress, + amount, + currency, +}) => { const [isSubmitting, setIsSubmitting] = useState(false) const [error, setError] = useState(null) - const { price, isLoading } = useCurrency('ARS') // TODO: change to the currency of the selected Method + const { price, isLoading } = useCurrency(currency) const detailsCardRows: MantecaCardRow[] = [ { @@ -31,7 +38,7 @@ const MantecaReviewStep: FC = ({ setCurrentStep, claimLi { key: 'exchangeRate', label: 'Exchange Rate', - value: `1 USD = ${price?.buy} ARS`, + value: `1 USD = ${price?.buy} ${currency}`, }, { key: 'fee', @@ -55,7 +62,7 @@ const MantecaReviewStep: FC = ({ setCurrentStep, claimLi amount: amount.replace(/,/g, ''), destinationAddress, txHash, - currency: 'ARS', // TODO: source-selected currency + currency, }) if (withdrawError || !data) { setError(withdrawError || 'Something went wrong. Please contact Support') diff --git a/src/components/Common/CountryList.tsx b/src/components/Common/CountryList.tsx index 22ab13a5e..495687e2f 100644 --- a/src/components/Common/CountryList.tsx +++ b/src/components/Common/CountryList.tsx @@ -134,8 +134,8 @@ export const CountryList = ({ // support all bridge and manteca supported countries isSupported = isBridgeSupportedCountry || isMantecaSupportedCountry } else if (viewMode === 'claim-request') { - // support all countries - isSupported = isBridgeSupportedCountry + // support all bridge and manteca supported countries + isSupported = isBridgeSupportedCountry || isMantecaSupportedCountry } else { // support all countries isSupported = true diff --git a/src/components/Common/CountryListRouter.tsx b/src/components/Common/CountryListRouter.tsx index e11b4ae85..c4b584759 100644 --- a/src/components/Common/CountryListRouter.tsx +++ b/src/components/Common/CountryListRouter.tsx @@ -9,7 +9,7 @@ import { formatUnits } from 'viem' import { formatTokenAmount, printableAddress } from '@/utils/general.utils' import { CountryList } from '@/components/Common/CountryList' import { ClaimLinkData } from '@/services/sendLinks' -import { CountryData } from '@/components/AddMoney/consts' +import { CountryData, MantecaSupportedExchanges } from '@/components/AddMoney/consts' import useSavedAccounts from '@/hooks/useSavedAccounts' import { ParsedURL } from '@/lib/url-parser/types/payment' import { useCallback, useMemo } from 'react' @@ -41,7 +41,12 @@ export const CountryListRouter = ({ requestLinkData, inputTitle, }: ICountryListRouterViewProps) => { - const { setFlowStep: setClaimBankFlowStep, setSelectedCountry } = useClaimBankFlow() + const { + setFlowStep: setClaimBankFlowStep, + setSelectedCountry, + setClaimToMercadoPago, + setFlowStep, + } = useClaimBankFlow() const { setFlowStep: setRequestFulfilmentBankFlowStep, setShowRequestFulfilmentBankFlowManager, @@ -56,7 +61,13 @@ export const CountryListRouter = ({ const handleCountryClick = (country: CountryData) => { if (flow === 'claim') { setSelectedCountry(country) - setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm) + const isMantecaSupportedCountry = Object.keys(MantecaSupportedExchanges).includes(country.id) + if (isMantecaSupportedCountry) { + setFlowStep(null) // reset the flow step to initial view first + setClaimToMercadoPago(true) + } else { + setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm) + } } else if (flow === 'request') { setSelectedCountryForRequest(country) diff --git a/src/components/Global/PeanutActionDetailsCard/index.tsx b/src/components/Global/PeanutActionDetailsCard/index.tsx index 3b1e875c7..684bc21c8 100644 --- a/src/components/Global/PeanutActionDetailsCard/index.tsx +++ b/src/components/Global/PeanutActionDetailsCard/index.tsx @@ -165,13 +165,14 @@ export default function PeanutActionDetailsCard({ const isWithdrawBankAccount = transactionType === 'WITHDRAW_BANK_ACCOUNT' && recipientType === 'BANK_ACCOUNT' const isAddBankAccount = transactionType === 'ADD_MONEY_BANK_ACCOUNT' const isClaimLinkBankAccount = transactionType === 'CLAIM_LINK_BANK_ACCOUNT' && recipientType === 'BANK_ACCOUNT' + const isRegionalMethodClaim = transactionType === 'REGIONAL_METHOD_CLAIM' const withdrawBankIcon = () => { const imgSrc = logo ? logo : `https://flagcdn.com/w320/${countryCodeForFlag}.png` - if (isWithdrawBankAccount || isAddBankAccount || isClaimLinkBankAccount) + if (isWithdrawBankAccount || isAddBankAccount || isClaimLinkBankAccount || isRegionalMethodClaim) return (
- {countryCodeForFlag && ( + {(countryCodeForFlag || logo) && ( {`${countryCodeForFlag} )} -
- -
+ {!isRegionalMethodClaim && ( +
+ +
+ )}
) return undefined @@ -192,7 +195,8 @@ export default function PeanutActionDetailsCard({
- {viewType !== 'SUCCESS' && (isWithdrawBankAccount || isAddBankAccount || isClaimLinkBankAccount) ? ( + {viewType !== 'SUCCESS' && + (isWithdrawBankAccount || isAddBankAccount || isClaimLinkBankAccount || isRegionalMethodClaim) ? ( withdrawBankIcon() ) : ( Date: Thu, 18 Sep 2025 13:34:24 +0530 Subject: [PATCH 2/8] Enable Req fulfilment through bank using manteca --- src/app/[...recipient]/client.tsx | 3 +-- src/components/Common/CountryListRouter.tsx | 8 ++++++-- .../Payment/Views/MantecaFulfillment.view.tsx | 12 +++++++++--- src/hooks/useCurrency.ts | 2 +- 4 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index aef205f4e..b65cfbb49 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -394,8 +394,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) }, [transactionForDrawer, currentView, dispatch, openTransactionDetails, isExternalWalletFlow, chargeId]) const showActionList = - flow !== 'direct_pay' || // Always show for non-direct-pay flows - (flow === 'direct_pay' && !user) || // Show for direct-pay when user is not logged in + (flow !== 'direct_pay' || (flow === 'direct_pay' && !user)) && // Show for direct-pay when user is not logged in !fulfillUsingManteca // Show when not fulfilling using Manteca // Send to bank step if its mentioned in the URL and guest KYC is not needed useEffect(() => { diff --git a/src/components/Common/CountryListRouter.tsx b/src/components/Common/CountryListRouter.tsx index c4b584759..70fe8903b 100644 --- a/src/components/Common/CountryListRouter.tsx +++ b/src/components/Common/CountryListRouter.tsx @@ -52,6 +52,7 @@ export const CountryListRouter = ({ setShowRequestFulfilmentBankFlowManager, setSelectedCountry: setSelectedCountryForRequest, setShowVerificationModal, + setFulfillUsingManteca, } = useRequestFulfillmentFlow() const savedAccounts = useSavedAccounts() const { chargeDetails } = usePaymentStore() @@ -59,9 +60,9 @@ export const CountryListRouter = ({ const { user } = useAuth() const handleCountryClick = (country: CountryData) => { + const isMantecaSupportedCountry = Object.keys(MantecaSupportedExchanges).includes(country.id) if (flow === 'claim') { setSelectedCountry(country) - const isMantecaSupportedCountry = Object.keys(MantecaSupportedExchanges).includes(country.id) if (isMantecaSupportedCountry) { setFlowStep(null) // reset the flow step to initial view first setClaimToMercadoPago(true) @@ -69,8 +70,11 @@ export const CountryListRouter = ({ setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm) } } else if (flow === 'request') { + if (isMantecaSupportedCountry) { + setShowRequestFulfilmentBankFlowManager(false) + setFulfillUsingManteca(true) + } setSelectedCountryForRequest(country) - if (requestType === BankRequestType.PayerKycNeeded) { if (user && (!user.user.fullName || !user.user.email)) { setRequestFulfilmentBankFlowStep(RequestFulfillmentBankFlowStep.CollectUserDetails) diff --git a/src/components/Payment/Views/MantecaFulfillment.view.tsx b/src/components/Payment/Views/MantecaFulfillment.view.tsx index 7f5618669..972c578d9 100644 --- a/src/components/Payment/Views/MantecaFulfillment.view.tsx +++ b/src/components/Payment/Views/MantecaFulfillment.view.tsx @@ -12,14 +12,14 @@ import { useQuery } from '@tanstack/react-query' import React from 'react' const MantecaFulfillment = () => { - const { setFulfillUsingManteca } = useRequestFulfillmentFlow() + const { setFulfillUsingManteca, selectedCountry, setSelectedCountry } = useRequestFulfillmentFlow() const { requestDetails, chargeDetails } = usePaymentStore() const { data: depositData, isLoading: isLoadingDeposit } = useQuery({ queryKey: ['manteca-deposit', chargeDetails?.uuid], queryFn: () => mantecaApi.deposit({ usdAmount: requestDetails?.tokenAmount || chargeDetails?.tokenAmount || '0', - currency: 'ARS', + currency: selectedCountry?.currency || 'ARS', chargeId: chargeDetails?.uuid, }), refetchOnWindowFocus: false, @@ -27,6 +27,10 @@ const MantecaFulfillment = () => { enabled: Boolean(chargeDetails?.uuid), }) + const actionCardLogo = selectedCountry?.id + ? `https://flagcdn.com/w320/${selectedCountry?.id.toLowerCase()}.png` + : MERCADO_PAGO + const generateShareText = () => { const textParts = [] textParts.push(`CBU: ${depositData?.data?.depositAddress}`) @@ -44,6 +48,7 @@ const MantecaFulfillment = () => { { + setSelectedCountry(null) setFulfillUsingManteca(false) }} /> @@ -58,7 +63,8 @@ const MantecaFulfillment = () => { tokenSymbol={requestDetails?.tokenSymbol || 'USDC'} message={requestDetails?.reference || chargeDetails?.requestLink?.reference || ''} fileUrl={requestDetails?.attachmentUrl || chargeDetails?.requestLink?.attachmentUrl || ''} - logo={MERCADO_PAGO} + logo={actionCardLogo} + countryCodeForFlag={selectedCountry?.id.toLowerCase()} /> {depositData?.error && } diff --git a/src/hooks/useCurrency.ts b/src/hooks/useCurrency.ts index a103fa8dd..d200d7bc4 100644 --- a/src/hooks/useCurrency.ts +++ b/src/hooks/useCurrency.ts @@ -22,7 +22,7 @@ export const useCurrency = (currencyCode: string | null) => { const [code, setCode] = useState(currencyCode?.toUpperCase() ?? null) const [symbol, setSymbol] = useState(null) const [price, setPrice] = useState<{ buy: number; sell: number } | null>(null) - const [isLoading, setIsLoading] = useState(false) + const [isLoading, setIsLoading] = useState(true) useEffect(() => { if (!code) { From 73f3e230fafc1852b3da5c7ed866f7671fc717be Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 13:36:19 +0530 Subject: [PATCH 3/8] fix: kush's leftovers --- src/app/(mobile-ui)/qr-pay/page.tsx | 31 +++++++++---------- ...ag-And-Name.tsx => CountryFlagAndName.tsx} | 0 src/components/Kyc/CountryRegionRow.tsx | 2 +- 3 files changed, 15 insertions(+), 18 deletions(-) rename src/components/Kyc/{Country-Flag-And-Name.tsx => CountryFlagAndName.tsx} (100%) diff --git a/src/app/(mobile-ui)/qr-pay/page.tsx b/src/app/(mobile-ui)/qr-pay/page.tsx index aad1f6bf2..3a753c8b6 100644 --- a/src/app/(mobile-ui)/qr-pay/page.tsx +++ b/src/app/(mobile-ui)/qr-pay/page.tsx @@ -2,7 +2,8 @@ import { useSearchParams, useRouter } from 'next/navigation' import { useState, useCallback, useMemo, useEffect, useContext } from 'react' -import { Card } from '@/components/0_Bruddle/Card' +import { PeanutDoesntStoreAnyPersonalInformation } from '@/components/Kyc/KycVerificationInProgressModal' +import Card from '@/components/Global/Card' import { Button } from '@/components/0_Bruddle/Button' import { Icon } from '@/components/Global/Icons/Icon' import { mantecaApi } from '@/services/manteca' @@ -216,18 +217,18 @@ export default function QRPayPage() { if (!!errorInitiatingPayment) { return (
- - - Unable to get QR details - + +
+

Unable to get QR details

+

{errorInitiatingPayment || 'An error occurred while getting the QR details.'} - - - - - +

+
+
+ +
) @@ -273,11 +274,7 @@ export default function QRPayPage() { icon: 'check-circle', }, ]} - footer={ -

- Peanut doesn't store any personal information -

- } + footer={} />
) diff --git a/src/components/Kyc/Country-Flag-And-Name.tsx b/src/components/Kyc/CountryFlagAndName.tsx similarity index 100% rename from src/components/Kyc/Country-Flag-And-Name.tsx rename to src/components/Kyc/CountryFlagAndName.tsx diff --git a/src/components/Kyc/CountryRegionRow.tsx b/src/components/Kyc/CountryRegionRow.tsx index 64cdb13ea..00519a908 100644 --- a/src/components/Kyc/CountryRegionRow.tsx +++ b/src/components/Kyc/CountryRegionRow.tsx @@ -1,5 +1,5 @@ import { PaymentInfoRow } from '@/components/Payment/PaymentInfoRow' -import { CountryFlagAndName } from './Country-Flag-And-Name' +import { CountryFlagAndName } from './CountryFlagAndName' interface CountryRegionRowProps { countryCode?: string | null From d6ea5570e030ecf28ab9683bddfd77f9df4bb89c Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 13:39:48 +0530 Subject: [PATCH 4/8] add KYC to links flow --- .../Claim/Link/MantecaFlowManager.tsx | 44 +++++++++++++++- .../Payment/Views/MantecaFulfillment.view.tsx | 52 +++++++++++++++++-- 2 files changed, 91 insertions(+), 5 deletions(-) diff --git a/src/components/Claim/Link/MantecaFlowManager.tsx b/src/components/Claim/Link/MantecaFlowManager.tsx index 014deeb16..3c9abcb6a 100644 --- a/src/components/Claim/Link/MantecaFlowManager.tsx +++ b/src/components/Claim/Link/MantecaFlowManager.tsx @@ -5,12 +5,16 @@ import NavHeader from '@/components/Global/NavHeader' import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard' import { useClaimBankFlow } from '@/context/ClaimBankFlowContext' import { ClaimLinkData } from '@/services/sendLinks' -import { FC, useState } from 'react' +import { FC, useEffect, useState } from 'react' import MantecaDetailsStep from './views/MantecaDetailsStep.view' import { MercadoPagoStep } from '@/types/manteca.types' import MantecaReviewStep from './views/MantecaReviewStep' import { Button } from '@/components/0_Bruddle' import { useRouter } from 'next/navigation' +import useKycStatus from '@/hooks/useKycStatus' +import { InitiateMantecaKYCModal } from '@/components/Kyc/InitiateMantecaKYCModal' +import { useAuth } from '@/context/authContext' +import { CountryData } from '@/components/AddMoney/consts' interface MantecaFlowManagerProps { claimLinkData: ClaimLinkData @@ -23,11 +27,35 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount const [currentStep, setCurrentStep] = useState(MercadoPagoStep.DETAILS) const router = useRouter() const [destinationAddress, setDestinationAddress] = useState('') + const [isKYCModalOpen, setIsKYCModalOpen] = useState(false) + const argentinaCountryData = { + id: 'AR', + type: 'country', + title: 'Argentina', + currency: 'ARS', + path: 'argentina', + iso2: 'AR', + iso3: 'ARG', + } as CountryData + + const { isUserMantecaKycApproved } = useKycStatus() + const { fetchUser } = useAuth() const isSuccess = currentStep === MercadoPagoStep.SUCCESS const selectedCurrency = selectedCountry?.currency || 'ARS' const logo = selectedCountry?.id ? undefined : MERCADO_PAGO + const handleKycCancel = () => { + setIsKYCModalOpen(false) + onPrev() + } + + useEffect(() => { + if (!isUserMantecaKycApproved) { + setIsKYCModalOpen(true) + } + }, [isUserMantecaKycApproved]) + const renderStepDetails = () => { if (currentStep === MercadoPagoStep.DETAILS) { return ( @@ -96,6 +124,20 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount /> {renderStepDetails()} + + {isKYCModalOpen && ( + { + // close the modal and let the user continue with amount input + setIsKYCModalOpen(false) + fetchUser() + }} + country={selectedCountry || argentinaCountryData} + /> + )}
) diff --git a/src/components/Payment/Views/MantecaFulfillment.view.tsx b/src/components/Payment/Views/MantecaFulfillment.view.tsx index 972c578d9..37ecc8192 100644 --- a/src/components/Payment/Views/MantecaFulfillment.view.tsx +++ b/src/components/Payment/Views/MantecaFulfillment.view.tsx @@ -1,36 +1,67 @@ +import React, { useEffect, useState } from 'react' import { MERCADO_PAGO } from '@/assets' +import { CountryData } from '@/components/AddMoney/consts' import ErrorAlert from '@/components/Global/ErrorAlert' import MantecaDetailsCard from '@/components/Global/MantecaDetailsCard' import NavHeader from '@/components/Global/NavHeader' import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard' import PeanutLoading from '@/components/Global/PeanutLoading' import ShareButton from '@/components/Global/ShareButton' +import { InitiateMantecaKYCModal } from '@/components/Kyc/InitiateMantecaKYCModal' +import { useAuth } from '@/context/authContext' import { useRequestFulfillmentFlow } from '@/context/RequestFulfillmentFlowContext' +import useKycStatus from '@/hooks/useKycStatus' import { usePaymentStore } from '@/redux/hooks' import { mantecaApi } from '@/services/manteca' import { useQuery } from '@tanstack/react-query' -import React from 'react' const MantecaFulfillment = () => { const { setFulfillUsingManteca, selectedCountry, setSelectedCountry } = useRequestFulfillmentFlow() const { requestDetails, chargeDetails } = usePaymentStore() + const [isKYCModalOpen, setIsKYCModalOpen] = useState(false) + const { isUserMantecaKycApproved } = useKycStatus() + const { fetchUser } = useAuth() + + const currency = selectedCountry?.currency || 'ARS' const { data: depositData, isLoading: isLoadingDeposit } = useQuery({ - queryKey: ['manteca-deposit', chargeDetails?.uuid], + queryKey: ['manteca-deposit', chargeDetails?.uuid, currency], queryFn: () => mantecaApi.deposit({ usdAmount: requestDetails?.tokenAmount || chargeDetails?.tokenAmount || '0', - currency: selectedCountry?.currency || 'ARS', + currency, chargeId: chargeDetails?.uuid, }), refetchOnWindowFocus: false, staleTime: Infinity, // don't refetch the data - enabled: Boolean(chargeDetails?.uuid), + enabled: Boolean(chargeDetails?.uuid) && isUserMantecaKycApproved, }) + const argentinaCountryData = { + id: 'AR', + type: 'country', + title: 'Argentina', + currency: 'ARS', + path: 'argentina', + iso2: 'AR', + iso3: 'ARG', + } as CountryData + const actionCardLogo = selectedCountry?.id ? `https://flagcdn.com/w320/${selectedCountry?.id.toLowerCase()}.png` : MERCADO_PAGO + const handleKycCancel = () => { + setIsKYCModalOpen(false) + setSelectedCountry(null) + setFulfillUsingManteca(false) + } + + useEffect(() => { + if (!isUserMantecaKycApproved) { + setIsKYCModalOpen(true) + } + }, [isUserMantecaKycApproved]) + const generateShareText = () => { const textParts = [] textParts.push(`CBU: ${depositData?.data?.depositAddress}`) @@ -109,6 +140,19 @@ const MantecaFulfillment = () => { )} + {isKYCModalOpen && ( + { + // close the modal and let the user continue with amount input + setIsKYCModalOpen(false) + fetchUser() + }} + country={selectedCountry || argentinaCountryData} + /> + )} ) } From 9f1317f819e2976171d8327b145fc9321df5be07 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 21:42:05 +0530 Subject: [PATCH 5/8] feat: guest kyc flows integration --- src/components/Claim/Link/Initial.view.tsx | 9 +++++++-- src/components/Claim/useClaimLink.tsx | 2 +- src/components/Common/ActionList.tsx | 12 ++++++++++++ src/components/Payment/PaymentForm/index.tsx | 15 +++++++++++++-- 4 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/components/Claim/Link/Initial.view.tsx b/src/components/Claim/Link/Initial.view.tsx index 1e8990937..5ca9333b9 100644 --- a/src/components/Claim/Link/Initial.view.tsx +++ b/src/components/Claim/Link/Initial.view.tsx @@ -94,6 +94,7 @@ export const InitialClaimLinkView = (props: IClaimScreenProps) => { setClaimToExternalWallet, resetFlow: resetClaimBankFlow, claimToMercadoPago, + setClaimToMercadoPago, } = useClaimBankFlow() const { setLoadingState, isLoading } = useContext(loadingStateContext) const { @@ -632,9 +633,13 @@ export const InitialClaimLinkView = (props: IClaimScreenProps) => { useEffect(() => { const stepFromURL = searchParams.get('step') - if (user && claimLinkData.status !== 'CLAIMED' && stepFromURL === 'claim' && isPeanutWallet) { + if (user && claimLinkData.status !== 'CLAIMED') { removeParamStep() - handleClaimLink(false, true) + if (stepFromURL === 'claim' && isPeanutWallet) { + handleClaimLink(false, true) + } else if (stepFromURL === 'regional-claim') { + setClaimToMercadoPago(true) + } } }, [user, searchParams, isPeanutWallet]) diff --git a/src/components/Claim/useClaimLink.tsx b/src/components/Claim/useClaimLink.tsx index 4aeaf9b6c..a9dc4f83d 100644 --- a/src/components/Claim/useClaimLink.tsx +++ b/src/components/Claim/useClaimLink.tsx @@ -96,7 +96,7 @@ const useClaimLink = () => { } } - const addParamStep = (step: 'bank' | 'claim') => { + const addParamStep = (step: 'bank' | 'claim' | 'regional-claim' | 'regional-req-fulfill') => { const params = new URLSearchParams(searchParams) params.set('step', step) diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index b706135a9..1272775ab 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -24,6 +24,7 @@ import { GuestVerificationModal } from '../Global/GuestVerificationModal' import ActionListDaimoPayButton from './ActionListDaimoPayButton' import { ACTION_METHODS, PaymentMethod } from '@/constants/actionlist.consts' import useClaimLink from '../Claim/useClaimLink' +import { useAuth } from '@/context/authContext' interface IActionListProps { flow: 'claim' | 'request' @@ -63,6 +64,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin setFulfillUsingManteca, } = useRequestFulfillmentFlow() const [isGuestVerificationModalOpen, setIsGuestVerificationModalOpen] = useState(false) + const { user } = useAuth() const handleMethodClick = async (method: PaymentMethod) => { if (flow === 'claim' && claimLinkData) { @@ -87,6 +89,11 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin } break case 'mercadopago': + if (!user) { + addParamStep('regional-claim') + setShowVerificationModal(true) + return + } setClaimToMercadoPago(true) break case 'exchange-or-wallet': @@ -110,6 +117,11 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin } break case 'mercadopago': + if (!user) { + addParamStep('regional-req-fulfill') + setIsGuestVerificationModalOpen(true) + return + } setFulfillUsingManteca(true) break case 'exchange-or-wallet': diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index b1163a147..32be19300 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/src/components/Payment/PaymentForm/index.tsx @@ -81,8 +81,12 @@ export const PaymentForm = ({ error: paymentStoreError, attachmentOptions, } = usePaymentStore() - const { setShowExternalWalletFulfilMethods, setExternalWalletFulfilMethod, fulfillUsingManteca } = - useRequestFulfillmentFlow() + const { + setShowExternalWalletFulfilMethods, + setExternalWalletFulfilMethod, + fulfillUsingManteca, + setFulfillUsingManteca, + } = useRequestFulfillmentFlow() const recipientUsername = !chargeDetails && recipient?.recipientType === 'USERNAME' ? recipient.identifier : null const { user: recipientUser } = useUserByUsername(recipientUsername) @@ -547,6 +551,13 @@ export const PaymentForm = ({ } }, [isPintaReq, inputTokenAmount]) + useEffect(() => { + const stepFromURL = searchParams.get('step') + if (user && stepFromURL === 'regional-req-fulfill') { + setFulfillUsingManteca(true) + } + }, [user, searchParams]) + const isInsufficientBalanceError = useMemo(() => { return error?.includes("You don't have enough balance.") }, [error]) From 3aa4a8dc159d4144787c80e5ed129d87d35a89ae Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 22:11:19 +0530 Subject: [PATCH 6/8] feat: geo-locate methods --- .../Claim/Link/MantecaFlowManager.tsx | 9 ++--- .../Link/views/MantecaDetailsStep.view.tsx | 2 +- src/components/Common/ActionList.tsx | 33 ++++++++++++++++++- .../Payment/Views/MantecaFulfillment.view.tsx | 9 +++-- src/constants/actionlist.consts.ts | 9 ++++- src/context/ClaimBankFlowContext.tsx | 7 ++++ src/context/RequestFulfillmentFlowContext.tsx | 7 ++++ 7 files changed, 66 insertions(+), 10 deletions(-) diff --git a/src/components/Claim/Link/MantecaFlowManager.tsx b/src/components/Claim/Link/MantecaFlowManager.tsx index 3c9abcb6a..e412ab5a7 100644 --- a/src/components/Claim/Link/MantecaFlowManager.tsx +++ b/src/components/Claim/Link/MantecaFlowManager.tsx @@ -1,6 +1,6 @@ 'use client' -import { MERCADO_PAGO } from '@/assets' +import { MERCADO_PAGO, PIX } from '@/assets' import NavHeader from '@/components/Global/NavHeader' import PeanutActionDetailsCard from '@/components/Global/PeanutActionDetailsCard' import { useClaimBankFlow } from '@/context/ClaimBankFlowContext' @@ -23,7 +23,7 @@ interface MantecaFlowManagerProps { } const MantecaFlowManager: FC = ({ claimLinkData, amount, attachment }) => { - const { setClaimToMercadoPago, selectedCountry } = useClaimBankFlow() + const { setClaimToMercadoPago, selectedCountry, regionalMethodType } = useClaimBankFlow() const [currentStep, setCurrentStep] = useState(MercadoPagoStep.DETAILS) const router = useRouter() const [destinationAddress, setDestinationAddress] = useState('') @@ -43,7 +43,8 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount const isSuccess = currentStep === MercadoPagoStep.SUCCESS const selectedCurrency = selectedCountry?.currency || 'ARS' - const logo = selectedCountry?.id ? undefined : MERCADO_PAGO + const regionalMethodLogo = regionalMethodType === 'mercadopago' ? MERCADO_PAGO : PIX + const logo = selectedCountry?.id ? undefined : regionalMethodLogo const handleKycCancel = () => { setIsKYCModalOpen(false) @@ -114,7 +115,7 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount avatarSize="medium" transactionType="REGIONAL_METHOD_CLAIM" recipientType="USERNAME" - recipientName={isSuccess ? 'You’ll receive' : 'Receive in Mercado Pago'} + recipientName={isSuccess ? 'You’ll receive' : 'Receive in ' + regionalMethodType} amount={amount} tokenSymbol={claimLinkData.tokenSymbol} message={attachment.message} diff --git a/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx b/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx index 199c27ed9..d7be3f0ff 100644 --- a/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx +++ b/src/components/Claim/Link/views/MantecaDetailsStep.view.tsx @@ -23,7 +23,7 @@ const MantecaDetailsStep: FC = ({ return ( <> -

Enter Mercado Pago account details

+

Enter account details

{ if (flow === 'claim' && claimLinkData) { const amountInUsd = parseFloat(formatUnits(claimLinkData.amount, claimLinkData.tokenDecimals)) @@ -89,11 +95,13 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin } break case 'mercadopago': + case 'pix': if (!user) { addParamStep('regional-claim') setShowVerificationModal(true) return } + setRegionalMethodType(method.id) setClaimToMercadoPago(true) break case 'exchange-or-wallet': @@ -117,11 +125,13 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin } break case 'mercadopago': + case 'pix': if (!user) { addParamStep('regional-req-fulfill') setIsGuestVerificationModalOpen(true) return } + setRequestFulfillmentRegionalMethodType(method.id) setFulfillUsingManteca(true) break case 'exchange-or-wallet': @@ -131,6 +141,19 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin } } + const geolocatedMethods = useMemo(() => { + // show pix in brazil and mercado pago in other countries + return ACTION_METHODS.filter((method) => { + if (userGeoLocationCountryCode === 'BR' && method.id === 'mercadopago') { + return false + } + if (userGeoLocationCountryCode !== 'BR' && method.id === 'pix') { + return false + } + return true + }) + }, [userGeoLocationCountryCode]) + const requiresVerification = useMemo(() => { if (flow === 'claim') { return claimType === BankClaimType.GuestKycNeeded || claimType === BankClaimType.ReceiverKycNeeded @@ -142,7 +165,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin }, [claimType, requestType, flow]) const sortedActionMethods = useMemo(() => { - return [...ACTION_METHODS].sort((a, b) => { + return [...geolocatedMethods].sort((a, b) => { const aIsUnavailable = a.soon || (a.id === 'bank' && requiresVerification) const bIsUnavailable = b.soon || (b.id === 'bank' && requiresVerification) @@ -153,6 +176,14 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin }) }, [requiresVerification]) + if (isGeoLoading) { + return ( +
+ +
+ ) + } + return (
{!isLoggedIn && ( diff --git a/src/components/Payment/Views/MantecaFulfillment.view.tsx b/src/components/Payment/Views/MantecaFulfillment.view.tsx index 37ecc8192..902db6623 100644 --- a/src/components/Payment/Views/MantecaFulfillment.view.tsx +++ b/src/components/Payment/Views/MantecaFulfillment.view.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react' -import { MERCADO_PAGO } from '@/assets' +import { MERCADO_PAGO, PIX } from '@/assets' import { CountryData } from '@/components/AddMoney/consts' import ErrorAlert from '@/components/Global/ErrorAlert' import MantecaDetailsCard from '@/components/Global/MantecaDetailsCard' @@ -16,7 +16,8 @@ import { mantecaApi } from '@/services/manteca' import { useQuery } from '@tanstack/react-query' const MantecaFulfillment = () => { - const { setFulfillUsingManteca, selectedCountry, setSelectedCountry } = useRequestFulfillmentFlow() + const { setFulfillUsingManteca, selectedCountry, setSelectedCountry, regionalMethodType } = + useRequestFulfillmentFlow() const { requestDetails, chargeDetails } = usePaymentStore() const [isKYCModalOpen, setIsKYCModalOpen] = useState(false) const { isUserMantecaKycApproved } = useKycStatus() @@ -48,7 +49,9 @@ const MantecaFulfillment = () => { const actionCardLogo = selectedCountry?.id ? `https://flagcdn.com/w320/${selectedCountry?.id.toLowerCase()}.png` - : MERCADO_PAGO + : regionalMethodType === 'mercadopago' + ? MERCADO_PAGO + : PIX const handleKycCancel = () => { setIsKYCModalOpen(false) diff --git a/src/constants/actionlist.consts.ts b/src/constants/actionlist.consts.ts index 7ed112d8d..944a2a177 100644 --- a/src/constants/actionlist.consts.ts +++ b/src/constants/actionlist.consts.ts @@ -1,4 +1,4 @@ -import { MERCADO_PAGO } from '@/assets' +import { MERCADO_PAGO, PIX } from '@/assets' import { METAMASK_LOGO, TRUST_WALLET_SMALL_LOGO } from '@/assets/wallets' import binanceIcon from '@/assets/exchanges/binance.svg' @@ -29,6 +29,13 @@ export const ACTION_METHODS: PaymentMethod[] = [ icons: [MERCADO_PAGO], soon: false, }, + { + id: 'pix', + title: 'Pix', + description: 'Instant transfers', + icons: [PIX], + soon: false, + }, { id: 'exchange-or-wallet', title: 'Exchange or Wallet', diff --git a/src/context/ClaimBankFlowContext.tsx b/src/context/ClaimBankFlowContext.tsx index deda0810f..f07fdaffb 100644 --- a/src/context/ClaimBankFlowContext.tsx +++ b/src/context/ClaimBankFlowContext.tsx @@ -44,6 +44,8 @@ interface ClaimBankFlowContextType { setJustCompletedKyc: (status: boolean) => void claimToMercadoPago: boolean setClaimToMercadoPago: (claimToMercadoPago: boolean) => void + regionalMethodType: 'mercadopago' | 'pix' + setRegionalMethodType: (regionalMethodType: 'mercadopago' | 'pix') => void } const ClaimBankFlowContext = createContext(undefined) @@ -63,6 +65,7 @@ export const ClaimBankFlowContextProvider: React.FC<{ children: ReactNode }> = ( const [senderKycStatus, setSenderKycStatus] = useState() const [justCompletedKyc, setJustCompletedKyc] = useState(false) const [claimToMercadoPago, setClaimToMercadoPago] = useState(false) + const [regionalMethodType, setRegionalMethodType] = useState<'mercadopago' | 'pix'>('mercadopago') const resetFlow = useCallback(() => { setClaimToExternalWallet(false) @@ -79,6 +82,7 @@ export const ClaimBankFlowContextProvider: React.FC<{ children: ReactNode }> = ( setSenderKycStatus(undefined) setJustCompletedKyc(false) setClaimToMercadoPago(false) + setRegionalMethodType('mercadopago') }, []) const value = useMemo( @@ -112,6 +116,8 @@ export const ClaimBankFlowContextProvider: React.FC<{ children: ReactNode }> = ( setJustCompletedKyc, claimToMercadoPago, setClaimToMercadoPago, + regionalMethodType, + setRegionalMethodType, }), [ claimToExternalWallet, @@ -130,6 +136,7 @@ export const ClaimBankFlowContextProvider: React.FC<{ children: ReactNode }> = ( justCompletedKyc, claimToMercadoPago, setClaimToMercadoPago, + regionalMethodType, ] ) diff --git a/src/context/RequestFulfillmentFlowContext.tsx b/src/context/RequestFulfillmentFlowContext.tsx index 0fe808925..609741392 100644 --- a/src/context/RequestFulfillmentFlowContext.tsx +++ b/src/context/RequestFulfillmentFlowContext.tsx @@ -34,6 +34,8 @@ interface RequestFulfillmentFlowContextType { setRequesterDetails: (details: User | null) => void fulfillUsingManteca: boolean setFulfillUsingManteca: (fulfillUsingManteca: boolean) => void + regionalMethodType: 'mercadopago' | 'pix' + setRegionalMethodType: (regionalMethodType: 'mercadopago' | 'pix') => void } const RequestFulfillmentFlowContext = createContext(undefined) @@ -50,6 +52,7 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod const [showVerificationModal, setShowVerificationModal] = useState(false) const [requesterDetails, setRequesterDetails] = useState(null) const [fulfillUsingManteca, setFulfillUsingManteca] = useState(false) + const [regionalMethodType, setRegionalMethodType] = useState<'mercadopago' | 'pix'>('mercadopago') const resetFlow = useCallback(() => { setExternalWalletFulfilMethod(null) @@ -61,6 +64,7 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod setShowVerificationModal(false) setRequesterDetails(null) setFulfillUsingManteca(false) + setRegionalMethodType('mercadopago') }, []) const value = useMemo( @@ -84,6 +88,8 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod setRequesterDetails, fulfillUsingManteca, setFulfillUsingManteca, + regionalMethodType, + setRegionalMethodType, }), [ resetFlow, @@ -96,6 +102,7 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod showVerificationModal, requesterDetails, fulfillUsingManteca, + regionalMethodType, ] ) From 651ab674c805de3173dd949008d91284aad75745 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Thu, 18 Sep 2025 22:22:57 +0530 Subject: [PATCH 7/8] fix: ensure fulfillUsingManteca state resets correctly based on URL step --- src/components/Payment/PaymentForm/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index 32be19300..af23fded5 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/src/components/Payment/PaymentForm/index.tsx @@ -555,6 +555,8 @@ export const PaymentForm = ({ const stepFromURL = searchParams.get('step') if (user && stepFromURL === 'regional-req-fulfill') { setFulfillUsingManteca(true) + } else { + setFulfillUsingManteca(false) } }, [user, searchParams]) From 1c55ac66d8cecbdcc4258ab0ed897b534498a948 Mon Sep 17 00:00:00 2001 From: Zishan Mohd Date: Fri, 19 Sep 2025 19:41:15 +0530 Subject: [PATCH 8/8] fix: correct spelling of 'fulfil' to 'fulfill' in relevant components --- src/app/[...recipient]/client.tsx | 4 +-- src/components/Common/ActionList.tsx | 4 +-- src/components/Payment/PaymentForm/index.tsx | 8 +++--- .../views/ExternalWalletFulfilManager.tsx | 20 ++++++------- .../views/ExternalWalletFulfilMethods.tsx | 4 +-- src/context/RequestFulfillmentFlowContext.tsx | 28 +++++++++---------- 6 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index b65cfbb49..fce0ef470 100644 --- a/src/app/[...recipient]/client.tsx +++ b/src/app/[...recipient]/client.tsx @@ -64,7 +64,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) const { isDrawerOpen, selectedTransaction, openTransactionDetails } = useTransactionDetailsDrawer() const [isLinkCancelling, setisLinkCancelling] = useState(false) const { - showExternalWalletFulfilMethods, + showExternalWalletFulfillMethods, showRequestFulfilmentBankFlowManager, setShowRequestFulfilmentBankFlowManager, setFlowStep: setRequestFulfilmentBankFlowStep, @@ -432,7 +432,7 @@ export default function PaymentPage({ recipient, flow = 'request_pay' }: Props) } // render external wallet fulfilment methods - if (showExternalWalletFulfilMethods) { + if (showExternalWalletFulfillMethods) { return } diff --git a/src/components/Common/ActionList.tsx b/src/components/Common/ActionList.tsx index b46909cf0..41042a28a 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -62,7 +62,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin const { addParamStep } = useClaimLink() const { setShowRequestFulfilmentBankFlowManager, - setShowExternalWalletFulfilMethods, + setShowExternalWalletFulfillMethods, setFlowStep: setRequestFulfilmentBankFlowStep, setFulfillUsingManteca, setRegionalMethodType: setRequestFulfillmentRegionalMethodType, @@ -135,7 +135,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin setFulfillUsingManteca(true) break case 'exchange-or-wallet': - setShowExternalWalletFulfilMethods(true) + setShowExternalWalletFulfillMethods(true) break } } diff --git a/src/components/Payment/PaymentForm/index.tsx b/src/components/Payment/PaymentForm/index.tsx index af23fded5..597eba753 100644 --- a/src/components/Payment/PaymentForm/index.tsx +++ b/src/components/Payment/PaymentForm/index.tsx @@ -82,8 +82,8 @@ export const PaymentForm = ({ attachmentOptions, } = usePaymentStore() const { - setShowExternalWalletFulfilMethods, - setExternalWalletFulfilMethod, + setShowExternalWalletFulfillMethods, + setExternalWalletFulfillMethod, fulfillUsingManteca, setFulfillUsingManteca, } = useRequestFulfillmentFlow() @@ -644,8 +644,8 @@ export const PaymentForm = ({ const handleGoBack = () => { if (isExternalWalletFlow) { - setShowExternalWalletFulfilMethods(true) - setExternalWalletFulfilMethod(null) + setShowExternalWalletFulfillMethods(true) + setExternalWalletFulfillMethod(null) return } else if (window.history.length > 1) { router.back() diff --git a/src/components/Request/views/ExternalWalletFulfilManager.tsx b/src/components/Request/views/ExternalWalletFulfilManager.tsx index 90d966837..cc58d7690 100644 --- a/src/components/Request/views/ExternalWalletFulfilManager.tsx +++ b/src/components/Request/views/ExternalWalletFulfilManager.tsx @@ -9,14 +9,14 @@ import { PaymentForm } from '@/components/Payment/PaymentForm' export default function ExternalWalletFulfilManager({ parsedPaymentData }: { parsedPaymentData: ParsedURL }) { const { - showExternalWalletFulfilMethods, - externalWalletFulfilMethod, - setExternalWalletFulfilMethod, - setShowExternalWalletFulfilMethods, + showExternalWalletFulfillMethods, + externalWalletFulfillMethod, + setExternalWalletFulfillMethod, + setShowExternalWalletFulfillMethods, } = useRequestFulfillmentFlow() const { currentView } = usePaymentStore() - if (externalWalletFulfilMethod === 'wallet') { + if (externalWalletFulfillMethod === 'wallet') { switch (currentView) { case 'INITIAL': return ( @@ -46,21 +46,21 @@ export default function ExternalWalletFulfilManager({ parsedPaymentData }: { par } } - if (externalWalletFulfilMethod === 'exchange') { + if (externalWalletFulfillMethod === 'exchange') { return ( { - setExternalWalletFulfilMethod(null) - setShowExternalWalletFulfilMethods(true) + setExternalWalletFulfillMethod(null) + setShowExternalWalletFulfillMethods(true) }} /> ) } - if (showExternalWalletFulfilMethods) { - return setShowExternalWalletFulfilMethods(false)} /> + if (showExternalWalletFulfillMethods) { + return setShowExternalWalletFulfillMethods(false)} /> } return null diff --git a/src/components/Request/views/ExternalWalletFulfilMethods.tsx b/src/components/Request/views/ExternalWalletFulfilMethods.tsx index a427dbb6c..93204103c 100644 --- a/src/components/Request/views/ExternalWalletFulfilMethods.tsx +++ b/src/components/Request/views/ExternalWalletFulfilMethods.tsx @@ -23,7 +23,7 @@ const methods: PaymentMethod[] = [ ] export default function ExternalWalletFulfilMethods({ onBack }: { onBack: () => void }) { - const { setExternalWalletFulfilMethod } = useRequestFulfillmentFlow() + const { setExternalWalletFulfillMethod } = useRequestFulfillmentFlow() return (
@@ -35,7 +35,7 @@ export default function ExternalWalletFulfilMethods({ onBack }: { onBack: () => key={method.id} method={method} onClick={() => { - setExternalWalletFulfilMethod(method.id as ExternalWalletFulfilMethod) + setExternalWalletFulfillMethod(method.id as ExternalWalletFulfilMethod) }} /> ))} diff --git a/src/context/RequestFulfillmentFlowContext.tsx b/src/context/RequestFulfillmentFlowContext.tsx index 609741392..c324d3b31 100644 --- a/src/context/RequestFulfillmentFlowContext.tsx +++ b/src/context/RequestFulfillmentFlowContext.tsx @@ -16,12 +16,12 @@ export enum RequestFulfillmentBankFlowStep { interface RequestFulfillmentFlowContextType { resetFlow: () => void - showExternalWalletFulfilMethods: boolean - setShowExternalWalletFulfilMethods: (showExternalWalletFulfilMethods: boolean) => void + showExternalWalletFulfillMethods: boolean + setShowExternalWalletFulfillMethods: (showExternalWalletFulfillMethods: boolean) => void showRequestFulfilmentBankFlowManager: boolean setShowRequestFulfilmentBankFlowManager: (showRequestFulfilmentBankFlowManager: boolean) => void - externalWalletFulfilMethod: ExternalWalletFulfilMethod | null - setExternalWalletFulfilMethod: (externalWalletFulfilMethod: ExternalWalletFulfilMethod | null) => void + externalWalletFulfillMethod: ExternalWalletFulfilMethod | null + setExternalWalletFulfillMethod: (externalWalletFulfillMethod: ExternalWalletFulfilMethod | null) => void flowStep: RequestFulfillmentBankFlowStep | null setFlowStep: (step: RequestFulfillmentBankFlowStep | null) => void selectedCountry: CountryData | null @@ -41,8 +41,8 @@ interface RequestFulfillmentFlowContextType { const RequestFulfillmentFlowContext = createContext(undefined) export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNode }> = ({ children }) => { - const [showExternalWalletFulfilMethods, setShowExternalWalletFulfilMethods] = useState(false) - const [externalWalletFulfilMethod, setExternalWalletFulfilMethod] = useState( + const [showExternalWalletFulfillMethods, setShowExternalWalletFulfillMethods] = useState(false) + const [externalWalletFulfillMethod, setExternalWalletFulfillMethod] = useState( null ) const [showRequestFulfilmentBankFlowManager, setShowRequestFulfilmentBankFlowManager] = useState(false) @@ -55,8 +55,8 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod const [regionalMethodType, setRegionalMethodType] = useState<'mercadopago' | 'pix'>('mercadopago') const resetFlow = useCallback(() => { - setExternalWalletFulfilMethod(null) - setShowExternalWalletFulfilMethods(false) + setExternalWalletFulfillMethod(null) + setShowExternalWalletFulfillMethods(false) setFlowStep(null) setShowRequestFulfilmentBankFlowManager(false) setSelectedCountry(null) @@ -70,10 +70,10 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod const value = useMemo( () => ({ resetFlow, - externalWalletFulfilMethod, - setExternalWalletFulfilMethod, - showExternalWalletFulfilMethods, - setShowExternalWalletFulfilMethods, + externalWalletFulfillMethod, + setExternalWalletFulfillMethod, + showExternalWalletFulfillMethods, + setShowExternalWalletFulfillMethods, flowStep, setFlowStep, showRequestFulfilmentBankFlowManager, @@ -93,8 +93,8 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod }), [ resetFlow, - externalWalletFulfilMethod, - showExternalWalletFulfilMethods, + externalWalletFulfillMethod, + showExternalWalletFulfillMethods, flowStep, showRequestFulfilmentBankFlowManager, selectedCountry,