/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { difference } from 'lodash';
import { useEffect, useState } from '@wordpress/element';
import { Stepper } from '@woocommerce/components';
import { Card, CardBody, Button } from '@wordpress/components';
import { getAdminLink } from '@woocommerce/settings';
/**
* Internal dependencies
*/
import { Connect } from './components/connect';
import { Plugins } from './components/plugins';
import { StoreLocation } from './components/store-location';
import { WCSBanner } from './components/wcs-banner';
import { TaskProps, ShippingRecommendationProps } from './types';
/**
* Plugins required to automate shipping.
*/
const AUTOMATION_PLUGINS = [ 'jetpack', 'woocommerce-services' ];
export const ShippingRecommendation: React.FC<
TaskProps & ShippingRecommendationProps
> = ( { activePlugins, isJetpackConnected, isResolving } ) => {
const [ pluginsToActivate, setPluginsToActivate ] = useState< string[] >(
[]
);
const [ stepIndex, setStepIndex ] = useState( 0 );
const [ isRedirecting, setIsRedirecting ] = useState( false );
const nextStep = () => {
setStepIndex( stepIndex + 1 );
};
const redirectToSettings = () => {
if ( window?.location ) {
setIsRedirecting( true );
window.location.href = getAdminLink(
'admin.php?page=wc-settings&tab=shipping§ion=woocommerce-services-settings'
);
}
};
useEffect( () => {
const remainingPlugins = difference(
AUTOMATION_PLUGINS,
activePlugins
);
// Force redirect when all steps are completed.
if (
! isResolving &&
remainingPlugins.length === 0 &&
isJetpackConnected
) {
redirectToSettings();
}
if ( remainingPlugins.length <= pluginsToActivate.length ) {
return;
}
setPluginsToActivate( remainingPlugins );
}, [ activePlugins, isJetpackConnected, isResolving, pluginsToActivate ] );
const steps = [
{
key: 'store_location',
label: __( 'Set store location', 'woocommerce' ),
description: __(
'The address from which your business operates',
'woocommerce'
),
content: