From b69ba253f4f20bb7dc7a206850fc788e423fe4c1 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Wed, 23 Oct 2024 08:33:03 +0800 Subject: [PATCH] Fix LYS Whats Next actions (#52182) * Fix LYS Whats Next Actions and Add Unit Tests * Add changelog * Fix marketing task and lint * Fix tests --- ...ix-not-show-mailchimp-if-already-installed | 4 + .../pages/launch-store-success/WhatsNext.tsx | 14 +- .../launch-store-success/test/WahtsNext.tsx | 216 ++++++++++++++++++ 3 files changed, 229 insertions(+), 5 deletions(-) create mode 100644 plugins/woocommerce/changelog/fix-not-show-mailchimp-if-already-installed create mode 100644 plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/test/WahtsNext.tsx diff --git a/plugins/woocommerce/changelog/fix-not-show-mailchimp-if-already-installed b/plugins/woocommerce/changelog/fix-not-show-mailchimp-if-already-installed new file mode 100644 index 00000000000..6a32bd1d732 --- /dev/null +++ b/plugins/woocommerce/changelog/fix-not-show-mailchimp-if-already-installed @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix lys whats next actions and add unit tests diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/WhatsNext.tsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/WhatsNext.tsx index a3b646ed31d..9e321a13675 100644 --- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/WhatsNext.tsx +++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/WhatsNext.tsx @@ -12,7 +12,7 @@ import type { TaskListType } from '@woocommerce/data'; */ import { ADMIN_URL } from '~/utils/admin-settings'; -type WhatsNextProps = { +export type WhatsNextProps = { activePlugins: string[]; allTasklists: TaskListType[]; }; @@ -25,7 +25,10 @@ type Action = { trackEvent: string; }; -const getActionsList = ( { activePlugins, allTasklists }: WhatsNextProps ) => { +export const getActionsList = ( { + activePlugins, + allTasklists, +}: WhatsNextProps ) => { const actions: Action[] = []; const pick = ( action: Action, condition: boolean ) => { if ( actions.length < 3 && condition ) { @@ -53,7 +56,8 @@ const getActionsList = ( { activePlugins, allTasklists }: WhatsNextProps ) => { {} ); - const isMarketingTaskCompleted = setupTasksCompletion?.marketing || false; + const isMarketingTaskCompleted = + extendedTasksCompletion?.marketing || false; const isPaymentsTaskCompleted = setupTasksCompletion?.payments || false; const isMobileTaskCompleted = extendedTasksCompletion?.[ 'get-mobile-app' ] || false; @@ -137,8 +141,8 @@ const getActionsList = ( { activePlugins, allTasklists }: WhatsNextProps ) => { pick( extensions, true ); // No condition yet // Pick second three - pick( mobileApp, isMobileTaskCompleted ); - pick( mailchimp, true ); // No condition yet + pick( mobileApp, ! isMobileTaskCompleted ); + pick( mailchimp, ! isMailChimpActivated ); pick( externalDocumentation, true ); // No condition yet // Pick last three diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/test/WahtsNext.tsx b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/test/WahtsNext.tsx new file mode 100644 index 00000000000..442bc465d73 --- /dev/null +++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/launch-store-success/test/WahtsNext.tsx @@ -0,0 +1,216 @@ +/** + * Internal dependencies + */ +import { getActionsList, WhatsNextProps } from '../WhatsNext'; + +describe( 'getActionsList', () => { + const defaultProps: WhatsNextProps = { + allTasklists: [ + { + id: 'setup', + title: 'Setup', + isHidden: false, + isVisible: true, + isComplete: false, + eventPrefix: 'tasklist_setup', + displayProgressHeader: true, + keepCompletedTaskList: 'yes', + tasks: [ + { + id: 'payments', + isComplete: false, + content: '', + parentId: 'setup', + isDismissable: false, + isDismissed: false, + time: '', + title: '', + actionLabel: '', + additionalInfo: '', + canView: true, + isActioned: false, + isDisabled: false, + isSnoozed: false, + isSnoozeable: false, + snoozedUntil: 0, + isVisible: true, + isVisited: false, + recordViewEvent: false, + eventPrefix: '', + level: 3, + }, + ], + }, + { + id: 'extended', + title: 'Extended', + isHidden: false, + isVisible: true, + isComplete: false, + eventPrefix: 'tasklist_extended', + displayProgressHeader: true, + keepCompletedTaskList: 'yes', + tasks: [ + { + id: 'marketing', + isComplete: false, + content: '', + parentId: 'extended', + isDismissable: false, + isDismissed: false, + time: '', + title: '', + actionLabel: '', + additionalInfo: '', + canView: true, + isActioned: false, + isDisabled: false, + isSnoozed: false, + isSnoozeable: false, + snoozedUntil: 0, + isVisible: true, + isVisited: false, + recordViewEvent: false, + eventPrefix: '', + level: 3, + }, + ], + }, + ], + activePlugins: [], + }; + + it( 'should return 3 actions', () => { + const actions = getActionsList( defaultProps ); + expect( actions ).toHaveLength( 3 ); + } ); + + it( 'should include marketing, payment and extensions actions', () => { + const actions = getActionsList( defaultProps ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Promote your products' } ) + ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Provide more ways to pay' } ) + ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Power up your store' } ) + ); + } ); + + it( 'should not include marketing action when marketing task is completed', () => { + const props = { + ...defaultProps, + allTasklists: [ + { + id: 'setup', + tasks: [ { id: 'payments', isComplete: false } ], + }, + { + id: 'extended', + tasks: [ { id: 'marketing', isComplete: true } ], + }, + ], + }; + const actions = getActionsList( props as WhatsNextProps ); + const marketingAction = actions.find( + ( action ) => action.title === 'Promote your products' + ); + expect( marketingAction ).toBeUndefined(); + } ); + + it( 'should not include payments action when payments task is completed', () => { + const props = { + ...defaultProps, + allTasklists: [ + { + id: 'setup', + tasks: [ { id: 'payments', isComplete: true } ], + }, + { + id: 'extended', + tasks: [ { id: 'marketing', isComplete: false } ], + }, + ], + }; + const actions = getActionsList( props as WhatsNextProps ); + const paymentsAction = actions.find( + ( action ) => action.title === 'Provide more ways to pay' + ); + expect( paymentsAction ).toBeUndefined(); + } ); + + it( 'should include mobileApp, mailchimp actions when first three actions are completed', () => { + const props = { + ...defaultProps, + allTasklists: [ + { + id: 'setup', + tasks: [ { id: 'payments', isComplete: true } ], + }, + { + id: 'extended', + tasks: [ { id: 'marketing', isComplete: true } ], + }, + ], + }; + const actions = getActionsList( props as WhatsNextProps ); + expect( actions ).toContainEqual( + expect.objectContaining( { linkText: 'Get the app' } ) + ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Build customer relationships' } ) + ); + } ); + + it( 'should not include Mailchimp action when Mailchimp is activated', () => { + const props = { + ...defaultProps, + allTasklists: [ + { + id: 'setup', + tasks: [ + { id: 'marketing', isComplete: true }, + { id: 'payments', isComplete: true }, + ], + }, + ], + activePlugins: [ 'mailchimp-for-woocommerce' ], + }; + const actions = getActionsList( props as WhatsNextProps ); + const mailchimpAction = actions.find( + ( action ) => action.title === 'Build customer relationships' + ); + expect( mailchimpAction ).toBeUndefined(); + } ); + + it( 'should include payments, extensions and externalDocumentation actions', () => { + const props = { + ...defaultProps, + allTasklists: [ + { + id: 'setup', + tasks: [ { id: 'payments', isComplete: true } ], + }, + { + id: 'extended', + tasks: [ + { id: 'marketing', isComplete: true }, + { id: 'get-mobile-app', isComplete: true }, + ], + }, + ], + activePlugins: [ 'mailchimp-for-woocommerce' ], + }; + const actions = getActionsList( props as WhatsNextProps ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Provide more ways to pay' } ) + ); + expect( actions ).toContainEqual( + expect.objectContaining( { title: 'Power up your store' } ) + ); + expect( actions ).toContainEqual( + expect.objectContaining( { linkText: 'Explore support resources' } ) + ); + } ); +} );