Add navigation intro modal (https://github.com/woocommerce/woocommerce-admin/pull/6367)
* Add initial intro modal * Hide modal on dismissal * Add modal styling * Add modal page content * Update styles to match Figma designs * Replace video with gifs * Check if user is opted in to satisfy gdpr concerns * Add testing instructions and changelog notes * Handle PR feedback * Handle responsiveness * Dismiss modal when welcome modal is shown simultaneously * Update shared modal option constants
This commit is contained in:
Joshua T Flowers
GitHub
parent
de61194cc0
commit
8e9c60b0b0
|
|
@ -121,6 +121,19 @@ localStorage.setItem( 'debug', 'wc-admin:tracks' );
|
|||
- Click on `Save changes`.
|
||||
- Observe in developer console, `wcadmin_ces_snackbar_view` is logged when CES prompt is displayed.
|
||||
- In the event props, it should have a new `settings_area` key followed by the value of the settings tab you have selected.
|
||||
### Add navigation intro modal #6367
|
||||
|
||||
1. Visit the homescreen and dismiss the original welcome modal if you haven't already.
|
||||
2. Enable the new navigation under WooCommerce -> Settings -> Advanced -> Features. (This will also require opting into tracking).
|
||||
3. Visit the WooCommerce Admin homescreen.
|
||||
4. Note the new modal.
|
||||
5. Check that pagination works as expected and modal styling is as expected.
|
||||
6. Dismiss the modal.
|
||||
7. Refresh the page to verify the modal does not reappear.
|
||||
8. On a new site, enable the navigation before visiting the homescreen.
|
||||
9. Navigate to the homescreen.
|
||||
10. Note the welcome modal is shown and the navigation intro modal is not shown.
|
||||
11. Refresh the page and note the nav intro modal was dismissed and never shown.
|
||||
|
||||
## 2.0.0
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
/**
|
||||
* Welcome modal dismissed option name.
|
||||
*/
|
||||
export const WELCOME_MODAL_DISMISSED_OPTION_NAME =
|
||||
'woocommerce_task_list_welcome_modal_dismissed';
|
||||
|
||||
/**
|
||||
* Welcome from calypso modal dismissed option name.
|
||||
*/
|
||||
export const WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME =
|
||||
'woocommerce_welcome_from_calypso_modal_dismissed';
|
||||
|
|
@ -23,26 +23,27 @@ import { __ } from '@wordpress/i18n';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import StatsOverview from './stats-overview';
|
||||
import TaskListPlaceholder from '../task-list/placeholder';
|
||||
import InboxPanel from '../inbox-panel';
|
||||
import { WelcomeModal } from './welcome-modal';
|
||||
import { WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
|
||||
import ActivityHeader from '../header/activity-panel/activity-header';
|
||||
import { ActivityPanel } from './activity-panel';
|
||||
|
||||
import { Column } from './column';
|
||||
import InboxPanel from '../inbox-panel';
|
||||
import { IntroModal as NavigationIntroModal } from '../navigation/components/intro-modal';
|
||||
import StatsOverview from './stats-overview';
|
||||
import { StoreManagementLinks } from '../store-management-links';
|
||||
import TaskListPlaceholder from '../task-list/placeholder';
|
||||
import {
|
||||
WELCOME_MODAL_DISMISSED_OPTION_NAME,
|
||||
WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME,
|
||||
} from './constants';
|
||||
import { WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
|
||||
import { WelcomeModal } from './welcome-modal';
|
||||
import './style.scss';
|
||||
import '../dashboard/style.scss';
|
||||
import { StoreManagementLinks } from '../store-management-links';
|
||||
import { Column } from './column';
|
||||
|
||||
const TaskList = lazy( () =>
|
||||
import( /* webpackChunkName: "task-list" */ '../task-list' )
|
||||
);
|
||||
|
||||
const WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME =
|
||||
'woocommerce_welcome_from_calypso_modal_dismissed';
|
||||
|
||||
export const Layout = ( {
|
||||
defaultHomescreenLayout,
|
||||
isBatchUpdating,
|
||||
|
|
@ -130,8 +131,7 @@ export const Layout = ( {
|
|||
<WelcomeModal
|
||||
onClose={ () => {
|
||||
updateOptions( {
|
||||
woocommerce_task_list_welcome_modal_dismissed:
|
||||
'yes',
|
||||
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
|
|
@ -146,6 +146,7 @@ export const Layout = ( {
|
|||
} }
|
||||
/>
|
||||
) }
|
||||
{ window.wcAdminFeatures.navigation && <NavigationIntroModal /> }
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -205,12 +206,11 @@ export default compose(
|
|||
fromCalypsoUrlArgIsPresent;
|
||||
|
||||
const welcomeModalDismissed =
|
||||
getOption( 'woocommerce_task_list_welcome_modal_dismissed' ) ===
|
||||
'yes';
|
||||
getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) === 'yes';
|
||||
|
||||
const welcomeModalDismissedHasResolved = hasFinishedResolution(
|
||||
'getOption',
|
||||
[ 'woocommerce_task_list_welcome_modal_dismissed' ]
|
||||
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]
|
||||
);
|
||||
|
||||
const shouldShowWelcomeModal =
|
||||
|
|
|
|||
|
|
@ -0,0 +1,137 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Guide } from '@wordpress/components';
|
||||
import { OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { Text } from '@woocommerce/experimental';
|
||||
import { useEffect, useState } from '@wordpress/element';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { WELCOME_MODAL_DISMISSED_OPTION_NAME } from '../../../homescreen/constants';
|
||||
|
||||
const INTRO_MODAL_DISMISSED_OPTION_NAME =
|
||||
'woocommerce_navigation_intro_modal_dismissed';
|
||||
const TRACKING_OPTION_NAME = 'woocommerce_allow_tracking';
|
||||
|
||||
export const IntroModal = () => {
|
||||
const [ isOpen, setOpen ] = useState( true );
|
||||
|
||||
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
||||
|
||||
const {
|
||||
allowTracking,
|
||||
isDismissed,
|
||||
isResolving,
|
||||
isWelcomeModalShown,
|
||||
} = useSelect( ( select ) => {
|
||||
const { getOption, isResolving: isOptionResolving } = select(
|
||||
OPTIONS_STORE_NAME
|
||||
);
|
||||
const dismissedOption = getOption( INTRO_MODAL_DISMISSED_OPTION_NAME );
|
||||
|
||||
return {
|
||||
allowTracking: getOption( TRACKING_OPTION_NAME ) === 'yes',
|
||||
isDismissed: dismissedOption === 'yes',
|
||||
isWelcomeModalShown:
|
||||
getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) !== 'yes',
|
||||
isResolving:
|
||||
typeof dismissedOption === 'undefined' ||
|
||||
isOptionResolving( 'getOption', [
|
||||
INTRO_MODAL_DISMISSED_OPTION_NAME,
|
||||
] ) ||
|
||||
isOptionResolving( 'getOption', [
|
||||
WELCOME_MODAL_DISMISSED_OPTION_NAME,
|
||||
] ) ||
|
||||
isOptionResolving( 'getOption', [ TRACKING_OPTION_NAME ] ),
|
||||
};
|
||||
} );
|
||||
|
||||
const dismissModal = () => {
|
||||
updateOptions( {
|
||||
[ INTRO_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
|
||||
} );
|
||||
recordEvent( 'navigation_intro_modal_close', {} );
|
||||
setOpen( false );
|
||||
};
|
||||
|
||||
// Dismiss the modal when the welcome modal is shown.
|
||||
// It is likely in this case that the navigation is on by default.
|
||||
useEffect( () => {
|
||||
if ( ! isResolving && isWelcomeModalShown ) {
|
||||
dismissModal();
|
||||
}
|
||||
}, [ isResolving, isWelcomeModalShown ] );
|
||||
|
||||
if (
|
||||
! isOpen ||
|
||||
isDismissed ||
|
||||
isResolving ||
|
||||
! allowTracking ||
|
||||
isWelcomeModalShown
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getPage = ( title, description, imageUrl ) => {
|
||||
return {
|
||||
content: (
|
||||
<div className="woocommerce-navigation-intro-modal__page-wrapper">
|
||||
<div className="woocommerce-navigation-intro-modal__page-text">
|
||||
<Text variant="title.large" as="h2">
|
||||
{ title }
|
||||
</Text>
|
||||
<Text variant="body.large">{ description }</Text>
|
||||
</div>
|
||||
<div className="woocommerce-navigation-intro-modal__image-wrapper">
|
||||
<img alt={ title } src={ imageUrl } />
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<Guide
|
||||
className="woocommerce-navigation-intro-modal"
|
||||
onFinish={ dismissModal }
|
||||
pages={ [
|
||||
getPage(
|
||||
__(
|
||||
'A new navigation for WooCommerce',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
__(
|
||||
'All of your store management features in one place',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
'https://woocommerce.com/wp-content/uploads/2021/02/nav-intro-video-1-32.gif'
|
||||
),
|
||||
getPage(
|
||||
__( 'Focus on managing your store', 'woocommerce-admin' ),
|
||||
__(
|
||||
'Give your attention to key areas of WooCommerce with little distraction',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
'https://woocommerce.com/wp-content/uploads/2021/02/nav-intro-video-2-32.gif'
|
||||
),
|
||||
getPage(
|
||||
__(
|
||||
'Easily find and favorite your extensions',
|
||||
'woocommerce-admin'
|
||||
),
|
||||
__(
|
||||
"They'll appear in the top level of the navigation for quick access",
|
||||
'woocommerce-admin'
|
||||
),
|
||||
'https://woocommerce.com/wp-content/uploads/2021/02/nav-intro-video-3-32.gif'
|
||||
),
|
||||
] }
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
.woocommerce-navigation-intro-modal {
|
||||
width: 670px;
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.components-guide__page-control {
|
||||
order: 3;
|
||||
margin: $gap 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.components-modal__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.components-guide__container {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.components-guide__footer {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
|
||||
.components-button {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
margin-bottom: $gap;
|
||||
}
|
||||
|
||||
.components-guide__back-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.components-modal__frame.components-guide {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.woocommerce-navigation-intro-modal__page-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.woocommerce-navigation-intro-modal__image-wrapper {
|
||||
grid-row: 1;
|
||||
max-height: 328px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-navigation-intro-modal__page-text {
|
||||
padding: $gap-large;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
h2 {
|
||||
font-weight: bold;
|
||||
margin-bottom: $gap-smaller;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,6 +84,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
|
|||
- Fix: Removed @woocommerce/components/card from OBW #6374
|
||||
- Fix: Email notes now are turned off by default #6324
|
||||
- Add: CES track settings tab on updating settings #6368
|
||||
- Add: Add navigation intro modal. #6367
|
||||
|
||||
== 2.0.0 02/05/2021 ==
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue