From 9d2b0a5d33f3b519052ca1ac6b2126e53eff484a Mon Sep 17 00:00:00 2001 From: Mariano Perdomo Date: Tue, 5 Mar 2024 17:47:43 -0300 Subject: [PATCH] chore(refactor): refactor checkout dot com handler --- .../SellOrderSummarySuccess.tsx | 39 ++--- .../ThreeDSHandlerCheckoutDotCom/index.tsx | 162 ++++++++---------- .../template.success.tsx | 37 ++-- .../src/modals/BuySell/index.tsx | 2 +- 4 files changed, 111 insertions(+), 129 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellOrderSummary/SellOrderSummarySuccess.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellOrderSummary/SellOrderSummarySuccess.tsx index 53f07c9300b..c9f872f32ed 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellOrderSummary/SellOrderSummarySuccess.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/SellOrderSummary/SellOrderSummarySuccess.tsx @@ -73,33 +73,28 @@ const Success: React.FC = ({ handleClose }) => { {format(new Date(sellOrder.createdAt), 'PPpp')} - <> - {sellOrder.state !== 'FAILED' && ( - - - <FormattedMessage - id='modals.simplebuy.summary.rate' - defaultMessage='Exchange Rate' - /> - - - {fiatToString({ - unit: sellCounterCurrency, - value: sellOrder.priceFunnel.price - })}{' '} - / 1 {sellBaseCurrency} - - - )} + {sellOrder.state !== 'FAILED' && ( - <FormattedMessage id='copy.amount' defaultMessage='Amount' /> + <FormattedMessage id='modals.simplebuy.summary.rate' defaultMessage='Exchange Rate' /> - - {sellBaseAmount} of {sellBaseCurrency} + + {fiatToString({ + unit: sellCounterCurrency, + value: sellOrder.priceFunnel.price + })}{' '} + / 1 {sellBaseCurrency} - + )} + + + <FormattedMessage id='copy.amount' defaultMessage='Amount' /> + + + {sellBaseAmount} of {sellBaseCurrency} + + {sellOrder.priceFunnel.outputMoney !== '0' && sellOrder.state !== 'FAILED' && ( diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx index ca769ac4f22..88410382501 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/index.tsx @@ -1,64 +1,87 @@ import React, { useCallback, useEffect, useState } from 'react' -import { connect, ConnectedProps, useDispatch } from 'react-redux' -import { bindActionCreators } from 'redux' +import { useDispatch, useSelector } from 'react-redux' import { clearSubmitErrors } from 'redux-form' -import { BSOrderType, ProviderDetailsType, WalletOptionsType } from '@core/types' import BaseError from 'components/BuySell/Error' import { GenericNabuErrorFlyout } from 'components/GenericNabuErrorFlyout' -import { actions, selectors } from 'data' +import { buySell } from 'data/components/actions' import { CARD_ERROR_CODE, FORM_BS_PREVIEW_SELL } from 'data/components/buySell/model' -import { RootState } from 'data/rootReducer' +import { + getBSCard, + getBSMobilePaymentMethod, + getBSOrder, + getBSProviderDetails +} from 'data/components/buySell/selectors' import { useRemote } from 'hooks' import { isNabuError } from 'services/errors' import Loading from './template.loading' import Success from './template.success' -const ThreeDSHandlerCheckoutDotCom = (props: Props) => { - const [isPolling, setPolling] = useState(false) - const order = useRemote(() => props.orderR) - const card = useRemote(() => props.cardR) - const providerDetails = useRemote(() => props.providerDetailsR) +const ThreeDSHandlerCheckoutDotCom = () => { + const [polling, setPolling] = useState(false) + + const mobilePaymentMethod = useSelector(getBSMobilePaymentMethod) + + const { + data: orderData, + error: orderError, + hasData: orderHasData, + isLoading: orderLoading, + isNotAsked: orderNotAsked + } = useRemote(getBSOrder) + + const { + data: cardData, + error: cardError, + hasData: cardHasData, + isLoading: cardLoading, + isNotAsked: cardNotAsked + } = useRemote(getBSCard) + + const { + data: providerData, + error: providerError, + isLoading: providerLoading + } = useRemote(getBSProviderDetails) + const dispatch = useDispatch() - const handlePostMessage = async ({ data }: { data: { payment: 'SUCCESS' } }) => { + const handlePostMessage = ({ data }: { data: { payment: 'SUCCESS' } }) => { if (data.payment !== 'SUCCESS') return setPolling(true) - if (order.hasData && order.data) { - props.buySellActions.pollOrder({ orderId: order.data.id, waitUntilSettled: true }) - } else if (card.hasData && card.data) { - props.buySellActions.pollCard(card.data.id) + if (orderHasData && orderData) { + dispatch(buySell.pollOrder({ orderId: orderData.id, waitUntilSettled: true })) + } else if (cardHasData && cardData) { + dispatch(buySell.pollCard(cardData.id)) } } const handleBack = useCallback(() => { - if (order.data) { - return props.buySellActions.proceedToBuyConfirmation({ - mobilePaymentMethod: props.mobilePaymentMethod, - paymentMethodId: order.data.paymentMethodId, - paymentType: order.data.paymentType - }) + if (orderData) { + dispatch( + buySell.proceedToBuyConfirmation({ + mobilePaymentMethod, + paymentMethodId: orderData.paymentMethodId, + paymentType: orderData.paymentType + }) + ) + } else { + dispatch(buySell.setStep({ step: 'DETERMINE_CARD_PROVIDER' })) } - - props.buySellActions.setStep({ - step: 'DETERMINE_CARD_PROVIDER' - }) - }, [order.data, props.buySellActions, props.mobilePaymentMethod]) + }, [orderData?.id, mobilePaymentMethod]) const handleReset = useCallback(() => { - props.buySellActions.destroyCheckout() + dispatch(buySell.destroyCheckout()) dispatch(clearSubmitErrors(FORM_BS_PREVIEW_SELL)) - }, [props.buySellActions, dispatch]) + }, [dispatch]) const handleRetry = useCallback(() => { - props.buySellActions.setStep({ - step: 'DETERMINE_CARD_PROVIDER' - }) - }, [props.buySellActions]) + dispatch(buySell.setStep({ step: 'DETERMINE_CARD_PROVIDER' })) + }, []) useEffect(() => { window.addEventListener('message', handlePostMessage, false) @@ -84,39 +107,39 @@ const ThreeDSHandlerCheckoutDotCom = (props: Props) => { [handleReset, handleBack, handleRetry] ) - if (order.hasError && order.error) { - return renderError(order.error) + if (orderError) { + return renderError(orderError) } - if (card.hasError && card.error) { - return renderError(card.error) + if (cardError) { + return renderError(cardError) } - if (providerDetails.hasError && providerDetails.error) { - return renderError(providerDetails.error) + if (providerError) { + return renderError(providerError) } - if (order.isLoading || card.isLoading) { + if (orderLoading || cardLoading) { return <Loading /> } - if (order.isNotAsked && card.isNotAsked) { + if (orderNotAsked && cardNotAsked) { return <Loading /> } - if (isPolling) { - return <Loading polling order={order.hasData} /> + if (polling) { + return <Loading polling order={orderHasData} /> } let paymentLink = '' - if (order.data?.attributes?.cardProvider?.cardAcquirerName === 'CHECKOUTDOTCOM') { - paymentLink = encodeURIComponent(order.data?.attributes?.cardProvider.paymentLink) - } else if (order.data?.attributes?.cardCassy?.cardAcquirerName === 'CHECKOUTDOTCOM') { - paymentLink = encodeURIComponent(order.data?.attributes?.cardCassy.paymentLink) - } else if (providerDetails.data) { - paymentLink = encodeURIComponent(providerDetails.data.cardProvider.paymentLink) - } else if (!providerDetails.isLoading && !order.isLoading) { + if (orderData?.attributes?.cardProvider?.cardAcquirerName === 'CHECKOUTDOTCOM') { + paymentLink = encodeURIComponent(orderData?.attributes?.cardProvider.paymentLink) + } else if (orderData?.attributes?.cardCassy?.cardAcquirerName === 'CHECKOUTDOTCOM') { + paymentLink = encodeURIComponent(orderData?.attributes?.cardCassy.paymentLink) + } else if (providerData) { + paymentLink = encodeURIComponent(providerData.cardProvider.paymentLink) + } else if (!providerLoading && !orderLoading) { return ( <BaseError code={CARD_ERROR_CODE.CREATE_FAILED} @@ -131,44 +154,7 @@ const ThreeDSHandlerCheckoutDotCom = (props: Props) => { return <Loading /> } - return ( - <Success - handleBack={handleBack} - order={order?.data} - paymentLink={paymentLink} - domains={props.domains} - /> - ) + return <Success handleBack={handleBack} paymentLink={paymentLink} /> } -const mapStateToProps = (state: RootState) => ({ - cardR: selectors.components.buySell.getBSCard(state), - checkoutDotComApiKey: selectors.components.buySell.getCheckoutApiKey(state), - domains: selectors.core.walletOptions.getDomains(state).getOrElse({ - walletHelper: 'https://wallet-helper.blockchain.com' - } as WalletOptionsType['domains']), - mobilePaymentMethod: selectors.components.buySell.getBSMobilePaymentMethod(state), - orderR: selectors.components.buySell.getBSOrder(state), - origin: selectors.components.buySell.getOrigin(state), - providerDetailsR: selectors.components.buySell.getBSProviderDetails(state) -}) - -const mapDispatchToProps = (dispatch) => ({ - buySellActions: bindActionCreators(actions.components.buySell, dispatch) -}) - -const connector = connect(mapStateToProps, mapDispatchToProps) - -type OwnProps = { - handleClose: () => void -} - -export type SuccessStateType = { - domains: WalletOptionsType['domains'] - order?: BSOrderType - providerDetails?: ProviderDetailsType -} - -export type Props = OwnProps & ConnectedProps<typeof connector> - -export default connector(ThreeDSHandlerCheckoutDotCom) +export default ThreeDSHandlerCheckoutDotCom diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/template.success.tsx index 467b2f3bebd..7086fc2efe0 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/ThreeDSHandlerCheckoutDotCom/template.success.tsx @@ -1,11 +1,11 @@ import React from 'react' +import { useSelector } from 'react-redux' import styled from 'styled-components' +import { getDomains } from '@core/redux/walletOptions/selectors' import { Icon } from 'blockchain-info-components' import { FlyoutWrapper } from 'components/Flyout' -import { SuccessStateType } from '.' - const CustomFlyoutWrapper = styled(FlyoutWrapper)` height: 100%; ` @@ -16,27 +16,28 @@ const Iframe = styled.iframe` margin-top: 16px; ` -const Success = (props: Props) => { +const Success = ({ handleBack, paymentLink }: Props) => { + const domains = useSelector(getDomains).getOrElse({ + walletHelper: 'https://wallet-helper.blockchain.com' + }) return ( <CustomFlyoutWrapper> - <> - <Icon - cursor - name='arrow-left' - size='20px' - color='grey600' - role='button' - onClick={props.handleBack} - /> - <Iframe - sandbox='allow-forms allow-scripts allow-same-origin' - src={`${props.domains.walletHelper}/wallet-helper/checkoutdotcom/#/paymentLink/${props.paymentLink}`} - /> - </> + <Icon + cursor + name='arrow-left' + size='20px' + color='grey600' + role='button' + onClick={handleBack} + /> + <Iframe + sandbox='allow-forms allow-scripts allow-same-origin' + src={`${domains.walletHelper}/wallet-helper/checkoutdotcom/#/paymentLink/${paymentLink}`} + /> </CustomFlyoutWrapper> ) } -type Props = SuccessStateType & { handleBack: () => void; paymentLink: string } +type Props = { handleBack: () => void; paymentLink: string } export default Success diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/index.tsx index 6a71bdc81e4..06179dee8bd 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/BuySell/index.tsx @@ -219,7 +219,7 @@ class BuySell extends PureComponent<Props, State> { )} {this.props.step === '3DS_HANDLER_CHECKOUTDOTCOM' && ( <FlyoutChild> - <ThreeDSHandlerCheckoutDotCom {...this.props} handleClose={this.handleClose} /> + <ThreeDSHandlerCheckoutDotCom /> </FlyoutChild> )} {this.props.step === '3DS_HANDLER_STRIPE' && (