From 7a350fab301e841d9a7c126033e6045247fbec52 Mon Sep 17 00:00:00 2001 From: Filip Naumovski Date: Tue, 18 Jul 2023 12:40:42 +0200 Subject: [PATCH] fix: move additional logic to container --- src/components/Payment/Payment.test.tsx | 13 +++++ src/components/Payment/Payment.tsx | 51 ++++++++++--------- .../PaymentContainer/PaymentContainer.tsx | 26 +++++++++- src/hooks/useSubscriptionChange.ts | 6 +-- 4 files changed, 67 insertions(+), 29 deletions(-) diff --git a/src/components/Payment/Payment.test.tsx b/src/components/Payment/Payment.test.tsx index eeae8a57c..511a85c7f 100644 --- a/src/components/Payment/Payment.test.tsx +++ b/src/components/Payment/Payment.test.tsx @@ -25,6 +25,19 @@ describe('', () => { isLoading={false} offerSwitchesAvailable={false} onShowReceiptClick={vi.fn()} + onUpgradeSubscriptionClick={vi.fn()} + onShowAllTransactionsClick={vi.fn()} + changeSubscriptionPlan={{ + isLoading: false, + isSuccess: false, + isError: false, + reset: vi.fn(), + }} + onChangePlanClick={vi.fn()} + selectedOfferId={null} + setSelectedOfferId={vi.fn()} + isUpgradeOffer={undefined} + setIsUpgradeOffer={vi.fn()} />, ); diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx index 05e455e40..73913bad8 100644 --- a/src/components/Payment/Payment.tsx +++ b/src/components/Payment/Payment.tsx @@ -3,24 +3,23 @@ import { useTranslation } from 'react-i18next'; import { useLocation, useNavigate } from 'react-router-dom'; import useBreakpoint, { Breakpoint } from '../../hooks/useBreakpoint'; -import IconButton from '../IconButton/IconButton'; import ExternalLink from '../../icons/ExternalLink'; +import IconButton from '../IconButton/IconButton'; import styles from './Payment.module.scss'; -import TextField from '#components/TextField/TextField'; -import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay'; +import Alert from '#components/Alert/Alert'; import Button from '#components/Button/Button'; -import type { Customer } from '#types/account'; +import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay'; +import OfferSwitch from '#components/OfferSwitch/OfferSwitch'; +import TextField from '#components/TextField/TextField'; +import PayPal from '#src/icons/PayPal'; import { formatLocalizedDate, formatPrice } from '#src/utils/formatting'; import { addQueryParam } from '#src/utils/location'; -import type { PaymentDetail, Subscription, Transaction } from '#types/subscription'; import type { AccessModel } from '#types/Config'; -import PayPal from '#src/icons/PayPal'; +import type { Customer } from '#types/account'; import type { Offer } from '#types/checkout'; -import OfferSwitch from '#components/OfferSwitch/OfferSwitch'; -import Alert from '#components/Alert/Alert'; -import { useSubscriptionChange } from '#src/hooks/useSubscriptionChange'; +import type { PaymentDetail, Subscription, Transaction } from '#types/subscription'; const VISIBLE_TRANSACTIONS = 4; @@ -44,6 +43,17 @@ type Props = { canShowReceipts?: boolean; offers?: Offer[]; pendingDowngradeOfferId?: string; + changeSubscriptionPlan: { + isLoading: boolean; + isError: boolean; + isSuccess: boolean; + reset: () => void; + }; + onChangePlanClick: () => void; + selectedOfferId: string | null; + setSelectedOfferId: (offerId: string | null) => void; + isUpgradeOffer: boolean | undefined; + setIsUpgradeOffer: (isUpgradeOffer: boolean | undefined) => void; }; const Payment = ({ @@ -66,6 +76,12 @@ const Payment = ({ offerSwitchesAvailable, offers = [], pendingDowngradeOfferId = '', + changeSubscriptionPlan, + onChangePlanClick, + selectedOfferId, + setSelectedOfferId, + isUpgradeOffer, + setIsUpgradeOffer, }: Props): JSX.Element => { const { t, i18n } = useTranslation(['user', 'account']); const hiddenTransactionsCount = transactions ? transactions?.length - VISIBLE_TRANSACTIONS : 0; @@ -77,14 +93,12 @@ const Payment = ({ const isMobile = breakpoint === Breakpoint.xs; const [isChangingOffer, setIsChangingOffer] = useState(false); - const [selectedOfferId, setSelectedOfferId] = useState(activeSubscription?.accessFeeId ?? null); - const [isUpgradeOffer, setIsUpgradeOffer] = useState(undefined); useEffect(() => { if (!isChangingOffer) { setSelectedOfferId(activeSubscription?.accessFeeId ?? null); } - }, [activeSubscription, isChangingOffer]); + }, [activeSubscription, isChangingOffer, setSelectedOfferId]); useEffect(() => { setIsChangingOffer(false); @@ -97,18 +111,7 @@ const Payment = ({ (offers.find((offer) => offer.offerId === activeSubscription?.accessFeeId)?.customerPriceInclTax ?? 0), ); } - }, [selectedOfferId, offers, activeSubscription]); - - const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId); - - const onChangePlanClick = async () => { - if (selectedOfferId && activeSubscription?.subscriptionId) { - changeSubscriptionPlan.mutate({ - accessFeeId: selectedOfferId.slice(1), - subscriptionId: `${activeSubscription.subscriptionId}`, - }); - } - }; + }, [selectedOfferId, offers, activeSubscription, setIsUpgradeOffer]); function onCompleteSubscriptionClick() { navigate(addQueryParam(location, 'u', 'choose-offer')); diff --git a/src/containers/PaymentContainer/PaymentContainer.tsx b/src/containers/PaymentContainer/PaymentContainer.tsx index cc2c7673c..e3dc0f49d 100644 --- a/src/containers/PaymentContainer/PaymentContainer.tsx +++ b/src/containers/PaymentContainer/PaymentContainer.tsx @@ -12,6 +12,7 @@ import { useCheckoutStore } from '#src/stores/CheckoutStore'; import { useConfigStore } from '#src/stores/ConfigStore'; import { addQueryParam } from '#src/utils/location'; import useOffers from '#src/hooks/useOffers'; +import { useSubscriptionChange } from '#src/hooks/useSubscriptionChange'; const PaymentContainer = () => { const { accessModel } = useConfigStore( @@ -22,8 +23,6 @@ const PaymentContainer = () => { shallow, ); const navigate = useNavigate(); - const [showAllTransactions, setShowAllTransactions] = useState(false); - const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const { user: customer, @@ -36,6 +35,12 @@ const PaymentContainer = () => { canUpdatePaymentMethod, canShowReceipts, } = useAccountStore(); + + const [showAllTransactions, setShowAllTransactions] = useState(false); + const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); + const [selectedOfferId, setSelectedOfferId] = useState(activeSubscription?.accessFeeId ?? null); + const [isUpgradeOffer, setIsUpgradeOffer] = useState(undefined); + const { offerSwitches } = useCheckoutStore(); const location = useLocation(); @@ -80,6 +85,17 @@ const PaymentContainer = () => { const { offers } = useOffers(); + const changeSubscriptionPlan = useSubscriptionChange(isUpgradeOffer ?? false, selectedOfferId, customer, activeSubscription?.subscriptionId); + + const onChangePlanClick = async () => { + if (selectedOfferId && activeSubscription?.subscriptionId) { + changeSubscriptionPlan.mutate({ + accessFeeId: selectedOfferId.slice(1), + subscriptionId: `${activeSubscription.subscriptionId}`, + }); + } + }; + if (!customer) { return ; } @@ -107,6 +123,12 @@ const PaymentContainer = () => { onShowReceiptClick={handleShowReceiptClick} offers={offers} pendingDowngradeOfferId={pendingDowngradeOfferId} + changeSubscriptionPlan={changeSubscriptionPlan} + onChangePlanClick={onChangePlanClick} + selectedOfferId={selectedOfferId} + setSelectedOfferId={(offerId: string | null) => setSelectedOfferId(offerId)} + isUpgradeOffer={isUpgradeOffer} + setIsUpgradeOffer={(isUpgradeOffer: boolean | undefined) => setIsUpgradeOffer(isUpgradeOffer)} /> ); }; diff --git a/src/hooks/useSubscriptionChange.ts b/src/hooks/useSubscriptionChange.ts index 72d5a976b..fa1bf6209 100644 --- a/src/hooks/useSubscriptionChange.ts +++ b/src/hooks/useSubscriptionChange.ts @@ -8,7 +8,7 @@ import type { Customer } from '#types/account'; export const useSubscriptionChange = ( isUpgradeOffer: boolean, selectedOfferId: string | null, - customer: Customer, + customer: Customer | null, activeSubscriptionId: string | number | undefined, ) => { const updateSubscriptionMetadata = useMutation(updateUser, { @@ -23,8 +23,8 @@ export const useSubscriptionChange = ( onSuccess: () => { if (!isUpgradeOffer && selectedOfferId) { updateSubscriptionMetadata.mutate({ - firstName: customer.firstName || '', - lastName: customer.lastName || '', + firstName: customer?.firstName || '', + lastName: customer?.lastName || '', metadata: { [`${activeSubscriptionId}_pending_downgrade`]: selectedOfferId, },