@bloom-housing/ui-components 4.1.2-alpha.2 → 4.1.2-alpha.3

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.1.2-alpha.3](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.2-alpha.2...@bloom-housing/ui-components@4.1.2-alpha.3) (2022-03-29)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.1.2-alpha.2](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.2-alpha.1...@bloom-housing/ui-components@4.1.2-alpha.2) (2022-03-29)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.1.2-alpha.2",
+  "version": "4.1.2-alpha.3",
   "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",
@@ -69,7 +69,7 @@
     "webpack": "^4.44.2"
   },
   "dependencies": {
-    "@bloom-housing/backend-core": "^4.1.1-alpha.2",
+    "@bloom-housing/backend-core": "^4.1.1-alpha.3",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "@types/body-scroll-lock": "^2.6.1",
     "@types/jwt-decode": "^2.2.1",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "8e3aad89d715c1733ae9a0ee7e3c744a8dff1cc8"
+  "gitHead": "1544f7dedf6b0cb06b9ea78f34282e8537c07f8c"
 }

package/src/helpers/useMutate.ts

@@ -1,12 +1,20 @@
 import { useState } from "react"
 
+export type UseMutateOptions = {
+  onSuccess?: () => void
+  onError?: (err: any) => void
+}
+
 const useMutate = <UseMutateResponse>() => {
   const [data, setData] = useState<UseMutateResponse | undefined>(undefined)
   const [isSuccess, setSuccess] = useState(false)
   const [isLoading, setLoading] = useState(false)
   const [isError, setError] = useState<unknown>(null)
 
-  const mutate = async (mutateFn: (args?: unknown) => Promise<UseMutateResponse>) => {
+  const mutate = async (
+    mutateFn: (args?: unknown) => Promise<UseMutateResponse>,
+    options?: UseMutateOptions
+  ) => {
     let response: UseMutateResponse | undefined = undefined
 
     try {
@@ -14,11 +22,13 @@ const useMutate = <UseMutateResponse>() => {
       response = await mutateFn()
       setData(response)
       setSuccess(true)
+      options?.onSuccess?.()
       setLoading(false)
     } catch (err) {
       setSuccess(false)
       setLoading(false)
       setError(err)
+      options?.onError?.(err)
     }
 
     return response

package/src/locales/general.json

@@ -980,7 +980,8 @@
       "dontHaveAccount": "Don't have an account",
       "enterLoginPassword": "Please enter your login password",
       "enterLoginEmail": "Please enter your login email",
-      "changeYourPassword": "You can change your password"
+      "changeYourPassword": "You can change your password",
+      "yourAccountIsNotConfirmed": "Your account is not confirmed"
     },
     "createAccount": {
       "accountConfirmed": "Your account was successfully confirmed.",

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

@@ -13,6 +13,7 @@ import {
   ErrorMessage,
   emailRegex,
 } from "@bloom-housing/ui-components"
+import { NetworkErrorReset, NetworkStatusContent } from "@bloom-housing/shared-helpers"
 import { NavigationContext } from "../../config/NavigationContext"
 import type { UseFormMethods } from "react-hook-form"
 
@@ -22,15 +23,8 @@ export type FormForgotPasswordProps = {
   networkError: FormForgotPasswordNetworkError
 }
 
-export type NetworkErrorReset = () => void
-
-export type NetworkErrorValue = {
-  title: string
-  content: string
-} | null
-
 export type FormForgotPasswordNetworkError = {
-  error: NetworkErrorValue
+  error: NetworkStatusContent
   reset: NetworkErrorReset
 }
 
@@ -75,7 +69,7 @@ const FormForgotPassword = ({
           </AlertBox>
 
           <AlertNotice title="" type="alert" inverted>
-            {networkError.error.content}
+            {networkError.error.description}
           </AlertNotice>
         </ErrorMessage>
       )}

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

@@ -12,22 +12,17 @@ import {
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
 import { NavigationContext } from "../../config/NavigationContext"
-import type { NetworkErrorReset, NetworkErrorValue } from "../forgot-password/FormForgotPassword"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type NetworkErrorDetermineError = (status: number, error: Error) => void
 
 export type FormSignInProps = {
   control: FormSignInControl
   onSubmit: (data: FormSignInValues) => void
-  networkError: FormSignInNetworkError
+  networkStatus: NetworkStatus
   showRegisterBtn?: boolean
 }
 
-export type FormSignInNetworkError = {
-  error: NetworkErrorValue
-  reset: NetworkErrorReset
-}
-
 export type FormSignInControl = {
   errors: UseFormMethods["errors"]
   handleSubmit: UseFormMethods["handleSubmit"]
@@ -41,7 +36,7 @@ export type FormSignInValues = {
 
 const FormSignIn = ({
   onSubmit,
-  networkError,
+  networkStatus,
   showRegisterBtn,
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
@@ -58,7 +53,7 @@ const FormSignIn = ({
       </div>
       <FormSignInErrorBox
         errors={errors}
-        networkError={networkError}
+        networkStatus={networkStatus}
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">

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

@@ -11,12 +11,12 @@ import {
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type FormSignInAddPhoneProps = {
   control: FormSignInAddPhoneControl
   onSubmit: (data: FormSignInAddPhoneValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
   phoneNumber: string
 }
 
@@ -49,7 +49,7 @@ const FormSignInAddPhone = ({
       </div>
       <FormSignInErrorBox
         errors={errors}
-        networkError={networkError}
+        networkStatus={networkError}
         errorMessageId={"add-phone"}
       />
 

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

@@ -1,11 +1,11 @@
 import React from "react"
 import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 
 export type FormSignInErrorBoxProps = {
   errors: FormSignInErrorBoxControl["errors"]
-  networkError: FormSignInNetworkError
+  networkStatus: NetworkStatus
   errorMessageId: string
 }
 
@@ -14,27 +14,39 @@ export type FormSignInErrorBoxControl = {
   control: UseFormMethods["control"]
 }
 
-const FormSignInErrorBox = ({ networkError, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
   return (
     <div className="border-b">
-      {Object.entries(errors).length > 0 && !networkError.error && (
+      {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
           {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
-      {!!networkError.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={`form-sign-in-${errorMessageId}-error`} error={!!networkError.error}>
-          <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
-            {networkError.error.title}
+      {networkStatus.content?.error && Object.entries(errors).length === 0 && (
+        <ErrorMessage id={`form-sign-in-${errorMessageId}-error`} error={!!networkStatus.content}>
+          <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
+            {networkStatus.content.title}
           </AlertBox>
 
           <AlertNotice title="" type="alert" inverted>
-            {networkError.error.content}
+            {networkStatus.content.description}
           </AlertNotice>
         </ErrorMessage>
       )}
 
+      {networkStatus.type === "success" && (
+        <>
+          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
+            {networkStatus.content?.title}
+          </AlertBox>
+
+          <AlertNotice title="" type="success" inverted>
+            {networkStatus.content?.description}
+          </AlertNotice>
+        </>
+      )}
+
       <SiteAlert type="notice" dismissable />
     </div>
   )

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

@@ -10,13 +10,14 @@ import {
   SiteAlert,
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
-import { FormSignInNetworkError, FormSignInControl } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
+import { FormSignInControl } from "./FormSignIn"
 import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
 
 export type FormSignInMFACodeProps = {
   control: FormSignInControl
   onSubmit: (data: FormSignInMFACodeValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
   mfaType: EnumRequestMfaCodeMfaType
   allowPhoneNumberEdit: boolean
   phoneNumber: string
@@ -68,7 +69,11 @@ const FormSignInMFACode = ({
             : t("nav.signInMFA.haveSentCodeToEmail")}
         </p>
       </div>
-      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-code"} />
+      <FormSignInErrorBox
+        errors={errors}
+        networkStatus={networkError}
+        errorMessageId={"mfa-code"}
+      />
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">

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

@@ -11,13 +11,13 @@ import {
   FormSignInErrorBox,
 } from "@bloom-housing/ui-components"
 import type { UseFormMethods } from "react-hook-form"
-import { FormSignInNetworkError } from "./FormSignIn"
+import { NetworkStatus } from "@bloom-housing/shared-helpers"
 import { EnumRequestMfaCodeMfaType } from "@bloom-housing/backend-core/types"
 
 export type FormSignInMFAProps = {
   control: FormSignInMFAControl
   onSubmit: (data: FormSignInMFAValues) => void
-  networkError: FormSignInNetworkError
+  networkError: NetworkStatus
 }
 
 export type FormSignInMFAControl = {
@@ -51,7 +51,11 @@ const FormSignInMFAType = ({
           {t("nav.signInMFA.verificationChoiceSecondaryTitle")}
         </p>
       </div>
-      <FormSignInErrorBox errors={errors} networkError={networkError} errorMessageId={"mfa-type"} />
+      <FormSignInErrorBox
+        errors={errors}
+        networkStatus={networkError}
+        errorMessageId={"mfa-type"}
+      />
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">