From d78f2f5457407070a55f735cc56b1177880c552d Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 3 May 2024 17:38:53 -0400 Subject: [PATCH 1/5] feat(config-types): Modify terms of storage config. --- example-config.yml | 7 +++---- lib/components/user/terms-of-use-pane.tsx | 3 +-- lib/util/config-types.ts | 9 +++++---- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/example-config.yml b/example-config.yml index b04b7d8cf..efcbc1b51 100644 --- a/example-config.yml +++ b/example-config.yml @@ -70,10 +70,9 @@ api: persistence: enabled: true strategy: localStorage - ### This variable hides the "more info" link when accepting the terms of storage. - ### If no terms of storage page content is set, this removes an otherwise dead link - ### False is default in that if the value isn't set, the link isn't shown - # terms_of_storage: true + ### This variable defines the default state of the terms of storage checkbox. + ### Possible values: 'visible-unchecked' (default) | 'visible-checked' | 'hidden-unchecked' | 'hidden-checked' + # termsOfStorageDefault: 'visible-unchecked' ### If using the OTP Middleware to store user profiles ### with Auth0 as the authentication mechanism, diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx index 2bb872c6e..a3f6d1fe0 100644 --- a/lib/components/user/terms-of-use-pane.tsx +++ b/lib/components/user/terms-of-use-pane.tsx @@ -105,8 +105,7 @@ const TermsOfUsePane = ({ const mapStateToProps = (state: AppReduxState) => { return { locale: state.otp.ui?.locale, - termsOfServiceLink: state.otp.config.termsOfServiceLink, - termsOfStorageSet: state.otp.config.persistence?.terms_of_storage + termsOfServiceLink: state.otp.config.termsOfServiceLink } } diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts index d3f10a090..5723d8974 100644 --- a/lib/util/config-types.ts +++ b/lib/util/config-types.ts @@ -91,8 +91,6 @@ export interface Auth0Config { /** Local persistence setting */ export interface LocalPersistenceConfig { strategy: 'localStorage' - // eslint-disable-next-line camelcase - terms_of_storage?: boolean } /** OTP Middleware (Personas) settings */ @@ -113,8 +111,11 @@ export type PersistenceConfig = ( | MiddlewarePersistenceConfig ) & { enabled?: boolean - // eslint-disable-next-line camelcase - terms_of_storage?: boolean + termsOfStorageDefault?: + | 'visible-unchecked' // default + | 'visible-checked' + | 'hidden-unchecked' + | 'hidden-checked' } /** Popup target settings */ From 8264299a6d18bc059deb5fec907893d98510f5ae Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 3 May 2024 17:57:54 -0400 Subject: [PATCH 2/5] refactor(config-types): Extract CheckboxDefaultState enum --- lib/util/config-types.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts index 5723d8974..00dae7b9f 100644 --- a/lib/util/config-types.ts +++ b/lib/util/config-types.ts @@ -105,17 +105,19 @@ export interface MiddlewarePersistenceConfig { strategy: 'otp_middleware' } +export type CheckboxDefaultState = + | 'visible-unchecked' + | 'visible-checked' + | 'hidden-unchecked' + | 'hidden-checked' + /** General persistence settings */ export type PersistenceConfig = ( | LocalPersistenceConfig | MiddlewarePersistenceConfig ) & { enabled?: boolean - termsOfStorageDefault?: - | 'visible-unchecked' // default - | 'visible-checked' - | 'hidden-unchecked' - | 'hidden-checked' + termsOfStorageDefault?: CheckboxDefaultState } /** Popup target settings */ From 095c952072dbea7c29fa0cff878516448cc04c0b Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Fri, 3 May 2024 17:59:06 -0400 Subject: [PATCH 3/5] feat(TermsOfUsePane): Hide terms of storage checkbox if configured. --- lib/components/user/terms-of-use-pane.tsx | 80 +++++++++++++---------- 1 file changed, 44 insertions(+), 36 deletions(-) diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx index a3f6d1fe0..3653f3042 100644 --- a/lib/components/user/terms-of-use-pane.tsx +++ b/lib/components/user/terms-of-use-pane.tsx @@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from 'react-intl' import React, { FormEventHandler } from 'react' import { AppReduxState } from '../../util/state-types' +import { CheckboxDefaultState } from '../../util/config-types' import { LinkOpensNewWindow } from '../util/externalLink' import { TERMS_OF_SERVICE_PATH, @@ -19,6 +20,7 @@ const TermsOfUsePane = ({ handleChange, locale, termsOfServiceLink, + termsOfStorageDefault, values: userData }: { disableCheckTerms: boolean @@ -26,6 +28,7 @@ const TermsOfUsePane = ({ handleChange: FormEventHandler locale: string termsOfServiceLink?: string + termsOfStorageDefault?: CheckboxDefaultState values: { hasConsentedToTerms: boolean storeTripHistory: boolean @@ -38,6 +41,8 @@ const TermsOfUsePane = ({ const termsURL = TOSLinkWithI18n || `/#${TERMS_OF_SERVICE_PATH}` + const isStorageVisible = termsOfStorageDefault.startsWith('visible-') + return (
@@ -61,51 +66,54 @@ const TermsOfUsePane = ({ /> - - { - // Show alert when user is unchecking the checkbox - if (storeTripHistory) { - // Do nothing if the user hits cancel - if ( - // eslint-disable-next-line no-restricted-globals - !confirm( - intl.formatMessage({ - id: 'components.TermsOfUsePane.confirmDeletionPrompt' - }) - ) - ) { - return + {isStorageVisible ? ( + + { + // Show alert when user is unchecking the checkbox + if (storeTripHistory) { + // Do nothing if the user hits cancel + if ( + // eslint-disable-next-line no-restricted-globals + !confirm( + intl.formatMessage({ + id: 'components.TermsOfUsePane.confirmDeletionPrompt' + }) + ) + ) { + return + } } - } - handleChange(e) - }} - > - ( - - ) + handleChange(e) }} - /> - - + > + ( + + ) + }} + /> + + + ) : null}
) } const mapStateToProps = (state: AppReduxState) => { return { locale: state.otp.ui?.locale, - termsOfServiceLink: state.otp.config.termsOfServiceLink + termsOfServiceLink: state.otp.config.termsOfServiceLink, + termsOfStorageDefault: state.otp.config.termsOfStorageDefault } } From c3e2936ced0744142a6ba6bb843be6e432068cc3 Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Tue, 14 May 2024 11:27:13 -0400 Subject: [PATCH 4/5] refactor(ConfigTypes): Convert CheckboDefaultState to enum. --- lib/components/user/terms-of-use-pane.tsx | 8 ++++---- lib/util/config-types.ts | 18 +++++++++++++----- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx index 3653f3042..e4d4dc445 100644 --- a/lib/components/user/terms-of-use-pane.tsx +++ b/lib/components/user/terms-of-use-pane.tsx @@ -20,7 +20,7 @@ const TermsOfUsePane = ({ handleChange, locale, termsOfServiceLink, - termsOfStorageDefault, + termsOfStorageDefault = CheckboxDefaultState.VISIBLE_UNCHECKED, values: userData }: { disableCheckTerms: boolean @@ -41,7 +41,7 @@ const TermsOfUsePane = ({ const termsURL = TOSLinkWithI18n || `/#${TERMS_OF_SERVICE_PATH}` - const isStorageVisible = termsOfStorageDefault.startsWith('visible-') + const showStorageTerms = termsOfStorageDefault.startsWith('visible-') return (
@@ -66,7 +66,7 @@ const TermsOfUsePane = ({ /> - {isStorageVisible ? ( + {showStorageTerms ? ( { return { locale: state.otp.ui?.locale, termsOfServiceLink: state.otp.config.termsOfServiceLink, - termsOfStorageDefault: state.otp.config.termsOfStorageDefault + termsOfStorageDefault: state.otp.config.persistence?.termsOfStorageDefault } } diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts index 00dae7b9f..bbc15aaba 100644 --- a/lib/util/config-types.ts +++ b/lib/util/config-types.ts @@ -105,11 +105,19 @@ export interface MiddlewarePersistenceConfig { strategy: 'otp_middleware' } -export type CheckboxDefaultState = - | 'visible-unchecked' - | 'visible-checked' - | 'hidden-unchecked' - | 'hidden-checked' +/** + * Enum to describe the layout state of checkboxes. + */ +export enum CheckboxDefaultState { + /** Checkbox is hidden and initially checked */ + HIDDEN_CHECKED = 'hidden-checked', + /** Checkbox is hidden and initially unchecked */ + HIDDEN_UNCHECKED = 'hidden-unchecked', + /** Checkbox is visible and initially checked */ + VISIBLE_CHECKED = 'visible-checked', + /** Checkbox is visible and initially unchecked */ + VISIBLE_UNCHECKED = 'visible-unchecked' +} /** General persistence settings */ export type PersistenceConfig = ( From be20928de7f1b800bdf2566ce4c2bb6c22c464cc Mon Sep 17 00:00:00 2001 From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com> Date: Tue, 14 May 2024 16:19:54 -0400 Subject: [PATCH 5/5] improvement(TermsOfUsePane): Precheck terms of storage if so configured. --- lib/components/user/terms-of-use-pane.tsx | 39 +++++++++++++++-------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/lib/components/user/terms-of-use-pane.tsx b/lib/components/user/terms-of-use-pane.tsx index e4d4dc445..74db697ac 100644 --- a/lib/components/user/terms-of-use-pane.tsx +++ b/lib/components/user/terms-of-use-pane.tsx @@ -1,7 +1,8 @@ import { Checkbox, ControlLabel, FormGroup } from 'react-bootstrap' import { connect } from 'react-redux' import { FormattedMessage, useIntl } from 'react-intl' -import React, { FormEventHandler } from 'react' +import { FormikProps } from 'formik' +import React, { useEffect } from 'react' import { AppReduxState } from '../../util/state-types' import { CheckboxDefaultState } from '../../util/config-types' @@ -11,6 +12,15 @@ import { TERMS_OF_STORAGE_PATH } from '../../util/constants' +import { EditedUser } from './types' + +interface Props extends FormikProps { + disableCheckTerms: boolean + locale: string + termsOfServiceLink?: string + termsOfStorageDefault?: CheckboxDefaultState +} + /** * User terms of use pane. */ @@ -19,23 +29,13 @@ const TermsOfUsePane = ({ handleBlur, handleChange, locale, + setFieldValue, termsOfServiceLink, termsOfStorageDefault = CheckboxDefaultState.VISIBLE_UNCHECKED, values: userData -}: { - disableCheckTerms: boolean - handleBlur: () => void - handleChange: FormEventHandler - locale: string - termsOfServiceLink?: string - termsOfStorageDefault?: CheckboxDefaultState - values: { - hasConsentedToTerms: boolean - storeTripHistory: boolean - } -}) => { +}: Props) => { const intl = useIntl() - const { hasConsentedToTerms, storeTripHistory } = userData + const { hasConsentedToTerms, id, storeTripHistory } = userData const TOSLinkWithI18n = termsOfServiceLink?.replace('{locale}', locale) @@ -43,6 +43,17 @@ const TermsOfUsePane = ({ const showStorageTerms = termsOfStorageDefault.startsWith('visible-') + useEffect(() => { + // When creating a new account, pre-check the storage field per defaults. + if ( + !id && + (termsOfStorageDefault === CheckboxDefaultState.HIDDEN_CHECKED || + termsOfStorageDefault === CheckboxDefaultState.VISIBLE_CHECKED) + ) { + setFieldValue('storeTripHistory', true) + } + }, [id, setFieldValue, termsOfStorageDefault]) + return (