From e1e47cfd00c6e8806c0b1dd9dd61133a4062b58c Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Tue, 8 Dec 2020 16:09:33 -0500 Subject: [PATCH 01/24] Fill in missing PropTypes for UpsellNudge --- .../my-sites/checkout/upsell-nudge/index.jsx | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 7c3588c7b6915..bf81ba89ca418 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -60,6 +60,29 @@ export const BUSINESS_PLAN_UPGRADE_UPSELL = 'business-plan-upgrade-upsell'; export class UpsellNudge extends React.Component { static propTypes = { receiptId: PropTypes.number, + upsellType: PropTypes.string, + upgradeItem: PropTypes.string, + siteSlugParam: PropTypes.string, + + // Below are provided by HOCs + currencyCode: PropTypes.string, + isLoading: PropTypes.bool, + hasProductsList: PropTypes.bool, + hasSitePlans: PropTypes.bool, + product: PropTypes.object, + productCost: PropTypes.number, + productDisplayCost: PropTypes.string, + planRawPrice: PropTypes.string, + planDiscountedRawPrice: PropTypes.string, + isLoggedIn: PropTypes.bool, + siteSlug: PropTypes.string, + selectedSiteId: PropTypes.oneOfType( [ PropTypes.string, PropTypes.number ] ).isRequired, + hasSevenDayRefundPeriod: PropTypes.bool, + trackUpsellButtonClick: PropTypes.func.isRequired, + translate: PropTypes.func.isRequired, + cards: PropTypes.arrayOf( PropTypes.object ), + cart: PropTypes.object, + isFetchingStoredCards: PropTypes.bool, handleCheckoutCompleteRedirect: PropTypes.func.isRequired, }; From b9754c07f4c1d724ff3e9201ca67570689bff3fa Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Tue, 8 Dec 2020 16:12:01 -0500 Subject: [PATCH 02/24] Replace CheckoutContainer with ShoppingCartProvider around UpsellNudge --- client/my-sites/checkout/controller.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/client/my-sites/checkout/controller.jsx b/client/my-sites/checkout/controller.jsx index fd344670759aa..999d866461e1f 100644 --- a/client/my-sites/checkout/controller.jsx +++ b/client/my-sites/checkout/controller.jsx @@ -14,6 +14,7 @@ import { getSiteBySlug } from 'calypso/state/sites/selectors'; import { getSelectedSite } from 'calypso/state/ui/selectors'; import GSuiteNudge from './gsuite-nudge'; import CheckoutContainer from './checkout/checkout-container'; +import CalypsoShoppingCartProvider from './calypso-shopping-cart-provider'; import CheckoutSystemDecider from './checkout-system-decider'; import CheckoutPendingComponent from './checkout-thank-you/pending'; import CheckoutThankYouComponent from './checkout-thank-you'; @@ -219,14 +220,14 @@ export function upsellNudge( context, next ) { setSectionMiddleware( { name: upsellType } )( context ); context.primary = ( - + - + ); next(); From bdf098d57380f8aa6c282406c7daf754a86e1170 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Tue, 8 Dec 2020 16:12:34 -0500 Subject: [PATCH 03/24] Wrap UpsellNudge with withShoppingCart --- client/my-sites/checkout/upsell-nudge/index.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index bf81ba89ca418..18a0942216318 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -6,6 +6,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import page from 'page'; import { omit } from 'lodash'; +import { withShoppingCart } from '@automattic/shopping-cart'; /** * Internal dependencies @@ -366,4 +367,4 @@ export default connect( { trackUpsellButtonClick, } -)( localize( UpsellNudge ) ); +)( withShoppingCart( localize( UpsellNudge ) ) ); From dcdc4eede0e3da37d826c0beccf0322017691e99 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Tue, 8 Dec 2020 16:16:24 -0500 Subject: [PATCH 04/24] Explicitly add isFetchingStoredCards, cards to UpsellNudge selectors --- client/my-sites/checkout/upsell-nudge/index.jsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 18a0942216318..a512c12b21ba7 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -44,6 +44,7 @@ import { replaceCartWithItems } from 'calypso/lib/cart/actions'; import Gridicon from 'calypso/components/gridicon'; import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; +import { isFetchingStoredCards, getStoredCards } from 'calypso/state/stored-cards/selectors'; /** * Style dependencies @@ -342,13 +343,16 @@ export default connect( const annualPrice = getSitePlanRawPrice( state, selectedSiteId, planSlug, { isMonthly: false, } ); + const isFetchingCards = isFetchingStoredCards( state ); const productSlug = resolveProductSlug( upsellType, upgradeItem ); return { + isFetchingStoredCards: isFetchingCards, + cards: getStoredCards( state ), currencyCode: getCurrentUserCurrencyCode( state ), isLoading: - props.isFetchingStoredCards || + isFetchingCards || isProductsListFetching( state ) || isRequestingSitePlans( state, selectedSiteId ), hasProductsList: Object.keys( productsList ).length > 0, From 7d04f4aaf57b4ae5a6c6e912c9e3e137a6c6ec17 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 18:36:12 -0500 Subject: [PATCH 05/24] Refactor CheckoutProvider to be a named function --- .../composite-checkout/src/components/checkout-provider.tsx | 6 +++--- packages/composite-checkout/src/types.ts | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/composite-checkout/src/components/checkout-provider.tsx b/packages/composite-checkout/src/components/checkout-provider.tsx index 5a4a08830ea2b..57c391414c7c9 100644 --- a/packages/composite-checkout/src/components/checkout-provider.tsx +++ b/packages/composite-checkout/src/components/checkout-provider.tsx @@ -1,7 +1,7 @@ /** * External dependencies */ -import React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { ThemeProvider } from 'emotion-theming'; import debugFactory from 'debug'; import { useI18n } from '@automattic/react-i18n'; @@ -28,7 +28,7 @@ import { CheckoutProviderProps, FormStatus, PaymentMethod } from '../types'; const debug = debugFactory( 'composite-checkout:checkout-provider' ); -export const CheckoutProvider: FunctionComponent< CheckoutProviderProps > = ( props ) => { +export function CheckoutProvider( props: CheckoutProviderProps ): JSX.Element { const { total, items, @@ -137,7 +137,7 @@ export const CheckoutProvider: FunctionComponent< CheckoutProviderProps > = ( pr ); -}; +} // eslint-disable-next-line @typescript-eslint/no-empty-function function noop(): void {} diff --git a/packages/composite-checkout/src/types.ts b/packages/composite-checkout/src/types.ts index dc58b86b3f1ed..fe805eaaddafd 100644 --- a/packages/composite-checkout/src/types.ts +++ b/packages/composite-checkout/src/types.ts @@ -95,6 +95,7 @@ export interface CheckoutProviderProps { paymentProcessors: PaymentProcessorProp; isValidating?: boolean; initiallySelectedPaymentMethodId?: string | null; + children: React.ReactNode; } export interface PaymentProcessorProp { From 8ee0eaeee4fbcdc49272c0281bf14a3d40ed6e44 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 18:45:12 -0500 Subject: [PATCH 06/24] Make total and items optional props to CheckoutProvider --- .../src/components/checkout-provider.tsx | 36 +++++++++++++++---- packages/composite-checkout/src/types.ts | 12 ++++--- 2 files changed, 37 insertions(+), 11 deletions(-) diff --git a/packages/composite-checkout/src/components/checkout-provider.tsx b/packages/composite-checkout/src/components/checkout-provider.tsx index 57c391414c7c9..acdac750877e1 100644 --- a/packages/composite-checkout/src/components/checkout-provider.tsx +++ b/packages/composite-checkout/src/components/checkout-provider.tsx @@ -24,12 +24,36 @@ import { validateTotal, } from '../lib/validation'; import TransactionStatusHandler from './transaction-status-handler'; -import { CheckoutProviderProps, FormStatus, PaymentMethod } from '../types'; +import { LineItem, CheckoutProviderProps, FormStatus, PaymentMethod } from '../types'; const debug = debugFactory( 'composite-checkout:checkout-provider' ); -export function CheckoutProvider( props: CheckoutProviderProps ): JSX.Element { - const { +const emptyTotal: LineItem = { + id: 'total', + type: 'total', + amount: { value: 0, displayValue: '0', currency: 'USD' }, + label: 'Total', +}; + +export function CheckoutProvider( { + total = emptyTotal, + items = [], + onPaymentComplete, + showErrorMessage, + showInfoMessage, + showSuccessMessage, + redirectToUrl, + theme, + paymentMethods, + paymentProcessors, + registry, + onEvent, + isLoading, + isValidating, + initiallySelectedPaymentMethodId = null, + children, +}: CheckoutProviderProps ): JSX.Element { + const propsToValidate = { total, items, onPaymentComplete, @@ -45,8 +69,8 @@ export function CheckoutProvider( props: CheckoutProviderProps ): JSX.Element { isLoading, isValidating, children, - initiallySelectedPaymentMethodId = null, - } = props; + initiallySelectedPaymentMethodId, + }; const [ paymentMethodId, setPaymentMethodId ] = useState< string | null >( initiallySelectedPaymentMethodId ); @@ -124,7 +148,7 @@ export function CheckoutProvider( props: CheckoutProviderProps ): JSX.Element { ); return ( - + diff --git a/packages/composite-checkout/src/types.ts b/packages/composite-checkout/src/types.ts index fe805eaaddafd..af504c5bd237a 100644 --- a/packages/composite-checkout/src/types.ts +++ b/packages/composite-checkout/src/types.ts @@ -82,13 +82,13 @@ export type ReactStandardAction< T = string, P = unknown > = P extends void export interface CheckoutProviderProps { theme?: Theme; registry?: DataRegistry; - total: LineItem; - items: LineItem[]; + total?: LineItem; + items?: LineItem[]; paymentMethods: PaymentMethod[]; onPaymentComplete: PaymentCompleteCallback; - showErrorMessage: ( message: string ) => void; - showInfoMessage: ( message: string ) => void; - showSuccessMessage: ( message: string ) => void; + showErrorMessage: ShowNoticeFunction; + showInfoMessage: ShowNoticeFunction; + showSuccessMessage: ShowNoticeFunction; onEvent?: ( event: ReactStandardAction ) => void; isLoading?: boolean; redirectToUrl?: ( url: string ) => void; @@ -98,6 +98,8 @@ export interface CheckoutProviderProps { children: React.ReactNode; } +export type ShowNoticeFunction = ( message: string ) => void; + export interface PaymentProcessorProp { [ key: string ]: PaymentProcessorFunction; } From 236339f41edb0502cb892a8bb349bd10da8eaa24 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 21:23:56 -0500 Subject: [PATCH 07/24] Convert useSubmitTransaction to use useProcessPayment --- .../upsell-nudge/purchase-modal/util.js | 71 ++++++------------- 1 file changed, 23 insertions(+), 48 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js index 7b757c64f32e1..cffdc15903ff9 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js @@ -2,43 +2,14 @@ * External dependencies */ import { useCallback } from 'react'; -import { find, pick } from 'lodash'; +import { useProcessPayment } from '@automattic/composite-checkout'; /** * Internal dependencies */ -import { RECEIVED_WPCOM_RESPONSE } from 'calypso/lib/store-transactions/step-types'; -import { preprocessCartForServer } from 'calypso/lib/cart-values'; -import { submit } from 'calypso/lib/store-transactions'; import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import notices from 'calypso/notices'; - -function extractStoredCardMetaValue( card, key ) { - return find( card.meta, [ 'meta_key', key ] )?.meta_value; -} - -function generateTransactionData( cart, storedCard ) { - const countryCode = extractStoredCardMetaValue( storedCard, 'country_code' ); - const postalCode = extractStoredCardMetaValue( storedCard, 'card_zip' ); - - return { - cart: { - ...pick( cart, [ 'blog_id', 'cart_key' ] ), - ...preprocessCartForServer( cart ), - create_new_blog: false, - }, - domainDetails: null, - payment: { - paymentMethod: 'WPCOM_Billing_MoneyPress_Stored', - storedCard, - name: storedCard.name, - country: countryCode, - country_code: countryCode, - postal_code: postalCode, - zip: postalCode, - }, - }; -} +import { translateResponseCartToWPCOMCart } from 'calypso/my-sites/checkout/composite-checkout/lib/translate-cart'; export function useSubmitTransaction( { cart, @@ -48,30 +19,34 @@ export function useSubmitTransaction( { onComplete, successMessage, } ) { + const callPaymentProcessor = useProcessPayment(); + return useCallback( () => { - const transactionData = generateTransactionData( cart, storedCard ); - submit( transactionData, ( { name, data, error } ) => { - if ( error ) { + const wpcomCart = translateResponseCartToWPCOMCart( cart ); + callPaymentProcessor( 'existing-card', { + items: wpcomCart.items, + name: storedCard.name, + storedDetailsId: storedCard.stored_details_id, + paymentMethodToken: storedCard.mp_ref, + paymentPartnerProcessorId: storedCard.payment_partner, + } ) + .then( () => { + setStep( name ); + notices.success( successMessage, { + persistent: true, + } ); + recordTracksEvent( 'calypso_oneclick_upsell_payment_success', {} ); + onComplete?.(); + } ) + .catch( ( error ) => { recordTracksEvent( 'calypso_oneclick_upsell_payment_error', { error_code: error.code || error.error, reason: error.message, } ); notices.error( error.message ); onClose(); - return; - } - - setStep( name ); - - if ( RECEIVED_WPCOM_RESPONSE === name && data && ! error ) { - notices.success( successMessage, { - persistent: true, - } ); - recordTracksEvent( 'calypso_oneclick_upsell_payment_success', {} ); - onComplete?.( data?.receipt_id ); - } - } ); - }, [ cart, storedCard, setStep, onClose, onComplete, successMessage ] ); + } ); + }, [ callPaymentProcessor, cart, storedCard, setStep, onClose, onComplete, successMessage ] ); } export function formatDate( cardExpiry ) { From b719922d6daf86fa780ffd7aa0cea52136ba4f6f Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Tue, 8 Dec 2020 16:12:53 -0500 Subject: [PATCH 08/24] Update UpsellNudge to use shoppingCartManager --- .../my-sites/checkout/upsell-nudge/index.jsx | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index a512c12b21ba7..fab7bba70f565 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -5,8 +5,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import page from 'page'; -import { omit } from 'lodash'; -import { withShoppingCart } from '@automattic/shopping-cart'; +import { pick } from 'lodash'; +import { withShoppingCart, createRequestCartProduct } from '@automattic/shopping-cart'; /** * Internal dependencies @@ -40,7 +40,6 @@ import { BusinessPlanUpgradeUpsell } from './business-plan-upgrade-upsell'; import { PremiumPlanUpgradeUpsell } from './premium-plan-upgrade-upsell'; import getUpgradePlanSlugFromPath from 'calypso/state/selectors/get-upgrade-plan-slug-from-path'; import { PurchaseModal } from './purchase-modal'; -import { replaceCartWithItems } from 'calypso/lib/cart/actions'; import Gridicon from 'calypso/components/gridicon'; import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; @@ -245,9 +244,8 @@ export class UpsellNudge extends React.Component { if ( this.isEligibleForOneClickUpsell( buttonAction ) ) { this.setState( { showPurchaseModal: true, - cartLastServerResponseDate: this.getCartUpdatedTime(), } ); - replaceCartWithItems( [ this.props.product ] ); + this.props.shoppingCartManager.replaceProductsInCart( [ this.props.product ] ); return; } @@ -285,7 +283,7 @@ export class UpsellNudge extends React.Component { }; renderPurchaseModal = () => { - const isCartUpdating = this.state.cartLastServerResponseDate === this.getCartUpdatedTime(); + const isCartUpdating = this.props.shoppingCartManager.isPendingUpdate; return ( ); }; - - getCartUpdatedTime = () => { - return this.props.cart?.client_metadata?.last_server_response_date; - }; } const trackUpsellButtonClick = ( eventName ) => { @@ -357,7 +351,9 @@ export default connect( isRequestingSitePlans( state, selectedSiteId ), hasProductsList: Object.keys( productsList ).length > 0, hasSitePlans: sitePlans && sitePlans.length > 0, - product: omit( getProductBySlug( state, productSlug ), 'prices' ), + product: createRequestCartProduct( + pick( getProductBySlug( state, productSlug ), [ 'product_slug', 'product_id' ] ) + ), productCost: getProductCost( state, productSlug ), productDisplayCost: getProductDisplayCost( state, productSlug ), planRawPrice: annualPrice, From 4379a94a2306e48b833dae2dc594800d67432855 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 23:15:06 -0500 Subject: [PATCH 09/24] Remove handleCheckoutCompleteRedirect from UpsellNudge --- client/my-sites/checkout/upsell-nudge/index.jsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index fab7bba70f565..4a5e8fcb3aa46 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -84,7 +84,6 @@ export class UpsellNudge extends React.Component { cards: PropTypes.arrayOf( PropTypes.object ), cart: PropTypes.object, isFetchingStoredCards: PropTypes.bool, - handleCheckoutCompleteRedirect: PropTypes.func.isRequired, }; state = { @@ -228,7 +227,7 @@ export class UpsellNudge extends React.Component { } handleClickDecline = ( shouldHideUpsellNudges = true ) => { - const { trackUpsellButtonClick, upsellType, handleCheckoutCompleteRedirect } = this.props; + const { trackUpsellButtonClick, upsellType } = this.props; trackUpsellButtonClick( `calypso_${ upsellType.replace( /-/g, '_' ) }_decline_button_click` ); handleCheckoutCompleteRedirect( shouldHideUpsellNudges ); @@ -278,10 +277,6 @@ export class UpsellNudge extends React.Component { return true; }; - handleOneClickUpsellComplete = ( currentRecieptId ) => { - this.props.handleCheckoutCompleteRedirect( true, currentRecieptId ); - }; - renderPurchaseModal = () => { const isCartUpdating = this.props.shoppingCartManager.isPendingUpdate; @@ -289,7 +284,6 @@ export class UpsellNudge extends React.Component { this.setState( { showPurchaseModal: false } ) } siteSlug={ this.props.siteSlug } isCartUpdating={ isCartUpdating } From 8e9d91281273bd54cb23ebca599db4760e3f98e4 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 23:17:02 -0500 Subject: [PATCH 10/24] Add CheckoutProvider to PurchaseModal Along with useCreatePaymentCompleteCallback and existingCardProcessor. --- .../upsell-nudge/purchase-modal/index.jsx | 30 +++++++++++++++---- 1 file changed, 24 insertions(+), 6 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx index 982874c9013ad..2ba86bf20b04e 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx @@ -2,33 +2,40 @@ * External dependencies */ import React, { useState } from 'react'; +import { Dialog } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; +import { CheckoutProvider } from '@automattic/composite-checkout'; /** * Internal dependencies */ -import { Dialog } from '@automattic/components'; import { useSubmitTransaction } from './util'; import { BEFORE_SUBMIT } from './constants'; import Content from './content'; import Placeholder from './placeholder'; +import useCreatePaymentCompleteCallback from 'calypso/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback'; +import existingCardProcessor from 'calypso/my-sites/checkout/composite-checkout/lib/existing-card-processor'; /** * Style dependencies */ import './style.scss'; -export function PurchaseModal( { cart, cards, isCartUpdating, onComplete, onClose, siteSlug } ) { +const noop = () => null; + +export function PurchaseModal( { cart, cards, isCartUpdating, onClose, siteSlug } ) { const translate = useTranslate(); const [ step, setStep ] = useState( BEFORE_SUBMIT ); const submitTransaction = useSubmitTransaction( { cart, setStep, storedCard: cards?.[ 0 ], - onComplete, onClose, successMessage: translate( 'Your purchase has been completed!' ), } ); + const onComplete = useCreatePaymentCompleteCallback( { + isComingFromUpsell: true, + } ); const contentProps = { cards, cart, @@ -39,8 +46,19 @@ export function PurchaseModal( { cart, cards, isCartUpdating, onComplete, onClos }; return ( - - { isCartUpdating ? : } - + + + { isCartUpdating ? : } + + ); } From 0b05df71cb7b256a5ca6f8de50b9f31284343b0e Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 23:19:34 -0500 Subject: [PATCH 11/24] Remove onComplete from useSubmitTransaction That will be handled by CheckoutProvider. --- .../checkout/upsell-nudge/purchase-modal/util.js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js index cffdc15903ff9..ed45339f837a1 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js @@ -11,14 +11,7 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import notices from 'calypso/notices'; import { translateResponseCartToWPCOMCart } from 'calypso/my-sites/checkout/composite-checkout/lib/translate-cart'; -export function useSubmitTransaction( { - cart, - storedCard, - setStep, - onClose, - onComplete, - successMessage, -} ) { +export function useSubmitTransaction( { cart, storedCard, setStep, onClose, successMessage } ) { const callPaymentProcessor = useProcessPayment(); return useCallback( () => { @@ -36,7 +29,6 @@ export function useSubmitTransaction( { persistent: true, } ); recordTracksEvent( 'calypso_oneclick_upsell_payment_success', {} ); - onComplete?.(); } ) .catch( ( error ) => { recordTracksEvent( 'calypso_oneclick_upsell_payment_error', { @@ -46,7 +38,7 @@ export function useSubmitTransaction( { notices.error( error.message ); onClose(); } ); - }, [ callPaymentProcessor, cart, storedCard, setStep, onClose, onComplete, successMessage ] ); + }, [ callPaymentProcessor, cart, storedCard, setStep, onClose, successMessage ] ); } export function formatDate( cardExpiry ) { From e0743506d6ad08d8c432afb199de09b970dc47fe Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Thu, 10 Dec 2020 23:51:50 -0500 Subject: [PATCH 12/24] Use withPaymentCompleteCallback on UpsellNudge --- client/my-sites/checkout/upsell-nudge/index.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 4a5e8fcb3aa46..f1582e04e9b1a 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -44,6 +44,7 @@ import Gridicon from 'calypso/components/gridicon'; import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; import { isFetchingStoredCards, getStoredCards } from 'calypso/state/stored-cards/selectors'; +import { withPaymentCompleteCallback } from 'calypso/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback'; /** * Style dependencies @@ -230,7 +231,10 @@ export class UpsellNudge extends React.Component { const { trackUpsellButtonClick, upsellType } = this.props; trackUpsellButtonClick( `calypso_${ upsellType.replace( /-/g, '_' ) }_decline_button_click` ); - handleCheckoutCompleteRedirect( shouldHideUpsellNudges ); + this.props.paymentCompleteCallback( { + paymentMethodId: null, + transactionLastResponse: { isComingFromUpsell: shouldHideUpsellNudges }, + } ); }; handleClickAccept = ( buttonAction ) => { @@ -361,4 +365,4 @@ export default connect( { trackUpsellButtonClick, } -)( withShoppingCart( localize( UpsellNudge ) ) ); +)( withShoppingCart( withPaymentCompleteCallback( localize( UpsellNudge ) ) ) ); From 7cc8ff59a224bc538f80682f33943af4f89be7fa Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 12:18:52 -0500 Subject: [PATCH 13/24] Use getThankYouPageUrl directly in UpsellNudge --- client/my-sites/checkout/upsell-nudge/index.jsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index f1582e04e9b1a..c0eb10e37e3c9 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -44,7 +44,7 @@ import Gridicon from 'calypso/components/gridicon'; import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; import { isFetchingStoredCards, getStoredCards } from 'calypso/state/stored-cards/selectors'; -import { withPaymentCompleteCallback } from 'calypso/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback'; +import getThankYouPageUrl from 'calypso/my-sites/checkout/composite-checkout/hooks/use-get-thank-you-url/get-thank-you-page-url'; /** * Style dependencies @@ -231,10 +231,13 @@ export class UpsellNudge extends React.Component { const { trackUpsellButtonClick, upsellType } = this.props; trackUpsellButtonClick( `calypso_${ upsellType.replace( /-/g, '_' ) }_decline_button_click` ); - this.props.paymentCompleteCallback( { - paymentMethodId: null, - transactionLastResponse: { isComingFromUpsell: shouldHideUpsellNudges }, - } ); + const getThankYouPageUrlArguments = { + siteSlug: this.props.siteSlug, + cart: this.props.cart, + hideNudge: shouldHideUpsellNudges, + }; + const url = getThankYouPageUrl( getThankYouPageUrlArguments ); + page.redirect( url ); }; handleClickAccept = ( buttonAction ) => { @@ -365,4 +368,4 @@ export default connect( { trackUpsellButtonClick, } -)( withShoppingCart( withPaymentCompleteCallback( localize( UpsellNudge ) ) ) ); +)( withShoppingCart( localize( UpsellNudge ) ) ); From b78db8e01029c601a7cf3d13b7c165393fcb45e7 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 13:25:21 -0500 Subject: [PATCH 14/24] Add QueryStoredCards to UpsellNudge --- client/my-sites/checkout/upsell-nudge/index.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index c0eb10e37e3c9..3b90d544c090d 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -13,6 +13,7 @@ import { withShoppingCart, createRequestCartProduct } from '@automattic/shopping */ import Main from 'calypso/components/main'; import QuerySites from 'calypso/components/data/query-sites'; +import QueryStoredCards from 'calypso/components/data/query-stored-cards'; import QueryProductsList from 'calypso/components/data/query-products-list'; import QuerySitePlans from 'calypso/components/data/query-site-plans'; import { CompactCard } from '@automattic/components'; @@ -97,6 +98,7 @@ export class UpsellNudge extends React.Component { return (
+ { ! hasProductsList && } { ! hasSitePlans && } { isLoading ? this.renderPlaceholders() : this.renderContent() } From 3fa39234550ee805906e616d25bfb5175de584e5 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 13:35:47 -0500 Subject: [PATCH 15/24] Move CheckoutProvider outside PurchaseModal by adding wrapper --- .../my-sites/checkout/upsell-nudge/index.jsx | 2 +- .../upsell-nudge/purchase-modal/index.jsx | 24 +++++++++++-------- 2 files changed, 15 insertions(+), 11 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 3b90d544c090d..834fac264a4c7 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -40,7 +40,7 @@ import { ConciergeSupportSession } from './concierge-support-session'; import { BusinessPlanUpgradeUpsell } from './business-plan-upgrade-upsell'; import { PremiumPlanUpgradeUpsell } from './premium-plan-upgrade-upsell'; import getUpgradePlanSlugFromPath from 'calypso/state/selectors/get-upgrade-plan-slug-from-path'; -import { PurchaseModal } from './purchase-modal'; +import PurchaseModal from './purchase-modal'; import Gridicon from 'calypso/components/gridicon'; import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx index 2ba86bf20b04e..06923e3b0d788 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx @@ -33,9 +33,6 @@ export function PurchaseModal( { cart, cards, isCartUpdating, onClose, siteSlug onClose, successMessage: translate( 'Your purchase has been completed!' ), } ); - const onComplete = useCreatePaymentCompleteCallback( { - isComingFromUpsell: true, - } ); const contentProps = { cards, cart, @@ -45,20 +42,27 @@ export function PurchaseModal( { cart, cards, isCartUpdating, onClose, siteSlug submitTransaction, }; + return ( + + { isCartUpdating ? : } + + ); +} + +export default function PurchaseModalWrapper( props ) { + const onComplete = useCreatePaymentCompleteCallback( { + isComingFromUpsell: true, + } ); return ( - - { isCartUpdating ? : } - + ; ); } From 1b2f4b43379f2190f6029c4ba260f272098e320a Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 13:36:13 -0500 Subject: [PATCH 16/24] Allow mounting UpsellNudge if products are still fetching --- .../my-sites/checkout/upsell-nudge/index.jsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 834fac264a4c7..2842af9c35fdb 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -263,7 +263,11 @@ export class UpsellNudge extends React.Component { }; isEligibleForOneClickUpsell = ( buttonAction ) => { - const { cards, siteSlug, upsellType } = this.props; + const { product, cards, siteSlug, upsellType } = this.props; + + if ( ! product ) { + return false; + } const supportedUpsellTypes = [ CONCIERGE_QUICKSTART_SESSION, @@ -341,8 +345,15 @@ export default connect( isMonthly: false, } ); const isFetchingCards = isFetchingStoredCards( state ); - const productSlug = resolveProductSlug( upsellType, upgradeItem ); + const productProperties = pick( getProductBySlug( state, productSlug ), [ + 'product_slug', + 'product_id', + ] ); + const product = + productProperties.product_slug && productProperties.product_id + ? createRequestCartProduct( productProperties ) + : null; return { isFetchingStoredCards: isFetchingCards, @@ -354,9 +365,7 @@ export default connect( isRequestingSitePlans( state, selectedSiteId ), hasProductsList: Object.keys( productsList ).length > 0, hasSitePlans: sitePlans && sitePlans.length > 0, - product: createRequestCartProduct( - pick( getProductBySlug( state, productSlug ), [ 'product_slug', 'product_id' ] ) - ), + product, productCost: getProductCost( state, productSlug ), productDisplayCost: getProductDisplayCost( state, productSlug ), planRawPrice: annualPrice, From fbc473bbc74072c31c53f4d99b13fd05d3135286 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:11:38 -0500 Subject: [PATCH 17/24] Pass siteId to PurchaseModal --- client/my-sites/checkout/upsell-nudge/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 2842af9c35fdb..6191f65407d40 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -298,6 +298,7 @@ export class UpsellNudge extends React.Component { cart={ this.props.cart } cards={ this.props.cards } onClose={ () => this.setState( { showPurchaseModal: false } ) } + siteId={ this.props.selectedSiteId } siteSlug={ this.props.siteSlug } isCartUpdating={ isCartUpdating } /> From 81fd1db00fdee578d27735919f0376fce8ee1bb5 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:12:18 -0500 Subject: [PATCH 18/24] Pass correct args to existingCardProcessor --- .../upsell-nudge/purchase-modal/index.jsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx index 06923e3b0d788..bc8fb2c785dec 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/index.jsx @@ -1,10 +1,12 @@ /** * External dependencies */ -import React, { useState } from 'react'; +import React, { useState, useMemo } from 'react'; +import { useDispatch } from 'react-redux'; import { Dialog } from '@automattic/components'; import { useTranslate } from 'i18n-calypso'; import { CheckoutProvider } from '@automattic/composite-checkout'; +import { useStripe } from '@automattic/calypso-stripe'; /** * Internal dependencies @@ -15,6 +17,7 @@ import Content from './content'; import Placeholder from './placeholder'; import useCreatePaymentCompleteCallback from 'calypso/my-sites/checkout/composite-checkout/hooks/use-create-payment-complete-callback'; import existingCardProcessor from 'calypso/my-sites/checkout/composite-checkout/lib/existing-card-processor'; +import getContactDetailsType from 'calypso/my-sites/checkout/composite-checkout/lib/get-contact-details-type'; /** * Style dependencies @@ -23,11 +26,12 @@ import './style.scss'; const noop = () => null; -export function PurchaseModal( { cart, cards, isCartUpdating, onClose, siteSlug } ) { +export function PurchaseModal( { cart, cards, isCartUpdating, onClose, siteSlug, siteId } ) { const translate = useTranslate(); const [ step, setStep ] = useState( BEFORE_SUBMIT ); const submitTransaction = useSubmitTransaction( { cart, + siteId, setStep, storedCard: cards?.[ 0 ], onClose, @@ -53,6 +57,24 @@ export default function PurchaseModalWrapper( props ) { const onComplete = useCreatePaymentCompleteCallback( { isComingFromUpsell: true, } ); + const { stripeConfiguration } = useStripe(); + const reduxDispatch = useDispatch(); + + const contactDetailsType = getContactDetailsType( props.cart ); + const includeDomainDetails = contactDetailsType === 'domain'; + const includeGSuiteDetails = contactDetailsType === 'gsuite'; + const dataForProcessor = useMemo( + () => ( { + includeDomainDetails, + includeGSuiteDetails, + recordEvent: noop, + stripeConfiguration, + createUserAndSiteBeforeTransaction: false, + reduxDispatch, + } ), + [ includeDomainDetails, includeGSuiteDetails, stripeConfiguration, reduxDispatch ] + ); + return ( + existingCardProcessor( transactionData, dataForProcessor ), + } } > ; From 2c0a5cc84790114f1067c11f4326fbe418fd93a9 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:12:52 -0500 Subject: [PATCH 19/24] Pass country/postalCode to existingCardProcessor --- .../upsell-nudge/purchase-modal/util.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js index ed45339f837a1..755685897c70d 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js @@ -11,17 +11,33 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import notices from 'calypso/notices'; import { translateResponseCartToWPCOMCart } from 'calypso/my-sites/checkout/composite-checkout/lib/translate-cart'; -export function useSubmitTransaction( { cart, storedCard, setStep, onClose, successMessage } ) { +function extractStoredCardMetaValue( card, key ) { + return card.meta?.find( ( meta ) => meta.meta_key === key )?.meta_value; +} + +export function useSubmitTransaction( { + cart, + siteId, + storedCard, + setStep, + onClose, + successMessage, +} ) { const callPaymentProcessor = useProcessPayment(); return useCallback( () => { const wpcomCart = translateResponseCartToWPCOMCart( cart ); + const countryCode = extractStoredCardMetaValue( storedCard, 'country_code' ); + const postalCode = extractStoredCardMetaValue( storedCard, 'card_zip' ); callPaymentProcessor( 'existing-card', { items: wpcomCart.items, name: storedCard.name, storedDetailsId: storedCard.stored_details_id, paymentMethodToken: storedCard.mp_ref, paymentPartnerProcessorId: storedCard.payment_partner, + country: countryCode, + postalCode, + siteId: siteId ? String( siteId ) : undefined, } ) .then( () => { setStep( name ); @@ -38,7 +54,7 @@ export function useSubmitTransaction( { cart, storedCard, setStep, onClose, succ notices.error( error.message ); onClose(); } ); - }, [ callPaymentProcessor, cart, storedCard, setStep, onClose, successMessage ] ); + }, [ siteId, callPaymentProcessor, cart, storedCard, setStep, onClose, successMessage ] ); } export function formatDate( cardExpiry ) { From 9a2543635cbd3161882c677c62af077fddf0b44f Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:24:09 -0500 Subject: [PATCH 20/24] Set tax country code in UpsellNudge --- client/my-sites/checkout/upsell-nudge/index.jsx | 9 +++++++++ .../checkout/upsell-nudge/purchase-modal/util.js | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 6191f65407d40..6da41c45a4243 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -46,6 +46,7 @@ import { isMonthly } from 'calypso/lib/plans/constants'; import { getPlanByPathSlug } from 'calypso/lib/plans'; import { isFetchingStoredCards, getStoredCards } from 'calypso/state/stored-cards/selectors'; import getThankYouPageUrl from 'calypso/my-sites/checkout/composite-checkout/hooks/use-get-thank-you-url/get-thank-you-page-url'; +import { extractStoredCardMetaValue } from './purchase-modal/util'; /** * Style dependencies @@ -253,6 +254,14 @@ export class UpsellNudge extends React.Component { this.setState( { showPurchaseModal: true, } ); + const storedCard = this.props.cards[ 0 ]; + const countryCode = extractStoredCardMetaValue( storedCard, 'country_code' ); + const postalCode = extractStoredCardMetaValue( storedCard, 'card_zip' ); + this.props.shoppingCartManager.updateLocation( { + countryCode, + postalCode, + subdivisionCode: null, + } ); this.props.shoppingCartManager.replaceProductsInCart( [ this.props.product ] ); return; } diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js index 755685897c70d..f72c2c40a6b54 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js @@ -11,7 +11,7 @@ import { recordTracksEvent } from 'calypso/lib/analytics/tracks'; import notices from 'calypso/notices'; import { translateResponseCartToWPCOMCart } from 'calypso/my-sites/checkout/composite-checkout/lib/translate-cart'; -function extractStoredCardMetaValue( card, key ) { +export function extractStoredCardMetaValue( card, key ) { return card.meta?.find( ( meta ) => meta.meta_key === key )?.meta_value; } From bf4c2d09993956b4d60971dade62712201ffe585 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:32:45 -0500 Subject: [PATCH 21/24] Add StripeHookProvider to UpsellNudge --- .../my-sites/checkout/upsell-nudge/index.jsx | 20 +++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index 6da41c45a4243..ab5dbd49af101 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -7,6 +7,7 @@ import { connect } from 'react-redux'; import page from 'page'; import { pick } from 'lodash'; import { withShoppingCart, createRequestCartProduct } from '@automattic/shopping-cart'; +import { StripeHookProvider } from '@automattic/calypso-stripe'; /** * Internal dependencies @@ -47,6 +48,7 @@ import { getPlanByPathSlug } from 'calypso/lib/plans'; import { isFetchingStoredCards, getStoredCards } from 'calypso/state/stored-cards/selectors'; import getThankYouPageUrl from 'calypso/my-sites/checkout/composite-checkout/hooks/use-get-thank-you-url/get-thank-you-page-url'; import { extractStoredCardMetaValue } from './purchase-modal/util'; +import { getStripeConfiguration } from 'calypso/lib/store-transactions'; /** * Style dependencies @@ -303,14 +305,16 @@ export class UpsellNudge extends React.Component { const isCartUpdating = this.props.shoppingCartManager.isPendingUpdate; return ( - this.setState( { showPurchaseModal: false } ) } - siteId={ this.props.selectedSiteId } - siteSlug={ this.props.siteSlug } - isCartUpdating={ isCartUpdating } - /> + + this.setState( { showPurchaseModal: false } ) } + siteId={ this.props.selectedSiteId } + siteSlug={ this.props.siteSlug } + isCartUpdating={ isCartUpdating } + /> + ); }; From 91ac293931450a0f7670714880079a53da4806c8 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 14:39:52 -0500 Subject: [PATCH 22/24] Set form to processing before submit in useSubmitTransaction --- client/my-sites/checkout/upsell-nudge/purchase-modal/util.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js index f72c2c40a6b54..ade69ca665a36 100644 --- a/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js +++ b/client/my-sites/checkout/upsell-nudge/purchase-modal/util.js @@ -29,6 +29,7 @@ export function useSubmitTransaction( { const wpcomCart = translateResponseCartToWPCOMCart( cart ); const countryCode = extractStoredCardMetaValue( storedCard, 'country_code' ); const postalCode = extractStoredCardMetaValue( storedCard, 'card_zip' ); + setStep( 'processing' ); callPaymentProcessor( 'existing-card', { items: wpcomCart.items, name: storedCard.name, @@ -40,7 +41,6 @@ export function useSubmitTransaction( { siteId: siteId ? String( siteId ) : undefined, } ) .then( () => { - setStep( name ); notices.success( successMessage, { persistent: true, } ); From 66a9d4a5521882da25f7bafeec9633718d88a81c Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Fri, 11 Dec 2020 18:53:00 -0500 Subject: [PATCH 23/24] Remove declined support session when closing modal --- client/my-sites/checkout/upsell-nudge/index.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index ab5dbd49af101..aab52cd8b251c 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -304,12 +304,17 @@ export class UpsellNudge extends React.Component { renderPurchaseModal = () => { const isCartUpdating = this.props.shoppingCartManager.isPendingUpdate; + const onCloseModal = () => { + this.props.shoppingCartManager.replaceProductsInCart( [] ); + this.setState( { showPurchaseModal: false } ); + }; + return ( this.setState( { showPurchaseModal: false } ) } + onClose={ onCloseModal } siteId={ this.props.selectedSiteId } siteSlug={ this.props.siteSlug } isCartUpdating={ isCartUpdating } From e43d60aa0b4b4dd0c39dd6edb37c0545a039fcd9 Mon Sep 17 00:00:00 2001 From: Payton Swick Date: Mon, 14 Dec 2020 12:36:32 -0500 Subject: [PATCH 24/24] Include receiptId in UpsellNudge getThankYouPageUrlArguments --- client/my-sites/checkout/upsell-nudge/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/checkout/upsell-nudge/index.jsx b/client/my-sites/checkout/upsell-nudge/index.jsx index aab52cd8b251c..6b93d0ced6679 100644 --- a/client/my-sites/checkout/upsell-nudge/index.jsx +++ b/client/my-sites/checkout/upsell-nudge/index.jsx @@ -238,6 +238,7 @@ export class UpsellNudge extends React.Component { trackUpsellButtonClick( `calypso_${ upsellType.replace( /-/g, '_' ) }_decline_button_click` ); const getThankYouPageUrlArguments = { siteSlug: this.props.siteSlug, + receiptId: this.props.receiptId, cart: this.props.cart, hideNudge: shouldHideUpsellNudges, };