Skip to content

Commit 739e897

Browse files
ianlinianlin
committed
Decouple CustomerEffortScorePrompt and the CampaignCreationSuccessGuide
1 parent 07d85e4 commit 739e897

File tree

3 files changed

+104
-100
lines changed

3 files changed

+104
-100
lines changed

‎js/src/dashboard/campaign-creation-success-guide/index.js

Lines changed: 28 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
/**
22
* External dependencies
33
*/
4-
import { getHistory, getNewPath, getQuery } from '@woocommerce/navigation';
54
import {
65
createInterpolateElement,
76
useEffect,
87
useCallback,
9-
useState,
108
} from '@wordpress/element';
119
import { __ } from '@wordpress/i18n';
1210
import { Button } from '@wordpress/components';
@@ -15,59 +13,41 @@ import { recordEvent } from '@woocommerce/tracks';
1513
/**
1614
* Internal dependencies
1715
*/
18-
import { getCreateCampaignUrl } from '.~/utils/urls';
19-
import isWCTracksEnabled from '.~/utils/isWCTracksEnabled';
2016
import AppModal from '.~/components/app-modal';
2117
import GuidePageContent, {
2218
ContentLink,
2319
} from '.~/components/guide-page-content';
24-
import CustomerEffortScorePrompt from '.~/components/customer-effort-score-prompt';
2520
import { GUIDE_NAMES } from '.~/constants';
2621
import headerImageURL from './header.svg';
2722
import './index.scss';
23+
import {
24+
CTA_CREATE_ANOTHER_CAMPAIGN,
25+
CTA_CONFIRM,
26+
CTA_DISMISS,
27+
} from '../constants';
2828

29-
const CTA_CREATE_ANOTHER_CAMPAIGN = 'create-another-campaign';
30-
31-
const handleCloseWithAction = ( e, specifiedAction ) => {
32-
const action = specifiedAction || e.currentTarget.dataset.action;
33-
const nextQuery = {
34-
...getQuery(),
35-
guide: undefined,
36-
};
37-
getHistory().replace( getNewPath( nextQuery ) );
38-
39-
if ( action === CTA_CREATE_ANOTHER_CAMPAIGN ) {
40-
getHistory().push( getCreateCampaignUrl() );
41-
}
42-
43-
recordEvent( 'gla_modal_closed', {
44-
context: GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS,
45-
action,
46-
} );
47-
};
48-
49-
const handleRequestClose = ( e ) => handleCloseWithAction( e, 'dismiss' );
50-
51-
const GuideImplementation = ( { isOpen, setCESPromptOpen } ) => {
52-
const handleGotItClick = useCallback(
53-
( e ) => {
54-
handleCloseWithAction( e );
55-
setCESPromptOpen( true );
56-
},
57-
[ setCESPromptOpen ]
58-
);
59-
29+
/**
30+
* Modal window to prompt the user at Dashboard, after successful completing the campaign creation.
31+
*
32+
* Show this guide modal by visiting the path with a specific query `guide=campaign-creation-success`.
33+
* For example: `/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&guide=campaign-creation-success`.
34+
*
35+
* @param {Object} props React component props.
36+
* @param {Function} props.onGuideRequestClose The function to be called when the guide is closed.
37+
*/
38+
export default function CampaignCreationSuccessGuide( {
39+
onGuideRequestClose = () => {},
40+
} ) {
6041
useEffect( () => {
61-
if ( isOpen ) {
62-
recordEvent( 'gla_modal_open', {
63-
context: GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS,
64-
} );
65-
}
66-
}, [ isOpen ] );
42+
recordEvent( 'gla_modal_open', {
43+
context: GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS,
44+
} );
45+
}, [] );
6746

68-
if ( ! isOpen ) {
69-
return null;
70-
}
47+
const handleRequestClose = useCallback(
48+
( e ) => onGuideRequestClose( e, CTA_DISMISS ),
49+
[ onGuideRequestClose ]
50+
);
7151

