request-full-access-google-account-card.js

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';

/**
 * Internal dependencies
 */
import { glaData } from '~/constants';
import AppButton from '~/components/app-button';
import AccountCard, { APPEARANCE } from '~/components/account-card';
import readMoreLink from './read-more-link';
import useGoogleConnectFlow from './useGoogleConnectFlow';
import './request-full-access-google-account-card.scss';

/**
 * Renders an AccountCard based on Google appearance for requesting full access permission from user.
 *
 * @param {Object} props React props.
 * @param {string} props.additionalScopeEmail Specify the email to be requested additional permission scopes to Google.
 * @fires gla_google_account_connect_button_click with `{ action: 'scope', context: 'reconnect' }`
 * @fires gla_google_account_connect_button_click with `{ action: 'scope', context: 'setup-mc' }`
 * @fires gla_documentation_link_click with `{ context: 'setup-mc-accounts', link_id: 'required-google-permissions', href: 'https://woocommerce.com/document/google-for-woocommerce/get-started/setup-and-configuration/#required-google-permissions' }`
 */
const RequestFullAccessGoogleAccountCard = ( { additionalScopeEmail } ) => {
	const pageName = glaData.mcSetupComplete ? 'reconnect' : 'setup-mc';
	const [ handleConnect, { loading, data } ] = useGoogleConnectFlow(
		pageName,
		additionalScopeEmail
	);

	return (
		<AccountCard
			appearance={ APPEARANCE.GOOGLE }
			alignIcon="top"
			description={
				<>
					{ additionalScopeEmail }
					<p>
						<em>
							{ createInterpolateElement(
								__(
									'<alert>Uh-oh!</alert> You did not allow WooCommerce sufficient access to your Google account. You must allow all required permissions in the Google authorization page to proceed. <link>Read more</link>',
									'google-listings-and-ads'
								),
								{
									alert: (
										<span className="gla-authorize-google-account-card__error-text" />
									),
									link: readMoreLink,
								}
							) }
						</em>
					</p>
				</>
			}
			alignIndicator="top"
			indicator={
				<AppButton
					isSecondary
					isDestructive
					loading={ loading || data }
					eventName="gla_google_account_connect_button_click"
					eventProps={ {
						context: pageName,
						action: 'scope',
					} }
					text={ __(
						'Allow full access',
						'google-listings-and-ads'
					) }
					onClick={ handleConnect }
				/>
			}
		/>
	);
};

export default RequestFullAccessGoogleAccountCard;