Skip to content

Commit 2bb508d

Browse files
hussain-thussain-t
committed
Merge branch 'develop' into enhancement/#12005-rrm-policy-violation-notification.
2 parents 7940052 + bd6e961 commit 2bb508d

64 files changed

Lines changed: 1205 additions & 1127 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/js/components/ActivateAnalyticsCTA.js‎

Lines changed: 96 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,44 @@ import PropTypes from 'prop-types';
2424
/**
2525
* WordPress dependencies
2626
*/
27-
import { useEffect, useState } from '@wordpress/element';
27+
import {
28+
createInterpolateElement,
29+
useEffect,
30+
useState,
31+
} from '@wordpress/element';
2832
import { __ } from '@wordpress/i18n';
2933

3034
/**
3135
* Internal dependencies
3236
*/
33-
import { SpinnerButton } from 'googlesitekit-components';
34-
import { useSelect } from 'googlesitekit-data';
37+
import { SpinnerButton, Button } from 'googlesitekit-components';
38+
import { useSelect, useDispatch } from 'googlesitekit-data';
3539
import { CORE_MODULES } from '@/js/googlesitekit/modules/datastore/constants';
3640
import { MODULES_ANALYTICS_4 } from '@/js/modules/analytics-4/datastore/constants';
3741
import { MODULE_SLUG_ANALYTICS_4 } from '@/js/modules/analytics-4/constants';
3842
import { CORE_LOCATION } from '@/js/googlesitekit/datastore/location/constants';
43+
import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
44+
import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
3945
import useActivateModuleCallback from '@/js/hooks/useActivateModuleCallback';
4046
import useCompleteModuleActivationCallback from '@/js/hooks/useCompleteModuleActivationCallback';
4147
import { useDebounce } from '@/js/hooks/useDebounce';
48+
import { useFeature } from '@/js/hooks/useFeature';
49+
import Link from '@/js/components/Link';
50+
import AnalyticsIcon from '@/svg/graphics/analytics.svg';
51+
52+
export default function ActivateAnalyticsCTA( {
53+
children,
54+
dismissedItemSlug,
55+
} ) {
56+
const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
57+
58+
const isDismissed = useSelect( ( select ) => {
59+
if ( ! setupFlowRefreshEnabled ) {
60+
return false;
61+
}
62+
return select( CORE_USER ).isItemDismissed( dismissedItemSlug );
63+
} );
4264

43-
export default function ActivateAnalyticsCTA( { children } ) {
4465
const activateModuleCallback = useActivateModuleCallback(
4566
MODULE_SLUG_ANALYTICS_4
4667
);
@@ -57,6 +78,14 @@ export default function ActivateAnalyticsCTA( { children } ) {
5778
!! select( MODULES_ANALYTICS_4 )
5879
);
5980
} );
81+
82+
const documentationURL = useSelect( ( select ) => {
83+
if ( ! setupFlowRefreshEnabled ) {
84+
return null;
85+
}
86+
return select( CORE_SITE ).getDocumentationLinkURL( 'ga4' );
87+
} );
88+
6089
const [ inProgress, setInProgress ] = useState( false );
6190

6291
const isNavigatingToReauthURL = useSelect( ( select ) => {
@@ -100,6 +129,8 @@ export default function ActivateAnalyticsCTA( { children } ) {
100129
}
101130
}, [ isActivating, isNavigatingToReauthURL, debouncedSetInProgress ] );
102131

132+
const { dismissItem } = useDispatch( CORE_USER );
133+
103134
const onClickCallback = analyticsModuleActive
104135
? completeModuleActivationCallback
105136
: activateModuleCallback;
@@ -108,32 +139,82 @@ export default function ActivateAnalyticsCTA( { children } ) {
108139
return null;
109140
}
110141

