@bloom-housing/ui-components 7.0.6 → 7.0.8-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.8-alpha.0 (2022-12-14)
+
+
+### Bug Fixes
+
+* bloom main uic contents ([951d4c7](https://github.com/bloom-housing/ui-components/commit/951d4c78b8a7f82837b12b4983fd0b6e693a9b0d))
+* lerna setup ([1cedf21](https://github.com/bloom-housing/ui-components/commit/1cedf2143199d2d4616c338ed02256a416e9dd68))
+* updated paths + functional storybook ([d2448bc](https://github.com/bloom-housing/ui-components/commit/d2448bc6613d955460df44f50c4a461cba8f09d4))
+
+
+
+
+
+## [7.0.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.6...@bloom-housing/ui-components@7.0.7) (2022-12-08)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [7.0.6](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.5...@bloom-housing/ui-components@7.0.6) (2022-12-06)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/lerna.json

@@ -0,0 +1,15 @@
+{
+  "version": "independent",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore(release): publish"
+    },
+    "version": {
+      "conventionalCommits": true,
+      "message": "chore(release): version"
+    }
+  }
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.0.6",
+  "version": "7.0.8-alpha.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
-  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
+  "workspaces": {
+    "packages": [
+      "."
+    ]
+  },
+  "homepage": "https://github.com/bloom-housing/ui-components",
   "main": "index.js",
   "license": "Apache-2.0",
   "private": false,
@@ -17,7 +22,9 @@
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
     "prettier": "prettier --write \"**/*.tsx\"",
-    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
+    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts",
+    "version": "lerna version --no-commit-hooks --conventional-graduate --include-merged-tags --force-git-tag",
+    "publish":"lerna publish from-package --yes --include-merged-tags --no-verify-access"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -54,6 +61,7 @@
     "dotenv": "^8.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
+    "lerna": "6.1.0",
     "mockdate": "^3.0.2",
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
@@ -102,6 +110,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.5.2",
+    "react-hook-form": "7.40.0",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
@@ -112,5 +121,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "0694672c2e809e8e3f8e6034e67aba0dd55327c8"
+  "gitHead": "ef00e4db1a1bd4608525685ab81632ff4ba970cf"
 }

package/src/helpers/DateFormat.ts

@@ -0,0 +1,11 @@
+import { t } from "../..";
+import dayjs from "dayjs";
+
+function formatDateTime(date: Date, showTime?: boolean) {
+  return (
+    dayjs(date).format("MMMM D, YYYY") +
+    (showTime ? ` ${t("t.at")} ` + dayjs(date).format("h:mmA") : "")
+  );
+}
+
+export { formatDateTime as default, formatDateTime };

package/src/helpers/preferences.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { UseFormMethods } from "react-hook-form"
+import React from "react";
+import { UseFormMethods } from "react-hook-form";
 import {
   t,
   GridSection,
@@ -8,17 +8,17 @@ import {
   Field,
   Select,
   resolveObject,
-} from "@bloom-housing/ui-components"
+} from "../..";
 
 type FormAddressProps = {
-  subtitle: string
-  dataKey: string
-  enableMailCheckbox?: boolean
-  register: UseFormMethods["register"]
-  errors?: UseFormMethods["errors"]
-  required?: boolean
-  stateKeys: string[]
-}
+  subtitle: string;
+  dataKey: string;
+  enableMailCheckbox?: boolean;
+  register: UseFormMethods["register"];
+  errors?: UseFormMethods["errors"];
+  required?: boolean;
+  stateKeys: string[];
+};
 
 export const FormAddress = ({
   subtitle,
@@ -121,5 +121,5 @@ export const FormAddress = ({
         )}
       </GridSection>
     </>
-  )
-}
+  );
+};

package/src/locales/general.json

@@ -442,9 +442,9 @@
   "application.review.takeAMomentToReview": "Take a moment to review your information before submitting your application.",
   "application.review.terms.confirmCheckboxText": "I agree and understand that I cannot change anything after I submit.",
   "application.review.terms.textSubmissionDate": "This application must be submitted by %{applicationDueDate}.",
-  "application.review.terms.fcfs.text": "* Applicants are applying to currently vacant apartments on a first come, first serve basis.\n\n* Eligible applicants will be contacted on a first come first serve basis until vacancies are filled.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application will result in removal from the lottery.",
-  "application.review.terms.lottery.text": "* Applicants are applying to enter a lottery for currently vacant apartments.\n\n* Once the application period closes, eligible applicants will be placed in lottery rank order.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application will result in removal from the lottery.",
-  "application.review.terms.waitlist.text": "* Applicants are applying for an open waitlist and not a currently vacant apartment.\n\n* When vacancies become available, eligible applicants will be contacted by the property manager on a first come, first serve basis.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\n* You may be contacted while on the waitlist to confirm that you wish to remain on the waitlist.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application will result in removal from the lottery.",
+  "application.review.terms.fcfs.text": "* Applicants are applying to currently vacant apartments on a first come, first serve basis.\n\n* Eligible applicants will be contacted on a first come first serve basis until vacancies are filled.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.",
+  "application.review.terms.lottery.text": "* Applicants are applying to enter a lottery for currently vacant apartments.\n\n* Once the application period closes, eligible applicants will be placed in lottery rank order.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.",
+  "application.review.terms.waitlist.text": "* Applicants are applying for an open waitlist and not a currently vacant apartment.\n\n* When vacancies become available, eligible applicants will be contacted by the property manager on a first come, first serve basis.\n\n* If you are contacted for an interview, you will be asked to fill out a more detailed application and provide supporting documents.\n\n* All of the information that you have provided will be verified and your eligibility confirmed.\n\n* Your application may be removed if you have made any fraudulent statements.\n\n* For properties with housing preferences, if we cannot verify a housing preference that you have claimed, you will not receive the preference but will not be otherwise penalized.\n\n* You may be contacted while on the waitlist to confirm that you wish to remain on the waitlist.\n\nFor more information, please contact the housing developer or property manager posted in the listing.\n\nCompleting this application does not entitle you to housing or indicate you are eligible for housing. All applicants will be screened as outlined in the property's Resident Selection Criteria.\n\nYou cannot change your online application after you submit.\n\nI declare that the foregoing is true and accurate, and acknowledge that any misstatement fraudulently or negligently made on this application may result in removal from the application process.",
   "application.review.terms.title": "Terms",
   "application.review.voucherOrSubsidy": "Housing Voucher or Rental Subsidy",
   "application.start.whatToExpect.fcfs.steps": "1. First we'll ask about you and the people you plan to live with.\n2. Then, we'll ask about your income.\n3. Finally, we'll see if you qualify for any affordable housing lottery preferences, if applicable.",

package/src/page_components/NavigationHeader.tsx

@@ -1,30 +1,30 @@
-import React, { useMemo, useContext } from "react"
-import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "@bloom-housing/ui-components"
-import { NavigationContext } from "../config/NavigationContext"
-import "./NavigationHeader.scss"
+import React, { useMemo, useContext } from "react";
+import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../..";
+import { NavigationContext } from "../config/NavigationContext";
+import "./NavigationHeader.scss";
 
 type NavigationHeaderProps = {
-  className?: string
-  title: React.ReactNode
-  listingId?: string
-  tabs?: NavigationHeaderTabs
-  breadcrumbs?: React.ReactNode
-  children?: React.ReactChild
-}
+  className?: string;
+  title: React.ReactNode;
+  listingId?: string;
+  tabs?: NavigationHeaderTabs;
+  breadcrumbs?: React.ReactNode;
+  children?: React.ReactChild;
+};
 
 type NavigationHeaderTabs = {
-  show?: boolean
-  flagsQty?: number
-  listingLabel: string
-  applicationsLabel: string
-}
+  show?: boolean;
+  flagsQty?: number;
+  listingLabel: string;
+  applicationsLabel: string;
+};
 
 type NavigationHeaderTabsElement = {
-  label: string
-  path: string
-  activePaths: string[]
-  content: React.ReactNode | undefined
-}
+  label: string;
+  path: string;
+  activePaths: string[];
+  content: React.ReactNode | undefined;
+};
 
 const NavigationHeader = ({
   className,
@@ -34,8 +34,8 @@ const NavigationHeader = ({
   children,
   breadcrumbs,
 }: NavigationHeaderProps) => {
-  const navigation = useContext(NavigationContext)
-  const currentPath = navigation.router.asPath
+  const navigation = useContext(NavigationContext);
+  const currentPath = navigation.router.asPath;
 
   const tabNavElements = useMemo(() => {
     const elements: NavigationHeaderTabsElement[] = [
@@ -57,10 +57,10 @@ const NavigationHeader = ({
         ],
         content: undefined,
       },
-    ]
+    ];
 
-    return elements
-  }, [tabs, listingId])
+    return elements;
+  }, [tabs, listingId]);
 
   const tabNavItems = useMemo(() => {
     return (
@@ -77,8 +77,8 @@ const NavigationHeader = ({
           </TabNavItem>
         ))}
       </TabNav>
-    )
-  }, [currentPath, tabNavElements])
+    );
+  }, [currentPath, tabNavElements]);
 
   return (
     <PageHeader
@@ -89,7 +89,7 @@ const NavigationHeader = ({
     >
       {children}
     </PageHeader>
-  )
-}
+  );
+};
 
