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/app/[...recipient]/client.tsx b/src/app/[...recipient]/client.tsx index aef205f4e..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, @@ -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(() => { @@ -433,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/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/Link/MantecaFlowManager.tsx b/src/components/Claim/Link/MantecaFlowManager.tsx index ead46215f..e412ab5a7 100644 --- a/src/components/Claim/Link/MantecaFlowManager.tsx +++ b/src/components/Claim/Link/MantecaFlowManager.tsx @@ -1,16 +1,20 @@ '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' 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 @@ -19,12 +23,39 @@ interface MantecaFlowManagerProps { } const MantecaFlowManager: FC = ({ claimLinkData, amount, attachment }) => { - const { setClaimToMercadoPago } = useClaimBankFlow() + const { setClaimToMercadoPago, selectedCountry, regionalMethodType } = useClaimBankFlow() 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 regionalMethodLogo = regionalMethodType === 'mercadopago' ? MERCADO_PAGO : PIX + const logo = selectedCountry?.id ? undefined : regionalMethodLogo + + const handleKycCancel = () => { + setIsKYCModalOpen(false) + onPrev() + } + + useEffect(() => { + if (!isUserMantecaKycApproved) { + setIsKYCModalOpen(true) + } + }, [isUserMantecaKycApproved]) const renderStepDetails = () => { if (currentStep === MercadoPagoStep.DETAILS) { @@ -43,6 +74,7 @@ const MantecaFlowManager: FC = ({ claimLinkData, amount claimLink={claimLinkData.link} destinationAddress={destinationAddress} amount={amount} + currency={selectedCurrency} /> ) } @@ -83,15 +115,30 @@ 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} fileUrl={attachment.attachmentUrl} - logo={isSuccess ? undefined : MERCADO_PAGO} + logo={isSuccess ? undefined : logo} + countryCodeForFlag={selectedCountry?.id?.toLowerCase()} /> {renderStepDetails()} + + {isKYCModalOpen && ( + { + // close the modal and let the user continue with amount input + setIsKYCModalOpen(false) + fetchUser() + }} + country={selectedCountry || argentinaCountryData} + /> + )} ) 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

= ({ 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/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..41042a28a 100644 --- a/src/components/Common/ActionList.tsx +++ b/src/components/Common/ActionList.tsx @@ -24,6 +24,9 @@ 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' +import { useGeoLocaion } from '@/hooks/useGeoLocaion' +import Loading from '../Global/Loading' interface IActionListProps { flow: 'claim' | 'request' @@ -47,6 +50,7 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin setFlowStep: setClaimBankFlowStep, setShowVerificationModal, setClaimToMercadoPago, + setRegionalMethodType, } = useClaimBankFlow() const [showMinAmountError, setShowMinAmountError] = useState(false) const { claimType } = useDetermineBankClaimType(claimLinkData?.sender?.userId ?? '') @@ -58,11 +62,15 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin const { addParamStep } = useClaimLink() const { setShowRequestFulfilmentBankFlowManager, - setShowExternalWalletFulfilMethods, + setShowExternalWalletFulfillMethods, setFlowStep: setRequestFulfilmentBankFlowStep, setFulfillUsingManteca, + setRegionalMethodType: setRequestFulfillmentRegionalMethodType, } = useRequestFulfillmentFlow() const [isGuestVerificationModalOpen, setIsGuestVerificationModalOpen] = useState(false) + const { user } = useAuth() + + const { countryCode: userGeoLocationCountryCode, isLoading: isGeoLoading } = useGeoLocaion() const handleMethodClick = async (method: PaymentMethod) => { if (flow === 'claim' && claimLinkData) { @@ -87,6 +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': @@ -110,15 +125,35 @@ 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': - setShowExternalWalletFulfilMethods(true) + setShowExternalWalletFulfillMethods(true) break } } } + 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 @@ -130,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) @@ -141,6 +176,14 @@ export default function ActionList({ claimLinkData, isLoggedIn, flow, requestLin }) }, [requiresVerification]) + if (isGeoLoading) { + return ( +
+ +
+ ) + } + return (
{!isLoggedIn && ( 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..70fe8903b 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,12 +41,18 @@ export const CountryListRouter = ({ requestLinkData, inputTitle, }: ICountryListRouterViewProps) => { - const { setFlowStep: setClaimBankFlowStep, setSelectedCountry } = useClaimBankFlow() + const { + setFlowStep: setClaimBankFlowStep, + setSelectedCountry, + setClaimToMercadoPago, + setFlowStep, + } = useClaimBankFlow() const { setFlowStep: setRequestFulfilmentBankFlowStep, setShowRequestFulfilmentBankFlowManager, setSelectedCountry: setSelectedCountryForRequest, setShowVerificationModal, + setFulfillUsingManteca, } = useRequestFulfillmentFlow() const savedAccounts = useSavedAccounts() const { chargeDetails } = usePaymentStore() @@ -54,12 +60,21 @@ export const CountryListRouter = ({ const { user } = useAuth() const handleCountryClick = (country: CountryData) => { + const isMantecaSupportedCountry = Object.keys(MantecaSupportedExchanges).includes(country.id) if (flow === 'claim') { setSelectedCountry(country) - setClaimBankFlowStep(ClaimBankFlowStep.BankDetailsForm) + if (isMantecaSupportedCountry) { + setFlowStep(null) // reset the flow step to initial view first + setClaimToMercadoPago(true) + } else { + 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/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() ) : ( { + const stepFromURL = searchParams.get('step') + if (user && stepFromURL === 'regional-req-fulfill') { + setFulfillUsingManteca(true) + } else { + setFulfillUsingManteca(false) + } + }, [user, searchParams]) + const isInsufficientBalanceError = useMemo(() => { return error?.includes("You don't have enough balance.") }, [error]) @@ -631,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/Payment/Views/MantecaFulfillment.view.tsx b/src/components/Payment/Views/MantecaFulfillment.view.tsx index 7f5618669..902db6623 100644 --- a/src/components/Payment/Views/MantecaFulfillment.view.tsx +++ b/src/components/Payment/Views/MantecaFulfillment.view.tsx @@ -1,32 +1,70 @@ -import { MERCADO_PAGO } from '@/assets' +import React, { useEffect, useState } from 'react' +import { MERCADO_PAGO, PIX } 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 } = useRequestFulfillmentFlow() + const { setFulfillUsingManteca, selectedCountry, setSelectedCountry, regionalMethodType } = + 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: '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` + : regionalMethodType === 'mercadopago' + ? MERCADO_PAGO + : PIX + + const handleKycCancel = () => { + setIsKYCModalOpen(false) + setSelectedCountry(null) + setFulfillUsingManteca(false) + } + + useEffect(() => { + if (!isUserMantecaKycApproved) { + setIsKYCModalOpen(true) + } + }, [isUserMantecaKycApproved]) + const generateShareText = () => { const textParts = [] textParts.push(`CBU: ${depositData?.data?.depositAddress}`) @@ -44,6 +82,7 @@ const MantecaFulfillment = () => { { + setSelectedCountry(null) setFulfillUsingManteca(false) }} /> @@ -58,7 +97,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 && } @@ -103,6 +143,19 @@ const MantecaFulfillment = () => { )}
+ {isKYCModalOpen && ( + { + // close the modal and let the user continue with amount input + setIsKYCModalOpen(false) + fetchUser() + }} + country={selectedCountry || argentinaCountryData} + /> + )}
) } 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/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..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 @@ -34,13 +34,15 @@ 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) 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) @@ -50,10 +52,11 @@ 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) - setShowExternalWalletFulfilMethods(false) + setExternalWalletFulfillMethod(null) + setShowExternalWalletFulfillMethods(false) setFlowStep(null) setShowRequestFulfilmentBankFlowManager(false) setSelectedCountry(null) @@ -61,15 +64,16 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod setShowVerificationModal(false) setRequesterDetails(null) setFulfillUsingManteca(false) + setRegionalMethodType('mercadopago') }, []) const value = useMemo( () => ({ resetFlow, - externalWalletFulfilMethod, - setExternalWalletFulfilMethod, - showExternalWalletFulfilMethods, - setShowExternalWalletFulfilMethods, + externalWalletFulfillMethod, + setExternalWalletFulfillMethod, + showExternalWalletFulfillMethods, + setShowExternalWalletFulfillMethods, flowStep, setFlowStep, showRequestFulfilmentBankFlowManager, @@ -84,11 +88,13 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod setRequesterDetails, fulfillUsingManteca, setFulfillUsingManteca, + regionalMethodType, + setRegionalMethodType, }), [ resetFlow, - externalWalletFulfilMethod, - showExternalWalletFulfilMethods, + externalWalletFulfillMethod, + showExternalWalletFulfillMethods, flowStep, showRequestFulfilmentBankFlowManager, selectedCountry, @@ -96,6 +102,7 @@ export const RequestFulfilmentFlowContextProvider: React.FC<{ children: ReactNod showVerificationModal, requesterDetails, fulfillUsingManteca, + regionalMethodType, ] ) 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) {