woocommerce/plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx

95 lines
2.7 KiB
TypeScript
Raw Normal View History

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
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { Button, CheckboxControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import interpolateComponents from '@automattic/interpolate-components';
import { Link } from '@woocommerce/components';
/**
* Internal dependencies
*/
import { IntroOptInEvent } from '../index';
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 { Heading } from '../components/heading/heading';
import { Navigation } from '../components/navigation/navigation';
export const IntroOptIn = ( {
sendEvent,
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
navigationProgress,
}: {
sendEvent: ( event: IntroOptInEvent ) => void;
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
navigationProgress: number;
} ) => {
const [ iOptInDataSharing, setIsOptInDataSharing ] =
useState< boolean >( true );
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
return (
<div
className="woocommerce-profiler-intro-opt-in"
data-testid="core-profiler-intro-opt-in-screen"
>
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
<Navigation
percentage={ navigationProgress }
skipText={ __( 'Skip guided setup', 'woocommerce' ) }
onSkip={ () =>
sendEvent( {
type: 'INTRO_SKIPPED',
payload: { optInDataSharing: false },
} )
}
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
/>
<div className="woocommerce-profiler-page__content woocommerce-profiler-intro-opt-in__content">
<div className="woocommerce-profiler-welcome-image" />
<Heading
title={ __( 'Welcome to Woo!', 'woocommerce' ) }
subTitle={ interpolateComponents( {
mixedString: __(
"It's great to have you here with us! We'll be guiding you through the setup process first, answer a few questions to tailor your experience.",
'woocommerce'
),
components: {
br: <br />,
},
} ) }
/>
<Button
className="woocommerce-profiler-setup-store__button"
variant="primary"
onClick={ () =>
sendEvent( {
type: 'INTRO_COMPLETED',
payload: { optInDataSharing: iOptInDataSharing },
} )
}
>
{ __( 'Set up my store', 'woocommerce' ) }
</Button>
<div className="woocommerce-profiler-intro-opt-in__footer">
<CheckboxControl
className="core-profiler__checkbox"
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
label={ interpolateComponents( {
mixedString: __(
'I agree to share my data to tailor my store setup experience and get more relevant content (WooCommerce will never rent or sell your data, and you can opt out at any time in WooCommerce settings. {{link}}Learn more about usage tracking.{{/link}})',
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
'woocommerce'
),
components: {
link: (
<Link
href="https://woocommerce.com/usage-tracking?utm_medium=product"
target="_blank"
type="external"
/>
),
},
} ) }
checked={ iOptInDataSharing }
onChange={ setIsOptInDataSharing }
/>
</div>
</div>
</div>
);
};