7252
return (
7353
<AppModal
@@ -78,7 +58,7 @@ const GuideImplementation = ( { isOpen, setCESPromptOpen } ) => {
7858
key="0"
7959
isTertiary
8060
data-action={ CTA_CREATE_ANOTHER_CAMPAIGN }
81-
onClick={ handleCloseWithAction }
61+
onClick={ onGuideRequestClose }
8262
>
8363
{ __(
8464
'Create another campaign',
@@ -88,8 +68,8 @@ const GuideImplementation = ( { isOpen, setCESPromptOpen } ) => {
8868
<Button
8969
key="1"
9070
isPrimary
91-
data-action="confirm"
92-
onClick={ handleGotItClick }
71+
data-action={ CTA_CONFIRM }
72+
onClick={ onGuideRequestClose }
9373
>
9474
{ __( 'Got it', 'google-listings-and-ads' ) }
9575
</Button>,
@@ -129,35 +109,4 @@ const GuideImplementation = ( { isOpen, setCESPromptOpen } ) => {
129109
</GuidePageContent>
130110
</AppModal>
131111
);
132-
};
133-
134-
/**
135-
* Modal window to prompt the user at Dashboard, after successful completing the campaign creation.
136-
*
137-
* Show this guide modal by visiting the path with a specific query `guide=campaign-creation-success`.
138-
* For example: `/wp-admin/admin.php?page=wc-admin&path=%2Fgoogle%2Fdashboard&guide=campaign-creation-success`.
139-
*/
140-
export default function CampaignCreationSuccessGuide() {
141-
const [ isCESPromptOpen, setCESPromptOpen ] = useState( false );
142-
143-
const isOpen = getQuery()?.guide === GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS;
144-
const wcTracksEnabled = isWCTracksEnabled();
145-
146-
return (
147-
<>
148-
<GuideImplementation
149-
isOpen={ isOpen }
150-
setCESPromptOpen={ setCESPromptOpen }
151-
/>
152-
{ isCESPromptOpen && wcTracksEnabled && (
153-
<CustomerEffortScorePrompt
154-
label={ __(
155-
'How easy was it to create a Google Ad campaign?',
156-
'google-listings-and-ads'
157-
) }
158-
eventContext={ GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS }
159-
/>
160-
) }
161-
</>
162-
);
163112
}

‎js/src/dashboard/constants.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const CTA_CREATE_ANOTHER_CAMPAIGN = 'create-another-campaign';
2+
export const CTA_CONFIRM = 'confirm';
3+
export const CTA_DISMISS = 'dismiss';

‎js/src/dashboard/index.js

Lines changed: 73 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,58 @@
11
/**
22
* External dependencies
33
*/
4-
import { Link } from '@woocommerce/components';
54
import { Button } from '@wordpress/components';
6-
import { getNewPath, getQuery } from '@woocommerce/navigation';
5+
import { useState, useCallback } from '@wordpress/element';
6+
import { __ } from '@wordpress/i18n';
7+
import { Link } from '@woocommerce/components';
8+
import { getNewPath, getQuery, getHistory } from '@woocommerce/navigation';
9+
import { recordEvent } from '@woocommerce/tracks';
710

811
/**
912
* Internal dependencies
1013
*/
1114
import DifferentCurrencyNotice from '.~/components/different-currency-notice';
1215
import NavigationClassic from '.~/components/navigation-classic';
16+
import CustomerEffortScorePrompt from '.~/components/customer-effort-score-prompt';
1317
import AppDateRangeFilterPicker from './app-date-range-filter-picker';
1418
import SummarySection from './summary-section';
1519
import CampaignCreationSuccessGuide from './campaign-creation-success-guide';
1620
import AllProgramsTableCard from './all-programs-table-card';
17-
import { glaData } from '.~/constants';
21+
import { glaData, GUIDE_NAMES } from '.~/constants';
1822
import './index.scss';
19-
import { subpaths } from '.~/utils/urls';
23+
import { subpaths, getCreateCampaignUrl } from '.~/utils/urls';
24+
import isWCTracksEnabled from '.~/utils/isWCTracksEnabled';
2025
import EditFreeCampaign from '.~/edit-free-campaign';
2126
import EditPaidAdsCampaign from '.~/pages/edit-paid-ads-campaign';
2227
import CreatePaidAdsCampaign from '.~/pages/create-paid-ads-campaign';
28+
import { CTA_CREATE_ANOTHER_CAMPAIGN, CTA_CONFIRM } from './constants';
2329

2430
const Dashboard = () => {
31+
const [ isCESPromptOpen, setCESPromptOpen ] = useState( false );
32+
33+
const handleCampaignCreationSuccessGuideClose = useCallback(
34+
( e, specifiedAction ) => {
35+
const action = specifiedAction || e.currentTarget.dataset.action;
36+
const nextQuery = {
37+
...getQuery(),
38+
guide: undefined,
39+
};
40+
getHistory().replace( getNewPath( nextQuery ) );
41+
42+
if ( action === CTA_CREATE_ANOTHER_CAMPAIGN ) {
43+
getHistory().push( getCreateCampaignUrl() );
44+
} else if ( action === CTA_CONFIRM ) {
45+
setCESPromptOpen( true );
46+
}
47+
48+
recordEvent( 'gla_modal_closed', {
49+
context: GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS,
50+
action,
51+
} );
52+
},
53+
[ setCESPromptOpen ]
54+
);
55+
2556
const query = getQuery();
2657
switch ( query.subpath ) {
2758
case subpaths.editFreeListings:
@@ -43,26 +74,47 @@ const Dashboard = () => {
4374
);
4475
};
4576

77+
const isCampaignCreationSuccessGuideOpen =
78+
query?.guide === GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS;
79+
const wcTracksEnabled = isWCTracksEnabled();
80+
4681
return (
47-
<div className="gla-dashboard">
48-
<DifferentCurrencyNotice context="dashboard" />
49-
<NavigationClassic />
50-
<div className="gla-dashboard__filter">
51-
<AppDateRangeFilterPicker
52-
trackEventReportId={ trackEventReportId }
53-
/>
54-
{ enableReports && <ReportsLink /> }
82+
<>
83+
<div className="gla-dashboard">
84+
<DifferentCurrencyNotice context="dashboard" />
85+
<NavigationClassic />
86+
<div className="gla-dashboard__filter">
87+
<AppDateRangeFilterPicker
88+
trackEventReportId={ trackEventReportId }
89+
/>
90+
{ enableReports && <ReportsLink /> }
91+
</div>
92+
<div className="gla-dashboard__performance">
93+
<SummarySection />
94+
</div>
95+
<div className="gla-dashboard__programs">
96+
<AllProgramsTableCard
97+
trackEventReportId={ trackEventReportId }
98+
/>
99+
</div>
55100
</div>
56-
<div className="gla-dashboard__performance">
57-
<SummarySection />
58-
</div>
59-
<div className="gla-dashboard__programs">
60-
<CampaignCreationSuccessGuide />
61-
<AllProgramsTableCard
62-
trackEventReportId={ trackEventReportId }
101+
{ isCampaignCreationSuccessGuideOpen && (
102+
<CampaignCreationSuccessGuide
103+
onGuideRequestClose={
104+
handleCampaignCreationSuccessGuideClose
105+
}
63106
/>
64-
</div>
65-
</div>
107+
) }
108+
{ isCESPromptOpen && wcTracksEnabled && (
109+
<CustomerEffortScorePrompt
110+
label={ __(
111+
'How easy was it to create a Google Ad campaign?',
112+
'google-listings-and-ads'
113+
) }
114+
eventContext={ GUIDE_NAMES.CAMPAIGN_CREATION_SUCCESS }
115+
/>
116+
) }
117+
</>
66118
);
67119
};
68120

0 commit comments

Comments
 (0)