139 lines
3.2 KiB
TypeScript
139 lines
3.2 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { __ } from '@wordpress/i18n';
|
|
import { difference } from 'lodash';
|
|
import { useEffect, useState } from '@wordpress/element';
|
|
import { Stepper } from '@woocommerce/components';
|
|
import {
|
|
OPTIONS_STORE_NAME,
|
|
PLUGINS_STORE_NAME,
|
|
SETTINGS_STORE_NAME,
|
|
} from '@woocommerce/data';
|
|
import { useSelect } from '@wordpress/data';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { AUTOMATION_PLUGINS, SettingsSelector } from '../utils';
|
|
import { Connect } from './connect';
|
|
import { Plugins } from './plugins';
|
|
import { StoreLocation } from '../components/store-location';
|
|
import './setup.scss';
|
|
|
|
export type SetupProps = {
|
|
isPending: boolean;
|
|
onDisable: () => void;
|
|
onAutomate: () => void;
|
|
onManual: () => void;
|
|
};
|
|
|
|
export type SetupStepProps = {
|
|
isPending: boolean;
|
|
isResolving: boolean;
|
|
nextStep: () => void;
|
|
onDisable: () => void;
|
|
onAutomate: () => void;
|
|
onManual: () => void;
|
|
pluginsToActivate: string[];
|
|
};
|
|
|
|
export const Setup: React.FC< SetupProps > = ( {
|
|
isPending,
|
|
onDisable,
|
|
onAutomate,
|
|
onManual,
|
|
} ) => {
|
|
const [ pluginsToActivate, setPluginsToActivate ] = useState( [] );
|
|
const { activePlugins, isResolving } = useSelect( ( select ) => {
|
|
const { getSettings } = select(
|
|
SETTINGS_STORE_NAME
|
|
) as SettingsSelector;
|
|
const { hasFinishedResolution } = select(
|
|
OPTIONS_STORE_NAME
|
|
) as SettingsSelector;
|
|
const { getActivePlugins } = select( PLUGINS_STORE_NAME );
|
|
|
|
return {
|
|
activePlugins: getActivePlugins(),
|
|
generalSettings: getSettings( 'general' )?.general,
|
|
isResolving:
|
|
! hasFinishedResolution( 'getOption', [
|
|
'woocommerce_setup_jetpack_opted_in',
|
|
] ) ||
|
|
! hasFinishedResolution( 'getOption', [
|
|
'wc_connect_options',
|
|
] ),
|
|
};
|
|
} );
|
|
const [ stepIndex, setStepIndex ] = useState( 0 );
|
|
|
|
useEffect( () => {
|
|
const remainingPlugins = difference(
|
|
AUTOMATION_PLUGINS,
|
|
activePlugins
|
|
);
|
|
if ( remainingPlugins.length <= pluginsToActivate.length ) {
|
|
return;
|
|
}
|
|
setPluginsToActivate( remainingPlugins );
|
|
}, [ activePlugins ] );
|
|
|
|
const nextStep = () => {
|
|
setStepIndex( stepIndex + 1 );
|
|
};
|
|
|
|
const stepProps = {
|
|
isPending,
|
|
isResolving,
|
|
onAutomate,
|
|
onDisable,
|
|
nextStep,
|
|
onManual,
|
|
pluginsToActivate,
|
|
};
|
|
|
|
const steps = [
|
|
{
|
|
key: 'store_location',
|
|
label: __( 'Set store location', 'woocommerce' ),
|
|
description: __(
|
|
'The address from which your business operates',
|
|
'woocommerce'
|
|
),
|
|
content: <StoreLocation { ...stepProps } />,
|
|
},
|
|
{
|
|
key: 'plugins',
|
|
label: pluginsToActivate.includes( 'woocommerce-services' )
|
|
? __( 'Install Jetpack and WooCommerce Tax', 'woocommerce' )
|
|
: __( 'Install Jetpack', 'woocommerce' ),
|
|
description: __(
|
|
'Jetpack and WooCommerce Tax allow you to automate sales tax calculations',
|
|
'woocommerce'
|
|
),
|
|
content: <Plugins { ...stepProps } />,
|
|
},
|
|
{
|
|
key: 'connect',
|
|
label: __( 'Connect your store', 'woocommerce' ),
|
|
description: __(
|
|
'Connect your store to WordPress.com to enable automated sales tax calculations',
|
|
'woocommerce'
|
|
),
|
|
content: <Connect { ...stepProps } />,
|
|
},
|
|
];
|
|
|
|
const step = steps[ stepIndex ];
|
|
|
|
return (
|
|
<Stepper
|
|
isPending={ isResolving }
|
|
isVertical={ true }
|
|
currentStep={ step.key }
|
|
steps={ steps }
|
|
/>
|
|
);
|
|
};
|