woocommerce/plugins/woocommerce-admin/client/core-profiler/index.tsx

1497 lines
36 KiB
TypeScript
Raw Normal View History

/* eslint-disable xstate/no-inline-implementation */
/**
* External dependencies
*/
import {
createMachine,
ActionMeta,
assign,
DoneInvokeEvent,
actions,
spawn,
AnyEventObject,
BaseActionObject,
Sender,
} from 'xstate';
import { useMachine, useSelector } from '@xstate/react';
import { useEffect, useMemo, useState } from '@wordpress/element';
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
import { resolveSelect, dispatch } from '@wordpress/data';
import {
updateQueryString,
getQuery,
getNewPath,
} from '@woocommerce/navigation';
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
import {
ExtensionList,
OPTIONS_STORE_NAME,
COUNTRIES_STORE_NAME,
Country,
ONBOARDING_STORE_NAME,
Extension,
GeolocationResponse,
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
PLUGINS_STORE_NAME,
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
} from '@woocommerce/data';
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
import { initializeExPlat } from '@woocommerce/explat';
import { CountryStateOption } from '@woocommerce/onboarding';
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
import { getAdminLink } from '@woocommerce/settings';
/**
* Internal dependencies
*/
import { IntroOptIn } from './pages/IntroOptIn';
import {
UserProfile,
BusinessChoice,
SellingOnlineAnswer,
SellingPlatform,
} from './pages/UserProfile';
import {
BusinessInfo,
IndustryChoice,
POSSIBLY_DEFAULT_STORE_NAMES,
} from './pages/BusinessInfo';
import { BusinessLocation } from './pages/BusinessLocation';
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
import { getCountryStateOptions } from './services/country';
import { Loader } from './pages/Loader';
import { Plugins } from './pages/Plugins';
import { getPluginSlug } from '~/utils';
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
import './style.scss';
import {
InstallationCompletedResult,
InstalledPlugin,
PluginInstallError,
pluginInstallerMachine,
} from './services/installAndActivatePlugins';
import { ProfileSpinner } from './components/profile-spinner/profile-spinner';
import recordTracksActions from './actions/tracks';
import { findComponentMeta } from './utils/find-component';
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
export type InitializationCompleteEvent = {
type: 'INITIALIZATION_COMPLETE';
payload: { optInDataSharing: boolean };
};
export type IntroOptInEvent =
| { type: 'INTRO_COMPLETED'; payload: { optInDataSharing: boolean } } // can be true or false depending on whether the user opted in or not
| { type: 'INTRO_SKIPPED'; payload: { optInDataSharing: false } }; // always false for now
export type UserProfileEvent =
| {
type: 'USER_PROFILE_COMPLETED';
payload: {
userProfile: CoreProfilerStateMachineContext[ 'userProfile' ];
}; // TODO: fill in the types for this when developing this page
}
| {
type: 'USER_PROFILE_SKIPPED';
payload: { userProfile: { skipped: true } };
};
export type BusinessInfoEvent = {
type: 'BUSINESS_INFO_COMPLETED';
payload: {
storeName?: string;
industry?: IndustryChoice;
storeLocation: CountryStateOption[ 'key' ];
geolocationOverruled: boolean;
};
};
export type BusinessLocationEvent = {
type: 'BUSINESS_LOCATION_COMPLETED';
payload: {
storeLocation: CountryStateOption[ 'key' ];
};
};
export type PluginsInstallationRequestedEvent = {
type: 'PLUGINS_INSTALLATION_REQUESTED';
payload: {
plugins: CoreProfilerStateMachineContext[ 'pluginsSelected' ];
};
};
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
export type PluginsLearnMoreLinkClicked = {
type: 'PLUGINS_LEARN_MORE_LINK_CLICKED';
payload: {
plugin: string;
learnMoreLink: string;
};
};
export type CoreProfilerPageComponent = ( props: {
navigationProgress: number | undefined;
sendEvent: Sender< AnyEventObject >;
context: CoreProfilerStateMachineContext;
} ) => React.ReactElement | null;
export type OnboardingProfile = {
business_choice: BusinessChoice;
industry: Array< IndustryChoice >;
selling_online_answer: SellingOnlineAnswer | null;
selling_platforms: SellingPlatform[] | null;
skip?: boolean;
is_store_country_set: boolean | null;
};
export type PluginsPageSkippedEvent = {
type: 'PLUGINS_PAGE_SKIPPED';
};
export type PluginInstalledAndActivatedEvent = {
type: 'PLUGIN_INSTALLED_AND_ACTIVATED';
payload: {
pluginsCount: number;
installedPluginIndex: number;
};
};
export type PluginsInstallationCompletedEvent = {
type: 'PLUGINS_INSTALLATION_COMPLETED';
payload: {
installationCompletedResult: InstallationCompletedResult;
};
};
export type PluginsInstallationCompletedWithErrorsEvent = {
type: 'PLUGINS_INSTALLATION_COMPLETED_WITH_ERRORS';
payload: {
errors: PluginInstallError[];
};
};
export type CoreProfilerStateMachineContext = {
optInDataSharing: boolean;
userProfile: {
businessChoice?: BusinessChoice;
sellingOnlineAnswer?: SellingOnlineAnswer | null;
sellingPlatforms?: SellingPlatform[] | null;
skipped?: boolean;
};
pluginsAvailable: ExtensionList[ 'plugins' ] | [];
pluginsSelected: string[]; // extension slugs
pluginsInstallationErrors: PluginInstallError[];
geolocatedLocation: GeolocationResponse | undefined;
businessInfo: {
storeName?: string | undefined;
industry?: string | undefined;
location?: string;
};
countries: CountryStateOption[];
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
loader: {
progress?: number;
className?: string;
useStages?: string;
stageIndex?: number;
};
onboardingProfile: OnboardingProfile;
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
jetpackAuthUrl?: string;
};
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
const getAllowTrackingOption = async () =>
resolveSelect( OPTIONS_STORE_NAME ).getOption(
'woocommerce_allow_tracking'
);
const handleTrackingOption = assign( {
optInDataSharing: (
_context,
event: DoneInvokeEvent< 'no' | 'yes' | undefined >
) => event.data !== 'no',
} );
const getStoreNameOption = async () =>
resolveSelect( OPTIONS_STORE_NAME ).getOption( 'blogname' );
const handleStoreNameOption = assign( {
businessInfo: (
context: CoreProfilerStateMachineContext,
event: DoneInvokeEvent< string | undefined >
) => {
return {
...context.businessInfo,
storeName: POSSIBLY_DEFAULT_STORE_NAMES.includes( event.data ) // if its empty or the default, show empty to the user
? undefined
: event.data,
};
},
} );
const getStoreCountryOption = async () =>
resolveSelect( OPTIONS_STORE_NAME ).getOption(
'woocommerce_default_country'
);
const handleStoreCountryOption = assign( {
businessInfo: (
context: CoreProfilerStateMachineContext,
event: DoneInvokeEvent< string | undefined >
) => {
return {
...context.businessInfo,
location: event.data,
};
},
} );
/**
* Prefetch it so that @wp/data caches it and there won't be a loading delay when its used
*/
const preFetchGetCountries = assign( {
spawnGetCountriesRef: () =>
spawn(
() => resolveSelect( COUNTRIES_STORE_NAME ).getCountries(),
'core-profiler-prefetch-countries'
),
} );
const preFetchOptions = assign( {
spawnPrefetchOptionsRef: ( _context, _event, { action } ) => {
spawn(
() =>
Promise.all( [
// @ts-expect-error -- not sure its possible to type this yet, maybe in xstate v5
action.options.map( ( optionName: string ) =>
resolveSelect( OPTIONS_STORE_NAME ).getOption(
optionName
)
),
] ),
'core-profiler-prefetch-options'
);
},
} );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
const getCountries = async () =>
resolveSelect( COUNTRIES_STORE_NAME ).getCountries();
const handleCountries = assign( {
countries: ( _context, event: DoneInvokeEvent< Country[] > ) => {
return getCountryStateOptions( event.data );
},
} );
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 assignOnboardingProfile = assign( {
onboardingProfile: (
_context,
event: DoneInvokeEvent< OnboardingProfile | undefined >
) => event.data,
} );
const getGeolocation = async ( context: CoreProfilerStateMachineContext ) => {
if ( context.optInDataSharing ) {
return resolveSelect( COUNTRIES_STORE_NAME ).geolocate();
}
return undefined;
};
const preFetchGeolocation = assign( {
spawnGeolocationRef: ( context: CoreProfilerStateMachineContext ) =>
spawn(
() => getGeolocation( context ),
'core-profiler-prefetch-geolocation'
),
} );
const handleGeolocation = assign( {
geolocatedLocation: (
_context,
event: DoneInvokeEvent< GeolocationResponse >
) => {
return event.data;
},
} );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
const redirectToWooHome = () => {
window.location.href = getNewPath( {}, '/', {} );
};
const redirectToJetpackAuthPage = (
_context: CoreProfilerStateMachineContext,
event: { data: { url: string } }
) => {
window.location.href = event.data.url + '&installed_ext_success=1';
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
};
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
const updateTrackingOption = (
_context: CoreProfilerStateMachineContext,
event: IntroOptInEvent
) => {
if (
event.payload.optInDataSharing &&
typeof window.wcTracks.enable === 'function'
) {
window.wcTracks.enable( () => {
initializeExPlat();
} );
} else if ( ! event.payload.optInDataSharing ) {
window.wcTracks.isEnabled = false;
}
const trackingValue = event.payload.optInDataSharing ? 'yes' : 'no';
dispatch( OPTIONS_STORE_NAME ).updateOptions( {
woocommerce_allow_tracking: trackingValue,
} );
};
// TODO: move the data references over to the context.onboardingProfile object which stores the entire woocommerce_onboarding_profile contents
const updateOnboardingProfileOption = (
context: CoreProfilerStateMachineContext
) => {
const { businessChoice, sellingOnlineAnswer, sellingPlatforms } =
context.userProfile;
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
woocommerce_onboarding_profile: {
...context.onboardingProfile,
business_choice: businessChoice,
selling_online_answer: sellingOnlineAnswer,
selling_platforms: sellingPlatforms,
},
} );
};
const spawnUpdateOnboardingProfileOption = assign( {
spawnUpdateOnboardingProfileOptionRef: (
context: CoreProfilerStateMachineContext
) =>
spawn(
() => updateOnboardingProfileOption( context ),
'update-onboarding-profile'
),
} );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
const updateBusinessLocation = ( countryAndState: string ) => {
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
woocommerce_default_country: countryAndState,
} );
};
const assignStoreLocation = assign( {
businessInfo: (
context: CoreProfilerStateMachineContext,
event: BusinessLocationEvent
) => {
return {
...context.businessInfo,
location: event.payload.storeLocation,
};
},
} );
const assignUserProfile = assign( {
userProfile: ( context, event: UserProfileEvent ) =>
event.payload.userProfile, // sets context.userProfile to the payload of the event
} );
const updateBusinessInfo = async (
_context: CoreProfilerStateMachineContext,
event: AnyEventObject
) => {
const refreshedOnboardingProfile = ( await resolveSelect(
OPTIONS_STORE_NAME
).getOption( 'woocommerce_onboarding_profile' ) ) as OnboardingProfile;
return dispatch( OPTIONS_STORE_NAME ).updateOptions( {
blogname: event.payload.storeName,
woocommerce_default_country: event.payload.storeLocation,
woocommerce_onboarding_profile: {
...refreshedOnboardingProfile,
is_store_country_set: true,
industry: [ event.payload.industry ],
},
} );
};
const persistBusinessInfo = assign( {
persistBusinessInfoRef: (
context: CoreProfilerStateMachineContext,
event: BusinessInfoEvent
) =>
spawn(
() => updateBusinessInfo( context, event ),
'core-profiler-update-business-info'
),
} );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
const promiseDelay = ( milliseconds: number ) => {
return new Promise( ( resolve ) => {
setTimeout( resolve, milliseconds );
} );
};
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
/**
* Assigns the optInDataSharing value from the event payload to the context
*/
const assignOptInDataSharing = assign( {
optInDataSharing: ( _context, event: IntroOptInEvent ) =>
event.payload.optInDataSharing,
} );
const preFetchIsJetpackConnected = assign( {
isJetpackConnectedRef: () =>
spawn(
() => resolveSelect( PLUGINS_STORE_NAME ).isJetpackConnected(),
'core-profiler-prefetch-is-jetpack-connected'
),
} );
const preFetchJetpackAuthUrl = assign( {
jetpackAuthUrlRef: () =>
spawn(
() =>
resolveSelect( ONBOARDING_STORE_NAME ).getJetpackAuthUrl( {
redirectUrl: getAdminLink( 'admin.php?page=wc-admin' ),
from: 'woocommerce-core-profiler',
} ),
'core-profiler-prefetch-jetpack-auth-url'
),
} );
/**
* Prefetch it so that @wp/data caches it and there won't be a loading delay when its used
*/
const preFetchGetPlugins = assign( {
extensionsRef: () =>
spawn(
() => resolveSelect( ONBOARDING_STORE_NAME ).getFreeExtensions(),
'core-profiler-prefetch-extensions'
),
} );
const getPlugins = async () => {
dispatch( ONBOARDING_STORE_NAME ).invalidateResolution(
'getFreeExtensions'
);
const extensionsBundles = await resolveSelect(
ONBOARDING_STORE_NAME
).getFreeExtensions();
return (
extensionsBundles.find(
( bundle ) => bundle.key === 'obw/core-profiler'
)?.plugins || []
);
};
/** Special callback that is used to trigger a navigation event if the user uses the browser's back or foward buttons */
const browserPopstateHandler = () => ( sendBack: Sender< AnyEventObject > ) => {
const popstateHandler = () => {
sendBack( 'EXTERNAL_URL_UPDATE' );
};
window.addEventListener( 'popstate', popstateHandler );
return () => {
window.removeEventListener( 'popstate', popstateHandler );
};
};
const handlePlugins = assign< CoreProfilerStateMachineContext >( {
pluginsAvailable: ( _context, event ) =>
( event as DoneInvokeEvent< Extension[] > ).data,
} );
export type CoreProfilerMachineAssign = (
ctx: CoreProfilerStateMachineContext,
evt: AnyEventObject,
{
action: { step },
}: ActionMeta<
CoreProfilerStateMachineContext,
AnyEventObject,
BaseActionObject
>
) => void;
const updateQueryStep: CoreProfilerMachineAssign = (
_context,
_evt,
{ action }
) => {
const { step } = getQuery() as { step: string };
// only update the query string if it has changed
if ( action.step !== step ) {
updateQueryString( { step: action.step } );
}
};
const assignPluginsSelected = assign( {
pluginsSelected: ( _context, event: PluginsInstallationRequestedEvent ) => {
return event.payload.plugins.map( getPluginSlug );
},
} );
export const preFetchActions = {
preFetchGetPlugins,
preFetchGetCountries,
preFetchGeolocation,
preFetchOptions,
preFetchIsJetpackConnected,
preFetchJetpackAuthUrl,
};
const coreProfilerMachineActions = {
...preFetchActions,
...recordTracksActions,
handlePlugins,
updateQueryStep,
updateTrackingOption,
handleTrackingOption,
handleGeolocation,
handleStoreNameOption,
handleStoreCountryOption,
assignOptInDataSharing,
assignStoreLocation,
assignPluginsSelected,
assignUserProfile,
handleCountries,
handleOnboardingProfileOption,
assignOnboardingProfile,
persistBusinessInfo,
spawnUpdateOnboardingProfileOption,
redirectToWooHome,
redirectToJetpackAuthPage,
};
const coreProfilerMachineServices = {
getAllowTrackingOption,
getStoreNameOption,
getStoreCountryOption,
getCountries,
getGeolocation,
getOnboardingProfileOption,
getPlugins,
browserPopstateHandler,
updateBusinessInfo,
};
export const coreProfilerStateMachineDefinition = createMachine( {
id: 'coreProfiler',
initial: 'navigate',
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
predictableActionArguments: true, // recommended setting: https://xstate.js.org/docs/guides/actions.html
invoke: {
src: 'browserPopstateHandler',
},
on: {
EXTERNAL_URL_UPDATE: {
target: 'navigate',
},
},
context: {
// these are safe default values if for some reason the steps fail to complete correctly
// actual defaults displayed to the user should be handled in the steps themselves
optInDataSharing: false,
userProfile: { skipped: true },
geolocatedLocation: undefined,
businessInfo: {
storeName: undefined,
industry: undefined,
storeCountryPreviouslySet: false,
location: 'US:CA',
},
countries: [] as CountryStateOption[],
pluginsAvailable: [],
pluginsInstallationErrors: [],
pluginsSelected: [],
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
loader: {},
onboardingProfile: {} as OnboardingProfile,
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
jetpackAuthUrl: undefined,
} as CoreProfilerStateMachineContext,
states: {
navigate: {
always: [
/**
* The 'navigate' state forwards the progress to whichever step is
* specified in the query string. If no step is specified, it will
* default to introOptIn.
*
* Each top level state must be responsible for populating their own
* context data dependencies, as it is possible that they are the
* first state to be loaded due to the navigation jump.
*
* Each top level state must also be responsible for updating the
* query string to reflect their own state, using the 'updateQueryStep'
* action.
*/
{
target: '#introOptIn',
cond: {
type: 'hasStepInUrl',
step: 'intro-opt-in',
},
},
{
target: '#userProfile',
cond: { type: 'hasStepInUrl', step: 'user-profile' },
},
{
target: '#businessInfo',
cond: { type: 'hasStepInUrl', step: 'business-info' },
},
{
target: '#plugins',
cond: { type: 'hasStepInUrl', step: 'plugins' },
},
{
target: '#skipGuidedSetup',
cond: { type: 'hasStepInUrl', step: 'skip-guided-setup' },
},
{
target: 'introOptIn',
},
],
},
introOptIn: {
id: 'introOptIn',
initial: 'preIntroOptIn',
states: {
preIntroOptIn: {
entry: [
// these prefetch tasks are spawned actors in the background and do not block progression of the state machine
'preFetchGetPlugins',
'preFetchGetCountries',
{
type: 'preFetchOptions',
options: [
'blogname',
'woocommerce_onboarding_profile',
'woocommerce_default_country',
],
},
],
type: 'parallel',
states: {
// if we have any other init tasks to do in parallel, add them as a parallel state here.
// this blocks the introOptIn UI from loading keep that in mind when adding new tasks here
trackingOption: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'getAllowTrackingOption',
onDone: [
{
actions: [
'handleTrackingOption',
],
target: 'done',
},
],
onError: {
target: 'done', // leave it as initialised default on error
},
},
},
done: {
type: 'final',
},
},
},
},
onDone: {
target: 'introOptIn',
},
meta: {
progress: 0,
},
},
introOptIn: {
on: {
INTRO_COMPLETED: {
target: '#userProfile',
actions: [
'assignOptInDataSharing',
'updateTrackingOption',
],
},
INTRO_SKIPPED: {
// if the user skips the intro, we set the optInDataSharing to false and go to the Business Location page
target: '#skipGuidedSetup',
actions: [
'assignOptInDataSharing',
'updateTrackingOption',
],
},
},
entry: [
{
type: 'recordTracksStepViewed',
step: 'intro_opt_in',
},
{ type: 'updateQueryStep', step: 'intro-opt-in' },
],
exit: actions.choose( [
{
cond: ( _context, event ) =>
event.type === 'INTRO_COMPLETED',
actions: 'recordTracksIntroCompleted',
},
{
cond: ( _context, event ) =>
event.type === 'INTRO_SKIPPED',
actions: [
{
type: 'recordTracksStepSkipped',
step: 'intro_opt_in',
},
],
},
] ),
meta: {
progress: 20,
component: IntroOptIn,
},
},
},
},
userProfile: {
id: 'userProfile',
initial: 'preUserProfile',
states: {
preUserProfile: {
invoke: {
src: 'getOnboardingProfileOption',
onDone: [
{
actions: [
'handleOnboardingProfileOption',
'assignOnboardingProfile',
],
target: 'userProfile',
},
],
onError: {
target: 'userProfile',
},
},
},
userProfile: {
meta: {
progress: 40,
component: UserProfile,
},
entry: [
{
type: 'recordTracksStepViewed',
step: 'user_profile',
},
{ type: 'updateQueryStep', step: 'user-profile' },
'preFetchGeolocation',
],
on: {
USER_PROFILE_COMPLETED: {
target: 'postUserProfile',
actions: [ 'assignUserProfile' ],
},
USER_PROFILE_SKIPPED: {
target: 'postUserProfile',
actions: [ 'assignUserProfile' ],
},
},
exit: actions.choose( [
{
cond: ( _context, event ) =>
event.type === 'USER_PROFILE_COMPLETED',
actions: 'recordTracksUserProfileCompleted',
},
{
cond: ( _context, event ) =>
event.type === 'USER_PROFILE_SKIPPED',
actions: [
{
type: 'recordTracksStepSkipped',
step: 'user_profile',
},
],
},
] ),
},
postUserProfile: {
entry: [ 'spawnUpdateOnboardingProfileOption' ],
always: {
target: '#businessInfo',
},
},
},
},
businessInfo: {
id: 'businessInfo',
initial: 'preBusinessInfo',
entry: [ { type: 'updateQueryStep', step: 'business-info' } ],
states: {
preBusinessInfo: {
type: 'parallel',
states: {
geolocation: {
initial: 'checkDataOptIn',
states: {
checkDataOptIn: {
invoke: {
src: 'getAllowTrackingOption',
onDone: [
{
actions: [
'handleTrackingOption',
],
target: 'fetching',
},
],
onError: {
target: 'done', // leave it as initialised default on error
},
},
},
fetching: {
invoke: {
src: 'getGeolocation',
onDone: {
target: 'done',
actions: 'handleGeolocation',
},
onError: {
target: 'done',
},
},
},
done: {
type: 'final',
},
},
},
storeCountryOption: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'getStoreCountryOption',
onDone: [
{
actions: [
'handleStoreCountryOption',
],
target: 'done',
},
],
onError: {
target: 'done',
},
},
},
done: {
type: 'final',
},
},
},
onboardingProfileOption: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'getOnboardingProfileOption',
onDone: [
{
actions: [
'assignOnboardingProfile',
],
target: 'done',
},
],
onError: {
target: 'done',
},
},
},
done: {
type: 'final',
},
},
},
storeNameOption: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'getStoreNameOption',
onDone: [
{
actions: [
'handleStoreNameOption',
],
target: 'done',
},
],
onError: {
target: 'done', // leave it as initialised default on error
},
},
},
done: {
type: 'final',
},
},
},
countries: {
initial: 'fetching',
states: {
fetching: {
invoke: {
src: 'getCountries',
onDone: {
target: 'done',
actions: 'handleCountries',
},
},
},
done: {
type: 'final',
},
},
},
},
// onDone is reached when child parallel states fo fetching are resolved (reached final states)
onDone: {
target: 'businessInfo',
},
},
businessInfo: {
meta: {
progress: 60,
component: BusinessInfo,
},
entry: [
{
type: 'recordTracksStepViewed',
step: 'business_info',
},
],
on: {
BUSINESS_INFO_COMPLETED: {
target: 'postBusinessInfo',
actions: [ 'recordTracksBusinessInfoCompleted' ],
},
},
},
postBusinessInfo: {
invoke: {
src: 'updateBusinessInfo',
onDone: {
target: '#plugins',
},
onError: {
target: '#plugins',
},
},
},
},
},
skipGuidedSetup: {
id: 'skipGuidedSetup',
initial: 'preSkipFlowBusinessLocation',
entry: [ { type: 'updateQueryStep', step: 'skip-guided-setup' } ],
states: {
preSkipFlowBusinessLocation: {
invoke: {
src: 'getCountries',
onDone: [
{
actions: [ 'handleCountries' ],
target: 'skipFlowBusinessLocation',
},
],
onError: {
target: 'skipFlowBusinessLocation',
},
},
},
skipFlowBusinessLocation: {
on: {
BUSINESS_LOCATION_COMPLETED: {
target: 'postSkipFlowBusinessLocation',
actions: [
'assignStoreLocation',
'recordTracksSkipBusinessLocationCompleted',
],
},
},
entry: [
{
type: 'recordTracksStepViewed',
step: 'skip_business_location',
},
],
meta: {
progress: 80,
component: BusinessLocation,
},
},
postSkipFlowBusinessLocation: {
initial: 'updateBusinessLocation',
states: {
updateBusinessLocation: {
entry: assign( {
loader: {
progress: 10,
useStages: 'skippedGuidedSetup',
},
} ),
invoke: {
src: ( context ) => {
const skipped = dispatch(
ONBOARDING_STORE_NAME
).updateProfileItems( {
skipped: true,
} );
const businessLocation =
updateBusinessLocation(
context.businessInfo
.location as string
);
return Promise.all( [
skipped,
businessLocation,
] );
},
onDone: {
target: 'progress20',
},
},
},
// Although we don't need to wait 3 seconds for the following states
// We will dispaly 20% and 80% progress for 1.5 seconds each
// for the sake of user experience.
progress20: {
entry: assign( {
loader: {
progress: 20,
useStages: 'skippedGuidedSetup',
},
} ),
invoke: {
src: () => {
return promiseDelay( 1500 );
},
onDone: {
target: 'progress80',
},
},
},
progress80: {
entry: assign( {
loader: {
progress: 80,
useStages: 'skippedGuidedSetup',
stageIndex: 1,
},
} ),
invoke: {
src: () => {
return promiseDelay( 1500 );
},
onDone: {
actions: [ 'redirectToWooHome' ],
},
},
},
},
meta: {
component: Loader,
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
},
},
},
plugins: {
id: 'plugins',
initial: 'prePlugins',
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
states: {
prePlugins: {
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
invoke: {
src: 'getPlugins',
onDone: [
{
target: 'pluginsSkipped',
cond: ( _context, event ) => {
// Skip the plugins page
// When there is 0 plugin returned from the server
// Or all the plugins are activated already.
return event.data?.every(
( plugin: Extension ) =>
plugin.is_activated
);
},
},
{ target: 'plugins', actions: 'handlePlugins' },
],
},
// add exit action to filter the extensions using a custom function here and assign it to context.extensionsAvailable
exit: assign( {
pluginsAvailable: ( context ) => {
return context.pluginsAvailable.filter(
() => true
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
);
}, // TODO : define an extensible filter function here
} ),
meta: {
progress: 70,
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
},
pluginsSkipped: {
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
entry: assign( {
loader: {
progress: 80,
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
} ),
invoke: {
src: () => {
dispatch(
ONBOARDING_STORE_NAME
).updateProfileItems( {
is_plugins_page_skipped: true,
completed: true,
} );
return promiseDelay( 3000 );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
onDone: {
actions: [ 'redirectToWooHome' ],
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
},
meta: {
component: Loader,
},
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
plugins: {
entry: [
{ type: 'recordTracksStepViewed', step: 'plugins' },
{ type: 'updateQueryStep', step: 'plugins' },
],
on: {
PLUGINS_PAGE_SKIPPED: {
actions: [
{
type: 'recordTracksStepSkipped',
step: 'plugins',
},
],
target: 'pluginsSkipped',
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
PLUGINS_LEARN_MORE_LINK_CLICKED: {
actions: [
{
type: 'recordTracksPluginsLearnMoreLinkClicked',
step: 'plugins',
},
],
},
PLUGINS_INSTALLATION_REQUESTED: {
target: 'installPlugins',
actions: [ 'assignPluginsSelected' ],
},
},
meta: {
progress: 80,
component: Plugins,
},
},
postPluginInstallation: {
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
invoke: {
src: async ( _context, event ) => {
return await dispatch(
ONBOARDING_STORE_NAME
).updateProfileItems( {
business_extensions:
event.payload.installationCompletedResult.installedPlugins.map(
( extension: InstalledPlugin ) =>
extension.plugin
),
completed: true,
} );
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
onDone: [
{
target: 'isJetpackConnected',
cond: 'hasJetpackSelected',
},
{ actions: 'redirectToWooHome' },
],
},
meta: {
component: Loader,
progress: 100,
},
},
isJetpackConnected: {
invoke: {
src: async () => {
return await resolveSelect(
PLUGINS_STORE_NAME
).isJetpackConnected();
},
onDone: [
{
target: 'sendToJetpackAuthPage',
cond: ( _context, event ) => {
return ! event.data;
},
},
{ actions: 'redirectToWooHome' },
],
},
meta: {
component: Loader,
progress: 100,
},
},
sendToJetpackAuthPage: {
invoke: {
src: async () =>
await resolveSelect(
ONBOARDING_STORE_NAME
).getJetpackAuthUrl( {
redirectUrl: getAdminLink(
'admin.php?page=wc-admin'
),
from: 'woocommerce-core-profiler',
} ),
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
onDone: {
actions: actions.choose( [
{
cond: ( _context, event ) =>
event.data.success === true,
actions: 'redirectToJetpackAuthPage',
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
},
{
cond: ( _context, event ) =>
event.data.success === false,
actions: 'redirectToWooHome',
},
] ),
Add Business Location page to the core profiler (#38019) * Add core profiler - welcome to woo page * Update checkbox styles * Add tracks * Update default tracking value * Update copies * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * add: core profiler scaffolding using xstate * Add navigation and progress-bar components * fix css lint error * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/woologo.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/progress-bar/progress-bar.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Remove var from __ function * Use woocommerce prefix for classnames * Fix css lint error * Fix broken tests * Add business location page * Remove unwanted changes from rebase * Remove unwanted changes from rebase * Redirect to Woo Home on exit * Add tracks * Fix js lint error * Add loader page * Support meta value from nested states * Use navigateTo * Add tests for getCountryStateOptions * Use Country type from navigation package * Rename useStages to getLoaderStageMeta * Add changelog * Move progress from 20 to 80 * Fix xstate warning * Fix broken pnpm lock * Fix eslint errors * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Update plugins/woocommerce-admin/client/core-profiler/index.tsx Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com> * Save country to option * Fix jslint error * Update plugins/woocommerce-admin/client/core-profiler/services/country.ts Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Update plugins/woocommerce-admin/client/core-profiler/style.scss Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> * Fix eslint error * Use decodeEntities directly * Update comment for artificial 3 seconds wait * Disable Go to my store button when country is empty * Style for mobile devices * Style updates for the country dropdown * Fix js lint error * Update country dropdown border color * Style the loader * Fix css lint --------- Co-authored-by: Chi-Hsuan Huang <chihsuan.tw@gmail.com> Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: RJ <27843274+rjchow@users.noreply.github.com>
2023-05-14 20:56:47 +00:00
},
},
meta: {
component: Loader,
progress: 100,
},
},
installPlugins: {
on: {
PLUGIN_INSTALLED_AND_ACTIVATED: {
actions: [
assign( {
loader: (
_context,
event: PluginInstalledAndActivatedEvent
) => {
const progress = Math.round(
( event.payload
.installedPluginIndex /
event.payload.pluginsCount ) *
100
);
let stageIndex = 0;
if ( progress > 60 ) {
stageIndex = 2;
} else if ( progress > 30 ) {
stageIndex = 1;
}
return {
useStages: 'plugins',
progress,
stageIndex,
};
},
} ),
],
},
PLUGINS_INSTALLATION_COMPLETED_WITH_ERRORS: {
target: 'prePlugins',
actions: [
assign( {
pluginsInstallationErrors: (
_context,
event
) => event.payload.errors,
} ),
{
type: 'recordFailedPluginInstallations',
},
],
},
PLUGINS_INSTALLATION_COMPLETED: {
target: 'postPluginInstallation',
actions: [
{
type: 'recordSuccessfulPluginInstallation',
},
],
},
},
entry: actions.choose( [
{
cond: 'hasJetpackSelected',
actions: [
assign( {
loader: {
progress: 10,
useStages: 'plugins',
},
} ),
'preFetchIsJetpackConnected',
'preFetchJetpackAuthUrl',
],
},
{
actions: [
assign( {
loader: {
progress: 10,
useStages: 'plugins',
},
} ),
],
},
] ),
invoke: {
src: pluginInstallerMachine,
data: ( context ) => {
return {
selectedPlugins: context.pluginsSelected,
Additional changes for the core profiler plugins page (#38616) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Fix type * Add changelog * Add changelog * Add install_priority -- this will be used in the core profiler * Sort selected plugins by install_priority for installation * Remove unused imports * dev: refactor installAndActivatePlugins to xstate * ts fixes * Sort plugins by install_priority * Make sure WooCommerce Shipping is always visible * Update free extension list content * Updated WC payment description * Updated logo images * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Fix gray-900 variable name * Hide learn more link on mobile view * Add back learn more link that was removed from rebase * Send pluginsAvailable to pluginInstallermachine * Use is_activated to determine plugin availability and install status * Update packages/js/data/src/onboarding/types.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Internal/Admin/RemoteFreeExtensions/DefaultFreeExtensions.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Add back recordTracksPluginsLearnMoreLinkClicked * Use install-and-activate-plugins-async when timer is up * Record plugin and link with learn more linked clicked event * Fix failign tests * Add comment for install_priority --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-13 22:03:03 +00:00
pluginsAvailable: context.pluginsAvailable,
};
},
},
meta: {
component: Loader,
},
},
},
},
settingUpStore: {},
},
} );
export const CoreProfilerController = ( {
actionOverrides,
servicesOverrides,
}: {
actionOverrides: Partial< typeof coreProfilerMachineActions >;
servicesOverrides: Partial< typeof coreProfilerMachineServices >;
} ) => {
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
const augmentedStateMachine = useMemo( () => {
// When adding extensibility, this is the place to manipulate the state machine definition.
return coreProfilerStateMachineDefinition.withConfig( {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- there seems to be a flaky error here - it fails sometimes and then not on recompile, will need to investigate further.
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
actions: {
...coreProfilerMachineActions,
...actionOverrides,
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
},
services: {
...coreProfilerMachineServices,
...servicesOverrides,
},
guards: {
hasStepInUrl: ( _ctx, _evt, { cond }: { cond: unknown } ) => {
const { step = undefined } = getQuery() as { step: string };
return (
step === ( cond as { step: string | undefined } ).step
);
},
Update/implement connect to jetpack (#38674) * Add install-and-activate-plugins-async action to onboarding * Add label and learn_more_link types * Use label and learn_more_link * Remove unused imports * ts fixes * Visual changes on the plugin page * Change CTA font size from 13px to 14px * Change spacing between the chebox and logo to 24px * Change heading font-weight to 500 * Fix css lint error * Add back learn more link that was removed from rebase * Add required packages * Load Jetpack Config * Add getJetpackAuthUrl to data/onboarding * Add Connection Rest Auth -- seems like this is required for Jetpack to communicate back to the connected site * Add jetpack-authorization-url REST API * Redirect to Jetpack Auth page after the installatino process if jetpack was selected * Require can_install_plugins permission for jetpack auth url endpoint * Update packages/js/data/src/onboarding/resolvers.ts Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Update plugins/woocommerce/src/Admin/API/OnboardingPlugins.php Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com> * Remove automattic/jetpack-sync and its config * Support redirect_url and from params * Do not redirect to Jetpack auth if it is already connected * Add installed_ext_success=1 * Use woocommerce-core-profiler for from value * Revert unrelated lock file changes * Minor refactor * Extracted out isJetpackConnected cond to a guard * Added meta data for isJetpackConnected to prevent unwanted spinner * Add Changelog * Lint fix * Move Jetpack Connection config init to class-woocommerce * Add changelog * Remove unnecessary require * Note jetpack-authorization-url endpoint is experimental * Fix broken test * Add component to sendToJetPackAuthPage state * Fix lint error --------- Co-authored-by: rjchow <me@rjchow.com> Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
2023-06-16 03:28:18 +00:00
hasJetpackSelected: ( context ) => {
return (
context.pluginsSelected.find(
( plugin ) => plugin === 'jetpack'
) !== undefined ||
context.pluginsAvailable.find(
( plugin: Extension ) =>
plugin.key === 'jetpack' && plugin.is_activated
) !== undefined
);
},
},
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
} );
}, [ actionOverrides, servicesOverrides ] );
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
const [ state, send, service ] = useMachine( augmentedStateMachine, {
devTools: process.env.NODE_ENV === 'development',
} );
// eslint-disable-next-line react-hooks/exhaustive-deps -- false positive due to function name match, this isn't from react std lib
const currentNodeMeta = useSelector( service, ( currentState ) =>
findComponentMeta( currentState?.meta ?? undefined )
);
const navigationProgress = currentNodeMeta?.progress;
const [ CurrentComponent, setCurrentComponent ] =
useState< CoreProfilerPageComponent | null >( null );
useEffect( () => {
if ( currentNodeMeta?.component ) {
setCurrentComponent( () => currentNodeMeta?.component );
}
}, [ CurrentComponent, currentNodeMeta?.component ] );
const currentNodeCssLabel =
state.value instanceof Object
? Object.keys( state.value )[ 0 ]
: state.value;
useEffect( () => {
document.body.classList.remove( 'woocommerce-admin-is-loading' );
document.body.classList.add( 'woocommerce-profile-wizard__body' );
document.body.classList.add( 'woocommerce-admin-full-screen' );
document.body.classList.add( 'is-wp-toolbar-disabled' );
return () => {
document.body.classList.remove(
'woocommerce-profile-wizard__body'
);
document.body.classList.remove( 'woocommerce-admin-full-screen' );
document.body.classList.remove( 'is-wp-toolbar-disabled' );
};
} );
return (
<>
<div
className={ `woocommerce-profile-wizard__container woocommerce-profile-wizard__step-${ currentNodeCssLabel }` }
>
{ CurrentComponent ? (
Add core profiler "Welcome to Woo!" page (#37952) * Add core profiler - welcome to woo page * Add changelog * Update checkbox styles * Update copies * Add test * Add enable prop to window.wcTracks type * Add tracks * Add explat changelog * Fix import * Update default tracking value * Update copies * Fix test * using invoked promise instead of useState - take advantage of xstate's built ins for side effects instead of useEffect/hooks - discovered that error result wasn't really handled in original useEffect - use text labels instead of inline functions so that we can decouple the implementation from the machine model - todo: can move the invoked function out elsewhere and also tests if needed (not necessary here because it's a simple call) * use actions.choose instead of branching inside action - https://stately.ai/docs/xstate/transitions-and-choices/guarded-actions#the-choose-action - makes it so that the machine model is serializeable - todo: in the distant future i wonder if it might be tidier to have tracks be its own actor that just receives the same events that this machine does, that way it's just standalone instead of mixing up tracks with the implementation * use dispatch instead of useDispatch - decouples the implementation of the handler from the react component - makes the handler testable on its own if needed - makes the state machine testable without relying on external dependencies * decoupled remaining function calls * Fix lint error * Fix style lint * address xstate console warnings - .withConfig() is a function call that returns a new object every invocation so we need to wrap it in useMemo to keep it stable * Add optInDataSharing is false test * Fix lint --------- Co-authored-by: rjchow <me@rjchow.com>
2023-05-03 07:54:28 +00:00
<CurrentComponent
navigationProgress={ navigationProgress }
sendEvent={ send }
context={ state.context }
/>
) : (
<ProfileSpinner />
) }
</div>
</>
);
};
export default CoreProfilerController;