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..74db697ac 100644 --- a/lib/components/user/terms-of-use-pane.tsx +++ b/lib/components/user/terms-of-use-pane.tsx @@ -1,15 +1,26 @@ 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' import { LinkOpensNewWindow } from '../util/externalLink' import { TERMS_OF_SERVICE_PATH, 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. */ @@ -18,26 +29,31 @@ const TermsOfUsePane = ({ handleBlur, handleChange, locale, + setFieldValue, termsOfServiceLink, + termsOfStorageDefault = CheckboxDefaultState.VISIBLE_UNCHECKED, values: userData -}: { - disableCheckTerms: boolean - handleBlur: () => void - handleChange: FormEventHandler - locale: string - termsOfServiceLink?: string - values: { - hasConsentedToTerms: boolean - storeTripHistory: boolean - } -}) => { +}: Props) => { const intl = useIntl() - const { hasConsentedToTerms, storeTripHistory } = userData + const { hasConsentedToTerms, id, storeTripHistory } = userData const TOSLinkWithI18n = termsOfServiceLink?.replace('{locale}', locale) const termsURL = TOSLinkWithI18n || `/#${TERMS_OF_SERVICE_PATH}` + 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 (
@@ -61,44 +77,46 @@ 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 + {showStorageTerms ? ( + + { + // 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}
) } @@ -106,7 +124,7 @@ const mapStateToProps = (state: AppReduxState) => { return { locale: state.otp.ui?.locale, termsOfServiceLink: state.otp.config.termsOfServiceLink, - termsOfStorageSet: state.otp.config.persistence?.terms_of_storage + termsOfStorageDefault: state.otp.config.persistence?.termsOfStorageDefault } } diff --git a/lib/util/config-types.ts b/lib/util/config-types.ts index d3f10a090..bbc15aaba 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 */ @@ -107,14 +105,27 @@ export interface MiddlewarePersistenceConfig { strategy: 'otp_middleware' } +/** + * 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 = ( | LocalPersistenceConfig | MiddlewarePersistenceConfig ) & { enabled?: boolean - // eslint-disable-next-line camelcase - terms_of_storage?: boolean + termsOfStorageDefault?: CheckboxDefaultState } /** Popup target settings */