111-
return (
112-
<div className="googlesitekit-analytics-cta">
113-
<div className="googlesitekit-analytics-cta__preview-graphs">
114-
{ children }
142+
if ( setupFlowRefreshEnabled && isDismissed ) {
143+
return null;
144+
}
145+
146+
if ( ! setupFlowRefreshEnabled ) {
147+
return (
148+
<div className="googlesitekit-analytics-cta">
149+
<div className="googlesitekit-analytics-cta__preview-graphs">
150+
{ children }
151+
</div>
152+
<div className="googlesitekit-analytics-cta__details">
153+
<p className="googlesitekit-analytics-cta--description">
154+
{ __(
155+
'See how many people visit your site from Search and track how you’re achieving your goals',
156+
'google-site-kit'
157+
) }
158+
</p>
159+
<SpinnerButton
160+
onClick={ onClickCallback }
161+
isSaving={ inProgress }
162+
disabled={ inProgress }
163+
>
164+
{ analyticsModuleActive
165+
? __( 'Complete setup', 'google-site-kit' )
166+
: __(
167+
'Set up Google Analytics',
168+
'google-site-kit'
169+
) }
170+
</SpinnerButton>
171+
</div>
115172
</div>
116-
<div className="googlesitekit-analytics-cta__details">
117-
<p className="googlesitekit-analytics-cta--description">
118-
{ __(
119-
'See how many people visit your site from Search and track how you’re achieving your goals',
120-
'google-site-kit'
173+
);
174+
}
175+
176+
return (
177+
<div className="googlesitekit-activate-analytics-cta">
178+
<div className="googlesitekit-activate-analytics-cta__top">
179+
<div className="googlesitekit-activate-analytics-cta__icon">
180+
<AnalyticsIcon width={ 28 } height={ 31 } />
181+
</div>
182+
<p className="googlesitekit-activate-analytics-cta__description">
183+
{ createInterpolateElement(
184+
__(
185+
'See how many people visit your site from Search and track how you’re achieving your goals. <a>Learn more</a>',
186+
'google-site-kit'
187+
),
188+
{
189+
a: <Link href={ documentationURL } external />,
190+
}
121191
) }
122192
</p>
193+
</div>
194+
<div className="googlesitekit-activate-analytics-cta__actions">
195+
<Button
196+
className="googlesitekit-activate-analytics-cta__button--secondary"
197+
onClick={ () => dismissItem( dismissedItemSlug ) }
198+
tertiary
199+
>
200+
{ __( 'Maybe later', 'google-site-kit' ) }
201+
</Button>
123202
<SpinnerButton
203+
className="googlesitekit-activate-analytics-cta__button--primary"
124204
onClick={ onClickCallback }
125205
isSaving={ inProgress }
126206
disabled={ inProgress }
127207
>
128208
{ analyticsModuleActive
129209
? __( 'Complete setup', 'google-site-kit' )
130-
: __( 'Set up Google Analytics', 'google-site-kit' ) }
210+
: __( 'Set up Analytics', 'google-site-kit' ) }
131211
</SpinnerButton>
132212
</div>
133213
</div>
134214
);
135215
}
136216

137217
ActivateAnalyticsCTA.propTypes = {
138-
children: PropTypes.node.isRequired,
218+
children: PropTypes.node,
219+
dismissedItemSlug: PropTypes.string.isRequired,
139220
};

‎assets/js/components/ActivateAnalyticsCTA.stories.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* ActivateAnalyticsCTA stories.
3+
*
4+
* Site Kit by Google, Copyright 2026 Google LLC
5+
*
6+
* Licensed under the Apache License, Version 2.0 (the "License");
7+
* you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* https://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing, software
13+
* distributed under the License is distributed on an "AS IS" BASIS,
14+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15+
* See the License for the specific language governing permissions and
16+
* limitations under the License.
17+
*/
18+
19+
/**
20+
* Internal dependencies
21+
*/
22+
import {
23+
provideModuleRegistrations,
24+
provideModules,
25+
provideSiteInfo,
26+
provideUserAuthentication,
27+
provideUserCapabilities,
28+
} from '../../../tests/js/utils';
29+
import WithRegistrySetup from '../../../tests/js/WithRegistrySetup';
30+
import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
31+
import ActivateAnalyticsCTA from './ActivateAnalyticsCTA';
32+
33+
function Template( args ) {
34+
return <ActivateAnalyticsCTA { ...args } />;
35+
}
36+
37+
export const Default = Template.bind( {} );
38+
Default.storyName = 'Default';
39+
40+
export const WithSetupFlowRefreshSetUpAnalytics = Template.bind( {} );
41+
WithSetupFlowRefreshSetUpAnalytics.storyName =
42+
'Setup Flow Refresh - Set up Analytics';
43+
WithSetupFlowRefreshSetUpAnalytics.args = {
44+
dismissedItemSlug: 'analytics-setup-cta-search-funnel',
45+
};
46+
WithSetupFlowRefreshSetUpAnalytics.parameters = {
47+
features: [ 'setupFlowRefresh' ],
48+
};
49+
WithSetupFlowRefreshSetUpAnalytics.scenario = {};
50+
51+
export const WithSetupFlowRefreshCompleteSetup = Template.bind( {} );
52+
WithSetupFlowRefreshCompleteSetup.storyName =
53+
'Setup Flow Refresh - Complete Setup';
54+
WithSetupFlowRefreshCompleteSetup.args = {
55+
dismissedItemSlug: 'analytics-setup-cta-search-funnel',
56+
isAnalyticsActive: true,
57+
};
58+
WithSetupFlowRefreshCompleteSetup.parameters = {
59+
features: [ 'setupFlowRefresh' ],
60+
};
61+
62+
export default {
63+
title: 'Components/ActivateAnalyticsCTA',
64+
component: ActivateAnalyticsCTA,
65+
decorators: [
66+
( Story, { args } ) => {
67+
const analyticsActive = args?.isAnalyticsActive || false;
68+
69+
function setupRegistry( registry ) {
70+
provideModules( registry, [
71+
{
72+
slug: 'analytics-4',
73+
active: analyticsActive,
74+
connected: false,
75+
},
76+
{
77+
slug: 'search-console',
78+
active: true,
79+
connected: true,
80+
},
81+
] );
82+
provideModuleRegistrations( registry );
83+
provideSiteInfo( registry );
84+
provideUserAuthentication( registry );
85+
provideUserCapabilities( registry );
86+
registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
87+
}
88+
89+
return (
90+
<WithRegistrySetup func={ setupRegistry }>
91+
<div style={ { maxWidth: '600px' } }>
92+
<Story />
93+
</div>
94+
</WithRegistrySetup>
95+
);
96+
},
97+
],
98+
};

‎assets/js/components/adminbar/AdminBarActivateAnalyticsCTA.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,19 @@ import TrafficGraph from '@/svg/graphics/cta-graph-traffic.svg';
2828
import VisitorsGraph from '@/svg/graphics/cta-graph-visitors.svg';
2929
import AnalyticsCTA from '@/js/components/ActivateAnalyticsCTA';
3030
import PreviewGraph from '@/js/components/PreviewGraph';
31+
import { useFeature } from '@/js/hooks/useFeature';
3132

3233
export default function AdminBarActivateAnalyticsCTA() {
34+
const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
35+
36+
if ( setupFlowRefreshEnabled ) {
37+
return (
38+
<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-admin-bar" />
39+
);
40+
}
41+
3342
return (
34-
<AnalyticsCTA>
43+
<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-admin-bar">
3544
<PreviewGraph
3645
title={ __( 'Traffic', 'google-site-kit' ) }
3746
GraphSVG={ TrafficGraph }

‎assets/js/components/adminbar/AdminBarWidgets.stories.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
} from './common-GA4-stories';
3636
import { Provider as ViewContextProvider } from '@/js/components/Root/ViewContextContext';
3737
import { CORE_SITE } from '@/js/googlesitekit/datastore/site/constants';
38+
import { CORE_USER } from '@/js/googlesitekit/datastore/user/constants';
3839
import { VIEW_CONTEXT_ADMIN_BAR_VIEW_ONLY } from '@/js/googlesitekit/constants';
3940
import WithRegistrySetup from '../../../../tests/js/WithRegistrySetup';
4041
import AdminBarWidgets from './AdminBarWidgets';
@@ -100,6 +101,52 @@ AnalyticsInactiveNewCompleteActivation.args = {
100101
},
101102
};
102103

104+
export const WithSetupFlowRefreshSetUpAnalytics = Template.bind( {} );
105+
WithSetupFlowRefreshSetUpAnalytics.storyName =
106+
'Setup Flow Refresh - Set up Analytics CTA';
107+
WithSetupFlowRefreshSetUpAnalytics.args = {
108+
setupRegistry: ( registry ) => {
109+
provideUserAuthentication( registry );
110+
provideUserCapabilities( registry );
111+
provideModules( registry, [
112+
{
113+
slug: MODULE_SLUG_SEARCH_CONSOLE,
114+
active: true,
115+
connected: true,
116+
},
117+
] );
118+
provideModuleRegistrations( registry );
119+
registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
120+
setupSearchConsoleMockReports( registry );
121+
},
122+
};
123+
WithSetupFlowRefreshSetUpAnalytics.parameters = {
124+
features: [ 'setupFlowRefresh' ],
125+
};
126+
127+
export const WithSetupFlowRefreshCompleteSetup = Template.bind( {} );
128+
WithSetupFlowRefreshCompleteSetup.storyName =
129+
'Setup Flow Refresh - Complete Setup CTA';
130+
WithSetupFlowRefreshCompleteSetup.args = {
131+
setupRegistry: ( registry ) => {
132+
provideUserAuthentication( registry );
133+
provideUserCapabilities( registry );
134+
provideModules( registry, [
135+
{
136+
slug: MODULE_SLUG_ANALYTICS_4,
137+
active: true,
138+
connected: false,
139+
},
140+
] );
141+
provideModuleRegistrations( registry );
142+
registry.dispatch( CORE_USER ).receiveGetDismissedItems( [] );
143+
setupSearchConsoleMockReports( registry );
144+
},
145+
};
146+
WithSetupFlowRefreshCompleteSetup.parameters = {
147+
features: [ 'setupFlowRefresh' ],
148+
};
149+
103150
export const Analytics4WidgetsLoading = Template.bind( {} );
104151
Analytics4WidgetsLoading.storyName = 'GA4 Widgets Loading';
105152
Analytics4WidgetsLoading.args = {

‎assets/js/components/wp-dashboard/WPDashboardActivateAnalyticsCTA.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,19 @@ import TrafficGraph from '@/svg/graphics/cta-graph-traffic.svg';
2828
import MostPopularContent from '@/svg/graphics/cta-most-popular-content.svg';
2929
import AnalyticsCTA from '@/js/components/ActivateAnalyticsCTA';
3030
import PreviewGraph from '@/js/components/PreviewGraph';
31+
import { useFeature } from '@/js/hooks/useFeature';
3132

3233
export default function WPDashboardActivateAnalyticsCTA() {
34+
const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
35+
36+
if ( setupFlowRefreshEnabled ) {
37+
return (
38+
<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-wp-dashboard" />
39+
);
40+
}
41+
3342
return (
34-
<AnalyticsCTA>
43+
<AnalyticsCTA dismissedItemSlug="analytics-setup-cta-wp-dashboard">
3544
<PreviewGraph
3645
title={ __( 'Traffic', 'google-site-kit' ) }
3746
GraphSVG={ TrafficGraph }

0 commit comments

Comments
 (0)