@bloom-housing/ui-components 4.2.2-alpha.8 → 4.2.2-alpha.9

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.2.2-alpha.9](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.8...@bloom-housing/ui-components@4.2.2-alpha.9) (2022-04-20)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.2.2-alpha.8](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.2-alpha.7...@bloom-housing/ui-components@4.2.2-alpha.8) (2022-04-20)
 
 

package/index.ts

@@ -120,6 +120,7 @@ export * from "./src/page_components/listing/listing_sidebar/WhatToExpect"
 export * from "./src/page_components/listing/listing_sidebar/events/DownloadLotteryResults"
 export * from "./src/page_components/listing/listing_sidebar/events/EventSection"
 export * from "./src/page_components/sign-in/FormTerms"
+export * from "./src/page_components/sign-in/ResendConfirmationModal"
 export * from "./src/page_components/sign-in/FormSignIn"
 export * from "./src/page_components/sign-in/FormSignInMFAType"
 export * from "./src/page_components/sign-in/FormSignInMFACode"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "4.2.2-alpha.8",
+  "version": "4.2.2-alpha.9",
   "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",
@@ -100,5 +100,5 @@
     "tailwindcss": "2.2.10",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "429d0871f219e82003b424e22767ca336236046b"
+  "gitHead": "587e34d8810b8271e88bb855e694a443c13d9092"
 }

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

@@ -43,6 +43,7 @@ export type FormSignInControl = {
   errors: UseFormMethods["errors"]
   handleSubmit: UseFormMethods["handleSubmit"]
   register: UseFormMethods["register"]
+  watch: UseFormMethods["watch"]
 }
 
 export type FormSignInValues = {

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

@@ -0,0 +1,108 @@
+import {
+  AppearanceStyleType,
+  Button,
+  Modal,
+  t,
+  Form,
+  Field,
+  emailRegex,
+  NavigationContext,
+} from "@bloom-housing/ui-components"
+import React, { useEffect, useMemo, useContext } from "react"
+import { useForm } from "react-hook-form"
+
+export type ResendConfirmationModalProps = {
+  isOpen: boolean
+  initialEmailValue: string
+  onClose: () => void
+  onSubmit: (email: string) => void
+  loading: boolean
+}
+
+export type ResendConfirmationModalForm = {
+  onSubmit: (email: string) => void
+}
+
+const ResendConfirmationModal = ({
+  isOpen,
+  initialEmailValue,
+  loading,
+  onClose,
+  onSubmit,
+}: ResendConfirmationModalProps) => {
+  const { router } = useContext(NavigationContext)
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { register, errors, reset, getValues, trigger } = useForm({
+    defaultValues: useMemo(() => {
+      return {
+        emailResend: initialEmailValue,
+      }
+    }, [initialEmailValue]),
+  })
+
+  useEffect(() => {
+    reset({
+      emailResend: initialEmailValue,
+    })
+  }, [initialEmailValue, reset])
+
+  const onFormSubmit = async () => {
+    const isValid = await trigger()
+    if (!isValid) return
+
+    const { emailResend } = getValues()
+    onSubmit(emailResend)
+  }
+
+  return (
+    <Modal
+      open={isOpen}
+      title={t("authentication.signIn.yourAccountIsNotConfirmed")}
+      ariaDescription={t("authentication.createAccount.linkExpired")}
+      onClose={() => {
+        onClose()
+        window.scrollTo(0, 0)
+      }}
+      actions={[
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.primary}
+          onClick={() => onFormSubmit()}
+          loading={loading}
+        >
+          {t("authentication.createAccount.resendTheEmail")}
+        </Button>,
+        <Button
+          type="button"
+          styleType={AppearanceStyleType.alert}
+          onClick={() => {
+            onClose()
+            window.scrollTo(0, 0)
+          }}
+        >
+          {t("t.cancel")}
+        </Button>,
+      ]}
+    >
+      <>
+        <Form>
+          <Field
+            caps={true}
+            type="email"
+            name="emailResend"
+            label={t("authentication.createAccount.resendAnEmailTo")}
+            placeholder="example@web.com"
+            validation={{ required: true, pattern: emailRegex }}
+            error={!!errors.emailResend}
+            errorMessage={t("authentication.signIn.loginError")}
+            register={register}
+          />
+        </Form>
+
+        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
+      </>
+    </Modal>
+  )
+}
+
+export { ResendConfirmationModal as default, ResendConfirmationModal }