From 5c9cecf8c8dd43bdde3aa8eab14f8679ccb58de6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Jul 2022 09:42:58 -0500
Subject: [PATCH] Add PhoneInput component

---
 app/soapbox/components/ui/index.ts            |  1 +
 .../components/ui/phone-input/phone-input.tsx | 34 +++++++++++++++++++
 .../verification/steps/sms-verification.tsx   | 12 +++----
 3 files changed, 39 insertions(+), 8 deletions(-)
 create mode 100644 app/soapbox/components/ui/phone-input/phone-input.tsx

diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index cd48426b6..042b26838 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -27,6 +27,7 @@ export {
   MenuList,
 } from './menu/menu';
 export { default as Modal } from './modal/modal';
+export { default as PhoneInput } from './phone-input/phone-input';
 export { default as ProgressBar } from './progress-bar/progress-bar';
 export { default as Select } from './select/select';
 export { default as Spinner } from './spinner/spinner';
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
new file mode 100644
index 000000000..c3ccae6cb
--- /dev/null
+++ b/app/soapbox/components/ui/phone-input/phone-input.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { formatPhoneNumber } from 'soapbox/utils/phone';
+
+import Input from '../input/input';
+
+interface IPhoneInput extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'required'> {
+  /** Input phone number. */
+  value?: string,
+  /** Change event handler taking the formatted input. */
+  onChange?: (phone: string) => void,
+}
+
+/** Internationalized phone input with country code picker. */
+const PhoneInput: React.FC<IPhoneInput> = (props) => {
+  const { onChange, ...rest } = props;
+
+  /** Pass the formatted phone to the handler. */
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
+    if (onChange) {
+      onChange(formatPhoneNumber(target.value));
+    }
+  };
+
+  return (
+    <Input
+      type='text'
+      onChange={handleChange}
+      {...rest}
+    />
+  );
+};
+
+export default PhoneInput;
diff --git a/app/soapbox/features/verification/steps/sms-verification.tsx b/app/soapbox/features/verification/steps/sms-verification.tsx
index 4e24c8b24..87e8e49f2 100644
--- a/app/soapbox/features/verification/steps/sms-verification.tsx
+++ b/app/soapbox/features/verification/steps/sms-verification.tsx
@@ -5,9 +5,8 @@ import OtpInput from 'react-otp-input';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmPhoneVerification, requestPhoneVerification } from 'soapbox/actions/verification';
-import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui';
+import { Button, Form, FormGroup, PhoneInput, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-import { formatPhoneNumber } from 'soapbox/utils/phone';
 
 const Statuses = {
   IDLE: 'IDLE',
@@ -30,10 +29,8 @@ const SmsVerification = () => {
 
   const isValid = validPhoneNumberRegex.test(phone);
 
-  const onChange = React.useCallback((event) => {
-    const formattedPhone = formatPhoneNumber(event.target.value);
-
-    setPhone(formattedPhone);
+  const onChange = React.useCallback((phone: string) => {
+    setPhone(phone);
   }, []);
 
   const handleSubmit = React.useCallback((event) => {
@@ -147,8 +144,7 @@ const SmsVerification = () => {
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
         <Form onSubmit={handleSubmit}>
           <FormGroup labelText='Phone Number'>
-            <Input
-              type='text'
+            <PhoneInput
               value={phone}
               onChange={onChange}
               required