From 8e9c60b0b0e656c35979d9c0889788d70184313e Mon Sep 17 00:00:00 2001 From: Joshua T Flowers Date: Mon, 22 Feb 2021 13:40:44 -0500 Subject: [PATCH] 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 --- .../woocommerce-admin/TESTING-INSTRUCTIONS.md | 13 ++ .../client/homescreen/constants.js | 11 ++ .../client/homescreen/layout.js | 32 ++-- .../components/intro-modal/index.js | 137 ++++++++++++++++++ .../components/intro-modal/style.scss | 76 ++++++++++ plugins/woocommerce-admin/readme.txt | 1 + 6 files changed, 254 insertions(+), 16 deletions(-) create mode 100644 plugins/woocommerce-admin/client/homescreen/constants.js create mode 100644 plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js create mode 100644 plugins/woocommerce-admin/client/navigation/components/intro-modal/style.scss diff --git a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md index 9bef74bf375..92ea43ca0e9 100644 --- a/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md +++ b/plugins/woocommerce-admin/TESTING-INSTRUCTIONS.md @@ -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 diff --git a/plugins/woocommerce-admin/client/homescreen/constants.js b/plugins/woocommerce-admin/client/homescreen/constants.js new file mode 100644 index 00000000000..335e1bea6fe --- /dev/null +++ b/plugins/woocommerce-admin/client/homescreen/constants.js @@ -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'; diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js index c42e71e3a71..384856d3433 100644 --- a/plugins/woocommerce-admin/client/homescreen/layout.js +++ b/plugins/woocommerce-admin/client/homescreen/layout.js @@ -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 = ( { { updateOptions( { - woocommerce_task_list_welcome_modal_dismissed: - 'yes', + [ WELCOME_MODAL_DISMISSED_OPTION_NAME ]: 'yes', } ); } } /> @@ -146,6 +146,7 @@ export const Layout = ( { } } /> ) } + { window.wcAdminFeatures.navigation && } ); }; @@ -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 = diff --git a/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js b/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js new file mode 100644 index 00000000000..143a9e33f65 --- /dev/null +++ b/plugins/woocommerce-admin/client/navigation/components/intro-modal/index.js @@ -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: ( +
+
+ + { title } + + { description } +
+
+ { +
+
+ ), + }; + }; + + return ( + + ); +}; diff --git a/plugins/woocommerce-admin/client/navigation/components/intro-modal/style.scss b/plugins/woocommerce-admin/client/navigation/components/intro-modal/style.scss new file mode 100644 index 00000000000..4c88ccbeece --- /dev/null +++ b/plugins/woocommerce-admin/client/navigation/components/intro-modal/style.scss @@ -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; + } + } +} diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 77c51faec42..68342a5368d 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -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 ==