Remove onboarding welcome modals (#48346)
This commit is contained in:
Chi-Hsuan Huang
GitHub
parent
6a0a9be504
commit
ab1789afd2
|
|
@ -36,9 +36,9 @@ mysqladmin: CREATE DATABASE failed; error: 'Access denied for user 'wp'@'localho
|
|||
|
||||
To fix:
|
||||
|
||||
- Open MySQL with `sudo mysql`.
|
||||
- Run `GRANT ALL PRIVILEGES ON * . * TO 'wp'@'localhost';`. Exit by typing `exit;`.
|
||||
- Run the `install-wp-tests.sh` script again.
|
||||
- Open MySQL with `sudo mysql`.
|
||||
- Run `GRANT ALL PRIVILEGES ON * . * TO 'wp'@'localhost';`. Exit by typing `exit;`.
|
||||
- Run the `install-wp-tests.sh` script again.
|
||||
|
||||
## Timeout / 404 errors while running e2e tests
|
||||
|
||||
|
|
@ -115,11 +115,3 @@ and set Chrome's log level "verbose" to checked.
|
|||
5. All tests: `./vendor/bin/phpunit`
|
||||
|
||||
You might need to `composer install` if `phpunit` doesn't exist.
|
||||
|
||||
## Show the welcome modal again
|
||||
|
||||
Delete the option `woocommerce_task_list_welcome_modal_dismissed`:
|
||||
|
||||
```sql
|
||||
DELETE FROM wp_options WHERE option_name = 'woocommerce_task_list_welcome_modal_dismissed'
|
||||
```
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@
|
|||
"menu_title": "Common issues",
|
||||
"tags": "reference",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/contributing/common-issues.md",
|
||||
"hash": "9d8f0b78a0597ab22dce58e2b3707e3a08770bc22e2b901c0c6690928b1596bf",
|
||||
"hash": "7c6e9eff5f207685b7bb106c4b91d25c72d991895e8bceb9a93458b354704198",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/contributing/common-issues.md",
|
||||
"id": "5766fb43cf9135d5a2cceaf0d386ec14b57c9ba0"
|
||||
},
|
||||
|
|
@ -1020,7 +1020,7 @@
|
|||
"menu_title": "Image sizing",
|
||||
"tags": "reference",
|
||||
"edit_url": "https://github.com/woocommerce/woocommerce/edit/trunk/docs/theme-development/image-sizes.md",
|
||||
"hash": "ff26ee246bb3d2f70c0fdc6dcedf50b9ef7bc55442c4378325880117f85025cd",
|
||||
"hash": "9883e7931ff8bd56dcd707974fe8ec992f21148818206aec354b0368dc999239",
|
||||
"url": "https://raw.githubusercontent.com/woocommerce/woocommerce/trunk/docs/theme-development/image-sizes.md",
|
||||
"id": "3f5301ac3040d38bc449b440733da6a466209df3",
|
||||
"links": {
|
||||
|
|
@ -1359,5 +1359,5 @@
|
|||
"categories": []
|
||||
}
|
||||
],
|
||||
"hash": "04ed3ebda992e9548c692aa676e14bda41d40d4c89d3c9aafd3edb63809e4651"
|
||||
"hash": "7998790ab69ca3a0f7d480c0dfa0b58916e9c46a04b7e80940cac69f69b50ab4"
|
||||
}
|
||||
|
|
@ -204,27 +204,6 @@ const completeOnboardingWizard = async () => {
|
|||
await waitAndClickPrimary();
|
||||
|
||||
// End of onboarding wizard
|
||||
if ( IS_RETEST_MODE ) {
|
||||
// Home screen modal can't be reset via the rest api.
|
||||
return;
|
||||
}
|
||||
|
||||
// Wait for homescreen welcome modal to appear
|
||||
const welcomeHeader = await waitForSelectorWithoutThrow(
|
||||
'.woocommerce__welcome-modal__page-content'
|
||||
);
|
||||
if ( ! welcomeHeader ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Click two Next buttons
|
||||
for ( let b = 0; b < 2; b++ ) {
|
||||
await page.waitForSelector( 'button.components-guide__forward-button' );
|
||||
await page.click( 'button.components-guide__forward-button' );
|
||||
}
|
||||
// Wait for "Let's go" button to become active
|
||||
await page.waitForSelector( 'button.components-guide__finish-button' );
|
||||
await page.click( 'button.components-guide__finish-button' );
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -297,8 +276,7 @@ const createSimpleDownloadableProduct = async (
|
|||
{
|
||||
id: uuid.v4(),
|
||||
name: downloadName,
|
||||
file:
|
||||
'https://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2017/08/single.jpg',
|
||||
file: 'https://demo.woothemes.com/woocommerce/wp-content/uploads/sites/56/2017/08/single.jpg',
|
||||
},
|
||||
],
|
||||
download_limit: downloadLimit,
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* 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';
|
||||
|
|
@ -39,7 +39,7 @@ const Homescreen = ( {
|
|||
}, [ hasFinishedResolution, profilerCompleted, profilerSkipped ] );
|
||||
|
||||
const query = useQuery();
|
||||
// @ts-expect-error Layout is a pure JS component
|
||||
|
||||
return <Layout query={ query } />;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import {
|
|||
useRef,
|
||||
} from '@wordpress/element';
|
||||
import { compose } from '@wordpress/compose';
|
||||
import { withDispatch, withSelect } from '@wordpress/data';
|
||||
import { withSelect } from '@wordpress/data';
|
||||
import clsx from 'clsx';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
|
|
@ -35,12 +35,6 @@ import {
|
|||
useActiveSetupTasklist,
|
||||
ProgressTitle,
|
||||
} from '../task-lists';
|
||||
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 { MobileAppModal } from './mobile-app-modal';
|
||||
import './style.scss';
|
||||
import '../dashboard/style.scss';
|
||||
|
|
@ -63,10 +57,7 @@ export const Layout = ( {
|
|||
hasTaskList,
|
||||
showingProgressHeader,
|
||||
isLoadingTaskLists,
|
||||
shouldShowWelcomeModal,
|
||||
shouldShowWelcomeFromCalypsoModal,
|
||||
isTaskListHidden,
|
||||
updateOptions,
|
||||
} ) => {
|
||||
const userPrefs = useUserPreferences();
|
||||
const shouldShowStoreLinks = taskListComplete || isTaskListHidden;
|
||||
|
|
@ -152,25 +143,6 @@ export const Layout = ( {
|
|||
} ) }
|
||||
>
|
||||
{ isDashboardShown ? renderColumns() : renderTaskList() }
|
||||
{ shouldShowWelcomeModal && (
|
||||
<WelcomeModal
|
||||
onClose={ () => {
|
||||
updateOptions( {
|
||||
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
{ shouldShowWelcomeFromCalypsoModal && (
|
||||
<WelcomeFromCalypsoModal
|
||||
onClose={ () => {
|
||||
updateOptions( {
|
||||
[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]:
|
||||
'yes',
|
||||
} );
|
||||
} }
|
||||
/>
|
||||
) }
|
||||
{ shouldShowMobileAppModal && <MobileAppModal /> }
|
||||
{ window.wcAdminFeatures.navigation && (
|
||||
<NavigationIntroModal />
|
||||
|
|
@ -210,8 +182,7 @@ Layout.propTypes = {
|
|||
export default compose(
|
||||
withSelect( ( select ) => {
|
||||
const { isNotesRequesting } = select( NOTES_STORE_NAME );
|
||||
const { getOption, hasFinishedResolution } =
|
||||
select( OPTIONS_STORE_NAME );
|
||||
const { getOption } = select( OPTIONS_STORE_NAME );
|
||||
const {
|
||||
getTaskList,
|
||||
getTaskLists,
|
||||
|
|
@ -220,35 +191,6 @@ export default compose(
|
|||
const taskLists = getTaskLists();
|
||||
const isLoadingTaskLists = ! taskListFinishResolution( 'getTaskLists' );
|
||||
|
||||
const welcomeFromCalypsoModalDismissed =
|
||||
getOption( WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ) !==
|
||||
'no';
|
||||
const welcomeFromCalypsoModalDismissedResolved = hasFinishedResolution(
|
||||
'getOption',
|
||||
[ WELCOME_FROM_CALYPSO_MODAL_DISMISSED_OPTION_NAME ]
|
||||
);
|
||||
const fromCalypsoUrlArgIsPresent =
|
||||
!! window.location.search.match( 'from-calypso' );
|
||||
|
||||
const shouldShowWelcomeFromCalypsoModal =
|
||||
welcomeFromCalypsoModalDismissedResolved &&
|
||||
! welcomeFromCalypsoModalDismissed &&
|
||||
fromCalypsoUrlArgIsPresent;
|
||||
|
||||
const welcomeModalDismissed =
|
||||
getOption( WELCOME_MODAL_DISMISSED_OPTION_NAME ) !== 'no';
|
||||
|
||||
const welcomeModalDismissedHasResolved = hasFinishedResolution(
|
||||
'getOption',
|
||||
[ WELCOME_MODAL_DISMISSED_OPTION_NAME ]
|
||||
);
|
||||
|
||||
const shouldShowWelcomeModal =
|
||||
welcomeModalDismissedHasResolved &&
|
||||
! welcomeModalDismissed &&
|
||||
welcomeFromCalypsoModalDismissedResolved &&
|
||||
! welcomeFromCalypsoModalDismissed;
|
||||
|
||||
const defaultHomescreenLayout =
|
||||
getOption( 'woocommerce_default_homepage_layout' ) ||
|
||||
'single_column';
|
||||
|
|
@ -256,8 +198,6 @@ export default compose(
|
|||
return {
|
||||
defaultHomescreenLayout,
|
||||
isBatchUpdating: isNotesRequesting( 'batchUpdateNotes' ),
|
||||
shouldShowWelcomeModal,
|
||||
shouldShowWelcomeFromCalypsoModal,
|
||||
isLoadingTaskLists,
|
||||
isTaskListHidden: getTaskList( 'setup' )?.isHidden,
|
||||
hasTaskList: getAdminSetting( 'visibleTaskListIds', [] ).length > 0,
|
||||
|
|
@ -266,8 +206,5 @@ export default compose(
|
|||
),
|
||||
taskListComplete: getTaskList( 'setup' )?.isComplete,
|
||||
};
|
||||
} ),
|
||||
withDispatch( ( dispatch ) => ( {
|
||||
updateOptions: dispatch( OPTIONS_STORE_NAME ).updateOptions,
|
||||
} ) )
|
||||
} )
|
||||
)( Layout );
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
export { default as WelcomeFromCalypsoModal } from './welcome-from-calypso-modal';
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.components-guide.woocommerce__welcome-modal.woocommerce__welcome-from-calypso-modal {
|
||||
height: 440px;
|
||||
|
||||
ul.components-guide__page-control {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.woocommerce__welcome-modal__page-content {
|
||||
margin-top: $gap;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React, { useState, useEffect } from '@wordpress/element';
|
||||
import { Guide } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import interpolateComponents from '@automattic/interpolate-components';
|
||||
import clsx from 'clsx';
|
||||
import { Link } from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { LineChartIllustration } from '../welcome-modal/illustrations/line-chart';
|
||||
import { PageContent } from '../welcome-modal/page-content';
|
||||
import './style.scss';
|
||||
|
||||
const page = {
|
||||
image: <LineChartIllustration />,
|
||||
content: (
|
||||
<PageContent
|
||||
title={ __(
|
||||
'Welcome to your new store management experience',
|
||||
'woocommerce'
|
||||
) }
|
||||
body={ interpolateComponents( {
|
||||
mixedString: __(
|
||||
"We've designed your navigation and home screen to help you focus on the things that matter most in managing your online store. {{link}}Learn more{{/link}} about these changes – or explore on your own.",
|
||||
'woocommerce'
|
||||
),
|
||||
components: {
|
||||
link: (
|
||||
<Link
|
||||
href="https://wordpress.com/support/new-woocommerce-experience-on-wordpress-dot-com/"
|
||||
type="external"
|
||||
target="_blank"
|
||||
/>
|
||||
),
|
||||
},
|
||||
} ) }
|
||||
/>
|
||||
),
|
||||
};
|
||||
|
||||
export default function WelcomeFromCalypsoModal( { onClose } ) {
|
||||
const [ guideIsOpen, setGuideIsOpen ] = useState( true );
|
||||
|
||||
useEffect( () => {
|
||||
recordEvent( 'welcome_from_calypso_modal_open' );
|
||||
}, [] );
|
||||
|
||||
if ( ! guideIsOpen ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const guideClassNames = clsx(
|
||||
'woocommerce__welcome-modal',
|
||||
'woocommerce__welcome-from-calypso-modal'
|
||||
);
|
||||
|
||||
return (
|
||||
<Guide
|
||||
onFinish={ () => {
|
||||
if ( onClose ) {
|
||||
onClose();
|
||||
}
|
||||
|
||||
setGuideIsOpen( false );
|
||||
recordEvent( 'welcome_from_calypso_modal_close' );
|
||||
} }
|
||||
className={ guideClassNames }
|
||||
finishButtonText={ __( "Let's go", 'woocommerce' ) }
|
||||
pages={ [ page ] }
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,135 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from '@wordpress/element';
|
||||
|
||||
export const InboxIllustration = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="517"
|
||||
height="160"
|
||||
fill="none"
|
||||
>
|
||||
<defs />
|
||||
<g clipPath="url(#clip0)">
|
||||
<path className="fill-theme-color" d="M0 0h517v160H0z" />
|
||||
<path
|
||||
fill="#fff"
|
||||
fillOpacity=".65"
|
||||
d="M33.576 185.926c-6.271-.911-14.742-.279-17.182 7.085-1.239 3.736-.178 7.645.98 11.08 4.89 14.682 11.49 28.444 19.643 40.954 3.897 5.965 8.253 11.884 9.592 19.504 1.34 7.619-.56 16.084-2.934 23.945-5.595 18.62-13.762 36.371-24.188 52.572 16.006 9.711 34.165 19.634 52.684 12.57 11.09-4.232 21.041-14.268 32.365-15.961 7.562-1.132 14.735 1.648 21.594 4.467a998.376 998.376 0 0195.343 45.227c13.023 7.042 26.207 14.481 40.901 16.153 14.694 1.672 31.486-3.518 41.947-17.66 1.611-2.179 3.241-4.669 5.483-5.546 2.02-.776 4.069-.045 5.952.688l113.896 44.033c6.241 2.411 12.718 4.853 19.534 3.832 6.606-.985 12.833-5.095 18.858-9.148 13.771-9.237 29.242-21.105 32.239-39.005 2.407-14.347-4.339-27.253-11.974-37.283-7.636-10.03-16.705-19.204-20.353-32.315-5.549-19.955 2.798-42.949 9.281-64.164a405.4 405.4 0 0013.244-58.574c2.588-17.377 4.004-35.179.91-51.659-3.095-16.481-11.265-31.624-24.089-38.27-16.746-8.681-38.828-2.057-54.255-13.347-13.04-9.513-17.58-29.035-25.856-44.316-14.698-27.146-41.453-40.923-67.958-50.405-28.1-10.066-58.213-16.679-88.607-10-6.962 1.527-14.047 3.833-20.152 8.649-9.36 7.388-15.196 19.616-22.986 29.33C156.104 57.468 100.341 49.156 68.22 87.48c-11.398 13.594-17.581 31.878-18.797 49.831-1.31 19.318 8.69 33.652 8.706 50.888-7.135 2.277-17.21-1.211-24.553-2.273z"
|
||||
/>
|
||||
<path fill="#F6F7F7" d="M113 33h267v185H113z" />
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M248.466 73.79h-114.69V47.88h114.69V73.79zm-114.015-.673h113.341V48.554H134.451v24.563z"
|
||||
/>
|
||||
<path
|
||||
fill="#CCC"
|
||||
d="M155.702 56.63h-12.818v12.786h12.818V56.63z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M154.016 67.733h-13.493V54.274h13.493v13.46zm-12.819-.673h12.144V54.947h-12.144V67.06z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M225.267 56.966h-50v.673h50v-.673z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M235.311 61.677h-60.044v.673h60.044v-.673z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M225.267 66.387h-50v.673h50v-.673z"
|
||||
opacity=".2"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M248.466 147.142h-114.69v-25.909h114.69v25.909zm-114.015-.673h113.341v-24.563H134.451v24.563z"
|
||||
/>
|
||||
<path
|
||||
fill="#CCC"
|
||||
d="M155.702 129.981h-12.818v12.786h12.818v-12.786z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M154.016 141.085h-13.493v-13.459h13.493v13.459zm-12.819-.673h12.144v-12.113h-12.144v12.113z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M235.311 130.318h-60.044v.673h60.044v-.673z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M225.267 135.028h-50v.673h50v-.673z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M215.267 139.739h-40v.673h40v-.673z"
|
||||
opacity=".2"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M289.62 110.465H174.93V84.557h114.69v25.908zm-114.016-.672h113.341V85.23H175.604v24.563z"
|
||||
/>
|
||||
<path
|
||||
fill="#CCC"
|
||||
d="M267.694 106.092h12.818V93.305h-12.818v12.787z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M282.873 104.409H269.38V90.95h13.493v13.459zm-12.818-.673h12.144V91.623h-12.144v12.113z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M248.129 93.642h-60.044v.673h60.044v-.673z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M238.085 98.353h-50v.672h50v-.672z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M243.085 103.063h-55v.673h55v-.673z"
|
||||
opacity=".2"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M266.035 66.154a5.363 5.363 0 005.369-5.356 5.363 5.363 0 00-5.369-5.356c-2.966 0-5.37 2.398-5.37 5.356 0 2.958 2.404 5.356 5.37 5.356zM273.793 140.515c2.966 0 5.37-2.398 5.37-5.356 0-2.958-2.404-5.356-5.37-5.356a5.363 5.363 0 00-5.369 5.356 5.363 5.363 0 005.369 5.356zM153.706 102.83a5.363 5.363 0 005.37-5.356c0-2.959-2.404-5.357-5.37-5.357s-5.37 2.398-5.37 5.357a5.363 5.363 0 005.37 5.356z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M401.276 172h-70.552a8.79 8.79 0 01-6.169-2.517 8.532 8.532 0 01-2.555-6.078V131.56a3.368 3.368 0 011.078-2.471l37.386-34.915A8.113 8.113 0 01366 92c2.06 0 4.041.778 5.536 2.174l35.645 33.289a8.882 8.882 0 012.084 2.944 8.78 8.78 0 01.735 3.515v29.483c0 2.28-.919 4.466-2.555 6.078a8.79 8.79 0 01-6.169 2.517z"
|
||||
/>
|
||||
<path
|
||||
fill="#F0F0F0"
|
||||
d="M393.267 106h-54.534c-2.614 0-4.733 2.053-4.733 4.585v52.83c0 2.532 2.119 4.585 4.733 4.585h54.534c2.614 0 4.733-2.053 4.733-4.585v-52.83c0-2.532-2.119-4.585-4.733-4.585z"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M366 150.493l-41.579-20.323a1.667 1.667 0 00-1.631.091 1.695 1.695 0 00-.579.619 1.725 1.725 0 00-.211.826v34.967a5.345 5.345 0 001.543 3.767 5.261 5.261 0 003.725 1.56h77.464a5.261 5.261 0 003.725-1.56 5.345 5.345 0 001.543-3.767v-34.368c0-.352-.088-.699-.257-1.008a2.069 2.069 0 00-1.688-1.071 2.035 2.035 0 00-1.009.205L366 150.493zM390 118h-48v2h48v-2zM390 124h-48v2h48v-2z"
|
||||
/>
|
||||
<path className="fill-theme-color" d="M384 130h-42v2h42v-2z" />
|
||||
<path fill="#fff" d="M335 112a7 7 0 100-14 7 7 0 000 14z" />
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M336 98a8.003 8.003 0 00-7.391 4.939 7.992 7.992 0 00-.455 4.622 7.993 7.993 0 006.285 6.285A8 8 0 00344 106a8.022 8.022 0 00-8-8zm-1.642 12.265l-4.1-4.1 1.15-1.15 2.954 2.954 6.234-6.234 1.15 1.15-7.388 7.38z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h517v160H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from '@wordpress/element';
|
||||
|
||||
export const PieChartIllustration = () => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="517"
|
||||
height="160"
|
||||
fill="none"
|
||||
>
|
||||
<defs />
|
||||
<g clipPath="url(#clip0)">
|
||||
<path className="fill-theme-color" d="M0 0h517v160H0z" />
|
||||
<path
|
||||
fill="#fff"
|
||||
fillOpacity=".65"
|
||||
d="M30.501 63.74c7.21-10.372 19.533-17.051 31.735-22.399l2.057-.888c12.774-5.469 25.944-10.008 39.27-14.127 7.129-2.21 14.285-4.313 21.448-6.389l5.615-1.62c7.29-2.106 14.596-4.21 21.916-6.315a6165.97 6165.97 0 0121.511-6.139 3346.684 3346.684 0 0127.597-7.677 2189.847 2189.847 0 0121.603-5.782c9.237-2.42 18.491-4.764 27.761-7.035 7.246-1.77 14.502-3.483 21.767-5.14a1152.381 1152.381 0 0128.025-6 940.985 940.985 0 0119.106-3.654l2.908-.52c27.416-4.852 55.724-8.222 82.193-2.775l.715.151c.355.074.71.148 1.067.23a87.181 87.181 0 0114.309 4.404c8.282 3.398 15.644 8.247 20.596 14.967 7.763 10.54 8.624 24.398 6.126 37.281-2.498 12.884-8.007 25.346-12.299 37.974-1.257 3.7-2.378 7.49-3.34 11.33-5.997 24.068-5.398 49.993 11.766 67.323a93.715 93.715 0 007.029 6.227c3.928 3.218 7.905 6.424 11.03 10.3 7.28 9.017 9.211 20.756 10.296 32.099 1.425 15.086 1.236 31.775-9.516 44.175-11.153 12.875-30.519 17.317-48.211 18.232-27.498 1.457-54.442-3.316-81.339-6.956-26.898-3.641-54.739-6.141-81.787-.263a121.18 121.18 0 00-17.082 5.062 108.9 108.9 0 00-21.21 10.677c-9.622 6.318-17.826 14.22-23.006 23.613-11.123 20.092-39.488 28.645-62.664 24.15-22.115-4.288-39.921-20.774-44.019-40.738-4.538-22.229 6.615-44.308 16.332-66.515a358.83 358.83 0 003.437-8.081 238.988 238.988 0 001.795-4.513 165.185 165.185 0 002.828-7.947c4.39-13.591 6.016-28.984-2.295-40.321-4.658-6.347-11.477-10.355-19.238-13.393-17.388-6.801-39.481-8.722-52.38-21.167C22.84 94.854 21.359 76.92 30.502 63.74z"
|
||||
/>
|
||||
<path fill="#F6F7F7" d="M124 33h267v185H124z" />
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M169 152.005V229a734.947 734.947 0 01-15.628-.991l-2.372-.181v-75.823c0-.395.072-.785.212-1.15.14-.365.345-.696.604-.975.258-.279.565-.5.903-.651a2.61 2.61 0 011.066-.229h12.43c.366 0 .728.078 1.066.229.338.151.645.372.903.651.259.279.464.61.604.975.14.365.212.755.212 1.15z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M186 229.733V127.377c0-.63.31-1.235.861-1.681.551-.446 1.299-.696 2.079-.696h13.12c.386 0 .768.061 1.125.181.357.119.681.294.954.515.273.221.489.483.637.771.148.289.224.598.224.91V230l-19-.267z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M225 230.002v-97.406a2.843 2.843 0 012.843-2.845h12.689a2.844 2.844 0 012.844 2.845v97.196l-18.376.21z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M282 88.368v140.224c-6 .145-12 .281-18 .408V88.368c0-.628.293-1.23.816-1.674.522-.445 1.231-.694 1.969-.694h12.43c.738 0 1.447.25 1.969.694.523.444.816 1.046.816 1.674z"
|
||||
opacity=".5"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M319 112.954v115.709c-6 .12-12 .232-18 .337V112.954c0-.518.293-1.015.816-1.382.522-.366 1.231-.572 1.969-.572h12.43c.738 0 1.447.206 1.969.572.523.367.816.864.816 1.382z"
|
||||
opacity=".7"
|
||||
/>
|
||||
<path
|
||||
stroke="#CCC"
|
||||
strokeLinecap="round"
|
||||
strokeMiterlimit="10"
|
||||
strokeWidth="2"
|
||||
d="M160.125 133.501l41.91-46.767 41.91 23.545 41.91-72.248 41.909 34.511"
|
||||
/>
|
||||
<path
|
||||
className="fill-theme-color"
|
||||
d="M160 139.005c2.761 0 5-2.24 5-5.003a5.002 5.002 0 00-5-5.002c-2.761 0-5 2.24-5 5.002a5.002 5.002 0 005 5.003zM201.5 93.007c4.142 0 7.5-3.36 7.5-7.504A7.502 7.502 0 00201.5 78c-4.142 0-7.5 3.36-7.5 7.504a7.502 7.502 0 007.5 7.503zM243.784 119.31c4.985 0 9.026-4.043 9.026-9.031s-4.041-9.031-9.026-9.031c-4.986 0-9.027 4.043-9.027 9.031s4.041 9.031 9.027 9.031zM286.027 46.062c4.985 0 9.027-4.043 9.027-9.031S291.012 28 286.027 28c-4.986 0-9.027 4.043-9.027 9.031s4.041 9.031 9.027 9.031zM327.5 80.007c4.142 0 7.5-3.36 7.5-7.504A7.502 7.502 0 00327.5 65c-4.142 0-7.5 3.36-7.5 7.504a7.502 7.502 0 007.5 7.503zM408 137l-36 2-18-30.926c5.588-3.326 12.033-5.083 18.606-5.074C392.154 103 408 118.222 408 137zM351.107 110l-.143.088c-7.887 4.836-13.573 12.518-15.859 21.429a35.211 35.211 0 003.603 26.338l.084.145L370 140.317 351.107 110zm-12.19 47.543a34.886 34.886 0 01-3.485-25.944c2.25-8.77 7.826-16.342 15.566-21.138l18.531 29.738-30.612 17.344zM408.664 138.651l-35.891 2.797 10.3 32.297.162-.046c7.808-2.265 14.585-6.957 19.211-13.301 4.626-6.344 6.824-13.96 6.23-21.588l-.012-.159zm-35.447 3.081l35.134-2.738c1.116 15.348-9.387 29.753-25.051 34.355l-10.083-31.617zM370.719 142.639l-30.714 17.335.088.131c3.977 5.942 9.926 10.554 16.982 13.165 7.056 2.61 14.849 3.083 22.245 1.349l.164-.038-8.765-31.942zm-30.249 17.435l30.034-16.951 8.57 31.234c-7.278 1.673-14.935 1.192-21.871-1.374-6.936-2.566-12.794-7.086-16.733-12.909z"
|
||||
/>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M423 97h-17v-1h17v1zM423 101h-17v-3h17v3zM416 104h-17.979l-.05.068L384 122.821l.28.179 13.92-18.685H416V104z"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<path fill="#fff" d="M0 0h517v160H0z" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React, { useState, useEffect } from '@wordpress/element';
|
||||
import { Guide } from '@wordpress/components';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { LineChartIllustration } from './illustrations/line-chart';
|
||||
import { InboxIllustration } from './illustrations/inbox';
|
||||
import { PieChartIllustration } from './illustrations/pie-chart';
|
||||
import { PageContent } from './page-content';
|
||||
import './style.scss';
|
||||
|
||||
const pages = [
|
||||
{
|
||||
image: <LineChartIllustration />,
|
||||
content: (
|
||||
<PageContent
|
||||
title={ __(
|
||||
'Welcome to your WooCommerce store’s online HQ!',
|
||||
'woocommerce'
|
||||
) }
|
||||
body={ __(
|
||||
"Here's where you’ll find setup suggestions, tips and tools, and key data on your store’s performance and earnings — all the basics for store management and growth.",
|
||||
'woocommerce'
|
||||
) }
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
image: <InboxIllustration />,
|
||||
content: (
|
||||
<PageContent
|
||||
title={ __(
|
||||
'A personalized inbox full of relevant advice',
|
||||
'woocommerce'
|
||||
) }
|
||||
body={ __(
|
||||
'Check your inbox for helpful growth tips tailored to your store and notifications about key traffic and sales milestones. We look forward to celebrating them with you!',
|
||||
'woocommerce'
|
||||
) }
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
image: <PieChartIllustration />,
|
||||
content: (
|
||||
<PageContent
|
||||
title={ __(
|
||||
'Good data leads to smart business decisions',
|
||||
'woocommerce'
|
||||
) }
|
||||
body={ __(
|
||||
'Monitor your stats to improve performance, increase sales, and track your progress toward revenue goals. The more you know, the better you can serve your customers and grow your store.',
|
||||
'woocommerce'
|
||||
) }
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
export const WelcomeModal = ( { onClose } ) => {
|
||||
const [ guideIsOpen, setGuideIsOpen ] = useState( true );
|
||||
|
||||
useEffect( () => {
|
||||
recordEvent( 'task_list_welcome_modal_open' );
|
||||
}, [] );
|
||||
|
||||
return (
|
||||
<>
|
||||
{ guideIsOpen && (
|
||||
<Guide
|
||||
onFinish={ () => {
|
||||
setGuideIsOpen( false );
|
||||
onClose();
|
||||
recordEvent( 'task_list_welcome_modal_close' );
|
||||
} }
|
||||
className={ 'woocommerce__welcome-modal' }
|
||||
finishButtonText={ __( "Let's go", 'woocommerce' ) }
|
||||
pages={ pages }
|
||||
/>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import React from '@wordpress/element';
|
||||
|
||||
export const PageContent = ( { title, body } ) => {
|
||||
return (
|
||||
<div className="woocommerce__welcome-modal__page-content">
|
||||
<h2 className="woocommerce__welcome-modal__page-content__header">
|
||||
{ title }
|
||||
</h2>
|
||||
<p className="woocommerce__welcome-modal__page-content__body">
|
||||
{ body }
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
// The welcome modal is presented outside the homescreen class namespace
|
||||
.components-guide.woocommerce__welcome-modal {
|
||||
max-width: 517px;
|
||||
height: 460px;
|
||||
|
||||
.components-modal__header {
|
||||
height: 0;
|
||||
|
||||
.components-button {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.components-guide__container {
|
||||
margin-top: 0;
|
||||
|
||||
.woocommerce__welcome-modal__page-content {
|
||||
padding: 0 24px;
|
||||
|
||||
.woocommerce__welcome-modal__page-content__header {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.woocommerce__welcome-modal__page-content__body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components-guide__footer {
|
||||
padding: 0;
|
||||
margin: 0 24px 24px 24px;
|
||||
justify-content: flex-end;
|
||||
width: initial;
|
||||
|
||||
.components-guide__finish-button,
|
||||
.components-guide__forward-button,
|
||||
.components-guide__back-button {
|
||||
position: initial;
|
||||
padding: 0 16px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.components-guide__forward-button,
|
||||
.components-guide__back-button {
|
||||
color: var(--wp-admin-theme-color);
|
||||
}
|
||||
|
||||
.components-guide__forward-button,
|
||||
.components-guide__finish-button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.components-guide__forward-button {
|
||||
box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-theme-color {
|
||||
fill: var(--wp-admin-theme-color);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { render, fireEvent } from '@testing-library/react';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { WelcomeModal } from '../index';
|
||||
|
||||
jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn() } ) );
|
||||
|
||||
describe( 'WelcomeModal', () => {
|
||||
it( 'should call onClose when it is closed', () => {
|
||||
const onCloseSpy = jest.fn();
|
||||
|
||||
const { queryAllByRole } = render(
|
||||
<WelcomeModal onClose={ onCloseSpy } />
|
||||
);
|
||||
|
||||
fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
|
||||
|
||||
expect( onCloseSpy ).toHaveBeenCalledTimes( 1 );
|
||||
} );
|
||||
|
||||
it( 'should not render the guide after it is closed', () => {
|
||||
const { queryAllByRole, container } = render(
|
||||
<WelcomeModal onClose={ () => {} } />
|
||||
);
|
||||
|
||||
fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
|
||||
|
||||
expect( container ).toBeEmptyDOMElement();
|
||||
} );
|
||||
|
||||
it( 'should track open and close', () => {
|
||||
const { queryAllByRole } = render(
|
||||
<WelcomeModal onClose={ () => {} } />
|
||||
);
|
||||
|
||||
expect( recordEvent ).toHaveBeenLastCalledWith(
|
||||
'task_list_welcome_modal_open'
|
||||
);
|
||||
|
||||
fireEvent.click( queryAllByRole( 'button' )[ 0 ] );
|
||||
|
||||
expect( recordEvent ).toHaveBeenLastCalledWith(
|
||||
'task_list_welcome_modal_close'
|
||||
);
|
||||
} );
|
||||
} );
|
||||
|
|
@ -6,7 +6,7 @@ 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 { useState } from '@wordpress/element';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
|
|
@ -16,7 +16,6 @@ import './style.scss';
|
|||
import NavInto1 from './images/nav-intro-1.png';
|
||||
import NavInto2 from './images/nav-intro-2.png';
|
||||
import NavInto3 from './images/nav-intro-3.png';
|
||||
import { WELCOME_MODAL_DISMISSED_OPTION_NAME } from '../../../homescreen/constants';
|
||||
|
||||
export const INTRO_MODAL_DISMISSED_OPTION_NAME =
|
||||
'woocommerce_navigation_intro_modal_dismissed';
|
||||
|
|
@ -26,29 +25,20 @@ export const IntroModal = () => {
|
|||
|
||||
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
||||
|
||||
const { isDismissed, isResolving, isWelcomeModalShown } = useSelect(
|
||||
( select ) => {
|
||||
const { getOption, isResolving: isOptionResolving } =
|
||||
select( OPTIONS_STORE_NAME );
|
||||
const dismissedOption = getOption(
|
||||
INTRO_MODAL_DISMISSED_OPTION_NAME
|
||||
);
|
||||
const { isDismissed, isResolving } = useSelect( ( select ) => {
|
||||
const { getOption, isResolving: isOptionResolving } =
|
||||
select( OPTIONS_STORE_NAME );
|
||||
const dismissedOption = getOption( INTRO_MODAL_DISMISSED_OPTION_NAME );
|
||||
|
||||
return {
|
||||
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,
|
||||
] ),
|
||||
};
|
||||
}
|
||||
);
|
||||
return {
|
||||
isDismissed: dismissedOption === 'yes',
|
||||
isResolving:
|
||||
typeof dismissedOption === 'undefined' ||
|
||||
isOptionResolving( 'getOption', [
|
||||
INTRO_MODAL_DISMISSED_OPTION_NAME,
|
||||
] ),
|
||||
};
|
||||
} );
|
||||
|
||||
const dismissModal = () => {
|
||||
updateOptions( {
|
||||
|
|
@ -58,15 +48,7 @@ export const IntroModal = () => {
|
|||
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 && ! isDismissed ) {
|
||||
dismissModal();
|
||||
}
|
||||
}, [ isDismissed, isResolving, isWelcomeModalShown ] );
|
||||
|
||||
if ( ! isOpen || isDismissed || isResolving || isWelcomeModalShown ) {
|
||||
if ( ! isOpen || isDismissed || isResolving ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,6 @@ jest.mock( '@wordpress/data', () => {
|
|||
describe( 'IntroModal', () => {
|
||||
test( 'should not show when modal options are resolving', () => {
|
||||
useSelect.mockImplementation( () => ( {
|
||||
isWelcomeModalShown: null,
|
||||
isResolving: true,
|
||||
} ) );
|
||||
|
||||
|
|
@ -35,29 +34,11 @@ describe( 'IntroModal', () => {
|
|||
expect( container ).toBeEmptyDOMElement();
|
||||
} );
|
||||
|
||||
test( 'should dismiss when the welcome modal is shown', () => {
|
||||
const updateOptions = jest.fn();
|
||||
useSelect.mockImplementation( () => ( {
|
||||
isWelcomeModalShown: true,
|
||||
} ) );
|
||||
useDispatch.mockImplementation( () => ( {
|
||||
updateOptions,
|
||||
} ) );
|
||||
|
||||
const { container } = render( <IntroModal /> );
|
||||
|
||||
expect( container ).toBeEmptyDOMElement();
|
||||
expect( updateOptions ).toHaveBeenCalledWith( {
|
||||
[ INTRO_MODAL_DISMISSED_OPTION_NAME ]: 'yes',
|
||||
} );
|
||||
} );
|
||||
|
||||
test( 'should not dismiss when the modal has already been dismissed', () => {
|
||||
const updateOptions = jest.fn();
|
||||
useSelect.mockImplementation( () => ( {
|
||||
isDismissed: true,
|
||||
isResolving: false,
|
||||
isWelcomeModalShown: true,
|
||||
} ) );
|
||||
useDispatch.mockImplementation( () => ( {
|
||||
updateOptions,
|
||||
|
|
@ -69,24 +50,11 @@ describe( 'IntroModal', () => {
|
|||
expect( updateOptions ).not.toHaveBeenCalled();
|
||||
} );
|
||||
|
||||
test( 'should show the intro modal when welcome modal is not shown', () => {
|
||||
useSelect.mockImplementation( () => ( {
|
||||
isResolving: false,
|
||||
isWelcomeModalShown: false,
|
||||
} ) );
|
||||
|
||||
render( <IntroModal /> );
|
||||
|
||||
expect(
|
||||
screen.queryByText( 'A new navigation for WooCommerce' )
|
||||
).not.toBeNull();
|
||||
} );
|
||||
|
||||
test( 'should hide and update the dismissal option when closing the modal', () => {
|
||||
const updateOptions = jest.fn();
|
||||
useSelect.mockImplementation( () => ( {
|
||||
isResolving: false,
|
||||
isWelcomeModalShown: false,
|
||||
isDismissed: false,
|
||||
} ) );
|
||||
useDispatch.mockImplementation( () => ( {
|
||||
updateOptions,
|
||||
|
|
|
|||
|
|
@ -18,46 +18,44 @@ To enable the new onboarding experience manually, log-in to `wp-admin`, and go t
|
|||
|
||||
To power the new onboarding flow client side, new REST API endpoints have been introduced. These are purpose built endpoints that exist under the `/wc-admin/onboarding/` namespace, and are not meant to be shipped in the core rest API package. The source is stored in `src/API/Plugins.php`, `src/API/OnboardingProfile.php`, and `src/API/OnboardingTasks.php` respectively.
|
||||
|
||||
* POST `/wc-admin/plugins/install` - Install requested plugins.
|
||||
* GET `/wc-admin/plugins/active` - Returns a list of the currently active plugins.
|
||||
* POST `/wc-admin/plugins/activate` - Activates the requested plugins. Multiple plugins can be passed to activate at once.
|
||||
* GET `/wc-admin/plugins/connect-jetpack` - Generates a URL for connecting to Jetpack. A `redirect_url` is accepted, which is used upon a successful connection.
|
||||
* POST `/wc-admin/plugins/request-wccom-connect` - Generates a URL for the WooCommerce.com connection process.
|
||||
* POST `/wc-admin/plugins/finish-wccom-connect` - Finishes the WooCommerce.com connection process by storing the received access token.
|
||||
* POST `/wc-admin/plugins/connect-square` - Generates a URL for connecting to Square during the payments task.
|
||||
* GET `/wc-admin/onboarding/profile` - Returns the information gathered during the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
|
||||
* POST `/wc-admin/onboarding/profile` - Sets data for the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
|
||||
* POST `/wc-admin/onboarding/tasks/import_sample_products` - Used for importing sample products during the appearance task.
|
||||
* POST `/wc-admin/onboarding/tasks/create_homepage` - Used for creating a homepage using Gutenberg templates.
|
||||
- POST `/wc-admin/plugins/install` - Install requested plugins.
|
||||
- GET `/wc-admin/plugins/active` - Returns a list of the currently active plugins.
|
||||
- POST `/wc-admin/plugins/activate` - Activates the requested plugins. Multiple plugins can be passed to activate at once.
|
||||
- GET `/wc-admin/plugins/connect-jetpack` - Generates a URL for connecting to Jetpack. A `redirect_url` is accepted, which is used upon a successful connection.
|
||||
- POST `/wc-admin/plugins/request-wccom-connect` - Generates a URL for the WooCommerce.com connection process.
|
||||
- POST `/wc-admin/plugins/finish-wccom-connect` - Finishes the WooCommerce.com connection process by storing the received access token.
|
||||
- POST `/wc-admin/plugins/connect-square` - Generates a URL for connecting to Square during the payments task.
|
||||
- GET `/wc-admin/onboarding/profile` - Returns the information gathered during the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
|
||||
- POST `/wc-admin/onboarding/profile` - Sets data for the profile wizard. See the `woocommerce_onboarding_profile_properties` array for a list of fields.
|
||||
- POST `/wc-admin/onboarding/tasks/import_sample_products` - Used for importing sample products during the appearance task.
|
||||
- POST `/wc-admin/onboarding/tasks/create_homepage` - Used for creating a homepage using Gutenberg templates.
|
||||
|
||||
## Onboarding filters
|
||||
|
||||
* `woocommerce_admin_onboarding_profile_properties` filters the properties we track as part of the profile wizard (such as information from store/business details steps). When the `completed` property is set to true, the profile wizard is completely dismissed and hidden.
|
||||
* `woocommerce_admin_onboarding_industries` filters the list of allowed industries displayed in the profile wizard.
|
||||
* `woocommerce_admin_onboarding_industry_image` filters the images used for homepage templates in the appearance task. When creating a homepage, example images are used based on industry. These images are stored in `images/onboarding`.
|
||||
* `woocommerce_admin_onboarding_product_types` filters the product types displayed in the profile wizard.
|
||||
* `woocommerce_admin_onboarding_plugins_whitelist` filters the list of plugins that can installed & activated via onboarding. This acts as a whitelist so only certain plugins can be used via the `/wc-admin/onboarding/profile/install` and `/wc-admin/onboarding/profile/activate` endpoints.
|
||||
* `woocommerce_admin_onboarding_themes` filters the themes displayed in the profile wizard.
|
||||
* `woocommerce_admin_onboarding_jetpack_connect_redirect_url` filters the Jetpack connection redirect URL outlined in the Jetpack connection section below.
|
||||
* `woocommerce_admin_onboarding_task_list` filters the list of tasks on the task list dashboard. This allows extensions to add new tasks. See [the extension docs](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-admin/docs/examples/extensions) for an example of how to do this.
|
||||
* `woocommerce_rest_onboarding_profile_collection_params` filters the collection parameters for requests to `/wc-admin/onboarding/profile`.
|
||||
* `woocommerce_rest_onboarding_profile_object_query` filters the query arguments for requests to `/wc-admin/onboarding/profile`.
|
||||
* `woocommerce_rest_onboarding_prepare_onboarding_profile` filters the response for requests to `/wc-admin/onboarding/profile`.
|
||||
- `woocommerce_admin_onboarding_profile_properties` filters the properties we track as part of the profile wizard (such as information from store/business details steps). When the `completed` property is set to true, the profile wizard is completely dismissed and hidden.
|
||||
- `woocommerce_admin_onboarding_industries` filters the list of allowed industries displayed in the profile wizard.
|
||||
- `woocommerce_admin_onboarding_industry_image` filters the images used for homepage templates in the appearance task. When creating a homepage, example images are used based on industry. These images are stored in `images/onboarding`.
|
||||
- `woocommerce_admin_onboarding_product_types` filters the product types displayed in the profile wizard.
|
||||
- `woocommerce_admin_onboarding_plugins_whitelist` filters the list of plugins that can installed & activated via onboarding. This acts as a whitelist so only certain plugins can be used via the `/wc-admin/onboarding/profile/install` and `/wc-admin/onboarding/profile/activate` endpoints.
|
||||
- `woocommerce_admin_onboarding_themes` filters the themes displayed in the profile wizard.
|
||||
- `woocommerce_admin_onboarding_jetpack_connect_redirect_url` filters the Jetpack connection redirect URL outlined in the Jetpack connection section below.
|
||||
- `woocommerce_admin_onboarding_task_list` filters the list of tasks on the task list dashboard. This allows extensions to add new tasks. See [the extension docs](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce-admin/docs/examples/extensions) for an example of how to do this.
|
||||
- `woocommerce_rest_onboarding_profile_collection_params` filters the collection parameters for requests to `/wc-admin/onboarding/profile`.
|
||||
- `woocommerce_rest_onboarding_profile_object_query` filters the query arguments for requests to `/wc-admin/onboarding/profile`.
|
||||
- `woocommerce_rest_onboarding_prepare_onboarding_profile` filters the response for requests to `/wc-admin/onboarding/profile`.
|
||||
|
||||
## Options and settings
|
||||
|
||||
A few new WordPress options have been introduced to store information and settings during setup. It may be necessary to manual delete these options from your `wp_options` database to test a certain task or feature.
|
||||
|
||||
|
||||
* `woocommerce_task_list_hidden_lists`. This option houses the task lists that have been hidden from view by the user.
|
||||
* `woocommerce_task_list_welcome_modal_dismissed`. This option is used to show a congratulations modal during the transition between the profile wizard and task list.
|
||||
- `woocommerce_task_list_hidden_lists`. This option houses the task lists that have been hidden from view by the user.
|
||||
|
||||
We also use existing options from WooCommerce Core or extensions like WooCommerce Shipping & Tax or Stripe. The list below may not be complete, as new tasks are introduced, but you can generally find usage of these by searching for the [getOptions selector](https://github.com/woocommerce/woocommerce/search?q=getOptions&unscoped_q=getOptions).
|
||||
|
||||
* `woocommerce_setup_jetpack_opted_in` and `wc_connect_options` are both used to control Jetpack's Terms of Service opt-in, which is necessary to set for a user during the connection process, so that they can use services like automated tax rates.
|
||||
* `woocommerce_allow_tracking` is used to control Tracks opt-in, allowing us to gather usage data from WooCommerce Admin and WooCommerce core.
|
||||
* `woocommerce_demo_store` and `woocommerce_demo_store_notice` are used on the appearance task for the store notice step.
|
||||
* `woocommerce_ppec_paypal_settings` and `woocommerce_stripe_settings` are used in the payments task and connection steps.
|
||||
- `woocommerce_setup_jetpack_opted_in` and `wc_connect_options` are both used to control Jetpack's Terms of Service opt-in, which is necessary to set for a user during the connection process, so that they can use services like automated tax rates.
|
||||
- `woocommerce_allow_tracking` is used to control Tracks opt-in, allowing us to gather usage data from WooCommerce Admin and WooCommerce core.
|
||||
- `woocommerce_demo_store` and `woocommerce_demo_store_notice` are used on the appearance task for the store notice step.
|
||||
- `woocommerce_ppec_paypal_settings` and `woocommerce_stripe_settings` are used in the payments task and connection steps.
|
||||
|
||||
## WooCommerce.com Connection
|
||||
|
||||
|
|
@ -67,8 +65,8 @@ To make the connection from the new onboarding experience possible, we build our
|
|||
|
||||
Both of these endpoints use WooCommerce Core's `WC_Helper_API` directly. The main difference with our connection (compared to the connection on the subscriptions page) is the addition of two additional query string parameters:
|
||||
|
||||
* `wccom-from=onboarding`, which is used to tell WooCommerce.com & WordPress.com that we are connecting from the new onboarding flow. This parameter is passed from the user's site to WooCommerce.com and finally into Calypso, so that the Calypso login and sign-up screens match the rest of the profile wizard [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up on the existing WooCommerce OAuth screen.
|
||||
* `calypso_env` allows us to load different versions of Calypso when testing. See the Calypso section below.
|
||||
- `wccom-from=onboarding`, which is used to tell WooCommerce.com & WordPress.com that we are connecting from the new onboarding flow. This parameter is passed from the user's site to WooCommerce.com and finally into Calypso, so that the Calypso login and sign-up screens match the rest of the profile wizard [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up on the existing WooCommerce OAuth screen.
|
||||
- `calypso_env` allows us to load different versions of Calypso when testing. See the Calypso section below.
|
||||
|
||||
To disconnect from WooCommerce.com, go to `WooCommerce > Extensions > WooCommerce.com Subscriptions > Connected to WooCommerce.com > Disconnect`.
|
||||
|
||||
|
|
@ -80,8 +78,8 @@ We have a special WordPress.com connection flow designed specifically for WooCom
|
|||
|
||||
We use the Jetpack Connection package's `Manager::get_authorization_url()` function directly, but add the following two query parameters:
|
||||
|
||||
* `calypso_env`, which allows us to load different versions of Calypso when testing. See the Calypso section below.
|
||||
* `from=woocommerce-services`, which is used to conditionally show the WooCommerce-themed authorization process [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up in the normal Jetpack authorization flow.
|
||||
- `calypso_env`, which allows us to load different versions of Calypso when testing. See the Calypso section below.
|
||||
- `from=woocommerce-services`, which is used to conditionally show the WooCommerce-themed authorization process [https://github.com/Automattic/wp-calypso/pull/35193](https://github.com/Automattic/wp-calypso/pull/35193). Without this parameter, you would end up in the normal Jetpack authorization flow.
|
||||
|
||||
The user is prompted to install and connect to Jetpack as the first step of the profile wizard. If the user hasn't connected when they arrive at the task list, we also prompt them on certain tasks to make the setup process easier, such as the shipping and tax steps.
|
||||
|
||||
|
|
@ -97,19 +95,18 @@ By default, a merchant will end up on a production version of Calypso [https://w
|
|||
|
||||
To change the value of `calypso_env`, set `WOOCOMMERCE_CALYPSO_ENVIRONMENT` to one of the following values in your `wp-config.php`:
|
||||
|
||||
* `production` which will send you to `https://wordpress.com`
|
||||
* `development` which will send you to `http://calypso.localhost:3000/`
|
||||
* `wpcalypso` which will send you to `http://wpcalypso.wordpress.com/`
|
||||
* `horizon` which will send you to `https://horizon.wordpress.com`
|
||||
* `stage` which will send you to `https://wordpress.com` (you must be proxied)
|
||||
- `production` which will send you to `https://wordpress.com`
|
||||
- `development` which will send you to `http://calypso.localhost:3000/`
|
||||
- `wpcalypso` which will send you to `http://wpcalypso.wordpress.com/`
|
||||
- `horizon` which will send you to `https://horizon.wordpress.com`
|
||||
- `stage` which will send you to `https://wordpress.com` (you must be proxied)
|
||||
|
||||
### Feature Flags
|
||||
|
||||
Logic for the Calypso flows are gated behind two separate [Calypso feature flags](https://github.com/Automattic/wp-calypso/tree/trunk/config#feature-flags). Since Calypso's login, sign-up, and Jetpack authentication code is spread throughout a few different files, searching for these feature flags is the best way to locate parts of the flow for development.
|
||||
|
||||
* [`woocommerce/onboarding-oauth`](https://github.com/Automattic/wp-calypso/search?q=woocommerce%2Fonboarding-oauth&unscoped_q=woocommerce%2Fonboarding-oauth), which enables the updated WooCommerce.com connection flow.
|
||||
* [`jetpack/connect/woocommerce`](https://github.com/Automattic/wp-calypso/search?q=%22jetpack%2Fconnect%2Fwoocommerce%22&unscoped_q=%22jetpack%2Fconnect%2Fwoocommerce%22), which enables the updated Jetpack connection flow.
|
||||
|
||||
- [`woocommerce/onboarding-oauth`](https://github.com/Automattic/wp-calypso/search?q=woocommerce%2Fonboarding-oauth&unscoped_q=woocommerce%2Fonboarding-oauth), which enables the updated WooCommerce.com connection flow.
|
||||
- [`jetpack/connect/woocommerce`](https://github.com/Automattic/wp-calypso/search?q=%22jetpack%2Fconnect%2Fwoocommerce%22&unscoped_q=%22jetpack%2Fconnect%2Fwoocommerce%22), which enables the updated Jetpack connection flow.
|
||||
|
||||
### Testing
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Clean up welcome modal code
|
||||
|
|
@ -179,8 +179,6 @@ class Options extends \WC_REST_Data_Controller {
|
|||
'woocommerce_setting_payments_recommendations_hidden',
|
||||
'woocommerce_navigation_favorites_tooltip_hidden',
|
||||
'woocommerce_admin_transient_notices_queue',
|
||||
'woocommerce_task_list_welcome_modal_dismissed',
|
||||
'woocommerce_welcome_from_calypso_modal_dismissed',
|
||||
'woocommerce_task_list_hidden',
|
||||
'woocommerce_task_list_complete',
|
||||
'woocommerce_extended_task_list_hidden',
|
||||
|
|
|
|||
Loading…
Reference in New Issue