pc/modals: PhoneInput component with bundled flag icons (#2378)

clients/privacy-center/components/modals/consent-request-modal/ConsentRequestForm.tsx

@@ -12,24 +12,20 @@ import {
   Text,
   useToast,
 } from "@fidesui/react";
-
 import { useFormik } from "formik";
+import { Headers } from "headers-polyfill";
+import * as Yup from "yup";
 
 import { ErrorToastOptions } from "~/common/toast-options";
-
-import { Headers } from "headers-polyfill";
 import { addCommonHeaders } from "~/common/CommonHeaders";
-import { FormErrorMessage } from "~/components/FormErrorMessage";
-
 import { config, defaultIdentityInput, hostUrl } from "~/constants";
-import dynamic from "next/dynamic";
-import * as Yup from "yup";
-import { emailValidation, phoneValidation } from "../validation";
-import { ModalViews, VerificationType } from "../types";
-
-const PhoneInput = dynamic(() => import("react-phone-number-input"), {
-  ssr: false,
-});
+import { PhoneInput } from "~/components/phone-input";
+import { FormErrorMessage } from "~/components/FormErrorMessage";
+import {
+  emailValidation,
+  phoneValidation,
+} from "~/components/modals/validation";
+import { ModalViews, VerificationType } from "~/components/modals/types";
 
 const useConsentRequestForm = ({
   onClose,
@@ -203,14 +199,9 @@ const ConsentRequestForm: React.FC<ConsentRequestFormProps> = ({
                 isRequired={identityInputs.phone === "required"}
               >
                 <FormLabel>Phone</FormLabel>
-                <Input
-                  as={PhoneInput}
+                <PhoneInput
                   id="phone"
                   name="phone"
-                  type="tel"
-                  focusBorderColor="primary.500"
-                  placeholder="000 000 0000"
-                  defaultCountry="US"
                   onChange={(value) => {
                     setFieldValue("phone", value, true);
                   }}

clients/privacy-center/components/modals/privacy-request-modal/PrivacyRequestForm.tsx

@@ -12,32 +12,23 @@ import {
   useToast,
 } from "@fidesui/react";
 import React, { useEffect, useState } from "react";
-
 import { useFormik } from "formik";
-
+import * as Yup from "yup";
 import { Headers } from "headers-polyfill";
+
 import { addCommonHeaders } from "~/common/CommonHeaders";
 import { ErrorToastOptions, SuccessToastOptions } from "~/common/toast-options";
 import { PrivacyRequestStatus } from "~/types";
-import { FormErrorMessage } from "~/components/FormErrorMessage";
-
 import { PrivacyRequestOption } from "~/types/config";
 import { hostUrl, config, defaultIdentityInput } from "~/constants";
-
-import dynamic from "next/dynamic";
-import * as Yup from "yup";
-import { ModalViews } from "../types";
-
-import "react-phone-number-input/style.css";
+import { PhoneInput } from "~/components/phone-input";
+import { ModalViews } from "~/components/modals/types";
+import { FormErrorMessage } from "~/components/FormErrorMessage";
 import {
   emailValidation,
   nameValidation,
   phoneValidation,
-} from "../validation";
-
-const PhoneInput = dynamic(() => import("react-phone-number-input"), {
-  ssr: false,
-});
+} from "~/components/modals/validation";
 
 const usePrivacyRequestForm = ({
   onClose,
@@ -259,14 +250,9 @@ const PrivacyRequestForm: React.FC<PrivacyRequestFormProps> = ({
                 isRequired={identityInputs.phone === "required"}
               >
                 <FormLabel>Phone</FormLabel>
-                <Input
-                  as={PhoneInput}
+                <PhoneInput
                   id="phone"
                   name="phone"
-                  type="tel"
-                  focusBorderColor="primary.500"
-                  placeholder="000 000 0000"
-                  defaultCountry="US"
                   onChange={(value) => {
                     setFieldValue("phone", value, true);
                   }}

clients/privacy-center/components/phone-input.tsx

@@ -0,0 +1,29 @@
+import { Input, InputProps } from "@fidesui/react";
+import dynamic from "next/dynamic";
+// Importing the flag icons causes them to be bundled into the app instead of loaded from an outside
+// domain. See: https://gitlab.com/catamphetamine/react-phone-number-input#including-all-flags
+import FLAG_ICONS from "react-phone-number-input/flags";
+import "react-phone-number-input/style.css";
+
+const ReactPhoneNumberInput = dynamic(
+  () => import("react-phone-number-input"),
+  {
+    ssr: false,
+  }
+);
+
+/**
+ * Wraps the PhoneInput component from react-phone-number-input in a Chakra Input
+ * with common default props.
+ */
+export const PhoneInput = (props: InputProps) => (
+  <Input
+    as={ReactPhoneNumberInput}
+    flags={FLAG_ICONS}
+    type="tel"
+    focusBorderColor="primary.500"
+    placeholder="000 000 0000"
+    defaultCountry="US"
+    {...props}
+  />
+);