Merge feature/contact-info branch into trunk

js/src/components/account-card/index.js

@@ -2,7 +2,10 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { Flex, FlexItem, FlexBlock } from '@wordpress/components';
+import GridiconPhone from 'gridicons/dist/phone';
+import { Icon, store as storeIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -25,11 +28,13 @@ const googleLogoURL =
  */
 export const APPEARANCE = {
 	GOOGLE: 'google',
+	PHONE: 'phone',
+	ADDRESS: 'address',
 };
 
 const appearanceDict = {
 	[ APPEARANCE.GOOGLE ]: {
-		logo: (
+		icon: (
 			<img
 				src={ googleLogoURL }
 				alt={ __( 'Google Logo', 'google-listings-and-ads' ) }
@@ -39,30 +44,42 @@ const appearanceDict = {
 		),
 		title: __( 'Google account', 'google-listings-and-ads' ),
 	},
+	[ APPEARANCE.PHONE ]: {
+		icon: <GridiconPhone size={ 32 } />,
+		title: __( 'Phone number', 'google-listings-and-ads' ),
+	},
+	[ APPEARANCE.ADDRESS ]: {
+		icon: <Icon icon={ storeIcon } size={ 32 } />,
+		title: __( 'Store address', 'google-listings-and-ads' ),
+	},
 };
 
 /**
  * Renders a Card component with account info and status.
  *
  * @param {Object} props React props.
+ * @param {string} [props.className] Additional CSS class name to be appended.
  * @param {APPEARANCE} props.appearance Kind of account to indicate the card appearance.
  * @param {JSX.Element} props.description Content below the card title.
+ * @param {boolean} [props.hideIcon=false] Whether hide the leading icon.
  * @param {JSX.Element} [props.indicator] Indicator of actions or status on the right side of the card.
  * @param {Array<JSX.Element>} [props.children] Children to be rendered if needs more content within the card.
  */
 export default function AccountCard( {
+	className,
 	appearance,
 	description,
+	hideIcon = false,
 	indicator,
 	children,
 } ) {
-	const { logo, title } = appearanceDict[ appearance ];
+	const { icon, title } = appearanceDict[ appearance ];
 
 	return (
-		<Section.Card className="gla-account-card">
+		<Section.Card className={ classnames( 'gla-account-card', className ) }>
 			<Section.Card.Body>
 				<Flex gap={ 4 }>
-					<FlexItem>{ logo }</FlexItem>
+					{ ! hideIcon && <FlexItem>{ icon }</FlexItem> }
 					<FlexBlock>
 						<Subsection.Title>{ title }</Subsection.Title>
 						<div>{ description }</div>

js/src/components/app-button/index.js

@@ -49,9 +49,14 @@ const AppButton = ( props ) => {
 		onClick( ...args );
 	};
 
+	const classes = [ 'app-button', className ];
+	if ( rest.iconPosition === 'right' ) {
+		classes.push( 'app-button--fix-icon-position-right' );
+	}
+
 	return (
 		<Button
-			className={ classnames( 'app-button', className ) }
+			className={ classnames( ...classes ) }
 			disabled={ disabled || loading }
 			onClick={ handleClick }
 			{ ...rest }

js/src/components/app-button/index.scss

@@ -2,13 +2,20 @@
 	white-space: nowrap;
 
 	svg {
-		width: inherit;
-		height: inherit;
 		max-width: inherit;
 		max-height: inherit;
 
 		circle {
 			stroke: currentColor;
 		}
 	}
+
+	/**
+	 * Fix that the SVG icon gap to text should be on the left side.
+	 * @see https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L309-L311
+	 */
+	&--fix-icon-position-right.has-icon.has-text svg {
+		margin-right: 0;
+		margin-left: 8px;
+	}
 }

js/src/components/contact-information/index.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { getHistory } from '@woocommerce/navigation';
+
+/**
+ * Internal dependencies
+ */
+import { getEditContactInformationUrl } from '.~/utils/urls';
+import useGoogleMCPhoneNumber from '.~/hooks/useGoogleMCPhoneNumber';
+import useStoreAddress from '.~/hooks/useStoreAddress';
+import Section from '.~/wcdl/section';
+import VerticalGapLayout from '.~/components/vertical-gap-layout';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import SpinnerCard from '.~/components/spinner-card';
+import PhoneNumberCard from './phone-number-card';
+import StoreAddressCard from './store-address-card';
+import NoContactInformationCard from './no-contact-information-card';
+import usePhoneNumberCheckTrackEventEffect from './usePhoneNumberCheckTrackEventEffect';
+
+const learnMoreLinkId = 'contact-information-read-more';
+const learnMoreUrl =
+	'https://docs.woocommerce.com/document/google-listings-and-ads/#contact-information';
+
+const description = __(
+	'Your contact information is required by Google for verification purposes. It will be shared with the Google Merchant Center and will not be displayed to customers.',
+	'google-listings-and-ads'
+);
+
+const mcTitle = __( 'Enter contact information', 'google-listings-and-ads' );
+const settingsTitle = __( 'Contact information', 'google-listings-and-ads' );
+
+export function ContactInformationPreview() {
+	const phone = useGoogleMCPhoneNumber();
+	const address = useStoreAddress( 'mc' );
+
+	const handleEditClick = () => {
+		getHistory().push( getEditContactInformationUrl() );
+	};
+
+	let sectionContent = <SpinnerCard />;
+
+	if ( phone.loaded && address.loaded ) {
+		if ( phone.data.isValid && address.data.isAddressFilled ) {
+			sectionContent = (
+				<VerticalGapLayout size="overlap">
+					<PhoneNumberCard
+						view="settings"
+						isPreview
+						phoneNumber={ phone }
+						onEditClick={ handleEditClick }
+					/>
+					<StoreAddressCard isPreview />
+				</VerticalGapLayout>
+			);
+		} else {
+			sectionContent = (
+				<NoContactInformationCard
+					onEditClick={ handleEditClick }
+					learnMoreUrl={ learnMoreUrl }
+					learnMoreLinkId={ learnMoreLinkId }
+				/>
+			);
+		}
+	}
+
+	return (
+		<Section title={ settingsTitle } description={ description }>
+			{ sectionContent }
+		</Section>
+	);
+}
+
+export default function ContactInformation( { view, onPhoneNumberChange } ) {
+	const phone = useGoogleMCPhoneNumber();
+	const isSetupMC = view === 'setup-mc';
+
+	const initEditing = isSetupMC ? null : true;
+	const title = isSetupMC ? mcTitle : settingsTitle;
+	const trackContext = isSetupMC
+		? 'setup-mc-contact-information'
+		: 'settings-contact-information';
+
+	usePhoneNumberCheckTrackEventEffect( phone );
+
+	return (
+		<Section
+			title={ title }
+			description={
+				<div>
+					<p>{ description }</p>
+					<p>
+						<AppDocumentationLink
+							context={ trackContext }
+							linkId={ learnMoreLinkId }
+							href={ learnMoreUrl }
+						>
+							{ __( 'Learn more', 'google-listings-and-ads' ) }
+						</AppDocumentationLink>
+					</p>
+				</div>
+			}
+		>
+			<VerticalGapLayout size="large">
+				<PhoneNumberCard
+					view={ view }
+					phoneNumber={ phone }
+					initEditing={ initEditing }
+					onPhoneNumberChange={ onPhoneNumberChange }
+				/>
+				<StoreAddressCard />
+			</VerticalGapLayout>
+		</Section>
+	);
+}

js/src/components/contact-information/no-contact-information-card.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import GridiconNotice from 'gridicons/dist/notice';
+
+/**
+ * Internal dependencies
+ */
+import Subsection from '.~/wcdl/subsection';
+import Section from '.~/wcdl/section';
+import AppButton from '.~/components/app-button';
+import './no-contact-information-card.scss';
+
+export default function NoContactInformationCard( {
+	onEditClick,
+	learnMoreUrl,
+	learnMoreLinkId,
+} ) {
+	return (
+		<Section.Card className="gla-no-contact-information-card">
+			<Section.Card.Body>
+				<Subsection>
+					<Subsection.Title>
+						<div>
+							<GridiconNotice />
+						</div>
+						{ __(
+							'Please add your contact information',
+							'google-listings-and-ads'
+						) }
+					</Subsection.Title>
+					<Subsection.Body>
+						{ __(
+							'Google requires the phone number and store address for all stores using Google Merchant Center.',
+							'google-listings-and-ads'
+						) }
+					</Subsection.Body>
+				</Subsection>
+				<Subsection>
+					<Subsection.Body>
+						<AppButton isPrimary onClick={ onEditClick }>
+							{ __(
+								'Add information',
+								'google-listings-and-ads'
+							) }
+						</AppButton>
+						<AppButton
+							isTertiary
+							target="_blank"
+							eventName="gla_google_mc_link_click"
+							eventProps={ {
+								context:
+									'settings-no-contact-information-notice',
+								link_id: learnMoreLinkId,
+								href: learnMoreUrl,
+							} }
+							href={ learnMoreUrl }
+						>
+							{ __( 'Learn more', 'google-listings-and-ads' ) }
+						</AppButton>
+					</Subsection.Body>
+				</Subsection>
+			</Section.Card.Body>
+		</Section.Card>
+	);
+}

js/src/components/contact-information/no-contact-information-card.scss

@@ -0,0 +1,17 @@
+.gla-no-contact-information-card {
+	.wcdl-subsection-title > div {
+		margin-bottom: 8px;
+	}
+
+	.wcdl-subsection-body {
+		color: $gray-700;
+	}
+
+	.gridicons-notice {
+		fill: $alert-red;
+	}
+
+	.components-button {
+		margin-right: $grid-unit-30;
+	}
+}