-export { NavigationHeader as default, NavigationHeader }
+export { NavigationHeader as default, NavigationHeader };

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -12,31 +12,31 @@ import {
   AlertNotice,
   ErrorMessage,
   emailRegex,
-} from "@bloom-housing/ui-components"
-import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn"
-import { NavigationContext } from "../../config/NavigationContext"
-import type { UseFormMethods } from "react-hook-form"
+} from "../../..";
+import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn";
+import { NavigationContext } from "../../config/NavigationContext";
+import type { UseFormMethods } from "react-hook-form";
 
 export type FormForgotPasswordProps = {
-  control: FormForgotPasswordControl
-  onSubmit: (data: FormForgotPasswordValues) => void
-  networkError: FormForgotPasswordNetworkError
-}
+  control: FormForgotPasswordControl;
+  onSubmit: (data: FormForgotPasswordValues) => void;
+  networkError: FormForgotPasswordNetworkError;
+};
 
 export type FormForgotPasswordNetworkError = {
-  error: NetworkStatusContent
-  reset: NetworkErrorReset
-}
+  error: NetworkStatusContent;
+  reset: NetworkErrorReset;
+};
 
 export type FormForgotPasswordControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+};
 
 export type FormForgotPasswordValues = {
-  email: string
-}
+  email: string;
+};
 
 const FormForgotPassword = ({
   onSubmit,
@@ -44,26 +44,33 @@ const FormForgotPassword = ({
   control: { errors, register, handleSubmit },
 }: FormForgotPasswordProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
-  const { router } = useContext(NavigationContext)
+  const { router } = useContext(NavigationContext);
 
   return (
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
+        <h1 className="form-card__title">
+          {t("authentication.forgotPassword.sendEmail")}
+        </h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          {errors.authentication
+            ? errors.authentication.message
+            : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
       {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
+        <ErrorMessage
+          id={"forgotpasswordemail-error"}
+          error={!!networkError.error}
+        >
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -77,14 +84,20 @@ const FormForgotPassword = ({
       <SiteAlert type="notice" dismissable />
 
       <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="email"
             label={t("t.email")}
             validation={{ required: true, pattern: emailRegex }}
             error={errors.email}
-            errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
+            errorMessage={
+              errors.email ? t("authentication.signIn.loginError") : undefined
+            }
             register={register}
             onChange={() => networkError.reset()}
           />
@@ -103,7 +116,7 @@ const FormForgotPassword = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormForgotPassword as default, FormForgotPassword }
+export { FormForgotPassword as default, FormForgotPassword };

package/src/page_components/sign-in/FormSignIn.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,47 +9,47 @@ import {
   LinkButton,
   t,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NavigationContext } from "../../config/NavigationContext"
-import { AlertTypes } from "../../notifications/alertTypes"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NavigationContext } from "../../config/NavigationContext";
+import { AlertTypes } from "../../notifications/alertTypes";
 
-export type NetworkErrorDetermineError = (status: number, error: Error) => void
+export type NetworkErrorDetermineError = (status: number, error: Error) => void;
 
-export type NetworkStatusType = AlertTypes
+export type NetworkStatusType = AlertTypes;
 
-export type NetworkErrorReset = () => void
+export type NetworkErrorReset = () => void;
 
 export type NetworkStatusContent = {
-  title: string
-  description: string
-  error?: boolean
-} | null
+  title: string;
+  description: string;
+  error?: boolean;
+} | null;
 
 export type NetworkStatus = {
-  content: NetworkStatusContent
-  type?: NetworkStatusType
-  reset: NetworkErrorReset
-}
+  content: NetworkStatusContent;
+  type?: NetworkStatusType;
+  reset: NetworkErrorReset;
+};
 
 export type FormSignInProps = {
-  control: FormSignInControl
-  onSubmit: (data: FormSignInValues) => void
-  networkStatus: NetworkStatus
-  showRegisterBtn?: boolean
-}
+  control: FormSignInControl;
+  onSubmit: (data: FormSignInValues) => void;
+  networkStatus: NetworkStatus;
+  showRegisterBtn?: boolean;
+};
 
 export type FormSignInControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-  watch: UseFormMethods["watch"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+  watch: UseFormMethods["watch"];
+};
 
 export type FormSignInValues = {
-  email: string
-  password: string
-}
+  email: string;
+  password: string;
+};
 
 const FormSignIn = ({
   onSubmit,
@@ -58,9 +58,9 @@ const FormSignIn = ({
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { LinkComponent } = useContext(NavigationContext)
+    window.scrollTo(0, 0);
+  };
+  const { LinkComponent } = useContext(NavigationContext);
 
   return (
     <FormCard>
@@ -74,7 +74,11 @@ const FormSignIn = ({
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="email"
@@ -105,7 +109,10 @@ const FormSignIn = ({
           />
 
           <div className="text-center mt-6">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="sign-in-button">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="sign-in-button"
+            >
               {t("nav.signIn")}
             </Button>
           </div>
@@ -113,13 +120,17 @@ const FormSignIn = ({
       </div>
       {showRegisterBtn && (
         <div className="form-card__group text-center border-t">
-          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
+          <h2 className="mb-6">
+            {t("authentication.createAccount.noAccount")}
+          </h2>
 
-          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
+          <LinkButton href="/create-account">
+            {t("account.createAccount")}
+          </LinkButton>
         </div>
       )}
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignIn as default, FormSignIn }
+export { FormSignIn as default, FormSignIn };

package/src/page_components/sign-in/FormSignInAddPhone.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,26 +9,26 @@ import {
   SiteAlert,
   PhoneField,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInAddPhoneProps = {
-  control: FormSignInAddPhoneControl
-  onSubmit: (data: FormSignInAddPhoneValues) => void
-  networkError: NetworkStatus
-  phoneNumber: string
-}
+  control: FormSignInAddPhoneControl;
+  onSubmit: (data: FormSignInAddPhoneValues) => void;
+  networkError: NetworkStatus;
+  phoneNumber: string;
+};
 
 export type FormSignInAddPhoneControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  control: UseFormMethods["control"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  control: UseFormMethods["control"];
+};
 
 export type FormSignInAddPhoneValues = {
-  phoneNumber: string
-}
+  phoneNumber: string;
+};
 
 const FormSignInAddPhone = ({
   onSubmit,
@@ -37,15 +37,19 @@ const FormSignInAddPhone = ({
   phoneNumber,
 }: FormSignInAddPhoneProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { errors, handleSubmit } = control
+    window.scrollTo(0, 0);
+  };
+  const { errors, handleSubmit } = control;
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.addNumber")}</h2>
-        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.addNumber")}
+        </h2>
+        <p className="form-card__sub-title">
+          {t("nav.signInMFA.addNumberSecondaryTitle")}
+        </p>
       </div>
       <FormSignInErrorBox
         errors={errors}
@@ -55,7 +59,11 @@ const FormSignInAddPhone = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <PhoneField
             label={t("nav.signInMFA.phoneNumber")}
             caps={true}
@@ -81,7 +89,7 @@ const FormSignInAddPhone = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInAddPhone as default, FormSignInAddPhone }
+export { FormSignInAddPhone as default, FormSignInAddPhone };