/* eslint-disable @wordpress/no-global-event-listener */
/**
* External dependencies
*/
import {
useEffect,
useState,
useCallback,
createInterpolateElement,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import apiFetch from '@wordpress/api-fetch';
import { recordEvent } from '@woocommerce/tracks';
import { Button, Card, CardFooter, CardDivider } from '@wordpress/components';
/**
* Internal dependencies
*/
import AdsCreditsPromo from './components/AdsCreditsPromo';
import StepHeader from '../components/StepHeader';
import StepOverview from '../components/StepOverview';
import AccountConnection from '../components/Account/Connection';
import BusinessAccountSelection from '../components/Account/BusinessAccountSelection';
import { useSettingsSelect, useCreateNotice } from '../helpers/effects';
import documentationLinkProps from '../helpers/documentation-link-props';
/**
* Clicking on "… create a new Pinterest account" button.
*
* @event wcadmin_pfw_account_create_button_click
*/
/**
* Clicking on "… convert your personal account" button.
*
* @event wcadmin_pfw_account_convert_button_click
*/
/**
* Account setup step component.
*
* @fires wcadmin_pfw_account_create_button_click
* @fires wcadmin_pfw_account_convert_button_click
* @fires wcadmin_pfw_documentation_link_click with `{ link_id: 'ad-guidelines', context: props.view }`
* @fires wcadmin_pfw_documentation_link_click with `{ link_id: 'merchant-guidelines', context: props.view }`
* @fires wcadmin_pfw_modal_open with `{ name: 'ads-credits-terms-and-conditions', … }`
* @fires wcadmin_pfw_modal_closed with `{ name: 'ads-credits-terms-and-conditions'', … }`
*
* @param {Object} props React props
* @param {Function} props.goToNextStep
* @param {string} props.view
* @param {boolean} props.isConnected
* @param {Function} props.setIsConnected
* @param {boolean} props.isBusinessConnected
* @return {JSX.Element} Rendered element.
*/
const SetupAccount = ( {
goToNextStep,
view,
isConnected,
setIsConnected,
isBusinessConnected,
} ) => {
const context = view;
const createNotice = useCreateNotice();
const appSettings = useSettingsSelect();
const [ businessAccounts, setBusinessAccounts ] = useState(
wcSettings.pinterest_for_woocommerce.businessAccounts
);
useEffect( () => {
if ( undefined !== businessAccounts && businessAccounts.length > 0 ) {
window.removeEventListener( 'focus', fetchBusinesses );
} else {
window.addEventListener( 'focus', fetchBusinesses );
}
return () => window.removeEventListener( 'focus', fetchBusinesses );
}, [ fetchBusinesses, businessAccounts ] );
const fetchBusinesses = useCallback( async () => {
try {
setBusinessAccounts();
const results = await apiFetch( {
path:
wcSettings.pinterest_for_woocommerce.apiRoute +
'/businesses/',
method: 'GET',
} );
setBusinessAccounts( results );
} catch ( error ) {
createNotice(
'error',
error.message ||
__(
'Couldn’t retrieve your linked business accounts.',
'pinterest-for-woocommerce'
)
);
}
}, [ createNotice ] );
return (
<div className="woocommerce-setup-guide__setup-account pinterest-for-woocommerce-account-setup">
{ view === 'wizard' && (
<StepHeader
title={ __(
'Set up your business account',
'pinterest-for-woocommerce'
) }
subtitle={ __( 'Step One', 'pinterest-for-woocommerce' ) }
/>
) }
<div className="woocommerce-setup-guide__step-columns">
<div className="woocommerce-setup-guide__step-column">
<StepOverview
title={
view === 'wizard'
? __(
'Pinterest business account',
'pinterest-for-woocommerce'
)
: __(
'Linked account',
'pinterest-for-woocommerce'
)
}
description={ createInterpolateElement(
__(
'Set up a free Pinterest business account to get access to analytics on your Pins and the ability to run ads. This requires agreeing to our <adGuidelinesLink>advertising guidelines</adGuidelinesLink> and following our <merchantGuidelinesLink>merchant guidelines</merchantGuidelinesLink>.',
'pinterest-for-woocommerce'
),
{
adGuidelinesLink: (
// Disabling no-content rule - content is interpolated from above string.
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
{ ...documentationLinkProps( {
href: wcSettings
.pinterest_for_woocommerce
.pinterestLinks.adGuidelines,
linkId: 'ad-guidelines',
context,
rel: 'noreferrer',
} ) }
/>
),
merchantGuidelinesLink: (
// Disabling no-content rule - content is interpolated from above string.
// eslint-disable-next-line jsx-a11y/anchor-has-content
<a
{ ...documentationLinkProps( {
href: wcSettings
.pinterest_for_woocommerce
.pinterestLinks
.merchantGuidelines,
linkId: 'merchant-guidelines',
context,
rel: 'noreferrer',
} ) }
/>
),
}
) }
/>
{ view === 'wizard' && <AdsCreditsPromo /> }
</div>
<div className="woocommerce-setup-guide__step-column">
<Card>
<AccountConnection
context={ context }
isConnected={ isConnected }
setIsConnected={ setIsConnected }
accountData={ appSettings.account_data }
/>
{ isConnected === true &&
isBusinessConnected === false && (
<>
<CardDivider />
<BusinessAccountSelection
businessAccounts={ businessAccounts }
/>
</>
) }
{ isConnected === false && (
<CardFooter size="large">
<Button
isLink
href={
wcSettings.pinterest_for_woocommerce
.pinterestLinks.newAccount
}
onClick={ () =>
recordEvent(
'pfw_account_create_button_click'
)
}
target="_blank"
>
{ __(
'Or, create a new Pinterest account',
'pinterest-for-woocommerce'
) }
</Button>
</CardFooter>
) }
{ isConnected === true &&
isBusinessConnected === false &&
undefined !== businessAccounts &&
businessAccounts.length < 1 && (
<CardFooter size="large">
<Button
isLink
href={
wcSettings.pinterest_for_woocommerce
.pinterestLinks
.convertToBusinessAcct
}
onClick={ () =>
recordEvent(
'pfw_account_convert_button_click'
)
}
target="_blank"
>
{ __(
'Or, convert your personal account',
'pinterest-for-woocommerce'
) }
</Button>
</CardFooter>
) }
</Card>
{ view === 'wizard' && isBusinessConnected === true && (
<div className="woocommerce-setup-guide__footer-button">
<Button isPrimary onClick={ goToNextStep }>
{ __(
'Continue',
'pinterest-for-woocommerce'
) }
</Button>
</div>
) }
</div>
</div>
</div>
);
};
export default SetupAccount;