@bloom-housing/ui-components 4.2.1-alpha.0 → 4.2.1-alpha.1

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.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.2.1-alpha.0...@bloom-housing/ui-components@4.2.1-alpha.1) (2022-04-07)
+
+**Note:** Version bump only for package @bloom-housing/ui-components
+
+
+
+
+
 ## [4.2.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@4.1.3-alpha.5...@bloom-housing/ui-components@4.2.1-alpha.0) (2022-04-06)
 
 

package/index.ts

@@ -118,6 +118,7 @@ export * from "./src/page_components/listing/listing_sidebar/Waitlist"
 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/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.1-alpha.0",
+  "version": "4.2.1-alpha.1",
   "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.2.1-alpha.0",
+    "@bloom-housing/backend-core": "^4.2.1-alpha.1",
     "@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": "fbf9158cbeafed4cedaf923b0881ae3863eff307"
+  "gitHead": "a6f7d7cd4b295500aff5be357fd77c360e13af28"
 }

package/src/authentication/AuthContext.ts

@@ -29,6 +29,7 @@ import {
   useEffect,
   useMemo,
   useReducer,
+  useCallback,
 } from "react"
 import qs from "qs"
 import axiosStatic from "axios"
@@ -51,6 +52,7 @@ type ContextProps = {
   reservedCommunityTypeService: ReservedCommunityTypesService
   unitPriorityService: UnitAccessibilityPriorityTypesService
   unitTypesService: UnitTypesService
+  loadProfile: (redirect?: string) => void
   login: (
     email: string,
     password: string,
@@ -99,7 +101,7 @@ const saveToken = createAction("SAVE_TOKEN")<{
   accessToken: string
   dispatch: DispatchType
 }>()
-const saveProfile = createAction("SAVE_PROFILE")<User>()
+const saveProfile = createAction("SAVE_PROFILE")<User | null>()
 const startLoading = createAction("START_LOADING")()
 const stopLoading = createAction("STOP_LOADING")()
 const signOut = createAction("SIGN_OUT")()
@@ -218,23 +220,30 @@ export const AuthProvider: FunctionComponent = ({ children }) => {
     }
   }, [apiUrl, storageType])
 
