Add core profiler user profile page (#38328)
This commit is contained in:
Chi-Hsuan Huang
GitHub
parent
6d4014042b
commit
4547922f3f
|
|
@ -0,0 +1,4 @@
|
|||
Significance: patch
|
||||
Type: add
|
||||
|
||||
Add onKeyDown and readOnlyWhenClosed options to experimentalSelectControl
|
||||
|
|
@ -105,4 +105,6 @@ Name | Type | Default | Description
|
|||
`onInputChange` | Function | `() => null` | A callback that fires when the user input has changed
|
||||
`onRemove` | Function | `() => null` | A callback that fires when a selected item has been removed
|
||||
`onSelect` | Function | `() => null` | A callback that fires when an item has been selected
|
||||
`selected` | Array or Item | `undefined` | An array of selected items or a single selected item
|
||||
`selected` | Array or Item | `undefined` | An array of selected items or a single selected item\
|
||||
`onKeyDown` | Function | `() => null` | A callback that fires when a key is pressed
|
||||
`readOnlyWhenClosed` | Boolean | `false` | Whether the input should be read-only when the menu is closed
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@ export type SelectControlProps< ItemType > = {
|
|||
) => void;
|
||||
onRemove?: ( item: ItemType ) => void;
|
||||
onSelect?: ( selected: ItemType ) => void;
|
||||
onKeyDown?: ( e: KeyboardEvent ) => void;
|
||||
onFocus?: ( data: { inputValue: string } ) => void;
|
||||
stateReducer?: (
|
||||
state: UseComboboxState< ItemType | null >,
|
||||
|
|
@ -70,6 +71,8 @@ export type SelectControlProps< ItemType > = {
|
|||
inputProps?: GetInputPropsOptions;
|
||||
suffix?: JSX.Element | null;
|
||||
showToggleButton?: boolean;
|
||||
readOnlyWhenClosed?: boolean;
|
||||
|
||||
/**
|
||||
* This is a feature already implemented in downshift@7.0.0 through the
|
||||
* reducer. In order for us to use it this prop is added temporarily until
|
||||
|
|
@ -118,6 +121,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
onRemove = () => null,
|
||||
onSelect = () => null,
|
||||
onFocus = () => null,
|
||||
onKeyDown = () => null,
|
||||
stateReducer = ( state, actionAndChanges ) => actionAndChanges.changes,
|
||||
placeholder,
|
||||
selected,
|
||||
|
|
@ -126,6 +130,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
inputProps = {},
|
||||
suffix = <SuffixIcon icon={ chevronDown } />,
|
||||
showToggleButton = false,
|
||||
readOnlyWhenClosed = true,
|
||||
__experimentalOpenMenuOnFocus = false,
|
||||
}: SelectControlProps< ItemType > ) {
|
||||
const [ isFocused, setIsFocused ] = useState( false );
|
||||
|
|
@ -247,7 +252,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
onRemove( item );
|
||||
};
|
||||
|
||||
const isReadOnly = ! isOpen && ! isFocused;
|
||||
const isReadOnly = readOnlyWhenClosed && ! isOpen && ! isFocused;
|
||||
|
||||
const selectedItemTags = multiple ? (
|
||||
<SelectedItems
|
||||
|
|
@ -305,6 +310,7 @@ function SelectControl< ItemType = DefaultItemType >( {
|
|||
setIsFocused( false );
|
||||
}
|
||||
},
|
||||
onKeyDown,
|
||||
placeholder,
|
||||
disabled,
|
||||
...inputProps,
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { setLocaleData } from '@wordpress/i18n';
|
|||
import { registerStore } from '@wordpress/data';
|
||||
import 'regenerator-runtime/runtime';
|
||||
|
||||
// Mock the config module to avoid errors like:
|
||||
// Core Error: Could not find config value for key ${ key }. Please make sure that if you need it then it has a default value assigned in config/_shared.json.
|
||||
jest.mock( '@automattic/calypso-config' );
|
||||
|
||||
// Due to the dependency @wordpress/compose which introduces the use of
|
||||
// ResizeObserver this global mock is required for some tests to work.
|
||||
global.ResizeObserver = require( 'resize-observer-polyfill' );
|
||||
|
|
|
|||
|
|
@ -0,0 +1,74 @@
|
|||
.woocommerce-profiler-choice-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: $gap-large $gap;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&[data-selected] {
|
||||
border: 2px solid var(--wp-admin-theme-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
border: 2px solid var(--wp-admin-theme-color);
|
||||
padding: $gap-large $gap;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-choice {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.woocommerce-profiler-choice-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $gray-900;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
input + label::before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid $gray-600;
|
||||
border-radius: 16px;
|
||||
margin-right: $gap;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
input[data-selected] + label::before {
|
||||
border-color: var(--wp-admin-theme-color);
|
||||
}
|
||||
|
||||
input[data-selected] + label::after {
|
||||
background-color: var(--wp-admin-theme-color);
|
||||
align-self: center;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-choice-sub-options {
|
||||
margin-top: $gap-large;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classNames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './choice.scss';
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
selected: boolean;
|
||||
title: string;
|
||||
name: string;
|
||||
value: string;
|
||||
onChange: ( value: string ) => void;
|
||||
subOptionsComponent?: React.ReactNode;
|
||||
};
|
||||
|
||||
export const Choice = ( {
|
||||
className,
|
||||
selected,
|
||||
title,
|
||||
name,
|
||||
value,
|
||||
onChange,
|
||||
subOptionsComponent = null,
|
||||
}: Props ) => {
|
||||
const changeHandler = () => {
|
||||
onChange( value );
|
||||
};
|
||||
const inputId = 'woocommerce-' + value.replace( /_/g, '-' );
|
||||
|
||||
return (
|
||||
<div
|
||||
role="radio"
|
||||
className={ classNames(
|
||||
'woocommerce-profiler-choice-container',
|
||||
className
|
||||
) }
|
||||
onClick={ changeHandler }
|
||||
onKeyDown={ ( e ) => {
|
||||
if ( e.key === 'Enter' ) {
|
||||
changeHandler();
|
||||
}
|
||||
} }
|
||||
data-selected={ selected ? selected : null }
|
||||
tabIndex={ 0 }
|
||||
>
|
||||
<div className="woocommerce-profiler-choice">
|
||||
<input
|
||||
className="woocommerce-profiler-choice-input"
|
||||
id={ inputId }
|
||||
name={ name }
|
||||
type="radio"
|
||||
value={ value }
|
||||
checked={ !! selected }
|
||||
onChange={ changeHandler }
|
||||
data-selected={ selected ? selected : null }
|
||||
// Stop the input from being focused when the parent div is clicked
|
||||
tabIndex={ -1 }
|
||||
></input>
|
||||
<label htmlFor={ inputId } className="choice__title">
|
||||
{ title }
|
||||
</label>
|
||||
</div>
|
||||
{ selected && subOptionsComponent && (
|
||||
<div className="woocommerce-profiler-choice-sub-options">
|
||||
{ subOptionsComponent }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,7 +1,11 @@
|
|||
.woocommerce-profiler-heading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 48px;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
width: 100%;
|
||||
|
||||
.woocommerce-profiler-heading__title {
|
||||
font-style: normal;
|
||||
|
|
@ -31,4 +35,30 @@
|
|||
color: $gray-800;
|
||||
}
|
||||
}
|
||||
|
||||
&.woocommerce-profiler__stepper-heading {
|
||||
margin-top: 72px;
|
||||
|
||||
.woocommerce-profiler-heading__title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.woocommerce-profiler-heading__subtitle {
|
||||
margin: 12px 0 0;
|
||||
}
|
||||
|
||||
@media (max-width: #{ ($break-mobile) }) {
|
||||
margin-top: 52px 0 40px;
|
||||
|
||||
.woocommerce-profiler-heading__title {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
.woocommerce-profiler-heading__subtitle {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
|
||||
.woocommerce-experimental-select-control {
|
||||
&:hover,
|
||||
ul:hover,
|
||||
.woocommerce-experimental-select-control__input:hover,
|
||||
.components-popover:hover,
|
||||
.woocommerce-experimental-select-control__combo-box-wrapper:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.has-selected-items {
|
||||
.woocommerce-experimental-select-control__combox-box {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-experimental-select-control__combox-box .woocommerce-experimental-select-control__input {
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.components-popover.woocommerce-experimental-select-control__popover-menu {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.woocommerce-experimental-select-control__selected-item {
|
||||
background: $gray-100;
|
||||
padding: 2px 5px 2px 8px;
|
||||
}
|
||||
|
||||
.woocommerce-tag .woocommerce-tag__text {
|
||||
background: none !important;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.woocommerce-experimental-select-control__combo-box-wrapper {
|
||||
transition: box-shadow 0.25s linear;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.woocommerce-experimental-select-control__popover-menu {
|
||||
border: none;
|
||||
left: 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.woocommerce-experimental-select-control__popover-menu-container {
|
||||
overflow-y: initial;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.components-popover {
|
||||
transform: none !important;
|
||||
|
||||
.components-popover__content {
|
||||
transform: none;
|
||||
width: 100%;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 2px;
|
||||
overflow-x: hidden !important;
|
||||
|
||||
ul li {
|
||||
&:hover {
|
||||
background-color: #eff2fd !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.components-base-control__field {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.components-checkbox-control__label {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: normal !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.components-checkbox-control__input-container {
|
||||
border: 1px solid #757575;
|
||||
border-radius: 2px;
|
||||
height: 20px !important;
|
||||
padding: 1px;
|
||||
width: 20px !important;
|
||||
|
||||
.components-checkbox-control__input[type='checkbox'] {
|
||||
border: none;
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
&:checked {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 20px;
|
||||
top: -1px;
|
||||
width: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import {
|
||||
__experimentalSelectControl as SelectControl,
|
||||
selectControlStateChangeTypes,
|
||||
} from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { renderMenu } from './render-menu';
|
||||
import './multiple-selector.scss';
|
||||
|
||||
type Props = {
|
||||
options: Array< { label: string; value: string } >;
|
||||
onSelect: (
|
||||
selectedOptions: Array< { label: string; value: string } >
|
||||
) => void;
|
||||
selectedOptions?: Array< { label: string; value: string } >;
|
||||
placeholder?: string;
|
||||
onOpenClose?: ( isOpen: boolean ) => void;
|
||||
};
|
||||
|
||||
export const MultipleSelector = ( {
|
||||
options,
|
||||
onSelect,
|
||||
selectedOptions = [],
|
||||
placeholder = __( 'Select platforms', 'woocommerce' ),
|
||||
onOpenClose = () => {},
|
||||
}: Props ) => {
|
||||
return (
|
||||
<SelectControl
|
||||
label=""
|
||||
multiple
|
||||
__experimentalOpenMenuOnFocus
|
||||
readOnlyWhenClosed={ false }
|
||||
items={ options }
|
||||
getFilteredItems={ ( allItems ) => allItems }
|
||||
selected={ selectedOptions }
|
||||
inputProps={ {
|
||||
'aria-readonly': true,
|
||||
'aria-label': __(
|
||||
'Use up and down arrow keys to navigate',
|
||||
'woocommerce'
|
||||
),
|
||||
} }
|
||||
onKeyDown={ ( e ) => {
|
||||
if ( e.key.length <= 1 ) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
} }
|
||||
placeholder={ selectedOptions.length ? '' : placeholder }
|
||||
stateReducer={ ( state, actionAndChanges ) => {
|
||||
const { changes, type } = actionAndChanges;
|
||||
switch ( type ) {
|
||||
case selectControlStateChangeTypes.ControlledPropUpdatedSelectedItem:
|
||||
return {
|
||||
...changes,
|
||||
inputValue: state.inputValue,
|
||||
};
|
||||
case selectControlStateChangeTypes.ItemClick:
|
||||
return {
|
||||
...changes,
|
||||
isOpen: true,
|
||||
inputValue: state.inputValue,
|
||||
highlightedIndex: state.highlightedIndex,
|
||||
};
|
||||
default:
|
||||
return changes;
|
||||
}
|
||||
} }
|
||||
onSelect={ ( item ) => {
|
||||
if ( ! item ) {
|
||||
return;
|
||||
}
|
||||
const exist = selectedOptions.find(
|
||||
( existingItem ) => existingItem.value === item.value
|
||||
);
|
||||
const updatedPlatforms = exist
|
||||
? selectedOptions.filter(
|
||||
( existingItem ) =>
|
||||
existingItem.value !== item.value
|
||||
)
|
||||
: [ ...selectedOptions, item ];
|
||||
onSelect( updatedPlatforms );
|
||||
} }
|
||||
onRemove={ ( item ) =>
|
||||
onSelect( selectedOptions.filter( ( i ) => i !== item ) )
|
||||
}
|
||||
>
|
||||
{ renderMenu( { selectedOptions, onOpenClose } ) }
|
||||
</SelectControl>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { CheckboxControl } from '@wordpress/components';
|
||||
import { useEffect } from '@wordpress/element';
|
||||
import {
|
||||
__experimentalSelectControlMenu as Menu,
|
||||
__experimentalSelectControlMenuItem as MenuItem,
|
||||
} from '@woocommerce/components';
|
||||
import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types';
|
||||
|
||||
type Props = {
|
||||
selectedOptions: Array< { label: string; value: string } >;
|
||||
onOpenClose: ( isOpen: boolean ) => void;
|
||||
};
|
||||
|
||||
export const renderMenu =
|
||||
( { selectedOptions, onOpenClose }: Props ) =>
|
||||
( {
|
||||
items,
|
||||
highlightedIndex,
|
||||
isOpen,
|
||||
getItemProps,
|
||||
getMenuProps,
|
||||
}: ChildrenProps< {
|
||||
label: string;
|
||||
value: string;
|
||||
} > ) => {
|
||||
useEffect( () => {
|
||||
onOpenClose( isOpen );
|
||||
}, [ isOpen ] );
|
||||
|
||||
return (
|
||||
<Menu
|
||||
isOpen={ isOpen }
|
||||
getMenuProps={ getMenuProps }
|
||||
scrollIntoViewOnOpen={ true }
|
||||
>
|
||||
{ items.map( ( item, menuIndex ) => {
|
||||
const isSelected = selectedOptions.includes( item );
|
||||
return (
|
||||
<MenuItem
|
||||
key={ `${ item.value }` }
|
||||
index={ menuIndex }
|
||||
item={ item }
|
||||
getItemProps={ getItemProps }
|
||||
isActive={ highlightedIndex === menuIndex }
|
||||
activeStyle={ {
|
||||
backgroundColor: '#f6f7f7',
|
||||
} }
|
||||
>
|
||||
<CheckboxControl
|
||||
onChange={ () => {} }
|
||||
checked={ isSelected }
|
||||
label={ item.label }
|
||||
/>
|
||||
</MenuItem>
|
||||
);
|
||||
} ) }
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
|
@ -22,7 +22,12 @@ import { initializeExPlat } from '@woocommerce/explat';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import { IntroOptIn } from './pages/IntroOptIn';
|
||||
import { UserProfile } from './pages/UserProfile';
|
||||
import {
|
||||
UserProfile,
|
||||
BusinessChoice,
|
||||
SellingOnlineAnswer,
|
||||
SellingPlatform,
|
||||
} from './pages/UserProfile';
|
||||
import { BusinessInfo } from './pages/BusinessInfo';
|
||||
import { BusinessLocation } from './pages/BusinessLocation';
|
||||
import { getCountryStateOptions } from './services/country';
|
||||
|
|
@ -76,9 +81,22 @@ export type ExtensionsEvent = {
|
|||
};
|
||||
};
|
||||
|
||||
// TODO: add types as we develop the pages
|
||||
export type OnboardingProfile = {
|
||||
business_choice: BusinessChoice;
|
||||
selling_online_answer: SellingOnlineAnswer | null;
|
||||
selling_platforms: SellingPlatform[] | null;
|
||||
skip?: boolean;
|
||||
};
|
||||
|
||||
export type CoreProfilerStateMachineContext = {
|
||||
optInDataSharing: boolean;
|
||||
userProfile: { foo: { bar: 'qux' }; skipped: false } | { skipped: true };
|
||||
userProfile: {
|
||||
businessChoice?: BusinessChoice;
|
||||
sellingOnlineAnswer?: SellingOnlineAnswer | null;
|
||||
sellingPlatforms?: SellingPlatform[] | null;
|
||||
skipped?: boolean;
|
||||
};
|
||||
geolocatedLocation: {
|
||||
location: string;
|
||||
};
|
||||
|
|
@ -126,6 +144,36 @@ const handleCountries = assign( {
|
|||
},
|
||||
} );
|
||||
|
||||
const getOnboardingProfileOption = async () =>
|
||||
resolveSelect( OPTIONS_STORE_NAME ).getOption(
|
||||
'woocommerce_onboarding_profile'
|
||||
);
|
||||
|
||||
const handleOnboardingProfileOption = assign( {
|
||||
userProfile: (
|
||||
_context,
|
||||
event: DoneInvokeEvent< OnboardingProfile | undefined >
|
||||
) => {
|
||||
if ( ! event.data ) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const {
|
||||
business_choice: businessChoice,
|
||||
selling_online_answer: sellingOnlineAnswer,
|
||||
selling_platforms: sellingPlatforms,
|
||||
...rest
|
||||
} = event.data;
|
||||
|
||||
return {
|
||||
...rest,
|
||||
businessChoice,
|
||||
sellingOnlineAnswer,
|
||||
sellingPlatforms,
|
||||
};
|
||||
},
|
||||
} );
|
||||
|
||||
const redirectToWooHome = () => {
|
||||
navigateTo( { url: getNewPath( {}, '/', {} ) } );
|
||||
};
|
||||
|
|
@ -148,6 +196,35 @@ const recordTracksIntroViewed = () => {
|
|||
} );
|
||||
};
|
||||
|
||||
const recordTracksUserProfileViewed = () => {
|
||||
recordEvent( 'storeprofiler_step_view', {
|
||||
step: 'user_profile',
|
||||
wc_version: getSetting( 'wcVersion' ),
|
||||
} );
|
||||
};
|
||||
|
||||
const recordTracksUserProfileCompleted = (
|
||||
_context: CoreProfilerStateMachineContext,
|
||||
event: Extract< UserProfileEvent, { type: 'USER_PROFILE_COMPLETED' } >
|
||||
) => {
|
||||
recordEvent( 'storeprofiler_step_complete', {
|
||||
step: 'user_profile',
|
||||
wc_version: getSetting( 'wcVersion' ),
|
||||
} );
|
||||
|
||||
recordEvent( 'storeprofiler_user_profile', {
|
||||
business_choice: event.payload.userProfile.businessChoice,
|
||||
selling_online_answer: event.payload.userProfile.sellingOnlineAnswer,
|
||||
selling_platforms: event.payload.userProfile.sellingPlatforms
|
||||
? event.payload.userProfile.sellingPlatforms.join()
|
||||
: null,
|
||||
} );
|
||||
};
|
||||
|
||||
const recordTracksUserProfileSkipped = () => {
|
||||
recordEvent( 'storeprofiler_user_profile_skip' );
|
||||
};
|
||||
|
||||
const recordTracksSkipBusinessLocationViewed = () => {
|
||||
recordEvent( 'storeprofiler_step_view', {
|
||||
step: 'skip_business_location',
|
||||
|
|
@ -183,6 +260,22 @@ const updateTrackingOption = (
|
|||
} );
|
||||
};
|
||||
|
||||
const updateOnboardingProfileOption = (
|
||||
context: CoreProfilerStateMachineContext
|
||||
) => {
|
||||
const { businessChoice, sellingOnlineAnswer, sellingPlatforms, ...rest } =
|
||||
context.userProfile;
|
||||
|
||||
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
|
||||
woocommerce_onboarding_profile: {
|
||||
...rest,
|
||||
business_choice: businessChoice,
|
||||
selling_online_answer: sellingOnlineAnswer,
|
||||
selling_platforms: sellingPlatforms,
|
||||
},
|
||||
} );
|
||||
};
|
||||
|
||||
const updateBusinessLocation = ( countryAndState: string ) => {
|
||||
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
|
||||
woocommerce_default_country: countryAndState,
|
||||
|
|
@ -238,10 +331,14 @@ const coreProfilerMachineActions = {
|
|||
recordTracksIntroCompleted,
|
||||
recordTracksIntroSkipped,
|
||||
recordTracksIntroViewed,
|
||||
recordTracksUserProfileCompleted,
|
||||
recordTracksUserProfileSkipped,
|
||||
recordTracksUserProfileViewed,
|
||||
recordTracksSkipBusinessLocationViewed,
|
||||
recordTracksSkipBusinessLocationCompleted,
|
||||
assignOptInDataSharing,
|
||||
handleCountries,
|
||||
handleOnboardingProfileOption,
|
||||
redirectToWooHome,
|
||||
};
|
||||
|
||||
|
|
@ -249,6 +346,7 @@ const coreProfilerMachineServices = {
|
|||
getAllowTrackingOption,
|
||||
getCountries,
|
||||
getExtensions,
|
||||
getOnboardingProfileOption,
|
||||
};
|
||||
export const coreProfilerStateMachineDefinition = createMachine( {
|
||||
id: 'coreProfiler',
|
||||
|
|
@ -296,7 +394,7 @@ export const coreProfilerStateMachineDefinition = createMachine( {
|
|||
introOptIn: {
|
||||
on: {
|
||||
INTRO_COMPLETED: {
|
||||
target: 'userProfile',
|
||||
target: 'preUserProfile',
|
||||
actions: [
|
||||
'assignOptInDataSharing',
|
||||
'updateTrackingOption',
|
||||
|
|
@ -328,10 +426,25 @@ export const coreProfilerStateMachineDefinition = createMachine( {
|
|||
component: IntroOptIn,
|
||||
},
|
||||
},
|
||||
preUserProfile: {
|
||||
invoke: {
|
||||
src: 'getOnboardingProfileOption',
|
||||
onDone: [
|
||||
{
|
||||
actions: [ 'handleOnboardingProfileOption' ],
|
||||
target: 'userProfile',
|
||||
},
|
||||
],
|
||||
onError: {
|
||||
target: 'userProfile',
|
||||
},
|
||||
},
|
||||
},
|
||||
userProfile: {
|
||||
entry: [ 'recordTracksUserProfileViewed' ],
|
||||
on: {
|
||||
USER_PROFILE_COMPLETED: {
|
||||
target: 'preBusinessInfo',
|
||||
target: 'postUserProfile',
|
||||
actions: [
|
||||
assign( {
|
||||
userProfile: ( context, event: UserProfileEvent ) =>
|
||||
|
|
@ -340,7 +453,7 @@ export const coreProfilerStateMachineDefinition = createMachine( {
|
|||
],
|
||||
},
|
||||
USER_PROFILE_SKIPPED: {
|
||||
target: 'preBusinessInfo',
|
||||
target: 'postUserProfile',
|
||||
actions: [
|
||||
assign( {
|
||||
userProfile: ( context, event: UserProfileEvent ) =>
|
||||
|
|
@ -349,11 +462,36 @@ export const coreProfilerStateMachineDefinition = createMachine( {
|
|||
],
|
||||
},
|
||||
},
|
||||
exit: actions.choose( [
|
||||
{
|
||||
cond: ( _context, event ) =>
|
||||
event.type === 'USER_PROFILE_COMPLETED',
|
||||
actions: 'recordTracksUserProfileCompleted',
|
||||
},
|
||||
{
|
||||
cond: ( _context, event ) =>
|
||||
event.type === 'USER_PROFILE_SKIPPED',
|
||||
actions: 'recordTracksUserProfileSkipped',
|
||||
},
|
||||
] ),
|
||||
meta: {
|
||||
progress: 40,
|
||||
component: UserProfile,
|
||||
},
|
||||
},
|
||||
postUserProfile: {
|
||||
invoke: {
|
||||
src: ( context ) => {
|
||||
return updateOnboardingProfileOption( context );
|
||||
},
|
||||
onDone: {
|
||||
target: 'preBusinessInfo',
|
||||
},
|
||||
onError: {
|
||||
target: 'preBusinessInfo',
|
||||
},
|
||||
},
|
||||
},
|
||||
preBusinessInfo: {
|
||||
always: [
|
||||
// immediately transition to businessInfo without any events as long as geolocation parallel has completed
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export const BusinessLocation = ( {
|
|||
<Navigation percentage={ navigationProgress } />
|
||||
<div className="woocommerce-profiler-page__content woocommerce-profiler-business-location__content">
|
||||
<Heading
|
||||
className="woocommerce-profiler__stepper-heading"
|
||||
title={ __(
|
||||
'Where is your business located?',
|
||||
'woocommerce'
|
||||
|
|
@ -74,9 +75,9 @@ export const BusinessLocation = ( {
|
|||
showAllOnFocus
|
||||
isSearchable
|
||||
/>
|
||||
<div className="woocommerce-profiler-go-to-mystore__button-container">
|
||||
<div className="woocommerce-profiler-button-container woocommerce-profiler-go-to-mystore__button-container">
|
||||
<Button
|
||||
className="woocommerce-profiler-go-to-mystore__button"
|
||||
className="woocommerce-profiler-button"
|
||||
variant="primary"
|
||||
disabled={ ! storeCountry.key }
|
||||
onClick={ () => {
|
||||
|
|
|
|||
|
|
@ -1,41 +1,299 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { SelectControl } from '@woocommerce/components';
|
||||
import { Icon, chevronDown } from '@wordpress/icons';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { UserProfileEvent } from '../index';
|
||||
import { UserProfileEvent, CoreProfilerStateMachineContext } from '../index';
|
||||
import { Navigation } from '../components/navigation/navigation';
|
||||
import { Heading } from '../components/heading/heading';
|
||||
import { Choice } from '../components/choice/choice';
|
||||
import { MultipleSelector } from '../components/multiple-selector/multiple-selector';
|
||||
|
||||
const businessOptions = [
|
||||
{
|
||||
title: __( "I'm just starting my business", 'woocommerce' ),
|
||||
value: 'im_just_starting_my_business' as const,
|
||||
},
|
||||
{
|
||||
title: __( "I'm already selling", 'woocommerce' ),
|
||||
value: 'im_already_selling' as const,
|
||||
},
|
||||
{
|
||||
title: __( "I'm setting up a store for a client", 'woocommerce' ),
|
||||
value: 'im_setting_up_a_store_for_a_client' as const,
|
||||
},
|
||||
];
|
||||
|
||||
const sellingOnlineOptions = [
|
||||
{
|
||||
label: __( "Yes, I'm selling online", 'woocommerce' ),
|
||||
value: 'yes_im_selling_online' as const,
|
||||
key: 'yes_im_selling_online' as const,
|
||||
},
|
||||
{
|
||||
label: __( "No, I'm selling offline", 'woocommerce' ),
|
||||
value: 'no_im_selling_offline' as const,
|
||||
key: 'no_im_selling_offline' as const,
|
||||
},
|
||||
{
|
||||
label: __( "I'm selling both online and offline", 'woocommerce' ),
|
||||
value: 'im_selling_both_online_and_offline' as const,
|
||||
key: 'im_selling_both_online_and_offline' as const,
|
||||
},
|
||||
];
|
||||
|
||||
const platformOptions = [
|
||||
{
|
||||
label: __( 'Amazon', 'woocommerce' ),
|
||||
value: 'amazon' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Adobe Commerce', 'woocommerce' ),
|
||||
value: 'adobe_commerce' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Big Cartel', 'woocommerce' ),
|
||||
value: 'big_cartel' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Big Commerce', 'woocommerce' ),
|
||||
value: 'big_commerce' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Ebay', 'woocommerce' ),
|
||||
value: 'ebay' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Ecwid', 'woocommerce' ),
|
||||
value: 'ecwid' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Etsy', 'woocommerce' ),
|
||||
value: 'etsy' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Facebook Marketplace', 'woocommerce' ),
|
||||
value: 'facebook_marketplace' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Google Shopping', 'woocommerce' ),
|
||||
value: 'google_shopping' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Pinterest', 'woocommerce' ),
|
||||
value: 'pinterest' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Shopify', 'woocommerce' ),
|
||||
value: 'shopify' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Square', 'woocommerce' ),
|
||||
value: 'square' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Squarespace', 'woocommerce' ),
|
||||
value: 'squarespace' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'Wix', 'woocommerce' ),
|
||||
value: 'wix' as const,
|
||||
},
|
||||
{
|
||||
label: __( 'WordPress', 'woocommerce' ),
|
||||
value: 'wordpress' as const,
|
||||
},
|
||||
];
|
||||
|
||||
export type BusinessChoice = typeof businessOptions[ 0 ][ 'value' ];
|
||||
export type SellingOnlineAnswer = typeof sellingOnlineOptions[ 0 ][ 'value' ];
|
||||
export type SellingPlatform = typeof platformOptions[ 0 ][ 'value' ];
|
||||
|
||||
export const UserProfile = ( {
|
||||
sendEvent,
|
||||
navigationProgress,
|
||||
context,
|
||||
}: {
|
||||
sendEvent: ( event: UserProfileEvent ) => void;
|
||||
navigationProgress: number;
|
||||
context: CoreProfilerStateMachineContext;
|
||||
} ) => {
|
||||
const [ businessChoice, setBusinessChoice ] = useState< BusinessChoice >(
|
||||
context.userProfile.businessChoice || 'im_just_starting_my_business'
|
||||
);
|
||||
const [ sellingOnlineAnswer, setSellingOnlineAnswer ] =
|
||||
useState< SellingOnlineAnswer | null >(
|
||||
context.userProfile.sellingOnlineAnswer || null
|
||||
);
|
||||
const [ sellingPlatforms, setSellingPlatforms ] =
|
||||
useState< Array< SellingPlatform > | null >(
|
||||
context.userProfile.sellingPlatforms || null
|
||||
);
|
||||
const [ isPlatformDropdownOpen, setIsPlatformDropdownOpen ] =
|
||||
useState( false );
|
||||
|
||||
const renderAlreadySellingOptions = () => {
|
||||
return (
|
||||
<>
|
||||
<div data-testid="core-profiler-user-profile">User Profile</div>
|
||||
<button
|
||||
onClick={ () =>
|
||||
<div className="woocommerce-profiler-selling-online-question">
|
||||
<p className="woocommerce-profiler-question-label">
|
||||
{ __( 'Are you selling online?', 'woocommerce' ) }
|
||||
</p>
|
||||
<SelectControl
|
||||
className="woocommerce-profiler-select-control__selling-online-question"
|
||||
instanceId={ 1 }
|
||||
label={ __( 'Select an option', 'woocommerce' ) }
|
||||
autoComplete="new-password" // disable autocomplete and autofill
|
||||
options={ sellingOnlineOptions }
|
||||
excludeSelectedOptions={ false }
|
||||
help={ <Icon icon={ chevronDown } /> }
|
||||
onChange={ (
|
||||
selectedOptionKey: typeof sellingOnlineAnswer
|
||||
) => {
|
||||
setSellingOnlineAnswer( selectedOptionKey );
|
||||
} }
|
||||
multiple={ false }
|
||||
selected={ sellingOnlineAnswer }
|
||||
/>
|
||||
</div>
|
||||
{ sellingOnlineAnswer &&
|
||||
[
|
||||
'yes_im_selling_online',
|
||||
'im_selling_both_online_and_offline',
|
||||
].includes( sellingOnlineAnswer ) && (
|
||||
<div className="woocommerce-profiler-selling-platform">
|
||||
<p className="woocommerce-profiler-question-label">
|
||||
{ __(
|
||||
'Which platform(s) are you currently using?',
|
||||
'woocommerce'
|
||||
) }
|
||||
</p>
|
||||
<MultipleSelector
|
||||
options={ platformOptions }
|
||||
selectedOptions={ platformOptions.filter(
|
||||
( option ) =>
|
||||
sellingPlatforms?.includes(
|
||||
option.value
|
||||
)
|
||||
) }
|
||||
onSelect={ ( items ) => {
|
||||
setSellingPlatforms(
|
||||
items.map(
|
||||
( item ) =>
|
||||
item.value as SellingPlatform
|
||||
)
|
||||
);
|
||||
} }
|
||||
onOpenClose={ setIsPlatformDropdownOpen }
|
||||
/>
|
||||
</div>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const onContinue = () => {
|
||||
sendEvent( {
|
||||
type: 'USER_PROFILE_COMPLETED',
|
||||
payload: {
|
||||
userProfile: {
|
||||
foo: { bar: 'qux' },
|
||||
skipped: false,
|
||||
businessChoice,
|
||||
sellingOnlineAnswer:
|
||||
businessChoice === 'im_already_selling'
|
||||
? sellingOnlineAnswer
|
||||
: null,
|
||||
sellingPlatforms:
|
||||
businessChoice === 'im_already_selling'
|
||||
? sellingPlatforms
|
||||
: null,
|
||||
},
|
||||
},
|
||||
} )
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="woocommerce-profiler-user-profile"
|
||||
data-testid="core-profiler-user-profile"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
<button
|
||||
onClick={ () =>
|
||||
<Navigation
|
||||
percentage={ navigationProgress }
|
||||
skipText={ __( 'Skip this setup', 'woocommerce' ) }
|
||||
onSkip={ () =>
|
||||
sendEvent( {
|
||||
type: 'USER_PROFILE_SKIPPED',
|
||||
payload: { userProfile: { skipped: true } },
|
||||
} )
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className={ classnames(
|
||||
'woocommerce-profiler-page__content woocommerce-profiler-user-profile__content',
|
||||
{
|
||||
'is-platform-selector-open': isPlatformDropdownOpen,
|
||||
}
|
||||
) }
|
||||
>
|
||||
Skip
|
||||
</button>
|
||||
</>
|
||||
<Heading
|
||||
className="woocommerce-profiler__stepper-heading"
|
||||
title={ __(
|
||||
'Which one of these best describes you?',
|
||||
'woocommerce'
|
||||
) }
|
||||
subTitle={ __(
|
||||
'Let us know where you are in your commerce journey so that we can tailor your Woo experience for you.',
|
||||
'woocommerce'
|
||||
) }
|
||||
/>
|
||||
<form className="woocommerce-user-profile-choices">
|
||||
<fieldset>
|
||||
<legend className="screen-reader-text">
|
||||
{ __(
|
||||
'Which one of these best describes you?',
|
||||
'woocommerce'
|
||||
) }
|
||||
</legend>
|
||||
{ businessOptions.map( ( { title, value } ) => {
|
||||
return (
|
||||
<Choice
|
||||
key={ value }
|
||||
name="user-profile-choice"
|
||||
title={ title }
|
||||
selected={ businessChoice === value }
|
||||
value={ value }
|
||||
onChange={ ( _value ) => {
|
||||
setBusinessChoice(
|
||||
_value as BusinessChoice
|
||||
);
|
||||
} }
|
||||
subOptionsComponent={
|
||||
value === 'im_already_selling'
|
||||
? renderAlreadySellingOptions()
|
||||
: null
|
||||
}
|
||||
/>
|
||||
);
|
||||
} ) }
|
||||
</fieldset>
|
||||
</form>
|
||||
<div className="woocommerce-profiler-button-container">
|
||||
<Button
|
||||
className="woocommerce-profiler-button"
|
||||
variant="primary"
|
||||
onClick={ onContinue }
|
||||
>
|
||||
{ __( 'Continue', 'woocommerce' ) }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { UserProfile } from '../UserProfile';
|
||||
import { CoreProfilerStateMachineContext } from '../..';
|
||||
|
||||
describe( 'UserProfile', () => {
|
||||
let props: {
|
||||
sendEvent: jest.Mock;
|
||||
navigationProgress: number;
|
||||
context: Pick< CoreProfilerStateMachineContext, 'userProfile' >;
|
||||
};
|
||||
|
||||
beforeEach( () => {
|
||||
props = {
|
||||
sendEvent: jest.fn(),
|
||||
navigationProgress: 0,
|
||||
context: {
|
||||
userProfile: {
|
||||
businessChoice: 'im_just_starting_my_business',
|
||||
sellingOnlineAnswer: null,
|
||||
sellingPlatforms: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
} );
|
||||
|
||||
it( 'should render user profile page', () => {
|
||||
// @ts-ignore
|
||||
render( <UserProfile { ...props } /> );
|
||||
expect(
|
||||
screen.getByText( /Which one of these best describes you?/i, {
|
||||
selector: 'h1',
|
||||
} )
|
||||
).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByRole( 'button', {
|
||||
name: /Continue/i,
|
||||
} )
|
||||
).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'should show online selling question when choosing "im_already_selling"', () => {
|
||||
// @ts-ignore
|
||||
render( <UserProfile { ...props } /> );
|
||||
const radioInput = screen.getByLabelText< HTMLInputElement >(
|
||||
"I'm already selling"
|
||||
); // Replace with the label of your radio button
|
||||
|
||||
// Perform the radio button selection
|
||||
fireEvent.click( radioInput );
|
||||
|
||||
// Assert the expected behavior
|
||||
expect( radioInput.checked ).toBe( true );
|
||||
|
||||
const onlineSellingQuestion = screen.getByText(
|
||||
/Are you selling online?/i
|
||||
);
|
||||
expect( onlineSellingQuestion ).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'should show online selling question when choosing "Yes, I\'m selling online"', () => {
|
||||
render(
|
||||
// @ts-ignore
|
||||
<UserProfile
|
||||
{ ...{
|
||||
...props,
|
||||
context: {
|
||||
userProfile: {
|
||||
businessChoice: 'im_already_selling',
|
||||
sellingOnlineAnswer: 'yes_im_selling_online',
|
||||
sellingPlatforms: null,
|
||||
},
|
||||
},
|
||||
} }
|
||||
/>
|
||||
);
|
||||
const platformSelector = screen.getByLabelText( /Select an option/i );
|
||||
expect( platformSelector ).toBeInTheDocument();
|
||||
} );
|
||||
|
||||
it( 'should call sendEvent with USER_PROFILE_COMPLETED event when button is clicked', () => {
|
||||
render(
|
||||
// @ts-ignore
|
||||
<UserProfile { ...props } />
|
||||
);
|
||||
screen
|
||||
.getByRole( 'button', {
|
||||
name: /Continue/i,
|
||||
} )
|
||||
.click();
|
||||
expect( props.sendEvent ).toHaveBeenCalledWith( {
|
||||
type: 'USER_PROFILE_COMPLETED',
|
||||
payload: {
|
||||
userProfile: {
|
||||
businessChoice: 'im_just_starting_my_business',
|
||||
sellingOnlineAnswer: null,
|
||||
sellingPlatforms: null,
|
||||
},
|
||||
},
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'should call sendEvent with USER_PROFILE_SKIPPED event when skip button is clicked', () => {
|
||||
render(
|
||||
// @ts-ignore
|
||||
<UserProfile { ...props } />
|
||||
);
|
||||
screen
|
||||
.getByRole( 'button', {
|
||||
name: /Skip this setup/i,
|
||||
} )
|
||||
.click();
|
||||
expect( props.sendEvent ).toHaveBeenCalledWith( {
|
||||
type: 'USER_PROFILE_SKIPPED',
|
||||
payload: {
|
||||
userProfile: {
|
||||
skipped: true,
|
||||
},
|
||||
},
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
@ -19,6 +19,85 @@
|
|||
@include breakpoint( '<782px' ) {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.woocommerce-profiler-button-container {
|
||||
width: 100%;
|
||||
max-width: 404px;
|
||||
@include breakpoint( '<782px' ) {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.woocommerce-select-control__option {
|
||||
font-size: 13px;
|
||||
height: 40px;
|
||||
min-height: initial;
|
||||
|
||||
&:hover {
|
||||
background: #eff2fd;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
.woocommerce-select-control__listbox {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 8px;
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
.woocommerce-select-control__control {
|
||||
height: 40px;
|
||||
padding: 12px;
|
||||
border: 1px solid #bbb;
|
||||
|
||||
label,
|
||||
.woocommerce-select-control__control-input {
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.components-base-control__label {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
&.with-value {
|
||||
.woocommerce-select-control__control-input {
|
||||
margin: 0;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.components-base-control__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
border: 1px solid var(--wp-admin-theme-color);
|
||||
}
|
||||
}
|
||||
|
||||
#woocommerce-select-control__listbox-0 {
|
||||
top: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-select-control__country {
|
||||
max-width: 404px;
|
||||
margin: auto auto 32px auto;
|
||||
}
|
||||
|
||||
// Intro opt-in page
|
||||
|
|
@ -117,6 +196,11 @@
|
|||
max-width: 514px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.woocommerce-select-control__control-input {
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
@ -124,38 +208,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.woocommerce-profiler-select-control__country {
|
||||
max-width: 400px;
|
||||
margin: auto auto 32px auto;
|
||||
.woocommerce-select-control__option {
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
background: #eff2fd;
|
||||
}
|
||||
}
|
||||
.woocommerce-select-control__listbox {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.woocommerce-select-control__control {
|
||||
height: 40px;
|
||||
padding: 12px;
|
||||
border: 1px solid #bbb;
|
||||
label,
|
||||
input {
|
||||
font-size: 13px;
|
||||
color: var(--wp-components-color-foreground, #757575);
|
||||
}
|
||||
&.is-active {
|
||||
border: 1px solid #3858e9;
|
||||
}
|
||||
}
|
||||
#woocommerce-select-control__listbox-0 {
|
||||
top: 40px !important;
|
||||
}
|
||||
}
|
||||
// Business location page
|
||||
.woocommerce-profiler-business-location {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -169,42 +223,6 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.woocommerce-profiler-heading {
|
||||
margin-top: 72px;
|
||||
@include breakpoint( '<782px' ) {
|
||||
margin-top: 52px;
|
||||
margin-bottom: 40px;
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
line-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
h2 {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.woocommerce-profiler-go-to-mystore__button-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
@include breakpoint( '<782px' ) {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-go-to-mystore__button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 10px 16px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.components-base-control__field {
|
||||
height: 40px;
|
||||
}
|
||||
|
|
@ -232,6 +250,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Loader page
|
||||
.woocommerce-profiler-loader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -283,3 +302,45 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// User profile page
|
||||
.woocommerce-profiler-user-profile {
|
||||
.woocommerce-profiler-user-profile__content {
|
||||
min-height: 630px;
|
||||
|
||||
&.is-platform-selector-open {
|
||||
padding-bottom: 145px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-user-profile-choices {
|
||||
margin-bottom: 32px;
|
||||
max-width: 404px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.woocommerce-profiler-heading__title {
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.woocommerce-user-profile-choices fieldset {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.woocommerce-profiler-choice-sub-options {
|
||||
.woocommerce-profiler-question-label {
|
||||
text-transform: uppercase;
|
||||
color: $gray-900;
|
||||
font-weight: 500;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-profiler-selling-platform {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1955,7 +1955,7 @@ Object {
|
|||
class="woocommerce-profiler-page__content woocommerce-profiler-business-location__content"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-heading"
|
||||
class="woocommerce-profiler-heading woocommerce-profiler__stepper-heading"
|
||||
>
|
||||
<h1
|
||||
class="woocommerce-profiler-heading__title"
|
||||
|
|
@ -2032,10 +2032,10 @@ Object {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-go-to-mystore__button-container"
|
||||
class="woocommerce-profiler-button-container woocommerce-profiler-go-to-mystore__button-container"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-go-to-mystore__button is-primary"
|
||||
class="components-button woocommerce-profiler-button is-primary"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -2107,7 +2107,7 @@ Object {
|
|||
class="woocommerce-profiler-page__content woocommerce-profiler-business-location__content"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-heading"
|
||||
class="woocommerce-profiler-heading woocommerce-profiler__stepper-heading"
|
||||
>
|
||||
<h1
|
||||
class="woocommerce-profiler-heading__title"
|
||||
|
|
@ -2184,10 +2184,10 @@ Object {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-go-to-mystore__button-container"
|
||||
class="woocommerce-profiler-button-container woocommerce-profiler-go-to-mystore__button-container"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-go-to-mystore__button is-primary"
|
||||
class="components-button woocommerce-profiler-button is-primary"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -3033,35 +3033,361 @@ Object {
|
|||
class="woocommerce-profile-wizard__container woocommerce-profile-wizard__step-userProfile"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-user-profile"
|
||||
data-testid="core-profiler-user-profile"
|
||||
>
|
||||
User Profile
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-container"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar progress-bar"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar__container"
|
||||
style="background-color: transparent;"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar__filler"
|
||||
style="width: 40%; display: inherit;"
|
||||
/>
|
||||
</div>
|
||||
<button>
|
||||
Next
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-col-left"
|
||||
>
|
||||
<span
|
||||
class="woologo"
|
||||
>
|
||||
<svg
|
||||
class="wc-icon wc-icon__woo-logo"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
version="1.1"
|
||||
viewBox="0 0 256 153"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m23.759 0h208.38c13.187 0 23.863 10.675 23.863 23.863v79.542c0 13.187-10.675 23.863-23.863 23.863h-74.727l10.257 25.118-45.109-25.118h-98.695c-13.187 0-23.863-10.675-23.863-23.863v-79.542c-0.10466-13.083 10.571-23.863 23.758-23.863z"
|
||||
fill="#7f54b3"
|
||||
/>
|
||||
<path
|
||||
d="m14.578 21.75c1.4569-1.9772 3.6423-3.0179 6.5561-3.226 5.3073-0.41626 8.3252 2.0813 9.0537 7.4927 3.226 21.75 6.7642 40.169 10.511 55.259l22.79-43.395c2.0813-3.9545 4.6829-6.0358 7.8049-6.2439 4.5789-0.3122 7.3886 2.6016 8.5333 8.7415 2.6016 13.841 5.9317 25.6 9.8862 35.59 2.7057-26.433 7.2846-45.476 13.737-57.236 1.561-2.9138 3.8504-4.3707 6.8683-4.5789 2.3935-0.20813 4.5789 0.52033 6.5561 2.0813 1.9772 1.561 3.0179 3.5382 3.226 5.9317 0.10406 1.8732-0.20813 3.4341-1.0407 4.9951-4.0585 7.4927-7.3886 20.085-10.094 37.567-2.6016 16.963-3.5382 30.179-2.9138 39.649 0.20813 2.6016-0.20813 4.8911-1.2488 6.8683-1.2488 2.2894-3.122 3.5382-5.5154 3.7463-2.7057 0.20813-5.5154-1.0406-8.2211-3.8504-9.678-9.8862-17.379-24.663-22.998-44.332-6.7642 13.32-11.759 23.311-14.985 29.971-6.1398 11.759-11.343 17.795-15.714 18.107-2.8098 0.20813-5.2033-2.1854-7.2846-7.1805-5.3073-13.633-11.031-39.961-17.171-78.985-0.41626-2.7057 0.20813-5.0992 1.665-6.9724zm223.64 16.338c-3.7463-6.5561-9.2618-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0.10406-8.1171-1.665-14.881-4.9951-20.501zm-13.112 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93659-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0 2.7057-0.20813 5.3073-0.72846 7.7008zm-52.033-28.826c-3.7463-6.5561-9.3659-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0-8.1171-1.665-14.881-4.9951-20.501zm-13.216 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93658-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0.10406 2.7057-0.20813 5.3073-0.72846 7.7008z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-col-right"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-navigation-skip-link is-link"
|
||||
type="button"
|
||||
>
|
||||
Skip this setup
|
||||
</button>
|
||||
<button>
|
||||
Skip
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-page__content woocommerce-profiler-user-profile__content"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-heading woocommerce-profiler__stepper-heading"
|
||||
>
|
||||
<h1
|
||||
class="woocommerce-profiler-heading__title"
|
||||
>
|
||||
Which one of these best describes you?
|
||||
</h1>
|
||||
<h2
|
||||
class="woocommerce-profiler-heading__subtitle"
|
||||
>
|
||||
Let us know where you are in your commerce journey so that we can tailor your Woo experience for you.
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="woocommerce-user-profile-choices"
|
||||
>
|
||||
<fieldset>
|
||||
<legend
|
||||
class="screen-reader-text"
|
||||
>
|
||||
Which one of these best describes you?
|
||||
</legend>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
data-selected="true"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="woocommerce-profiler-choice-input"
|
||||
data-selected="true"
|
||||
id="woocommerce-im-just-starting-my-business"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_just_starting_my_business"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-just-starting-my-business"
|
||||
>
|
||||
I'm just starting my business
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-profiler-choice-input"
|
||||
id="woocommerce-im-already-selling"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_already_selling"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-already-selling"
|
||||
>
|
||||
I'm already selling
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-profiler-choice-input"
|
||||
id="woocommerce-im-setting-up-a-store-for-a-client"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_setting_up_a_store_for_a_client"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-setting-up-a-store-for-a-client"
|
||||
>
|
||||
I'm setting up a store for a client
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div
|
||||
class="woocommerce-profiler-button-container"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-button is-primary"
|
||||
type="button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>,
|
||||
"container": <div>
|
||||
<div
|
||||
class="woocommerce-profile-wizard__container woocommerce-profile-wizard__step-userProfile"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-user-profile"
|
||||
data-testid="core-profiler-user-profile"
|
||||
>
|
||||
User Profile
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-container"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar progress-bar"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar__container"
|
||||
style="background-color: transparent;"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-progress-bar__filler"
|
||||
style="width: 40%; display: inherit;"
|
||||
/>
|
||||
</div>
|
||||
<button>
|
||||
Next
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-col-left"
|
||||
>
|
||||
<span
|
||||
class="woologo"
|
||||
>
|
||||
<svg
|
||||
class="wc-icon wc-icon__woo-logo"
|
||||
preserveAspectRatio="xMidYMid"
|
||||
version="1.1"
|
||||
viewBox="0 0 256 153"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m23.759 0h208.38c13.187 0 23.863 10.675 23.863 23.863v79.542c0 13.187-10.675 23.863-23.863 23.863h-74.727l10.257 25.118-45.109-25.118h-98.695c-13.187 0-23.863-10.675-23.863-23.863v-79.542c-0.10466-13.083 10.571-23.863 23.758-23.863z"
|
||||
fill="#7f54b3"
|
||||
/>
|
||||
<path
|
||||
d="m14.578 21.75c1.4569-1.9772 3.6423-3.0179 6.5561-3.226 5.3073-0.41626 8.3252 2.0813 9.0537 7.4927 3.226 21.75 6.7642 40.169 10.511 55.259l22.79-43.395c2.0813-3.9545 4.6829-6.0358 7.8049-6.2439 4.5789-0.3122 7.3886 2.6016 8.5333 8.7415 2.6016 13.841 5.9317 25.6 9.8862 35.59 2.7057-26.433 7.2846-45.476 13.737-57.236 1.561-2.9138 3.8504-4.3707 6.8683-4.5789 2.3935-0.20813 4.5789 0.52033 6.5561 2.0813 1.9772 1.561 3.0179 3.5382 3.226 5.9317 0.10406 1.8732-0.20813 3.4341-1.0407 4.9951-4.0585 7.4927-7.3886 20.085-10.094 37.567-2.6016 16.963-3.5382 30.179-2.9138 39.649 0.20813 2.6016-0.20813 4.8911-1.2488 6.8683-1.2488 2.2894-3.122 3.5382-5.5154 3.7463-2.7057 0.20813-5.5154-1.0406-8.2211-3.8504-9.678-9.8862-17.379-24.663-22.998-44.332-6.7642 13.32-11.759 23.311-14.985 29.971-6.1398 11.759-11.343 17.795-15.714 18.107-2.8098 0.20813-5.2033-2.1854-7.2846-7.1805-5.3073-13.633-11.031-39.961-17.171-78.985-0.41626-2.7057 0.20813-5.0992 1.665-6.9724zm223.64 16.338c-3.7463-6.5561-9.2618-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0.10406-8.1171-1.665-14.881-4.9951-20.501zm-13.112 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93659-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0 2.7057-0.20813 5.3073-0.72846 7.7008zm-52.033-28.826c-3.7463-6.5561-9.3659-10.511-16.65-12.072-1.9772-0.41626-3.8504-0.62439-5.6195-0.62439-9.9902 0-18.107 5.2033-24.455 15.61-5.4114 8.8455-8.1171 18.628-8.1171 29.346 0 8.013 1.665 14.881 4.9951 20.605 3.7463 6.5561 9.2618 10.511 16.65 12.072 1.9772 0.41626 3.8504 0.62439 5.6195 0.62439 10.094 0 18.211-5.2033 24.455-15.61 5.4114-8.9496 8.1171-18.732 8.1171-29.45 0-8.1171-1.665-14.881-4.9951-20.501zm-13.216 28.826c-1.4569 6.8683-4.0585 11.967-7.9089 15.402-3.0179 2.7057-5.8276 3.8504-8.4293 3.3301-2.4976-0.52033-4.5789-2.7057-6.1398-6.7642-1.2488-3.226-1.8732-6.452-1.8732-9.4699 0-2.6016 0.20813-5.2033 0.72846-7.5967 0.93658-4.2667 2.7057-8.4293 5.5154-12.384 3.4341-5.0992 7.0764-7.1805 10.823-6.452 2.4976 0.52033 4.5789 2.7057 6.1398 6.7642 1.2488 3.226 1.8732 6.452 1.8732 9.4699 0.10406 2.7057-0.20813 5.3073-0.72846 7.7008z"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-navigation-col-right"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-navigation-skip-link is-link"
|
||||
type="button"
|
||||
>
|
||||
Skip this setup
|
||||
</button>
|
||||
<button>
|
||||
Skip
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-page__content woocommerce-profiler-user-profile__content"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-heading woocommerce-profiler__stepper-heading"
|
||||
>
|
||||
<h1
|
||||
class="woocommerce-profiler-heading__title"
|
||||
>
|
||||
Which one of these best describes you?
|
||||
</h1>
|
||||
<h2
|
||||
class="woocommerce-profiler-heading__subtitle"
|
||||
>
|
||||
Let us know where you are in your commerce journey so that we can tailor your Woo experience for you.
|
||||
</h2>
|
||||
</div>
|
||||
<form
|
||||
class="woocommerce-user-profile-choices"
|
||||
>
|
||||
<fieldset>
|
||||
<legend
|
||||
class="screen-reader-text"
|
||||
>
|
||||
Which one of these best describes you?
|
||||
</legend>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
data-selected="true"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="woocommerce-profiler-choice-input"
|
||||
data-selected="true"
|
||||
id="woocommerce-im-just-starting-my-business"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_just_starting_my_business"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-just-starting-my-business"
|
||||
>
|
||||
I'm just starting my business
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-profiler-choice-input"
|
||||
id="woocommerce-im-already-selling"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_already_selling"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-already-selling"
|
||||
>
|
||||
I'm already selling
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="woocommerce-profiler-choice-container"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="woocommerce-profiler-choice"
|
||||
>
|
||||
<input
|
||||
class="woocommerce-profiler-choice-input"
|
||||
id="woocommerce-im-setting-up-a-store-for-a-client"
|
||||
name="user-profile-choice"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="im_setting_up_a_store_for_a_client"
|
||||
/>
|
||||
<label
|
||||
class="choice__title"
|
||||
for="woocommerce-im-setting-up-a-store-for-a-client"
|
||||
>
|
||||
I'm setting up a store for a client
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
<div
|
||||
class="woocommerce-profiler-button-container"
|
||||
>
|
||||
<button
|
||||
class="components-button woocommerce-profiler-button is-primary"
|
||||
type="button"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
"debug": [Function],
|
||||
"findAllByAltText": [Function],
|
||||
|
|
|
|||
|
|
@ -14,14 +14,16 @@ import { createMachine } from 'xstate';
|
|||
*/
|
||||
import { CoreProfilerController } from '../';
|
||||
|
||||
jest.mock( '@automattic/calypso-config' );
|
||||
|
||||
// mock out the external dependencies which we don't want to test here
|
||||
const actionOverrides = {
|
||||
updateTrackingOption: jest.fn(),
|
||||
updateOnboardingProfileOption: jest.fn(),
|
||||
recordTracksIntroCompleted: jest.fn(),
|
||||
recordTracksIntroSkipped: jest.fn(),
|
||||
recordTracksIntroViewed: jest.fn(),
|
||||
recordTracksUserProfileCompleted: jest.fn(),
|
||||
recordTracksUserProfileSkipped: jest.fn(),
|
||||
recordTracksUserProfileViewed: jest.fn(),
|
||||
recordTracksSkipBusinessLocationViewed: jest.fn(),
|
||||
recordTracksSkipBusinessLocationCompleted: jest.fn(),
|
||||
redirectToWooHome: jest.fn(),
|
||||
|
|
@ -34,6 +36,7 @@ const servicesOverrides = {
|
|||
.mockResolvedValue( [
|
||||
{ code: 'US', name: 'United States', states: [] },
|
||||
] ),
|
||||
getOnboardingProfileOption: jest.fn().mockResolvedValue( {} ),
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: add
|
||||
|
||||
Add core profiler user profile page
|
||||
Loading…
Reference in New Issue