fix(settings): Prevent multiple SMS sends on form submission

Because:

* Double clicking on the submit button sends two SMS
* Form submssion not disabled during submission

This commit:

* Disables form submission while initial handling in progress

Closes #FXA-11235

packages/fxa-settings/src/components/FormChoice/index.tsx

@@ -18,6 +18,7 @@ export type FormChoiceProps = {
   alignImage?: 'start' | 'end';
   formChoices: FormChoiceOption[];
   onSubmit: (data: FormChoiceData) => void;
+  isSubmitting: boolean;
 };
 
 export const CHOICES = {
@@ -34,6 +35,7 @@ const FormChoice = ({
   alignImage = 'start',
   formChoices,
   onSubmit,
+  isSubmitting,
 }: FormChoiceProps) => {
   const { register, handleSubmit, watch } = useForm<FormChoiceData>();
   const selectedOption = watch('choice');
@@ -77,7 +79,7 @@ const FormChoice = ({
         <button
           className="cta-primary cta-xl"
           type="submit"
-          disabled={!selectedOption}
+          disabled={!selectedOption || isSubmitting}
         >
           Continue
         </button>

packages/fxa-settings/src/components/FormChoice/mocks.tsx

@@ -10,6 +10,7 @@ import {
 } from '../images';
 
 export const commonFormChoiceProps = {
+  isSubmitting: false,
   onSubmit: (data: any) => console.log('Submitted with choice:', data),
   legendEl: (
     <legend>

packages/fxa-settings/src/components/FormPhoneNumber/index.tsx

@@ -32,6 +32,7 @@ const FormPhoneNumber = ({
   gleanDataAttrs,
 }: FormPhoneNumberProps) => {
   const [hasErrors, setHasErrors] = React.useState(false);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
   const { control, formState, handleSubmit, register, setValue } =
     useForm<InputPhoneNumberData>({
       mode: 'onChange',
@@ -62,11 +63,13 @@ const FormPhoneNumber = ({
     countryCode,
   }: InputPhoneNumberData) => {
     setHasErrors(false);
+    setIsSubmitting(true);
     const formattedPhoneNumber = formatPhoneNumber({
       phoneNumber,
       countryCode,
     });
     const result = await submitPhoneNumber(formattedPhoneNumber);
+    setIsSubmitting(false);
     if (result !== undefined && result.hasErrors) {
       setHasErrors(true);
       const phoneInput = document.querySelector(
@@ -111,6 +114,7 @@ const FormPhoneNumber = ({
           type="submit"
           className="cta-primary cta-xl"
           disabled={
+            isSubmitting ||
             !formState.isDirty ||
             phoneNumberInput === undefined ||
             phoneNumberInput.replace(/\D/g, '').length !== 10

packages/fxa-settings/src/pages/Signin/SigninRecoveryChoice/index.tsx

@@ -45,6 +45,7 @@ const SigninRecoveryChoice = ({
   const [errorBannerMessage, setErrorBannerMessage] = React.useState('');
   const [errorBannerDescription, setErrorBannerDescription] =
     React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const ftlMsgResolver = useFtlMsgResolver();
   const navigateWithQuery = useNavigateWithQuery();
@@ -75,12 +76,14 @@ const SigninRecoveryChoice = ({
   const onSubmit = async ({ choice }: FormChoiceData) => {
     setErrorBannerMessage('');
     setErrorBannerDescription('');
+    setIsSubmitting(true);
     GleanMetrics.login.backupChoiceSubmit({ event: { reason: choice } });
     switch (choice) {
       case CHOICES.phone:
         const error = await handlePhoneChoice();
         if (error) {
           handlePhoneChoiceError(error);
+          setIsSubmitting(false);
           return;
         }
         navigateWithQuery('/signin_recovery_phone', {
@@ -141,7 +144,7 @@ const SigninRecoveryChoice = ({
         />
       )}
 
-      <FormChoice {...{ legendEl, onSubmit, formChoices }} />
+      <FormChoice {...{ legendEl, onSubmit, formChoices, isSubmitting }} />
     </AppLayout>
   );
 };