Add a temporary component to demonstrate the phone number verificatio…

…n card.
woocommerce · Sep 10, 2021 · f605132 · f605132
1 parent 8f87341
commit f605132
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/js/src/components/contact-information/phone-number-card/phone-number-card.js b/js/src/components/contact-information/phone-number-card/phone-number-card.js
@@ -13,6 +13,7 @@ import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import AppButton from '.~/components/app-button';
 import AppSpinner from '.~/components/app-spinner';
 import EditPhoneNumberContent from './edit-phone-number-content';
+import VerifyPhoneNumberContent from './verify-phone-number-content';
 import './phone-number-card.scss';
 
 const noop = () => {};
@@ -22,6 +23,62 @@ const basePhoneNumberCardProps = {
 	appearance: APPEARANCE.PHONE,
 };
 
+// TODO: remove <DemoVerifyPhoneNumberCard> before merging PR.
+export function DemoVerifyPhoneNumberCard() {
+	const display = '+1 213 373 4253';
+	const [ unverifiedPhoneNumber, setUnverifiedPhoneNumber ] = useState(
+		null
+	);
+
+	const cardContent = unverifiedPhoneNumber ? (
+		<>
+			<CardDivider />
+			<VerifyPhoneNumberContent
+				{ ...unverifiedPhoneNumber }
+				onPhoneNumberVerified={ () => {
+					// eslint-disable-next-line no-console
+					console.log( 'onPhoneNumberVerified' );
+					setUnverifiedPhoneNumber( null );
+				} }
+			/>
+		</>
+	) : null;
+
+	const indicator = (
+		<AppButton
+			isSecondary
+			text={ unverifiedPhoneNumber ? 'Edit' : 'Send verification code' }
+			onClick={ () => {
+				if ( unverifiedPhoneNumber ) {
+					setUnverifiedPhoneNumber( null );
+				} else {
+					setUnverifiedPhoneNumber( {
+						verificationMethod: 'SMS',
+						country: 'US',
+						number: '+12133734253',
+						display,
+					} );
+				}
+			} }
+		/>
+	);
+
+	return (
+		<section className="wcdl-section">
+			<header />
+			<div className="wcdl-section__body">
+				<AccountCard
+					{ ...basePhoneNumberCardProps }
+					description={ display }
+					indicator={ indicator }
+				>
+					{ cardContent }
+				</AccountCard>
+			</div>
+		</section>
+	);
+}
+
 /**
  * @typedef { import(".~/hooks/useGoogleMCPhoneNumber").PhoneNumber } PhoneNumber
  * @typedef { import("./edit-phone-number-content").onPhoneNumberChange } onPhoneNumberChange

diff --git a/js/src/settings/index.js b/js/src/settings/index.js
@@ -15,6 +15,7 @@ import DisconnectAccounts from './disconnect-accounts';
 import ReconnectAccounts from './reconnect-accounts';
 import EditContactInformation from './edit-contact-information';
 import './index.scss';
+import { DemoVerifyPhoneNumberCard } from '.~/components/contact-information/phone-number-card/phone-number-card';
 
 const Settings = () => {
 	const { subpath } = getQuery();
@@ -42,6 +43,7 @@ const Settings = () => {
 	return (
 		<div className="gla-settings">
 			<NavigationClassic />
+			<DemoVerifyPhoneNumberCard />
 			<DisconnectAccounts />
 			<ContactInformationPreview />
 		</div>