Implement the shared components of PhoneNumberCard ContactInformation…

… section

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

@@ -0,0 +1,66 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useGoogleMCPhoneNumber from '.~/hooks/useGoogleMCPhoneNumber';
+import Section from '.~/wcdl/section';
+import VerticalGapLayout from '.~/components/vertical-gap-layout';
+import AppDocumentationLink from '.~/components/app-documentation-link';
+import AppSpinner from '.~/components/app-spinner';
+import PhoneNumberCard from './phone-number-card';
+
+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 default function ContactInformation( { view, onPhoneNumberChange } ) {
+	const phone = useGoogleMCPhoneNumber();
+	const isSetupMC = view === 'setup-mc';
+
+	const initEditing = isSetupMC ? ! phone.data.isValid : true;
+	const title = isSetupMC ? mcTitle : settingsTitle;
+	const trackContext = isSetupMC
+		? 'setup-mc-contact-information'
+		: 'settings-contact-information';
+
+	return (
+		<Section
+			title={ title }
+			description={
+				<div>
+					<p>{ description }</p>
+					<p>
+						<AppDocumentationLink
+							context={ trackContext }
+							linkId="contact-information-read-more"
+							// TODO: [lite-contact-info] add link
+							href="https://example.com/"
+						>
+							{ __( 'Learn more', 'google-listings-and-ads' ) }
+						</AppDocumentationLink>
+					</p>
+				</div>
+			}
+		>
+			{ phone.loaded ? (
+				<VerticalGapLayout size="large">
+					<PhoneNumberCard
+						initEditing={ initEditing }
+						onPhoneNumberChange={ onPhoneNumberChange }
+					/>
+					<div>TODO: add store address card</div>
+				</VerticalGapLayout>
+			) : (
+				<AppSpinner />
+			) }
+		</Section>
+	);
+}

js/src/components/contact-information/phone-number-card.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { getCountryCallingCode } from 'libphonenumber-js';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { Flex, FlexItem, FlexBlock, CardDivider } from '@wordpress/components';
+import { Spinner } from '@woocommerce/components';
+
+/**
+ * Internal dependencies
+ */
+import useCountryCallingCodes from '.~/hooks/useCountryCallingCodes';
+import useGoogleMCPhoneNumber from '.~/hooks/useGoogleMCPhoneNumber';
+import Section from '.~/wcdl/section';
+import SelectControl from '.~/wcdl/select-control';
+import AppInputControl from '.~/components/app-input-control';
+import AccountCard, { APPEARANCE } from '.~/components/account-card';
+import AppButton from '.~/components/app-button';
+import AppSpinner from '.~/components/app-spinner';
+import './phone-number-card.scss';
+
+const noop = () => {};
+
+function PhoneNumberContent( {
+	initCountry,
+	initNationalNumber,
+	onPhoneNumberChange,
+} ) {
+	const countryCallingCodes = useCountryCallingCodes( 'select-options' );
+	const [ country, setCountry ] = useState( initCountry );
+	const [ number, setNumber ] = useState( initNationalNumber );
+
+	const handleChange = ( nextCountry, nextNumber ) => {
+		if ( nextCountry !== country ) {
+			setCountry( nextCountry );
+		}
+		if ( nextNumber !== number ) {
+			setNumber( nextNumber );
+		}
+
+		const countryCallingCode = nextCountry
+			? getCountryCallingCode( nextCountry )
+			: '';
+		onPhoneNumberChange( countryCallingCode, nextNumber, nextCountry );
+	};
+
+	const handleCountryChange = ( v ) => handleChange( v, number );
+	const handleNumberChange = ( v ) => handleChange( country, v );
+
+	return (
+		<Section.Card.Body>
+			<Flex gap={ 4 }>
+				<FlexItem>
+					<SelectControl
+						label={ __(
+							'Country code',
+							'google-listings-and-ads'
+						) }
+						isSearchable
+						excludeSelectedOptions={ false }
+						options={ countryCallingCodes }
+						selected={ country }
+						onChange={ handleCountryChange }
+					/>
+				</FlexItem>
+				<FlexBlock>
+					<AppInputControl
+						label={ __(
+							'Phone number',
+							'google-listings-and-ads'
+						) }
+						value={ number }
+						onChange={ handleNumberChange }
+					/>
+				</FlexBlock>
+			</Flex>
+		</Section.Card.Body>
+	);
+}
+
+export default function PhoneNumberCard( {
+	isPreview,
+	initEditing,
+	onEditClick,
+	onPhoneNumberChange = noop,
+} ) {
+	const [ isEditing, setEditing ] = useState( initEditing );
+	const { loaded, data } = useGoogleMCPhoneNumber();
+
+	const editButton = isEditing ? null : (
+		<AppButton
+			isSecondary
+			onClick={ () => {
+				if ( onEditClick ) {
+					onEditClick();
+				} else {
+					setEditing( true );
+				}
+			} }
+		>
+			{ __( 'Edit', 'google-listings-and-ads' ) }
+		</AppButton>
+	);
+
+	let description = null;
+	let phoneNumberContent = null;
+
+	if ( isEditing ) {
+		description = __(
+			'Please enter a phone number to be used for verification.',
+			'google-listings-and-ads'
+		);
+
+		if ( loaded ) {
+			phoneNumberContent = (
+				<>
+					<CardDivider />
+					<PhoneNumberContent
+						initCountry={ data.country }
+						initNationalNumber={ data.nationalNumber }
+						onPhoneNumberChange={ onPhoneNumberChange }
+					/>
+				</>
+			);
+		} else {
+			phoneNumberContent = <AppSpinner />;
+		}
+	} else {
+		description = loaded ? data.display : <Spinner />;
+	}
+
+	return (
+		<AccountCard
+			className="gla-phone-number-card"
+			appearance={ APPEARANCE.PHONE }
+			description={ description }
+			hideIcon={ isPreview }
+			indicator={ editButton }
+		>
+			{ phoneNumberContent }
+		</AccountCard>
+	);
+}

