fix: replaced an enum with union type

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}
                     />
                   ))}

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('<CustomRegisterField>', () => {
   test('renders and matches snapshot <Checkbox>', () => {
-    const { container } = render(<CustomRegisterField type={REGISTER_FIELD_VARIANT.CHECKBOX} label="label" name="name" value="value" onChange={vi.fn()} />);
+    const { container } = render(<CustomRegisterField type="checkbox" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <TextField>', () => {
-    const { container } = render(<CustomRegisterField type={REGISTER_FIELD_VARIANT.INPUT} label="label" name="name" value="value" onChange={vi.fn()} />);
+    const { container } = render(<CustomRegisterField type="input" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <Radio>', () => {
-    const { container } = render(<CustomRegisterField type={REGISTER_FIELD_VARIANT.RADIO} label="label" name="name" value="value" onChange={vi.fn()} />);
+    const { container } = render(<CustomRegisterField type="radio" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <Dropdown type="select">', () => {
-    const { container } = render(
-      <CustomRegisterField type={REGISTER_FIELD_VARIANT.GENERIC_SELECT} label="label" name="name" value="value" onChange={vi.fn()} />,
-    );
+    const { container } = render(<CustomRegisterField type="select" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <Dropdown type="country">', () => {
-    const { container } = render(
-      <CustomRegisterField type={REGISTER_FIELD_VARIANT.COUNTRY_SELECT} label="label" name="name" value="value" onChange={vi.fn()} />,
-    );
+    const { container } = render(<CustomRegisterField type="country" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <Dropdown type="us_state">', () => {
-    const { container } = render(
-      <CustomRegisterField type={REGISTER_FIELD_VARIANT.US_STATE_SELECT} label="label" name="name" value="value" onChange={vi.fn()} />,
-    );
+    const { container } = render(<CustomRegisterField type="us_state" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });
 
   test('renders and matches snapshot <Dropdown type="datepicker">', () => {
-    const { container } = render(<CustomRegisterField type={REGISTER_FIELD_VARIANT.DATE_PICKER} label="label" name="name" value="value" onChange={vi.fn()} />);
+    const { container } = render(<CustomRegisterField type="datepicker" label="label" name="name" value="value" onChange={vi.fn()} />);
 
     expect(container).toMatchSnapshot();
   });

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<Props> = ({ 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<Props> = ({ type, value = '', ...props }) =
   }, [t, type, props.options, i18n]);
 
   switch (type) {
-    case REGISTER_FIELD_VARIANT.CHECKBOX:
+    case 'checkbox':
       return <Checkbox {...props} checked={value === true} />;
-    case REGISTER_FIELD_VARIANT.INPUT:
+    case 'input':
       return <TextField {...props} value={value as string} />;
-    case REGISTER_FIELD_VARIANT.RADIO:
+    case 'radio':
       return <Radio {...props} values={optionsList} value={value as string} header={props.label} />;
-    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 <Dropdown {...props} options={optionsList} value={value as string} defaultLabel={props.placeholder} fullWidth />;
-    case REGISTER_FIELD_VARIANT.DATE_PICKER:
+    case 'datepicker':
       return <DateField {...props} value={value as string} />;
     default:
       return null;

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<HTMLFormElement>;
@@ -127,7 +126,7 @@ const RegistrationForm: React.FC<Props> = ({
           {publisherConsents.map((consent) => (
             <CustomRegisterField
               key={consent.name}
-              type={consent.type as ConsentFieldVariants}
+              type={consent.type}
               name={consent.name}
               options={consent.options}
               label={formatConsentLabel(consent.label)}

src/services/cleeng.account.service.ts

@@ -1,7 +1,6 @@
 import jwtDecode from 'jwt-decode';
 
 import { post, put, patch, get } from './cleeng.service';
-import { REGISTER_FIELD_VARIANT } from './inplayer.account.service';
 
 import type { Config } from '#types/Config';
 import { getOverrideIP } from '#src/utils/common';
@@ -151,7 +150,7 @@ export const getPublisherConsents: GetPublisherConsents = async (config) => {
 
   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,

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<void>) => {
   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 = '<a href="https://inplayer.com/legal/terms" target="_blank">Terms and Conditions</a>';
 
   return {
-    type: REGISTER_FIELD_VARIANT.CHECKBOX,
+    type: 'checkbox',
     isCustomRegisterField: true,
     required: true,
     name: 'terms',

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;