#626-Updated input fields to accept international phone numbers

al1abb · Feb 26, 2025 · a9953ad · a9953ad
1 parent b324ed3
commit a9953ad
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 88 deletions.
diff --git a/app/components/invoice/form/sections/BillFromSection.tsx b/app/components/invoice/form/sections/BillFromSection.tsx
@@ -5,10 +5,10 @@ import { useFieldArray, useFormContext } from "react-hook-form";
 
 // Components
 import {
-  BaseButton,
-  FormCustomInput,
-  FormInput,
-  Subheading,
+    BaseButton,
+    FormCustomInput,
+    FormInput,
+    Subheading,
 } from "@/app/components";
 
 // Contexts
@@ -18,95 +18,97 @@ import { useTranslationContext } from "@/contexts/TranslationContext";
 import { Plus } from "lucide-react";
 
 const BillFromSection = () => {
-  const { control } = useFormContext();
+    const { control } = useFormContext();
 
-  const { _t } = useTranslationContext();
+    const { _t } = useTranslationContext();
 
-  const CUSTOM_INPUT_NAME = "sender.customInputs";
-  const { fields, append, remove } = useFieldArray({
-    control: control,
-    name: CUSTOM_INPUT_NAME,
-  });
-
-  const addNewCustomInput = () => {
-    append({
-      key: "",
-      value: "",
+    const CUSTOM_INPUT_NAME = "sender.customInputs";
+    const { fields, append, remove } = useFieldArray({
+        control: control,
+        name: CUSTOM_INPUT_NAME,
     });
-  };
 
-  const removeCustomInput = (index: number) => {
-    remove(index);
-  };
+    const addNewCustomInput = () => {
+        append({
+            key: "",
+            value: "",
+        });
+    };
+
+    const removeCustomInput = (index: number) => {
+        remove(index);
+    };
 
-  return (
-    <section className="flex flex-col gap-3">
-      <Subheading>{_t("form.steps.fromAndTo.billFrom")}:</Subheading>
+    return (
+        <section className="flex flex-col gap-3">
+            <Subheading>{_t("form.steps.fromAndTo.billFrom")}:</Subheading>
 
-      <FormInput
-        name="sender.name"
-        label={_t("form.steps.fromAndTo.name")}
-        placeholder="Your name"
-      />
-      <FormInput
-        name="sender.address"
-        label={_t("form.steps.fromAndTo.address")}
-        placeholder="Your address"
-      />
-      <FormInput
-        name="sender.zipCode"
-        label={_t("form.steps.fromAndTo.zipCode")}
-        placeholder="Your zip code"
-      />
-      <FormInput
-        name="sender.city"
-        label={_t("form.steps.fromAndTo.city")}
-        placeholder="Your city"
-      />
-      <FormInput
-        name="sender.country"
-        label={_t("form.steps.fromAndTo.country")}
-        placeholder="Your country"
-      />
-      <FormInput
-        name="sender.email"
-        label={_t("form.steps.fromAndTo.email")}
-        placeholder="Your email"
-      />
-      <FormInput
-        name="sender.phone"
-        label={_t("form.steps.fromAndTo.phone")}
-        placeholder="Your phone number"
-        type="text"
-        inputMode="numeric"
-        onInput={(e) => {
-          const target = e.target as HTMLInputElement;
-          target.value = target.value.replace(/\D/g, "");
-        }}
-      />
+            <FormInput
+                name="sender.name"
+                label={_t("form.steps.fromAndTo.name")}
+                placeholder="Your name"
+            />
+            <FormInput
+                name="sender.address"
+                label={_t("form.steps.fromAndTo.address")}
+                placeholder="Your address"
+            />
+            <FormInput
+                name="sender.zipCode"
+                label={_t("form.steps.fromAndTo.zipCode")}
+                placeholder="Your zip code"
+            />
+            <FormInput
+                name="sender.city"
+                label={_t("form.steps.fromAndTo.city")}
+                placeholder="Your city"
+            />
+            <FormInput
+                name="sender.country"
+                label={_t("form.steps.fromAndTo.country")}
+                placeholder="Your country"
+            />
+            <FormInput
+                name="sender.email"
+                label={_t("form.steps.fromAndTo.email")}
+                placeholder="Your email"
+            />
+            <FormInput
+                name="sender.phone"
+                label={_t("form.steps.fromAndTo.phone")}
+                placeholder="Your phone number"
+                type="text"
+                inputMode="tel"
+                pattern="[0-9]*"
+                aria-describedby="phone-format"
+                onInput={(e) => {
+                    const target = e.target as HTMLInputElement;
+                    target.value = target.value.replace(/[^\d\+\-\(\)\s]/g, "");
+                }}
+            />
 
-      {/* //? key = field.id fixes a bug where wrong field gets deleted  */}
-      {fields?.map((field, index) => (
-        <FormCustomInput
-          key={field.id}
-          index={index}
-          location={CUSTOM_INPUT_NAME}
-          removeField={removeCustomInput}
-        />
-      ))}
+            {/* //? key = field.id fixes a bug where wrong field gets deleted  */}
+            {fields?.map((field, index) => (
+                <FormCustomInput
+                    key={field.id}
+                    index={index}
+                    location={CUSTOM_INPUT_NAME}
+                    removeField={removeCustomInput}
+                />
+            ))}
 
-      <BaseButton
-        tooltipLabel="Add custom input to sender"
-        size="sm"
-        variant="link"
-        className="w-fit"
-        onClick={addNewCustomInput}
-      >
-        <Plus />
-        {_t("form.steps.fromAndTo.addCustomInput")}
-      </BaseButton>
-    </section>
-  );
+            <BaseButton
+                tooltipLabel="Add custom input to sender"
+                size="sm"
+                variant="link"
+                className="w-fit"
+                onClick={addNewCustomInput}
+            >
+                <Plus />
+                {_t("form.steps.fromAndTo.addCustomInput")}
+            </BaseButton>
+        </section>
+    );
 };
 
 export default BillFromSection;
diff --git a/app/components/invoice/form/sections/BillToSection.tsx b/app/components/invoice/form/sections/BillToSection.tsx
@@ -79,10 +79,12 @@ const BillToSection = () => {
                 label={_t("form.steps.fromAndTo.phone")}
                 placeholder="Receiver phone number"
                 type="text"
-                inputMode="numeric"
+                inputMode="tel"
+                pattern="[0-9]*"
+                aria-describedby="phone-format"
                 onInput={(e) => {
-                const target = e.target as HTMLInputElement;
-                target.value = target.value.replace(/\D/g, "");
+                    const target = e.target as HTMLInputElement;
+                    target.value = target.value.replace(/[^\d\+\-\(\)\s]/g, "");
                 }}
             />