From c035bdcd0de3db73e64b174dc78b0cb3893a476c Mon Sep 17 00:00:00 2001 From: asvinb Date: Thu, 22 Aug 2024 19:59:53 +0400 Subject: [PATCH 01/10] Add SkipPaidAdsConfirmationModal component. --- .../setup-stepper/setup-paid-ads/constants.js | 2 + .../setup-paid-ads/setup-paid-ads.js | 31 +++++- .../skip-paid-ads-confirmation-modal.js | 100 ++++++++++++++++++ 3 files changed, 129 insertions(+), 4 deletions(-) create mode 100644 js/src/setup-mc/setup-stepper/setup-paid-ads/constants.js create mode 100644 js/src/setup-mc/setup-stepper/setup-paid-ads/skip-paid-ads-confirmation-modal.js diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/constants.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/constants.js new file mode 100644 index 0000000000..05f0b5bb55 --- /dev/null +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/constants.js @@ -0,0 +1,2 @@ +export const ACTION_COMPLETE = 'complete-ads'; +export const ACTION_SKIP = 'skip-ads'; diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js index f5dd0f9a07..9e49450fe5 100644 --- a/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js +++ b/js/src/setup-mc/setup-stepper/setup-paid-ads/setup-paid-ads.js @@ -22,13 +22,12 @@ import FaqsSection from '.~/components/paid-ads/faqs-section'; import AppButton from '.~/components/app-button'; import PaidAdsFeaturesSection from './paid-ads-features-section'; import PaidAdsSetupSections from './paid-ads-setup-sections'; +import SkipPaidAdsConfirmationModal from './skip-paid-ads-confirmation-modal'; import { getProductFeedUrl } from '.~/utils/urls'; import clientSession from './clientSession'; import { API_NAMESPACE, STORE_KEY } from '.~/data/constants'; import { GUIDE_NAMES } from '.~/constants'; - -const ACTION_COMPLETE = 'complete-ads'; -const ACTION_SKIP = 'skip-ads'; +import { ACTION_COMPLETE, ACTION_SKIP } from './constants'; /** * Clicking on the "Create a paid ad campaign" button to open the paid ads setup in the onboarding flow. @@ -76,6 +75,10 @@ export default function SetupPaidAds() { ); const [ paidAds, setPaidAds ] = useState( {} ); const [ completing, setCompleting ] = useState( null ); + const [ + showSkipPaidAdsConfirmationModal, + setShowSkipPaidAdsConfirmationModal, + ] = useState( false ); const handleContinuePaidAdsSetupClick = () => { setShowPaidAdsSetup( true ); @@ -117,6 +120,14 @@ export default function SetupPaidAds() { await finishOnboardingSetup( event, onBeforeFinish ); }; + const handleSkipModal = () => { + setShowSkipPaidAdsConfirmationModal( true ); + }; + + const handleCancelSkipConfirmationClick = () => { + setShowSkipPaidAdsConfirmationModal( false ); + }; + // The status check of Google Ads account connection is included in `paidAds.isReady`, // because when there is no connected account, it will disable the budget section and set the `amount` to `undefined`. const disabledComplete = completing === ACTION_SKIP || ! paidAds.isReady; @@ -150,7 +161,10 @@ export default function SetupPaidAds() { text={ text } loading={ completing === ACTION_SKIP } disabled={ disabledSkip } - onClick={ finishOnboardingSetup } + onClick={ + // Show the skip modal only for the "Skip this step for now" button only. + showPaidAdsSetup ? finishOnboardingSetup : handleSkipModal + } eventName="gla_onboarding_complete_button_click" eventProps={ eventProps } /> @@ -194,6 +208,15 @@ export default function SetupPaidAds() { ) } + + { showSkipPaidAdsConfirmationModal && ( + + ) } +