From 386df1ae8ffedb2be37072ab8c992d26db52c7b7 Mon Sep 17 00:00:00 2001 From: mirovladimitrovski Date: Thu, 7 Sep 2023 11:37:55 +0200 Subject: [PATCH] fix: replaced an enum with union type --- src/components/Account/Account.tsx | 5 ++--- .../CustomRegisterField.test.tsx | 22 ++++++------------- .../CustomRegisterField.tsx | 20 ++++++++--------- .../RegistrationForm/RegistrationForm.tsx | 3 +-- src/services/cleeng.account.service.ts | 3 +-- src/services/inplayer.account.service.ts | 17 +++----------- types/account.d.ts | 2 +- 7 files changed, 25 insertions(+), 47 deletions(-) diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx index 1a6eb0953..d909af980 100644 --- a/src/components/Account/Account.tsx +++ b/src/components/Account/Account.tsx @@ -9,7 +9,6 @@ import styles from './Account.module.scss'; import type { FormSectionContentArgs, FormSectionProps } from '#components/Form/FormSection'; import type { Consent } from '#types/account'; -import { REGISTER_FIELD_VARIANT } from '#src/services/inplayer.account.service'; import Alert from '#components/Alert/Alert'; import Visibility from '#src/icons/Visibility'; import VisibilityOff from '#src/icons/VisibilityOff'; @@ -73,7 +72,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } const nonTerms: Consent[] = []; publisherConsents?.forEach((consent) => { - if (consent.type === REGISTER_FIELD_VARIANT.CHECKBOX) { + if (consent.type === 'checkbox') { terms.push(consent); } else { nonTerms.push(consent); @@ -295,7 +294,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } label={formatConsentLabel(consent.label)} placeholder={consent.placeholder} value={section.values.consentsValues[consent.name]} - disabled={(consent.type === REGISTER_FIELD_VARIANT.CHECKBOX && consent.required) || section.isBusy} + disabled={(consent.type === 'checkbox' && consent.required) || section.isBusy} onChange={section.onChange} /> ))} diff --git a/src/components/CustomRegisterField/CustomRegisterField.test.tsx b/src/components/CustomRegisterField/CustomRegisterField.test.tsx index 3c3b642a5..6e878a496 100644 --- a/src/components/CustomRegisterField/CustomRegisterField.test.tsx +++ b/src/components/CustomRegisterField/CustomRegisterField.test.tsx @@ -3,53 +3,45 @@ import { render } from '@testing-library/react'; import CustomRegisterField from './CustomRegisterField'; -import { REGISTER_FIELD_VARIANT } from '#src/services/inplayer.account.service'; - describe('', () => { test('renders and matches snapshot ', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render( - , - ); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render( - , - ); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render( - , - ); + const { container } = render(); expect(container).toMatchSnapshot(); }); test('renders and matches snapshot ', () => { - const { container } = render(); + const { container } = render(); expect(container).toMatchSnapshot(); }); diff --git a/src/components/CustomRegisterField/CustomRegisterField.tsx b/src/components/CustomRegisterField/CustomRegisterField.tsx index d99246af4..e7985846b 100644 --- a/src/components/CustomRegisterField/CustomRegisterField.tsx +++ b/src/components/CustomRegisterField/CustomRegisterField.tsx @@ -2,12 +2,12 @@ import { type FC, type ChangeEventHandler, type ReactNode, useMemo } from 'react import { useTranslation } from 'react-i18next'; import type { GetRegisterFieldOption } from '@inplayer-org/inplayer.js'; +import type { ConsentFieldVariants } from '#types/account'; import Checkbox from '#components/Checkbox/Checkbox'; import TextField from '#components/TextField/TextField'; import Radio from '#components/Radio/Radio'; import Dropdown from '#components/Dropdown/Dropdown'; import DateField from '#components/DateField/DateField'; -import { ConsentFieldVariants, REGISTER_FIELD_VARIANT } from '#src/services/inplayer.account.service'; type Props = { type: ConsentFieldVariants; @@ -31,8 +31,8 @@ export const CustomRegisterField: FC = ({ type, value = '', ...props }) = const optionsList = useMemo(() => { switch (type) { - case REGISTER_FIELD_VARIANT.COUNTRY_SELECT: - case REGISTER_FIELD_VARIANT.US_STATE_SELECT: { + case 'country': + case 'us_state': { const codes = Object.keys(i18n.getResourceBundle(i18n.language, type)); return codes.map((code) => ({ @@ -51,17 +51,17 @@ export const CustomRegisterField: FC = ({ type, value = '', ...props }) = }, [t, type, props.options, i18n]); switch (type) { - case REGISTER_FIELD_VARIANT.CHECKBOX: + case 'checkbox': return ; - case REGISTER_FIELD_VARIANT.INPUT: + case 'input': return ; - case REGISTER_FIELD_VARIANT.RADIO: + case 'radio': return ; - case REGISTER_FIELD_VARIANT.GENERIC_SELECT: - case REGISTER_FIELD_VARIANT.COUNTRY_SELECT: - case REGISTER_FIELD_VARIANT.US_STATE_SELECT: + case 'select': + case 'country': + case 'us_state': return ; - case REGISTER_FIELD_VARIANT.DATE_PICKER: + case 'datepicker': return ; default: return null; diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx index 3cc5821fa..1e6351eff 100644 --- a/src/components/RegistrationForm/RegistrationForm.tsx +++ b/src/components/RegistrationForm/RegistrationForm.tsx @@ -20,7 +20,6 @@ import useToggle from '#src/hooks/useToggle'; import { addQueryParam } from '#src/utils/location'; import type { FormErrors } from '#types/form'; import type { RegistrationFormData, Consent } from '#types/account'; -import type { ConsentFieldVariants } from '#src/services/inplayer.account.service'; type Props = { onSubmit: React.FormEventHandler; @@ -127,7 +126,7 @@ const RegistrationForm: React.FC = ({ {publisherConsents.map((consent) => ( { const consents = ((response?.responseData?.consents || []) as CleengConsent[]).map( (cleengConsent): Consent => ({ - type: REGISTER_FIELD_VARIANT.CHECKBOX, + type: 'checkbox', isCustomRegisterField: false, defaultValue: cleengConsent.enabledByDefault, name: cleengConsent.name, diff --git a/src/services/inplayer.account.service.ts b/src/services/inplayer.account.service.ts index 06be1c26c..d29302cb6 100644 --- a/src/services/inplayer.account.service.ts +++ b/src/services/inplayer.account.service.ts @@ -24,6 +24,7 @@ import type { UpdateCustomerArgs, UpdateCustomerConsents, UpdatePersonalShelves, + ConsentFieldVariants, } from '#types/account'; import type { Config } from '#types/Config'; import type { InPlayerAuthData, InPlayerError } from '#types/inplayer'; @@ -37,18 +38,6 @@ enum InPlayerEnv { Daily = 'daily', } -export const REGISTER_FIELD_VARIANT = { - INPUT: 'input', - GENERIC_SELECT: 'select', - COUNTRY_SELECT: 'country', - US_STATE_SELECT: 'us_state', - RADIO: 'radio', - CHECKBOX: 'checkbox', - DATE_PICKER: 'datepicker', -} as const; - -export type ConsentFieldVariants = (typeof REGISTER_FIELD_VARIANT)[keyof typeof REGISTER_FIELD_VARIANT]; - export const initialize = async (config: Config, _logoutFn: () => Promise) => { const env: string = config.integrations?.jwp?.useSandbox ? InPlayerEnv.Development : InPlayerEnv.Production; InPlayer.setConfig(env as Env); @@ -177,7 +166,7 @@ export const getPublisherConsents: GetPublisherConsents = async (config) => { (field): Consent => ({ type: field.type as ConsentFieldVariants, isCustomRegisterField: true, - defaultValue: field.type === REGISTER_FIELD_VARIANT.CHECKBOX ? field.default_value === 'true' : field.default_value, + defaultValue: field.type === 'checkbox' ? field.default_value === 'true' : field.default_value, name: field.name, label: field.label, placeholder: field.placeholder, @@ -481,7 +470,7 @@ function getTermsConsent(): Consent { const termsUrl = 'Terms and Conditions'; return { - type: REGISTER_FIELD_VARIANT.CHECKBOX, + type: 'checkbox', isCustomRegisterField: true, required: true, name: 'terms', diff --git a/types/account.d.ts b/types/account.d.ts index b47073d5c..6b6553627 100644 --- a/types/account.d.ts +++ b/types/account.d.ts @@ -221,7 +221,7 @@ export type UpdateCustomerArgs = { export type ConsentFieldVariants = 'input' | 'select' | 'country' | 'us_state' | 'radio' | 'checkbox' | 'datepicker'; export interface Consent { - type: ConsentFieldVariantss; + type: ConsentFieldVariants; isCustomRegisterField: boolean; defaultValue: string | boolean; name: string;