+  const loadProfile = useCallback(
+    async (redirect?: string) => {
+      try {
+        const profile = await userService?.userControllerProfile()
+        if (profile) {
+          dispatch(saveProfile(profile))
+        }
+      } finally {
+        dispatch(stopLoading())
+
+        if (redirect) {
+          router.push(redirect)
+        }
+      }
+    },
+    [userService, router]
+  )
+
   // Load our profile as soon as we have an access token available
   useEffect(() => {
     if (!state.profile && state.accessToken && !state.loading) {
-      const loadProfile = async () => {
-        dispatch(startLoading())
-        try {
-          const profile = await userService?.userControllerProfile()
-          if (profile) {
-            dispatch(saveProfile(profile))
-          }
-        } finally {
-          dispatch(stopLoading())
-        }
-      }
       void loadProfile()
     }
-  }, [state.profile, state.accessToken, apiUrl, userService, state.loading])
+  }, [state.profile, state.accessToken, apiUrl, userService, state.loading, loadProfile])
 
   const contextValues: ContextProps = {
     amiChartsService: new AmiChartsService(),
@@ -254,6 +263,7 @@ export const AuthProvider: FunctionComponent = ({ children }) => {
     accessToken: state.accessToken,
     initialStateLoaded: state.initialStateLoaded,
     profile: state.profile,
+    loadProfile,
     login: async (
       email,
       password,

package/src/authentication/RequireLogin.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent, useContext, useEffect } from "react"
+import React, { FunctionComponent, useContext, useEffect, useState } from "react"
 import { clearSiteAlertMessage, setSiteAlertMessage } from "../notifications/SiteAlert"
 import { NavigationContext } from "../config/NavigationContext"
 import { AuthContext } from "./AuthContext"
@@ -12,6 +12,7 @@ type XOR<T, U> = T | U extends Record<string, unknown>
 type RequireLoginProps = {
   signInPath: string
   signInMessage: string
+  termsPath?: string // partners portal required accepted terms after sign-in
 } & XOR<{ requireForRoutes?: string[] }, { skipForRoutes: string[] }>
 
 /**
@@ -24,10 +25,12 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
   children,
   signInPath,
   signInMessage,
+  termsPath,
   ...rest
 }) => {
   const { router } = useContext(NavigationContext)
   const { profile, initialStateLoaded } = useContext(AuthContext)
+  const [hasTerms, setHasTerms] = useState(false)
 
   // Parse just the pathname portion of the signInPath (in case we want to pass URL params)
   const [signInPathname] = signInPath.split("?")
@@ -44,6 +47,12 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
       ? !rest.skipForRoutes.some((path) => new RegExp(path).exec(router.pathname))
       : true)
 
+  useEffect(() => {
+    if (profile?.jurisdictions?.some((jurisdiction) => jurisdiction.partnerTerms)) {
+      setHasTerms(true)
+    }
+  }, [profile])
+
   useEffect(() => {
     if (loginRequiredForPath && initialStateLoaded && !profile) {
       setSiteAlertMessage(signInMessage, "notice")
@@ -51,9 +60,25 @@ const RequireLogin: FunctionComponent<RequireLoginProps> = ({
     } else {
       clearSiteAlertMessage("notice")
     }
-  }, [loginRequiredForPath, initialStateLoaded, profile, router, signInPath, signInMessage])
 
-  if (loginRequiredForPath && !profile) {
+    if (termsPath && profile && !profile?.agreedToTermsOfService && hasTerms) {
+      void router.push(termsPath)
+    }
+  }, [
+    loginRequiredForPath,
+    initialStateLoaded,
+    profile,
+    router,
+    signInPath,
+    signInMessage,
+    termsPath,
+    hasTerms,
+  ])
+
+  if (
+    loginRequiredForPath &&
+    (!profile || (hasTerms && termsPath && !profile.agreedToTermsOfService))
+  ) {
     return null
   }
 

package/src/locales/general.json

@@ -499,6 +499,10 @@
   "authentication.timeout.action": "Stay logged in",
   "authentication.timeout.signOutMessage": "We care about your security. We logged you out due to inactivity. Please sign in to continue.",
   "authentication.timeout.text": "To protect your identity, your session will expire in one minute due to inactivity. You will lose any unsaved information and be logged out if you choose not to respond.",
+  "authentication.terms.termsOfService": "Terms of Service",
+  "authentication.terms.reviewToc": "Review Terms of Service",
+  "authentication.terms.youMustAcceptToc": "To continue you must accept the Terms of Service",
+  "authentication.terms.acceptToc": "I accept the Terms of Service",
   "config.routePrefix": "",
   "errors.agreeError": "You must agree to the terms in order to continue",
   "errors.alert.badRequest": "Looks like something went wrong. Please try again. \n\nContact your housing department if you're still experiencing issues.",
@@ -843,7 +847,7 @@
   "t.none": "None",
   "t.noneFound": "None found.",
   "t.occupancy": "Occupancy",
-  "t.ok": "OK",
+  "t.ok": "Ok",
   "t.or": "or",
   "t.people": "people",
   "t.perMonth": "per month",

package/src/overlays/Overlay.scss

@@ -50,9 +50,9 @@
 }
 
 .fixed-overlay__inner-slim {
-  width: 75vw;
+  width: 90vw;
 
   @screen md {
-    width: 50vw;
+    width: 75vw;
   }
 }

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

@@ -0,0 +1,94 @@
+import React, { useContext, useCallback, useMemo } from "react"
+import {
+  AuthContext,
+  AppearanceStyleType,
+  Button,
+  Field,
+  Form,
+  FormCard,
+  Icon,
+  MarkdownSection,
+  t,
+} from "@bloom-housing/ui-components"
+import Markdown from "markdown-to-jsx"
+import { useForm } from "react-hook-form"
+
+type FormTermsInValues = {
+  agree: boolean
+}
+
+const FormTerms = () => {
+  const { profile, userProfileService, loadProfile } = useContext(AuthContext)
+
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { handleSubmit, register, errors } = useForm<FormTermsInValues>()
+
+  const onSubmit = useCallback(async () => {
+    if (!profile) return
+
+    const jurisdictionIds =
+      profile?.jurisdictions.map((item) => ({
+        id: item.id,
+      })) || []
+
+    await userProfileService?.update({
+      body: { ...profile, jurisdictions: jurisdictionIds, agreedToTermsOfService: true },
+    })
+
+    loadProfile?.("/")
+  }, [loadProfile, profile, userProfileService])
+
+  const jurisdictionTerms = useMemo(() => {
+    const jurisdiction = profile?.jurisdictions.find((jurisdiction) => jurisdiction.partnerTerms)
+    return jurisdiction ? jurisdiction.partnerTerms : ""
+  }, [profile])
+
+  return (
+    <Form id="terms" className="mt-10" onSubmit={handleSubmit(onSubmit)}>
+      <FormCard>
+        <div className="form-card__lead text-center">
+          <Icon size="2xl" symbol="settings" />
+          <h2 className="form-card__title">{t(`authentication.terms.reviewToc`)}</h2>
+          <p className="field-note mt-4 text-center">
+            {t(`authentication.terms.youMustAcceptToc`)}
+          </p>
+
+          <div className="overflow-y-auto max-h-96 mt-5 pr-4 text-left">
+            {jurisdictionTerms && (
+              <MarkdownSection padding={false} fullwidth={true}>
+                <Markdown options={{ disableParsingRawHTML: false }}>{jurisdictionTerms}</Markdown>
+              </MarkdownSection>
+            )}
+          </div>
+        </div>
+
+        <div className="form-card__group pt-0">
+          <Field
+            id="agree"
+            name="agree"
+            type="checkbox"
+            className="flex flex-col justify-center items-center"
+            label={t(`authentication.terms.acceptToc`)}
+            register={register}
+            validation={{ required: true }}
+            error={!!errors.agree}
+            errorMessage={t("errors.agreeError")}
+            dataTestId="agree"
+          />
+        </div>
+
+        <div className="border-b" />
+
+        <div className="form-card__pager">
+          <div className="form-card__pager-row primary">
+            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
+              {t("t.submit")}
+            </Button>
+          </div>
+        </div>
+      </FormCard>
+    </Form>
+  )
+}
+
+export { FormTerms as default, FormTerms }

package/src/sections/MarkdownSection.scss

@@ -1,10 +1,13 @@
 .markdown-section {
-  @apply px-5;
   @apply my-6;
 
   @screen md {
     @apply my-12;
   }
+
+  &--with-padding {
+    @apply px-5;
+  }
 }
 
 .markdown-section__inner {

package/src/sections/MarkdownSection.tsx

@@ -3,16 +3,20 @@ import "./MarkdownSection.scss"
 
 export interface MarkdownSectionProps {
   fullwidth?: boolean
+  padding?: boolean
   children: React.ReactNode
 }
 
-export const MarkdownSection = (props: MarkdownSectionProps) => {
-  const contentWidth = props.fullwidth ? "markdown" : "markdown max-w-2xl"
+export const MarkdownSection = ({ fullwidth, padding = true, children }: MarkdownSectionProps) => {
+  const contentWidth = fullwidth ? "markdown" : "markdown max-w-2xl"
+  const sectionClassNames = ["markdown-section"]
+
+  if (padding) sectionClassNames.push("markdown-section--with-padding")
 
   return (
-    <div className="markdown-section">
+    <div className={sectionClassNames.join(" ")}>
       <div className="markdown-section__inner">
-        <article className={contentWidth}>{props.children}</article>
+        <article className={contentWidth}>{children}</article>
       </div>
     </div>
   )