Skip to content

Commit 25684c4

Browse files
hussain-thussain-t
authored
Merge pull request #12666 from google/enhancement/12460-analytics-setup-screen-mobile
Update the Analytics setup screen for mobile viewports.
2 parents 97688a3 + 2b5c051 commit 25684c4

12 files changed

Lines changed: 245 additions & 55 deletions

‎assets/js/components/setup/ModuleSetup.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -217,9 +217,15 @@ export default function ModuleSetup( { moduleSlug } ) {
217217
<HelpMenu />
218218
</Header>
219219
<div
220-
className={ classnames( 'googlesitekit-setup', {
221-
'googlesitekit-initial-setup': isInitialSetupFlow,
222-
} ) }
220+
className={ classnames(
221+
'googlesitekit-setup',
222+
...( isInitialSetupFlow
223+
? [
224+
'googlesitekit-initial-setup',
225+
`googlesitekit-initial-setup--${ moduleSlug }`,
226+
]
227+
: [] )
228+
) }
223229
>
224230
{ isInitialSetupFlow ? (
225231
setupMainContent

‎assets/js/components/setup/__snapshots__/ModuleSetup.test.js.snap‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ exports[`ModuleSetup Analytics 4 initial setup flow should match the snapshot 1`
167167
class="googlesitekit-subheader"
168168
/>
169169
<div
170-
class="googlesitekit-setup googlesitekit-initial-setup"
170+
class="googlesitekit-setup googlesitekit-initial-setup googlesitekit-initial-setup--analytics-4"
171171
>
172172
<div
173173
class="googlesitekit-progress-indicator"
@@ -225,9 +225,11 @@ exports[`ModuleSetup Analytics 4 initial setup flow should match the snapshot 1`
225225
Please select the account information below. You can change this later in your settings.
226226
</p>
227227
<div
228-
class="googlesitekit-setup-module__inputs"
228+
class="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout"
229229
>
230-
<div>
230+
<div
231+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account"
232+
>
231233
<div
232234
class="mdc-select googlesitekit-analytics__select-account mdc-select--outlined"
233235
>
@@ -269,7 +271,9 @@ exports[`ModuleSetup Analytics 4 initial setup flow should match the snapshot 1`
269271
</div>
270272
</div>
271273
</div>
272-
<div>
274+
<div
275+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property"
276+
>
273277
<div
274278
class="mdc-select googlesitekit-analytics-4__select-property googlesitekit-analytics-4__select-property--loaded mdc-select--outlined"
275279
>
@@ -325,7 +329,9 @@ exports[`ModuleSetup Analytics 4 initial setup flow should match the snapshot 1`
325329
</span>
326330
</div>
327331
</div>
328-
<div>
332+
<div
333+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream"
334+
>
329335
<div
330336
class="mdc-select googlesitekit-analytics-4__select-webdatastream mdc-select--outlined"
331337
>
@@ -689,9 +695,11 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
689695
Please select the account information below. You can change this later in your settings.
690696
</p>
691697
<div
692-
class="googlesitekit-setup-module__inputs"
698+
class="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout"
693699
>
694-
<div>
700+
<div
701+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account"
702+
>
695703
<div
696704
class="mdc-select googlesitekit-analytics__select-account mdc-select--outlined"
697705
>
@@ -732,7 +740,9 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
732740
</div>
733741
</div>
734742
</div>
735-
<div>
743+
<div
744+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property"
745+
>
736746
<div
737747
class="mdc-select googlesitekit-analytics-4__select-property googlesitekit-analytics-4__select-property--loaded mdc-select--outlined"
738748
>
@@ -773,7 +783,9 @@ exports[`ModuleSetup Analytics 4 not initial setup flow should match the snapsho
773783
</div>
774784
</div>
775785
</div>
776-
<div>
786+
<div
787+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream"
788+
>
777789
<div
778790
class="mdc-select googlesitekit-analytics-4__select-webdatastream mdc-select--outlined"
779791
>

‎assets/js/modules/analytics-4/components/common/AccountCreate/__snapshots__/index.test.js.snap‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,10 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
4545
We’ve pre-filled the required information for your new account. Confirm or edit any details:
4646
</p>
4747
<div
48-
class="googlesitekit-setup-module__inputs"
48+
class="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout"
4949
>
5050
<div
51-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
51+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
5252
>
5353
<div
5454
class="mdc-text-field mdc-text-field mdc-text-field--outlined"
@@ -83,7 +83,7 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
8383
</div>
8484
</div>
8585
<div
86-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
86+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
8787
>
8888
<div
8989
class="mdc-text-field mdc-text-field mdc-text-field--outlined"
@@ -118,7 +118,7 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
118118
</div>
119119
</div>
120120
<div
121-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
121+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
122122
>
123123
<div
124124
class="mdc-text-field mdc-text-field mdc-text-field--outlined"
@@ -154,10 +154,10 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
154154
</div>
155155
</div>
156156
<div
157-
class="googlesitekit-setup-module__inputs"
157+
class="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout"
158158
>
159159
<div
160-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
160+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--country mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
161161
>
162162
<div
163163
class="mdc-select googlesitekit-analytics__select-country mdc-select--outlined"
@@ -201,7 +201,7 @@ exports[`AccountCreate renders correctly when data has loaded 1`] = `
201201
</div>
202202
</div>
203203
<div
204-
class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
204+
class="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--timezone mdc-layout-grid__cell mdc-layout-grid__cell--span-6"
205205
>
206206
<div
207207
class="mdc-select googlesitekit-analytics__select-timezone mdc-select--outlined"

‎assets/js/modules/analytics-4/components/common/AccountCreate/index.js‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -275,24 +275,40 @@ export default function AccountCreate( { className } ) {
275275
) }
276276
</P>
277277

278-
<div className="googlesitekit-setup-module__inputs">
279-
<Cell size={ 6 }>
278+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout">
279+
<Cell
280+
size={ 6 }
281+
className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account"
282+
>
280283
<AccountField />
281284
</Cell>
282-
<Cell size={ 6 }>
285+
<Cell
286+
size={ 6 }
287+
className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property"
288+
>
283289
<PropertyField />
284290
</Cell>
285-
<Cell size={ 6 }>
291+
<Cell
292+
size={ 6 }
293+
className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream"
294+
>
286295
<WebDataStreamField />
287296
</Cell>
288297
</div>
289298

290-
<div className="googlesitekit-setup-module__inputs">
291-
<Cell size={ 6 }>
299+
{ /* <div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--analytics-location"> */ }
300+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout">
301+
<Cell
302+
size={ 6 }
303+
className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--country"
304+
>
292305
<CountrySelect />
293306
</Cell>
294307

295-
<Cell size={ 6 }>
308+
<Cell
309+
size={ 6 }
310+
className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--timezone"
311+
>
296312
<TimezoneSelect />
297313
</Cell>
298314
</div>

‎assets/js/modules/analytics-4/components/settings/SettingsControls.js‎

Lines changed: 52 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
*/
2222
import PropTypes from 'prop-types';
2323

24+
/**
25+
* WordPress dependencies
26+
*/
27+
import { Fragment } from '@wordpress/element';
28+
2429
/**
2530
* Internal dependencies
2631
*/
@@ -39,8 +44,11 @@ import SettingsUseSnippetSwitch from './SettingsUseSnippetSwitch';
3944
import StoreErrorNotices from '@/js/components/StoreErrorNotices';
4045
import AnalyticsSettingsNotice from './AnalyticsSettingsNotice';
4146
import PropertyOrWebDataStreamNotAvailableError from './PropertyOrWebDataStreamNotAvailableError';
47+
import { useFeature } from '@/js/hooks/useFeature';
4248

4349
export default function SettingsControls( props ) {
50+
const setupFlowRefreshEnabled = useFeature( 'setupFlowRefresh' );
51+
4452
const { hasModuleAccess } = props;
4553

4654
const propertyID = useSelect( ( select ) =>
@@ -62,24 +70,53 @@ export default function SettingsControls( props ) {
6270
isDisabled={ ! propertyID }
6371
/>
6472

65-
<div className="googlesitekit-setup-module__inputs">
66-
<AccountSelect hasModuleAccess={ hasModuleAccess } />
67-
<PropertySelect
68-
hasModuleAccess={ hasModuleAccess }
69-
isDisabled={ ! propertyID }
70-
/>
71-
<WebDataStreamSelect
72-
hasModuleAccess={ hasModuleAccess }
73-
isDisabled={ ! propertyID }
74-
/>
75-
</div>
76-
77-
{ webDataStreamID === WEBDATASTREAM_CREATE && (
78-
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
79-
<WebDataStreamNameInput />
73+
{ setupFlowRefreshEnabled && (
74+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout">
75+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account">
76+
<AccountSelect hasModuleAccess={ hasModuleAccess } />
77+
</div>
78+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property">
79+
<PropertySelect
80+
hasModuleAccess={ hasModuleAccess }
81+
isDisabled={ ! propertyID }
82+
/>
83+
</div>
84+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream">
85+
<WebDataStreamSelect
86+
hasModuleAccess={ hasModuleAccess }
87+
isDisabled={ ! propertyID }
88+
/>
89+
</div>
90+
{ webDataStreamID === WEBDATASTREAM_CREATE && (
91+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream-name">
92+
<WebDataStreamNameInput />
93+
</div>
94+
) }
8095
</div>
8196
) }
8297

98+
{ ! setupFlowRefreshEnabled && (
99+
<Fragment>
100+
<div className="googlesitekit-setup-module__inputs">
101+
<AccountSelect hasModuleAccess={ hasModuleAccess } />
102+
<PropertySelect
103+
hasModuleAccess={ hasModuleAccess }
104+
isDisabled={ ! propertyID }
105+
/>
106+
<WebDataStreamSelect
107+
hasModuleAccess={ hasModuleAccess }
108+
isDisabled={ ! propertyID }
109+
/>
110+
</div>
111+
112+
{ webDataStreamID === WEBDATASTREAM_CREATE && (
113+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
114+
<WebDataStreamNameInput />
115+
</div>
116+
) }
117+
</Fragment>
118+
) }
119+
83120
<AnalyticsSettingsNotice
84121
hasModuleAccess={ hasModuleAccess }
85122
className="googlesitekit-margin-top-0"

‎assets/js/modules/analytics-4/components/setup/SetupFormFields.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -96,21 +96,21 @@ export default function SetupFormFields() {
9696
</p>
9797
) }
9898

99-
<div className="googlesitekit-setup-module__inputs">
100-
<div>
99+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout">
100+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--account">
101101
<AccountSelect
102102
onChange={ resetEnhancedMeasurementSetting }
103103
/>
104104
</div>
105-
<div>
105+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--property">
106106
<PropertySelect
107107
onChange={ resetEnhancedMeasurementSetting }
108108
hasModuleAccess
109109
/>
110110
{ setupFlowRefreshEnabled &&
111111
isValidAccountID( accountID ) && <PropertyHint /> }
112112
</div>
113-
<div>
113+
<div className="googlesitekit-setup-module__input-wrapper googlesitekit-setup-module__input-wrapper--webdatastream">
114114
<WebDataStreamSelect
115115
onChange={ resetEnhancedMeasurementSetting }
116116
hasModuleAccess
@@ -121,7 +121,7 @@ export default function SetupFormFields() {
121121
</div>
122122

123123
{ webDataStreamID === WEBDATASTREAM_CREATE && (
124-
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--multiline">
124+
<div className="googlesitekit-setup-module__inputs googlesitekit-setup-module__inputs--grid-layout googlesitekit-setup-module__inputs--multiline">
125125
<WebDataStreamNameInput />
126126
</div>
127127
) }

0 commit comments

Comments
 (0)