js/src/components/contact-information/phone-number-card.scss

@@ -0,0 +1,42 @@
+.gla-phone-number-card {
+	// Country code selector
+	.wcdl-select-control {
+		.wcdl-select-control__input {
+			margin-bottom: 0;
+		}
+
+		.woocommerce-select-control {
+			.components-base-control {
+				height: 36px;
+				border-color: $gray-600;
+			}
+
+			.woocommerce-select-control__control-input {
+				font-size: 13px;
+				color: $gray-900;
+			}
+
+			.woocommerce-select-control__listbox {
+				top: 37px;
+			}
+
+			.woocommerce-select-control__option {
+				min-height: 36px;
+				font-size: 13px;
+			}
+		}
+	}
+
+	// Phone number input
+	.components-input-control .components-input-control__container {
+		.components-input-control__input {
+			height: 36px;
+			font-size: 13px;
+			color: $gray-900;
+		}
+
+		.components-input-control__backdrop {
+			border-color: $gray-600;
+		}
+	}
+}

js/src/setup-mc/setup-stepper/store-requirements/index.js

@@ -15,6 +15,7 @@ import useDispatchCoreNotices from '.~/hooks/useDispatchCoreNotices';
 import StepContent from '.~/components/stepper/step-content';
 import StepContentHeader from '.~/components/stepper/step-content-header';
 import StepContentFooter from '.~/components/stepper/step-content-footer';
+import ContactInformation from '.~/components/contact-information';
 import AppButton from '.~/components/app-button';
 
 export default function StoreRequirements() {
@@ -27,6 +28,11 @@ export default function StoreRequirements() {
 		return {};
 	};
 
+	const handlePhoneNumberChange = ( countryCallingCode, nationalNumber ) => {
+		// TODO: [lite-contact-info] handle the onChange callback of phone number
+		console.log( countryCallingCode, nationalNumber ); // eslint-disable-line
+	};
+
 	const handleSubmitCallback = async () => {
 		try {
 			setCompleting( true );
@@ -83,7 +89,10 @@ export default function StoreRequirements() {
 
 					return (
 						<>
-							<div>TODO: implement contact information setup</div>
+							<ContactInformation
+								view="setup-mc"
+								onPhoneNumberChange={ handlePhoneNumberChange }
+							/>
 							<div>TODO: move pre-lauch checklist to here</div>
 							<StepContentFooter>
 								<AppButton