From 8891cee95f425cba7a8e68fd3f1693a90eb65182 Mon Sep 17 00:00:00 2001
From: Danny Budzinski <dbudzins@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:31:58 +0100
Subject: [PATCH] fix: build improvements, code cleanup, small improvements,
 test fixes

* fix: add code splitting
* fix: differentiate dev/prod/test/etc modes from development/production builds
* chore: run e2e tests with production build
* fix: ensure all compile builds are done as production builds (only dev server runs with development builds)
* chore: add test id helper
* chore: replace all relative paths with tsconfig paths
* chore: improve button, dialog, textfield
* chore: cleanup dependencies
* chore: delete unused Settings page
* fix: fix demo translation
* fix: make payment tests more robust
* fix: fix IP override for tests
---
 .commitlintrc.js                              |  1 +
 .env.development => .env.dev                  |  0
 .github/PULL_REQUEST_TEMPLATE.md              |  5 +-
 .github/workflows/codeceptjs.yml              |  4 +-
 package.json                                  |  9 ++-
 src/components/Button/Button.module.scss      | 12 ++++
 src/components/Button/Button.tsx              | 34 ++++++----
 .../ChooseOfferForm/ChooseOfferForm.tsx       |  4 +-
 .../ConfirmationDialog/ConfirmationDialog.tsx | 16 ++++-
 .../DemoConfigDialog/DemoConfigDialog.tsx     |  2 +-
 .../DemoConfigDialog.test.tsx.snap            |  1 -
 .../EditPasswordForm/EditPasswordForm.tsx     |  4 +-
 src/components/EpgChannel/EpgChannelItem.tsx  |  3 +-
 .../EpgProgramItem/EpgProgramItem.tsx         |  4 +-
 .../ForgotPasswordForm/ForgotPasswordForm.tsx |  4 +-
 src/components/LoginForm/LoginForm.tsx        |  4 +-
 src/components/Modal/Modal.tsx                |  4 +-
 .../PersonalDetailsForm.tsx                   |  4 +-
 src/components/Player/Player.tsx              |  4 +-
 .../RegistrationForm/RegistrationForm.tsx     |  4 +-
 src/components/Root/Root.tsx                  |  6 +-
 src/components/Spinner/Spinner.module.scss    |  9 ++-
 src/components/TextField/TextField.test.tsx   |  2 +-
 src/components/TextField/TextField.tsx        | 67 ++++++++-----------
 .../__snapshots__/TextField.test.tsx.snap     |  1 -
 src/components/VideoDetails/VideoDetails.tsx  |  3 +-
 .../VideoDetailsInline/VideoDetailsInline.tsx |  3 +-
 src/components/VideoLayout/VideoLayout.tsx    |  7 +-
 src/components/VideoList/VideoList.tsx        |  3 +-
 .../AccountModal/forms/Checkout.tsx           |  2 +-
 src/containers/Layout/Layout.tsx              |  4 +-
 src/containers/ShelfList/ShelfList.tsx        |  3 +-
 src/i18n/locales/en_US/demo.json              |  2 +-
 src/i18n/locales/en_US/error.json             |  4 +-
 src/pages/Settings/Settings.module.scss       |  2 -
 src/pages/Settings/Settings.test.tsx          | 12 ----
 src/pages/Settings/Settings.tsx               | 17 -----
 .../__snapshots__/Settings.test.tsx.snap      |  9 ---
 src/services/account.service.ts               | 14 ++--
 src/services/checkout.service.ts              | 11 ++-
 src/stores/ConfigStore.ts                     |  4 --
 src/stores/UIStore.ts                         |  4 +-
 src/utils/common.ts                           | 20 ++++--
 test-e2e/tests/account_test.ts                |  6 +-
 test-e2e/tests/inline_layout_test.ts          |  6 +-
 test-e2e/tests/login/account_test.ts          |  4 +-
 test-e2e/tests/login/home_test.ts             |  4 +-
 test-e2e/tests/payments/coupons_test.ts       |  4 +-
 test-e2e/tests/payments/subscription_test.ts  | 14 ++--
 test-e2e/tests/register_test.ts               | 12 ++--
 test-e2e/tests/video_detail_test.ts           | 12 ++--
 .../tests/watch_history/logged_in_test.ts     |  4 +-
 test-e2e/utils/constants.ts                   |  3 +
 test-e2e/utils/payments.ts                    | 45 +++++++++----
 test-e2e/utils/steps_file.ts                  | 15 +++--
 test/constants.ts                             |  2 +
 types/account.d.ts                            |  8 ++-
 types/checkout.d.ts                           |  4 +-
 vite.config.ts                                | 41 +++++++++++-
 yarn.lock                                     | 58 +---------------
 60 files changed, 288 insertions(+), 286 deletions(-)
 rename .env.development => .env.dev (100%)
 delete mode 100644 src/pages/Settings/Settings.module.scss
 delete mode 100644 src/pages/Settings/Settings.test.tsx
 delete mode 100644 src/pages/Settings/Settings.tsx
 delete mode 100644 src/pages/Settings/__snapshots__/Settings.test.tsx.snap

diff --git a/.commitlintrc.js b/.commitlintrc.js
index 4c6763978..88ea9e0f4 100644
--- a/.commitlintrc.js
+++ b/.commitlintrc.js
@@ -27,6 +27,7 @@ module.exports = {
         'inlineplayer',
         'config',
         'epg',
+        'tests',
       ],
     ],
   },
diff --git a/.env.development b/.env.dev
similarity index 100%
rename from .env.development
rename to .env.dev
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 627dc045b..730866ad9 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -10,11 +10,8 @@ This PR solves # .
 
 According to our definition of done, I have completed the following steps:
 
-- [ ] User stories met
-- [ ] Storybook stories
+- [ ] Acceptance criteria met
 - [ ] Unit tests added
-- [ ] Linting passing
-- [ ] Unit tests passing
 - [ ] Docs updated (including config and env variables)
 - [ ] Translations added
 - [ ] UX tested
diff --git a/.github/workflows/codeceptjs.yml b/.github/workflows/codeceptjs.yml
index c45131f1a..07b136286 100644
--- a/.github/workflows/codeceptjs.yml
+++ b/.github/workflows/codeceptjs.yml
@@ -22,8 +22,8 @@ jobs:
         run: |
           yarn
           npm install wait-on -g
-      - name: Start dev server
-        run: yarn start --mode test &
+      - name: Start preview server
+        run: yarn start:test &
       - name: Run tests
         run: wait-on -v -t 30000 -c ./scripts/waitOnConfig.js http-get://localhost:8080 && yarn codecept:${{ matrix.config }}
         env:
diff --git a/package.json b/package.json
index e217488ec..c87117453 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "2.7.0",
   "main": "index.js",
   "repository": "https://github.com/jwplayer/ott-web-app.git",
-  "author": "Robin van Zanten",
+  "author": "JW Player",
   "private": true,
   "engines": {
     "node": ">=16.0.0"
@@ -11,6 +11,7 @@
   "scripts": {
     "prepare": "husky install",
     "start": "vite",
+    "start:test": "vite build --mode test && vite preview --port 8080",
     "build": "vite build",
     "test": "TZ=UTC vitest run",
     "test-watch": "TZ=UTC vitest",
@@ -38,17 +39,14 @@
     "deploy:github": "node ./scripts/deploy-github.js"
   },
   "dependencies": {
-    "allure-commandline": "^2.17.2",
     "classnames": "^2.3.1",
     "date-fns": "^2.28.0",
     "dompurify": "^2.3.8",
-    "history": "^4.10.1",
     "i18next": "^20.3.1",
     "i18next-browser-languagedetector": "^6.1.1",
     "jwt-decode": "^3.1.2",
     "lodash.merge": "^4.6.2",
     "marked": "^4.1.1",
-    "npm-run-all": "^4.1.5",
     "planby": "^0.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -78,11 +76,11 @@
     "@types/react-dom": "^17.0.9",
     "@types/react-helmet": "^6.1.2",
     "@types/react-infinite-scroller": "^1.2.3",
-    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^1.0.7",
     "@vitest/coverage-c8": "^0.23.4",
+    "allure-commandline": "^2.17.2",
     "codeceptjs": "3.3.0",
     "confusing-browser-globals": "^1.0.10",
     "depcheck": "^1.4.3",
@@ -97,6 +95,7 @@
     "jsdom": "^19.0.0",
     "lint-staged": "^10.5.4",
     "luxon": "^3.1.0",
+    "npm-run-all": "^4.1.5",
     "playwright": "^1.25.2",
     "postcss": "^8.3.5",
     "postcss-import": "^14.0.2",
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
index d3769aa5d..b5ace6bf3 100644
--- a/src/components/Button/Button.module.scss
+++ b/src/components/Button/Button.module.scss
@@ -132,3 +132,15 @@ $large-button-height: 40px;
     }
   }
 }
+
+.hidden {
+  visibility: hidden;
+}
+
+.centerAbsolute {
+  position: absolute;
+  right: 0;
+  left: 0;
+  margin: auto;
+  transform: translate(-5px, -5px);
+}
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7d8588d7f..b40327c50 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -4,6 +4,8 @@ import { NavLink } from 'react-router-dom';
 
 import styles from './Button.module.scss';
 
+import Spinner from '#src/components/Spinner/Spinner';
+
 type Color = 'default' | 'primary';
 
 type Variant = 'contained' | 'outlined' | 'text';
@@ -24,6 +26,7 @@ type Props = {
   className?: string;
   type?: 'button' | 'submit' | 'reset';
   disabled?: boolean;
+  busy?: boolean;
   id?: string;
 } & React.AriaAttributes;
 
@@ -37,6 +40,7 @@ const Button: React.FC<Props> = ({
   variant = 'outlined',
   size = 'medium',
   disabled,
+  busy,
   type,
   to,
   onClick,
@@ -52,20 +56,26 @@ const Button: React.FC<Props> = ({
       [styles.disabled]: disabled,
     });
 
-  const icon = startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null;
-  const span = <span className={styles.buttonLabel}>{label}</span>;
-
-  return to ? (
-    <NavLink className={({ isActive }) => buttonClassName(isActive)} to={to} {...rest} end>
-      {icon}
-      {span}
+  const content = (
+    <>
+      {startIcon && <div className={styles.startIcon}>{startIcon}</div>}
+      {<span className={classNames(styles.buttonLabel, { [styles.hidden]: busy }) || undefined}>{label}</span>}
       {children}
-    </NavLink>
-  ) : (
+      {busy && <Spinner className={styles.centerAbsolute} size={'small'} />}
+    </>
+  );
+
+  if (to) {
+    return (
+      <NavLink className={({ isActive }) => buttonClassName(isActive)} to={to} {...rest} end>
+        {content}
+      </NavLink>
+    );
+  }
+
+  return (
     <button className={buttonClassName(active)} onClick={onClick} type={type} disabled={disabled} aria-disabled={disabled} {...rest}>
-      {icon}
-      {span}
-      {children}
+      {content}
     </button>
   );
 };
diff --git a/src/components/ChooseOfferForm/ChooseOfferForm.tsx b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
index 4eeef1585..558698c13 100644
--- a/src/components/ChooseOfferForm/ChooseOfferForm.tsx
+++ b/src/components/ChooseOfferForm/ChooseOfferForm.tsx
@@ -12,7 +12,7 @@ import CheckCircle from '#src/icons/CheckCircle';
 import type { Offer } from '#types/checkout';
 import { getOfferPrice, isSVODOffer } from '#src/utils/subscription';
 import type { FormErrors } from '#types/form';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import type { ChooseOfferFormData, OfferType } from '#types/account';
 import { useConfigStore } from '#src/stores/ConfigStore';
 
@@ -139,7 +139,7 @@ const ChooseOfferForm: React.FC<Props> = ({
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'choose-offer-form' : undefined} noValidate>
+    <form onSubmit={onSubmit} data-testid={testId('choose-offer-form')} noValidate>
       {onBackButtonClickHandler ? <DialogBackButton onClick={onBackButtonClickHandler} /> : null}
       <h2 className={styles.title}>{t('choose_offer.title')}</h2>
       <h3 className={styles.subtitle}>{t('choose_offer.watch_this_on_platform', { siteName })}</h3>
diff --git a/src/components/ConfirmationDialog/ConfirmationDialog.tsx b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
index 1f1701902..b8f803c4c 100644
--- a/src/components/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/src/components/ConfirmationDialog/ConfirmationDialog.tsx
@@ -12,17 +12,27 @@ type Props = {
   body: string;
   onConfirm: () => void;
   onClose: () => void;
+  busy?: boolean;
 };
 
-const ConfirmationDialog: React.FC<Props> = ({ open, title, body, onConfirm, onClose }: Props) => {
+const ConfirmationDialog: React.FC<Props> = ({ open, title, body, onConfirm, onClose, busy }: Props) => {
   const { t } = useTranslation('common');
 
   return (
     <Dialog open={open} onClose={onClose}>
       <h2 className={styles.title}>{title}</h2>
       <p className={styles.body}>{body}</p>
-      <Button className={styles.confirmButton} label={t('confirmation_dialog.confirm')} variant="contained" color="primary" onClick={onConfirm} fullWidth />
-      <Button label={t('confirmation_dialog.close')} variant="outlined" onClick={onClose} fullWidth />
+      <Button
+        className={styles.confirmButton}
+        label={t('confirmation_dialog.confirm')}
+        variant={'contained'}
+        color={busy ? 'default' : 'primary'}
+        onClick={onConfirm}
+        fullWidth
+        disabled={busy}
+        busy={busy}
+      />
+      <Button label={t('confirmation_dialog.close')} variant="outlined" onClick={onClose} fullWidth disabled={busy} />
     </Dialog>
   );
 };
diff --git a/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/src/components/DemoConfigDialog/DemoConfigDialog.tsx
index eac6894b0..7d2b5d00e 100644
--- a/src/components/DemoConfigDialog/DemoConfigDialog.tsx
+++ b/src/components/DemoConfigDialog/DemoConfigDialog.tsx
@@ -28,7 +28,7 @@ const DemoConfigDialog = ({ configLocation = getConfigLocation() }: Props) => {
   if (configLocation) {
     return (
       <div className={styles.note}>
-        <div>{t('currently_previewing_config', { configLocation })}</div>
+        <div>{t('currently_previewing_config', { configSource: configLocation })}</div>
         <Link onClick={clearConfig}>{t('click_to_unselect_config')}</Link>
       </div>
     );
diff --git a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
index 886fe9110..d3e607983 100644
--- a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
+++ b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap
@@ -42,7 +42,6 @@ exports[`<DemoConfigDialog> > renders and matches snapshot 1`] = `
                   placeholder="please_enter_config_id"
                   required=""
                   type="text"
-                  value=""
                 />
               </div>
             </div>
diff --git a/src/components/EditPasswordForm/EditPasswordForm.tsx b/src/components/EditPasswordForm/EditPasswordForm.tsx
index fd65442ec..35e0dbf85 100644
--- a/src/components/EditPasswordForm/EditPasswordForm.tsx
+++ b/src/components/EditPasswordForm/EditPasswordForm.tsx
@@ -11,7 +11,7 @@ import Visibility from '#src/icons/Visibility';
 import VisibilityOff from '#src/icons/VisibilityOff';
 import PasswordStrength from '#components/PasswordStrength/PasswordStrength';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import useToggle from '#src/hooks/useToggle';
 import type { EditPasswordFormData } from '#types/account';
 import type { FormErrors } from '#types/form';
@@ -31,7 +31,7 @@ const EditPasswordForm: React.FC<Props> = ({ onSubmit, onChange, onBlur, value,
   const [viewPassword, toggleViewPassword] = useToggle();
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'forgot-password-form' : undefined} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
       <h2 className={styles.title}>{t('reset.password_reset')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
diff --git a/src/components/EpgChannel/EpgChannelItem.tsx b/src/components/EpgChannel/EpgChannelItem.tsx
index d53e70289..a2a7c606c 100644
--- a/src/components/EpgChannel/EpgChannelItem.tsx
+++ b/src/components/EpgChannel/EpgChannelItem.tsx
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import styles from './EpgChannelItem.module.scss';
 
 import Image from '#components/Image/Image';
+import { testId } from '#src/utils/common';
 
 type Props = {
   channel: Channel;
@@ -24,7 +25,7 @@ const EpgChannelItem: React.VFC<Props> = ({ channel, channelItemWidth, sidebarWi
         className={classNames(styles.epgChannel, { [styles.active]: isActive })}
         style={{ width: channelItemWidth }}
         onClick={() => onClick && onClick(channel)}
-        data-testid={uuid}
+        data-testid={testId(uuid)}
       >
         <Image className={styles.epgChannelLogo} image={channelLogoImage} alt="Logo" width={320} />
       </div>
diff --git a/src/components/EpgProgramItem/EpgProgramItem.tsx b/src/components/EpgProgramItem/EpgProgramItem.tsx
index 9566bc321..28efc53d9 100644
--- a/src/components/EpgProgramItem/EpgProgramItem.tsx
+++ b/src/components/EpgProgramItem/EpgProgramItem.tsx
@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 
 import styles from './EpgProgramItem.module.scss';
 
+import { testId } from '#src/utils/common';
+
 type Props = {
   program: Program;
   onClick?: (program: Program) => void;
@@ -45,7 +47,7 @@ const ProgramItem: React.VFC<Props> = ({ program, onClick, isActive, compact, di
           [styles.disabled]: disabled,
         })}
         style={{ width: styles.width }}
-        data-testid={program.data.id}
+        data-testid={testId(program.data.id)}
       >
         {showImage && <img className={styles.epgProgramImage} src={image} alt="Preview" />}
         {showLiveTagInImage && <div className={styles.epgLiveTag}>{t('live')}</div>}
diff --git a/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx b/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
index f7bb53171..53f44ced3 100644
--- a/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
+++ b/src/components/ForgotPasswordForm/ForgotPasswordForm.tsx
@@ -6,7 +6,7 @@ import styles from './ForgotPasswordForm.module.scss';
 import Button from '#components/Button/Button';
 import TextField from '#components/TextField/TextField';
 import FormFeedback from '#components/FormFeedback/FormFeedback';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import type { ForgotPasswordFormData } from '#types/account';
 import type { FormErrors } from '#types/form';
 
@@ -24,7 +24,7 @@ const ForgotPasswordForm: React.FC<Props> = ({ onSubmit, onChange, value, errors
   const { t } = useTranslation('account');
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'forgot-password-form' : undefined} noValidate className={styles.forgotPasswordForm}>
+    <form onSubmit={onSubmit} data-testid={testId('forgot-password-form')} noValidate className={styles.forgotPasswordForm}>
       <h2 className={styles.title}>{t('reset.forgot_password')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <p className={styles.text}>{t('reset.forgot_text')}</p>
diff --git a/src/components/LoginForm/LoginForm.tsx b/src/components/LoginForm/LoginForm.tsx
index f53edd227..57d932ddc 100644
--- a/src/components/LoginForm/LoginForm.tsx
+++ b/src/components/LoginForm/LoginForm.tsx
@@ -12,7 +12,7 @@ import Visibility from '#src/icons/Visibility';
 import VisibilityOff from '#src/icons/VisibilityOff';
 import FormFeedback from '#components/FormFeedback/FormFeedback';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import useToggle from '#src/hooks/useToggle';
 import { addQueryParam } from '#src/utils/location';
 import type { FormErrors } from '#types/form';
@@ -34,7 +34,7 @@ const LoginForm: React.FC<Props> = ({ onSubmit, onChange, values, errors, submit
   const location = useLocation();
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'login-form' : undefined} noValidate>
+    <form onSubmit={onSubmit} data-testid={testId('login-form')} noValidate>
       <h2 className={styles.title}>{t('login.sign_in')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
index 69dd4e78b..e068e9187 100644
--- a/src/components/Modal/Modal.tsx
+++ b/src/components/Modal/Modal.tsx
@@ -6,7 +6,7 @@ import styles from './Modal.module.scss';
 import scrollbarSize from '#src/utils/dom';
 import Fade from '#components/Animation/Fade/Fade';
 import Grow from '#components/Animation/Grow/Grow';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 
 type Props = {
   children?: React.ReactNode;
@@ -77,7 +77,7 @@ const Modal: React.FC<Props> = ({ open, onClose, children, AnimationComponent =
   return ReactDOM.createPortal(
     <Fade open={open} duration={300} onCloseAnimationEnd={() => setVisible(false)}>
       <div className={styles.modal} onKeyDown={keyDownEventHandler} ref={modalRef}>
-        <div className={styles.backdrop} onClick={onClose} data-testid={IS_DEV_BUILD ? 'backdrop' : undefined} />
+        <div className={styles.backdrop} onClick={onClose} data-testid={testId('backdrop')} />
         <div className={styles.container}>
           <AnimationComponent open={open} duration={200}>
             {children}
diff --git a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
index 95ceac58f..03cb8cd3b 100644
--- a/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
+++ b/src/components/PersonalDetailsForm/PersonalDetailsForm.tsx
@@ -11,7 +11,7 @@ import Radio from '#components/Radio/Radio';
 import DateField from '#components/DateField/DateField';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import FormFeedback from '#components/FormFeedback/FormFeedback';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import type { FormErrors } from '#types/form';
 import type { PersonalDetailsFormData, CleengCaptureField, CleengCaptureQuestionField } from '#types/account';
 
@@ -67,7 +67,7 @@ const PersonalDetailsForm: React.FC<Props> = ({
   };
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'personal_details-form' : undefined} noValidate>
+    <form onSubmit={onSubmit} data-testid={testId('personal_details-form')} noValidate>
       <h2 className={styles.title}>{t('personal_details.title')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       {fields.firstNameLastName?.enabled ? (
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index e2b0cbfe7..48011de33 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -8,7 +8,7 @@ import type { JWPlayer } from '#types/jwplayer';
 import type { PlaylistItem } from '#types/playlist';
 import useEventCallback from '#src/hooks/useEventCallback';
 import useOttAnalytics from '#src/hooks/useOttAnalytics';
-import { logDev } from '#src/utils/common';
+import { logDev, testId } from '#src/utils/common';
 
 type Props = {
   playerId: string;
@@ -193,7 +193,7 @@ const Player: React.FC<Props> = ({
   }, [detachEvents]);
 
   return (
-    <div className={styles.container} data-testid="player-container">
+    <div className={styles.container} data-testid={testId('player-container')}>
       <div ref={playerElementRef} />
     </div>
   );
diff --git a/src/components/RegistrationForm/RegistrationForm.tsx b/src/components/RegistrationForm/RegistrationForm.tsx
index 057501180..6f5830d4a 100644
--- a/src/components/RegistrationForm/RegistrationForm.tsx
+++ b/src/components/RegistrationForm/RegistrationForm.tsx
@@ -15,7 +15,7 @@ import Checkbox from '#components/Checkbox/Checkbox';
 import FormFeedback from '#components/FormFeedback/FormFeedback';
 import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay';
 import Link from '#components/Link/Link';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import { testId } from '#src/utils/common';
 import useToggle from '#src/hooks/useToggle';
 import { addQueryParam } from '#src/utils/location';
 import type { FormErrors } from '#types/form';
@@ -76,7 +76,7 @@ const RegistrationForm: React.FC<Props> = ({
   }
 
   return (
-    <form onSubmit={onSubmit} data-testid={IS_DEV_BUILD ? 'registration-form' : undefined} noValidate>
+    <form onSubmit={onSubmit} data-testid={testId('registration-form')} noValidate>
       <h2 className={styles.title}>{t('registration.sign_up')}</h2>
       {errors.form ? <FormFeedback variant="error">{errors.form}</FormFeedback> : null}
       <TextField
diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx
index 7bc75eff2..2aa7acbc5 100644
--- a/src/components/Root/Root.tsx
+++ b/src/components/Root/Root.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import ErrorPage from '#components/ErrorPage/ErrorPage';
 import AccountModal from '#src/containers/AccountModal/AccountModal';
-import { IS_DEMO_MODE, IS_DEV_BUILD } from '#src/utils/common';
+import { IS_DEMO_MODE, IS_DEVELOPMENT_BUILD } from '#src/utils/common';
 import DemoConfigDialog from '#components/DemoConfigDialog/DemoConfigDialog';
 
 type Props = {
@@ -17,8 +17,8 @@ const Root: FC<Props> = ({ error }) => {
   return (
     <>
       {error ? (
-        <ErrorPage title={IS_DEV_BUILD ? error.message : t('generic_error_heading', 'There was an issue loading the application')}>
-          <p>{IS_DEV_BUILD ? error.stack : t('generic_error_description', 'Try refreshing this page or come back later.')}</p>
+        <ErrorPage title={IS_DEVELOPMENT_BUILD ? error.message : t('generic_error_heading', 'There was an issue loading the application')}>
+          <p>{IS_DEVELOPMENT_BUILD ? error.stack : t('generic_error_description', 'Try refreshing this page or come back later.')}</p>
         </ErrorPage>
       ) : (
         <>
diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss
index 5985916e6..45f95c4ca 100644
--- a/src/components/Spinner/Spinner.module.scss
+++ b/src/components/Spinner/Spinner.module.scss
@@ -19,8 +19,15 @@
   border-radius: 50%;
   animation: buffer 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 }
+
 .small {
-  transform: scale(0.6);
+  width: 20px;
+  height: 20px;
+}
+
+.small div {
+  width: variables.$base-spacing;
+  height: variables.$base-spacing;
 }
 
 .buffer div:nth-child(1) {
diff --git a/src/components/TextField/TextField.test.tsx b/src/components/TextField/TextField.test.tsx
index 830ea42c8..7fd937bef 100644
--- a/src/components/TextField/TextField.test.tsx
+++ b/src/components/TextField/TextField.test.tsx
@@ -11,7 +11,7 @@ describe('<TextField>', () => {
   });
 
   test('renders and matches multiline snapshot', () => {
-    const { container } = render(<TextField label="Label" placeholder="Placeholder" name="name" value="" onChange={vi.fn()} multiline />);
+    const { container } = render(<TextField label="Label" placeholder="Placeholder" name="name" value="" onChange={vi.fn()} multiline={true} />);
 
     expect(container).toMatchSnapshot();
   });
diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
index c4cff2241..9fb7fa13e 100644
--- a/src/components/TextField/TextField.tsx
+++ b/src/components/TextField/TextField.tsx
@@ -1,90 +1,79 @@
-import React from 'react';
+import React, { RefObject } from 'react';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import styles from './TextField.module.scss';
 
-import HelperText from '#components/HelperText/HelperText';
-import { IS_DEV_BUILD } from '#src/utils/common';
+import HelperText from '#src/components/HelperText/HelperText';
+import { testId as getTestId } from '#src/utils/common';
 import useOpaqueId from '#src/hooks/useOpaqueId';
 
+type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'id' | 'ref' | 'className'>;
+type TextAreaProps = Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'id' | 'ref' | 'className'>;
+
+type InputOrTextAreaProps =
+  | ({ multiline?: false; inputRef?: RefObject<HTMLInputElement>; textAreaRef?: never } & InputProps)
+  | ({ multiline: true; inputRef?: never; textAreaRef?: RefObject<HTMLTextAreaElement> } & TextAreaProps);
+
 type Props = {
   className?: string;
   label?: string;
-  placeholder?: string;
-  name?: string;
-  value?: string;
-  type?: 'text' | 'email' | 'password' | 'search' | 'number' | 'date';
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
   helperText?: React.ReactNode;
   leftControl?: React.ReactNode;
   rightControl?: React.ReactNode;
   error?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  readOnly?: boolean;
-  multiline?: boolean;
-  rows?: number;
   editing?: boolean;
   testId?: string;
-};
+} & InputOrTextAreaProps;
 
 const TextField: React.FC<Props> = ({
   className,
   label,
   error,
   helperText,
-  multiline,
   leftControl,
   rightControl,
-  type = 'text',
-  rows = 3,
   editing = true,
-  value,
   testId,
-  ...rest
+  inputRef,
+  textAreaRef,
+  ...inputProps
 }: Props) => {
-  const id = useOpaqueId('text-field', rest.name);
+  const id = useOpaqueId('text-field', inputProps.name);
   const { t } = useTranslation('common');
-  const InputComponent = multiline ? 'textarea' : 'input';
+
+  const isInputOrTextArea = (item: unknown): item is InputOrTextAreaProps => !!item && typeof item === 'object' && 'multiline' in item;
+  const isTextArea = (item: unknown): item is TextAreaProps => isInputOrTextArea(item) && !!item.multiline;
+
   const textFieldClassName = classNames(
     styles.textField,
     {
       [styles.error]: error,
-      [styles.disabled]: rest.disabled,
+      [styles.disabled]: inputProps.disabled,
       [styles.leftControl]: !!leftControl,
       [styles.rightControl]: !!rightControl,
     },
     className,
   );
 
-  const inputProps: Partial<Props & { id: string }> = {
-    id,
-    type,
-    value,
-    ...rest,
-  };
-
-  if (multiline) {
-    inputProps.rows = rows;
-  }
-
   return (
-    <div className={textFieldClassName} data-testid={IS_DEV_BUILD ? testId : undefined}>
+    <div className={textFieldClassName} data-testid={getTestId(testId)}>
       <label htmlFor={id} className={styles.label}>
         {label}
-        {!rest.required && editing ? <span>{t('optional')}</span> : null}
+        {!inputProps.required && editing ? <span>{t('optional')}</span> : null}
       </label>
       {editing ? (
         <div className={styles.container}>
           {leftControl ? <div className={styles.control}>{leftControl}</div> : null}
-          <InputComponent className={styles.input} {...inputProps} />
+          {isTextArea(inputProps) ? (
+            <textarea id={id} className={styles.input} rows={3} ref={textAreaRef} {...inputProps} />
+          ) : (
+            <input id={id} className={styles.input} type={'text'} ref={inputRef} {...inputProps} />
+          )}
           {rightControl ? <div className={styles.control}>{rightControl}</div> : null}
         </div>
       ) : (
-        <p>{value}</p>
+        <p>{inputProps.value}</p>
       )}
       <HelperText error={error}>{helperText}</HelperText>
     </div>
diff --git a/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index 3f38f75a0..82cd67244 100644
--- a/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -23,7 +23,6 @@ exports[`<TextField> > renders and matches multiline snapshot 1`] = `
         name="name"
         placeholder="Placeholder"
         rows="3"
-        type="text"
       />
     </div>
   </div>
diff --git a/src/components/VideoDetails/VideoDetails.tsx b/src/components/VideoDetails/VideoDetails.tsx
index 6a3ae2d8b..fe821a3e5 100644
--- a/src/components/VideoDetails/VideoDetails.tsx
+++ b/src/components/VideoDetails/VideoDetails.tsx
@@ -7,6 +7,7 @@ import CollapsibleText from '#components/CollapsibleText/CollapsibleText';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 import Image from '#components/Image/Image';
 import type { ImageData, PosterMode } from '#types/playlist';
+import { testId } from '#src/utils/common';
 
 type Props = {
   title: string;
@@ -37,7 +38,7 @@ const VideoDetails: React.VFC<Props> = ({
   const isMobile = breakpoint === Breakpoint.xs;
 
   return (
-    <div className={styles.video} data-testid="video-details">
+    <div className={styles.video} data-testid={testId('video-details')}>
       <div
         className={classNames(styles.main, styles.mainPadding, {
           [styles.posterNormal]: posterMode === 'normal',
diff --git a/src/components/VideoDetailsInline/VideoDetailsInline.tsx b/src/components/VideoDetailsInline/VideoDetailsInline.tsx
index 152f6a41a..b3ebffdc5 100644
--- a/src/components/VideoDetailsInline/VideoDetailsInline.tsx
+++ b/src/components/VideoDetailsInline/VideoDetailsInline.tsx
@@ -6,6 +6,7 @@ import styles from './VideoDetailsInline.module.scss';
 import Tag from '#components/Tag/Tag';
 import CollapsibleText from '#components/CollapsibleText/CollapsibleText';
 import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+import { testId } from '#src/utils/common';
 
 type Props = {
   title: string | React.ReactNode;
@@ -25,7 +26,7 @@ const VideoDetailsInline: React.FC<Props> = ({ title, description, primaryMetada
   const TitleComponent = typeof title === 'string' ? 'h2' : 'div';
 
   return (
-    <div className={styles.details} data-testid="video-details-inline">
+    <div className={styles.details} data-testid={testId('video-details-inline')}>
       <TitleComponent className={styles.title}>{title}</TitleComponent>
       <div className={styles.inlinePlayerMetadata}>
         <div className={styles.primaryMetadata}>
diff --git a/src/components/VideoLayout/VideoLayout.tsx b/src/components/VideoLayout/VideoLayout.tsx
index cec9413fa..16bb303ff 100644
--- a/src/components/VideoLayout/VideoLayout.tsx
+++ b/src/components/VideoLayout/VideoLayout.tsx
@@ -8,9 +8,10 @@ import Filter from '#components/Filter/Filter';
 import VideoDetails from '#components/VideoDetails/VideoDetails';
 import VideoDetailsInline from '#components/VideoDetailsInline/VideoDetailsInline';
 import VideoList from '#components/VideoList/VideoList';
+import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
+import { testId } from '#src/utils/common';
 import type { ImageData, Playlist, PlaylistItem, PosterMode } from '#types/playlist';
 import type { AccessModel } from '#types/Config';
-import useBreakpoint, { Breakpoint } from '#src/hooks/useBreakpoint';
 
 type FilterProps = {
   filterMetadata?: React.ReactNode;
@@ -164,7 +165,7 @@ const VideoLayout: React.FC<Props> = ({
 
   if (inlineLayout) {
     return (
-      <div className={styles.videoInlineLayout} data-testid="inline-layout">
+      <div className={styles.videoInlineLayout} data-testid={testId('inline-layout')}>
         <div className={styles.player}>{player}</div>
         {renderRelatedVideos(isTablet)}
         <div className={styles.videoDetailsInline}>
@@ -184,7 +185,7 @@ const VideoLayout: React.FC<Props> = ({
   }
 
   return (
-    <div className={styles.videoCinemaLayout} data-testid="cinema-layout">
+    <div className={styles.videoCinemaLayout} data-testid={testId('cinema-layout')}>
       <VideoDetails
         title={title}
         description={description}
diff --git a/src/components/VideoList/VideoList.tsx b/src/components/VideoList/VideoList.tsx
index d9959ebed..66e6b3273 100644
--- a/src/components/VideoList/VideoList.tsx
+++ b/src/components/VideoList/VideoList.tsx
@@ -5,6 +5,7 @@ import styles from './VideoList.module.scss';
 
 import VideoListItem from '#components/VideoListItem/VideoListItem';
 import { isLocked } from '#src/utils/entitlements';
+import { testId } from '#src/utils/common';
 import type { AccessModel } from '#types/Config';
 import type { Playlist, PlaylistItem } from '#types/playlist';
 
@@ -38,7 +39,7 @@ function VideoList({
   hasSubscription,
 }: Props) {
   return (
-    <div className={classNames(styles.container, !!className && className)} data-testid="video-list">
+    <div className={classNames(styles.container, !!className && className)} data-testid={testId('video-list')}>
       {!!header && header}
       {playlist &&
         playlist.playlist.map((playlistItem: PlaylistItem) => {
diff --git a/src/containers/AccountModal/forms/Checkout.tsx b/src/containers/AccountModal/forms/Checkout.tsx
index 8ad1bd824..168de016c 100644
--- a/src/containers/AccountModal/forms/Checkout.tsx
+++ b/src/containers/AccountModal/forms/Checkout.tsx
@@ -161,7 +161,7 @@ const Checkout = () => {
         setUpdatingOrder(true);
         setPaymentError(undefined);
         await adyenPayment(data.data.paymentMethod);
-        await reloadActiveSubscription({ delay: 1000 });
+        await reloadActiveSubscription({ delay: 2000 });
         navigate(paymentSuccessUrl, { replace: true });
       } catch (error: unknown) {
         if (error instanceof Error) {
diff --git a/src/containers/Layout/Layout.tsx b/src/containers/Layout/Layout.tsx
index ce3b7fb78..8f57c0f24 100644
--- a/src/containers/Layout/Layout.tsx
+++ b/src/containers/Layout/Layout.tsx
@@ -19,7 +19,7 @@ import MenuButton from '#components/MenuButton/MenuButton';
 import UserMenu from '#components/UserMenu/UserMenu';
 import DevConfigSelector from '#components/DevConfigSelector/DevConfigSelector';
 import { addQueryParam } from '#src/utils/location';
-import { IS_DEV_BUILD, IS_TEST_MODE } from '#src/utils/common';
+import { IS_DEVELOPMENT_BUILD, IS_TEST_MODE } from '#src/utils/common';
 import { addConfigQueryParam } from '#src/utils/configOverride';
 
 const Layout = () => {
@@ -151,7 +151,7 @@ const Layout = () => {
       {!!footerText && <MarkdownComponent className={styles.footer} markdownString={footerText} inline />}
 
       {/* Config select control to improve testing experience */}
-      {IS_DEV_BUILD && !IS_TEST_MODE && <DevConfigSelector />}
+      {IS_DEVELOPMENT_BUILD && !IS_TEST_MODE && <DevConfigSelector />}
     </div>
   );
 };
diff --git a/src/containers/ShelfList/ShelfList.tsx b/src/containers/ShelfList/ShelfList.tsx
index 01fa38c72..35eb7fca4 100644
--- a/src/containers/ShelfList/ShelfList.tsx
+++ b/src/containers/ShelfList/ShelfList.tsx
@@ -19,6 +19,7 @@ import type { Content } from '#types/Config';
 import { useWatchHistoryStore } from '#src/stores/WatchHistoryStore';
 import { parseAspectRatio, parseTilesDelta } from '#src/utils/collection';
 import InfiniteScrollLoader from '#components/InfiniteScrollLoader/InfiniteScrollLoader';
+import { testId } from '#src/utils/common';
 
 const INITIAL_ROW_COUNT = 6;
 const LOAD_ROWS_COUNT = 4;
@@ -80,7 +81,7 @@ const ShelfList = ({ rows }: Props) => {
                   style={style}
                   role="row"
                   className={classNames(styles.shelfContainer, { [styles.featured]: row.featured })}
-                  data-testid={`shelf-${row.featured ? 'featured' : row.type !== 'playlist' ? row.type : slugify(title)}`}
+                  data-testid={testId(`shelf-${row.featured ? 'featured' : row.type !== 'playlist' ? row.type : slugify(title)}`)}
                 >
                   <div role="cell">
                     <ShelfComponent
diff --git a/src/i18n/locales/en_US/demo.json b/src/i18n/locales/en_US/demo.json
index be2edd03d..d4fe88c26 100644
--- a/src/i18n/locales/en_US/demo.json
+++ b/src/i18n/locales/en_US/demo.json
@@ -2,7 +2,7 @@
   "app_config_not_found": "Invalid or Missing App Config",
   "cancel_config_id": "Cancel",
   "click_to_unselect_config": "(click here to unselect this config)",
-  "currently_previewing_config": "You are currently previewing config: '{{configLocation}}'",
+  "currently_previewing_config": "You are currently previewing config: '{{configSource}}'",
   "learn_more": "Learn more",
   "please_enter_config_id": "Please enter an App Config ID from your JW Account",
   "submit_config_id": "Submit",
diff --git a/src/i18n/locales/en_US/error.json b/src/i18n/locales/en_US/error.json
index 9cea4a21c..038e2b7d2 100644
--- a/src/i18n/locales/en_US/error.json
+++ b/src/i18n/locales/en_US/error.json
@@ -1,6 +1,6 @@
 {
-  "generic_error_description": "There was an issue loading the application",
-  "generic_error_heading": "Try refreshing this page or come back later.",
+  "generic_error_description": "Try refreshing this page or come back later.",
+  "generic_error_heading": "There was an issue loading the application",
   "notfound_error_description": "This page doesn't exist.",
   "notfound_error_heading": "Not found",
   "playlist_not_found": "Playlist not found",
diff --git a/src/pages/Settings/Settings.module.scss b/src/pages/Settings/Settings.module.scss
deleted file mode 100644
index c514d6ee7..000000000
--- a/src/pages/Settings/Settings.module.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@use 'src/styles/variables';
-@use 'src/styles/theme';
diff --git a/src/pages/Settings/Settings.test.tsx b/src/pages/Settings/Settings.test.tsx
deleted file mode 100644
index 90bf8e106..000000000
--- a/src/pages/Settings/Settings.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Settings from './Settings';
-
-describe('<Settings>', () => {
-  test('renders and matches snapshot', () => {
-    const { container } = render(<Settings />);
-
-    expect(container).toMatchSnapshot();
-  });
-});
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
deleted file mode 100644
index 76669c8d3..000000000
--- a/src/pages/Settings/Settings.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import styles from './Settings.module.scss';
-
-type Props = {
-  prop?: string;
-};
-
-const Settings: React.FC<Props> = ({ prop }: Props) => {
-  return (
-    <div className={styles.Settings}>
-      <p>{prop}</p>
-    </div>
-  );
-};
-
-export default Settings;
diff --git a/src/pages/Settings/__snapshots__/Settings.test.tsx.snap b/src/pages/Settings/__snapshots__/Settings.test.tsx.snap
deleted file mode 100644
index b60933a5a..000000000
--- a/src/pages/Settings/__snapshots__/Settings.test.tsx.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`<Settings> > renders and matches snapshot 1`] = `
-<div>
-  <div>
-    <p />
-  </div>
-</div>
-`;
diff --git a/src/services/account.service.ts b/src/services/account.service.ts
index edeba3871..4c014b971 100644
--- a/src/services/account.service.ts
+++ b/src/services/account.service.ts
@@ -1,6 +1,6 @@
 import { post, put, patch, get } from './cleeng.service';
 
-import { getOverrideIP, IS_DEV_BUILD } from '#src/utils/common';
+import { getOverrideIP } from '#src/utils/common';
 import type {
   ChangePassword,
   GetCustomer,
@@ -18,18 +18,12 @@ import type {
 } from '#types/account';
 
 export const login: Login = async (payload, sandbox) => {
-  if (IS_DEV_BUILD) {
-    // @ts-ignore
-    payload.customerIP = window.overrideIP;
-  }
+  payload.customerIP = getOverrideIP();
   return post(sandbox, '/auths', JSON.stringify(payload));
 };
 
 export const register: Register = async (payload, sandbox) => {
-  if (IS_DEV_BUILD) {
-    // @ts-ignore
-    payload.customerIP = getOverrideIP();
-  }
+  payload.customerIP = getOverrideIP();
   return post(sandbox, '/customers', JSON.stringify(payload));
 };
 
@@ -66,7 +60,7 @@ export const refreshToken: RefreshToken = async (payload, sandbox) => {
 };
 
 export const getLocales: GetLocales = async (sandbox) => {
-  return get(sandbox, `/locales${IS_DEV_BUILD && getOverrideIP() ? '?customerIP=' + getOverrideIP() : ''}`);
+  return get(sandbox, `/locales${getOverrideIP() ? '?customerIP=' + getOverrideIP() : ''}`);
 };
 
 export const getCaptureStatus: GetCaptureStatus = async ({ customerId }, sandbox, jwt) => {
diff --git a/src/services/checkout.service.ts b/src/services/checkout.service.ts
index a6b072033..83de690bf 100644
--- a/src/services/checkout.service.ts
+++ b/src/services/checkout.service.ts
@@ -10,11 +10,10 @@ import type {
   PaymentWithPayPal,
   UpdateOrder,
 } from '#types/checkout';
-import { getOverrideIP, IS_DEV_BUILD } from '#src/utils/common';
+import { getOverrideIP } from '#src/utils/common';
 
 export const getOffer: GetOffer = async (payload, sandbox) => {
-  // @ts-ignore
-  return get(sandbox, `/offers/${payload.offerId}${IS_DEV_BUILD && getOverrideIP() ? '?customerIP=' + getOverrideIP() : ''}`);
+  return get(sandbox, `/offers/${payload.offerId}${getOverrideIP() ? '?customerIP=' + getOverrideIP() : ''}`);
 };
 
 export const createOrder: CreateOrder = async (payload, sandbox, jwt) => {
@@ -34,10 +33,8 @@ export const paymentWithoutDetails: PaymentWithoutDetails = async (payload, sand
 };
 
 export const paymentWithAdyen: PaymentWithAdyen = async (payload, sandbox, jwt) => {
-  if (IS_DEV_BUILD) {
-    // @ts-ignore
-    payload.customerIP = getOverrideIP();
-  }
+  // @ts-ignore
+  payload.customerIP = getOverrideIP();
   return post(sandbox, '/connectors/adyen/payments', JSON.stringify(payload), jwt);
 };
 
diff --git a/src/stores/ConfigStore.ts b/src/stores/ConfigStore.ts
index 86d54655a..7d1d61511 100644
--- a/src/stores/ConfigStore.ts
+++ b/src/stores/ConfigStore.ts
@@ -10,16 +10,12 @@ type CleengData = {
 };
 
 type ConfigState = {
-  configLocation: string;
-  isLoading: boolean;
   config: Config;
   accessModel: AccessModel;
   getCleengData: () => CleengData;
 };
 
 export const useConfigStore = createStore<ConfigState>('ConfigStore', (_, get) => ({
-  configLocation: '',
-  isLoading: false,
   config: {
     id: '',
     siteName: '',
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
index b7a72f23e..f68644f55 100644
--- a/src/stores/UIStore.ts
+++ b/src/stores/UIStore.ts
@@ -1,4 +1,4 @@
-import type { LocationDescriptor } from 'history';
+import type { Location } from 'react-router-dom';
 
 import { createStore } from './utils';
 
@@ -10,7 +10,7 @@ type UIState = {
   searchQuery: string;
   searchActive: boolean;
   userMenuOpen: boolean;
-  preSearchPage?: LocationDescriptor<unknown>;
+  preSearchPage?: Location;
 };
 
 export const useUIStore = createStore<UIState>('UIStore', () => ({
diff --git a/src/utils/common.ts b/src/utils/common.ts
index 4be7b44b8..b50a129fb 100644
--- a/src/utils/common.ts
+++ b/src/utils/common.ts
@@ -1,3 +1,5 @@
+import { overrideIPCookieKey } from '#test/constants';
+
 export function debounce<T extends (...args: any[]) => void>(callback: T, wait = 200) {
   let timeout: NodeJS.Timeout | null;
   return (...args: unknown[]) => {
@@ -49,14 +51,14 @@ export function calculateContrastColor(color: string) {
   return rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114 > 186 ? '#000000' : '#FFFFFF';
 }
 
-// Build is either Dev or Production
-// Mode can be dev, jwdev, demo, test, production, etc.
-export const IS_DEV_BUILD = import.meta.env.DEV;
+// Build is either Development or Production
+// Mode can be dev, jwdev, demo, test, prod, etc.
+export const IS_DEVELOPMENT_BUILD = import.meta.env.DEV;
 export const IS_DEMO_MODE = import.meta.env.MODE === 'demo';
 export const IS_TEST_MODE = import.meta.env.MODE === 'test';
 
 export function logDev(message: unknown, ...optionalParams: unknown[]) {
-  if (IS_DEV_BUILD && !IS_TEST_MODE) {
+  if (IS_DEVELOPMENT_BUILD && !IS_TEST_MODE) {
     if (optionalParams.length > 0) {
       console.info(message, optionalParams);
     } else {
@@ -66,9 +68,17 @@ export function logDev(message: unknown, ...optionalParams: unknown[]) {
 }
 
 export function getOverrideIP() {
+  if (!IS_TEST_MODE && !IS_DEVELOPMENT_BUILD) {
+    return undefined;
+  }
+
   return document.cookie
     .split(';')
-    .find((s) => s.trim().startsWith('overrideIP'))
+    .find((s) => s.trim().startsWith(`${overrideIPCookieKey}=`))
     ?.split('=')[1]
     .trim();
 }
+
+export function testId(value: string | undefined) {
+  return IS_DEVELOPMENT_BUILD || IS_TEST_MODE ? value : undefined;
+}
diff --git a/test-e2e/tests/account_test.ts b/test-e2e/tests/account_test.ts
index 88c8e9c4e..9f18ea390 100644
--- a/test-e2e/tests/account_test.ts
+++ b/test-e2e/tests/account_test.ts
@@ -24,7 +24,7 @@ Before(async ({ I }) => {
     I.fillField('lastName', lastName);
 
     I.click('Continue');
-    I.waitForLoaderDone(10);
+    I.waitForLoaderDone();
 
     I.clickCloseButton();
   });
@@ -255,7 +255,7 @@ Scenario('I can update my consents', async ({ I }) => {
   I.see('Cancel');
 
   I.click('Save');
-  I.waitForLoaderDone(5);
+  I.waitForLoaderDone();
 
   I.seeCheckboxIsChecked(consentCheckbox);
 });
@@ -303,7 +303,7 @@ function editAndSave(I: CodeceptJS.I, editButton: string, fields: { name: string
   }
 
   I.click('Save');
-  I.waitForLoaderDone(10);
+  I.waitForLoaderDone();
 
   I.dontSee('Save');
   I.dontSee('Cancel');
diff --git a/test-e2e/tests/inline_layout_test.ts b/test-e2e/tests/inline_layout_test.ts
index c873b94a0..33c8777d0 100644
--- a/test-e2e/tests/inline_layout_test.ts
+++ b/test-e2e/tests/inline_layout_test.ts
@@ -1,4 +1,4 @@
-import constants, { ShelfId } from '#utils/constants';
+import constants, { normalTimeout, ShelfId } from '#utils/constants';
 import { testConfigs } from '#test/constants';
 
 const videoListLocator = locate({ css: 'div[data-testid="video-list"]' });
@@ -87,7 +87,7 @@ Scenario('I can see the video auto play when play=1 is set', async ({ I }) => {
   I.seeInCurrentUrl(constants.baseUrl);
   I.amOnPage(`${constants.baseUrl}m/${constants.bigBuckBunnyPath}&play=1`);
 
-  I.waitForElement('video', 5);
+  I.waitForElement('video', normalTimeout);
   await I.waitForPlayerPlaying(constants.bigBuckBunnyTitle);
 });
 
@@ -95,7 +95,7 @@ Scenario("I don't see the video auto play when play=1 is not set", async ({ I })
   I.seeInCurrentUrl(constants.baseUrl);
   I.amOnPage(`${constants.baseUrl}m/${constants.bigBuckBunnyPath}`);
 
-  I.waitForElement('video', 5);
+  I.waitForElement('video', normalTimeout);
   await I.waitForPlayerState('idle');
 });
 
diff --git a/test-e2e/tests/login/account_test.ts b/test-e2e/tests/login/account_test.ts
index 18c2d8529..237280ddd 100644
--- a/test-e2e/tests/login/account_test.ts
+++ b/test-e2e/tests/login/account_test.ts
@@ -1,4 +1,4 @@
-import constants from '#utils/constants';
+import constants, { normalTimeout } from '#utils/constants';
 import passwordUtils from '#utils/password_utils';
 import { tryToSubmitForm, fillAndCheckField, checkField } from '#utils/login';
 import { testConfigs } from '#test/constants';
@@ -19,7 +19,7 @@ Before(async ({ I }) => {
 
   I.click('Sign in');
 
-  I.waitForElement(constants.loginFormSelector, 10);
+  I.waitForElement(constants.loginFormSelector, normalTimeout);
 });
 
 Scenario('I can close the modal', async ({ I }) => {
diff --git a/test-e2e/tests/login/home_test.ts b/test-e2e/tests/login/home_test.ts
index bdcf0eb56..c8e5dfb87 100644
--- a/test-e2e/tests/login/home_test.ts
+++ b/test-e2e/tests/login/home_test.ts
@@ -1,4 +1,4 @@
-import constants from '#utils/constants';
+import constants, { longTimeout } from '#utils/constants';
 import { testConfigs } from '#test/constants';
 import { LoginContext } from '#utils/password_utils';
 
@@ -46,7 +46,7 @@ Scenario('I can open the log in modal', async ({ I }) => {
   }
 
   I.click('Sign in');
-  I.waitForElement(constants.loginFormSelector, 15);
+  I.waitForElement(constants.loginFormSelector, longTimeout);
 
   await I.seeQueryParams({ u: 'login' });
 
diff --git a/test-e2e/tests/payments/coupons_test.ts b/test-e2e/tests/payments/coupons_test.ts
index e5da31984..c1faaaa95 100644
--- a/test-e2e/tests/payments/coupons_test.ts
+++ b/test-e2e/tests/payments/coupons_test.ts
@@ -19,7 +19,7 @@ Before(async ({ I }) => {
 Scenario('I can redeem coupons', async ({ I }) => {
   couponLoginContext = await I.registerOrLogin(couponLoginContext);
 
-  goToCheckout(I);
+  await goToCheckout(I);
 
   I.click('Redeem coupon');
   I.seeElement('input[name="couponCode"]');
@@ -42,7 +42,7 @@ Scenario('I can redeem coupons', async ({ I }) => {
   I.waitForLoaderDone();
   I.dontSee(formatPrice(12.5));
 
-  finishAndCheckSubscription(I, addYear(today), today);
+  await finishAndCheckSubscription(I, addYear(today), today);
 });
 
 Scenario('I can cancel a free subscription', async ({ I }) => {
diff --git a/test-e2e/tests/payments/subscription_test.ts b/test-e2e/tests/payments/subscription_test.ts
index c48ecae13..7ced4d95c 100644
--- a/test-e2e/tests/payments/subscription_test.ts
+++ b/test-e2e/tests/payments/subscription_test.ts
@@ -1,5 +1,5 @@
 import { LoginContext } from '#utils/password_utils';
-import constants from '#utils/constants';
+import constants, { longTimeout, normalTimeout } from '#utils/constants';
 import { overrideIP, goToCheckout, formatPrice, finishAndCheckSubscription, cancelPlan, renewPlan, addDays } from '#utils/payments';
 import { testConfigs } from '#test/constants';
 
@@ -100,7 +100,7 @@ Scenario('I can choose an offer', async ({ I }) => {
 Scenario('I can see payment types', async ({ I }) => {
   paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-  goToCheckout(I);
+  await goToCheckout(I);
 
   I.see('Credit Card');
   I.see('PayPal');
@@ -123,12 +123,12 @@ Scenario('I can see payment types', async ({ I }) => {
 Scenario('I can open the PayPal site', async ({ I }) => {
   paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-  goToCheckout(I);
+  await goToCheckout(I);
 
   I.click('PayPal');
   I.click('Continue');
 
-  I.waitInUrl('paypal.com', 15);
+  I.waitInUrl('paypal.com', longTimeout);
   // I'm sorry, I don't know why, but this test ends in a way that causes the next test to fail
   I.amOnPage(constants.baseUrl);
 });
@@ -136,12 +136,12 @@ Scenario('I can open the PayPal site', async ({ I }) => {
 Scenario('I can finish my subscription', async ({ I }) => {
   paidLoginContext = await I.registerOrLogin(paidLoginContext);
 
-  goToCheckout(I);
+  await goToCheckout(I);
 
   I.see('Credit Card');
 
   // Adyen credit card form is loaded asynchronously, so wait for it
-  I.waitForElement('[class*=adyen-checkout__field--cardNumber]', 5);
+  I.waitForElement('[class*=adyen-checkout__field--cardNumber]', normalTimeout);
 
   // Each of the 3 credit card fields is a separate iframe
   I.switchTo('[class*="adyen-checkout__field--cardNumber"] iframe');
@@ -159,7 +159,7 @@ Scenario('I can finish my subscription', async ({ I }) => {
   // @ts-expect-error
   I.switchTo(null); // Exit the iframe context back to the main document
 
-  finishAndCheckSubscription(I, addDays(today, 365), today);
+  await finishAndCheckSubscription(I, addDays(today, 365), today);
 
   I.seeAll(cardInfo);
 });
diff --git a/test-e2e/tests/register_test.ts b/test-e2e/tests/register_test.ts
index fd59e39f9..73ba035c9 100644
--- a/test-e2e/tests/register_test.ts
+++ b/test-e2e/tests/register_test.ts
@@ -1,4 +1,4 @@
-import constants from '#utils/constants';
+import constants, { longTimeout, normalTimeout } from '#utils/constants';
 import passwordUtils from '#utils/password_utils';
 import { testConfigs } from '#test/constants';
 
@@ -12,7 +12,7 @@ Before(async ({ I }) => {
   }
 
   I.click('Sign up');
-  I.waitForElement(constants.registrationFormSelector, 10);
+  I.waitForElement(constants.registrationFormSelector, normalTimeout);
 });
 
 Scenario('I can open the register modal', async ({ I }) => {
@@ -33,7 +33,7 @@ Scenario('I can open the register modal', async ({ I }) => {
 });
 
 Scenario('I can close the modal', async ({ I }) => {
-  I.waitForElement(constants.registrationFormSelector, 10);
+  I.waitForElement(constants.registrationFormSelector, normalTimeout);
 
   I.clickCloseButton();
   I.dontSeeElement(constants.registrationFormSelector);
@@ -121,7 +121,7 @@ Scenario('I get warned for duplicate users', ({ I }) => {
   I.fillField('Password', 'Password123!');
   I.checkOption('Terms and Conditions');
   I.click('Continue');
-  I.waitForLoaderDone(5);
+  I.waitForLoaderDone();
   I.see(constants.duplicateUserError);
 });
 
@@ -131,7 +131,7 @@ Scenario('I can register', async ({ I }) => {
 
   I.checkOption('Terms and Conditions');
   I.click('Continue');
-  I.waitForElement('form[data-testid="personal_details-form"]', 15);
+  I.waitForElement('form[data-testid="personal_details-form"]', longTimeout);
   I.dontSee(constants.duplicateUserError);
   I.dontSee(constants.registrationFormSelector);
 
@@ -139,7 +139,7 @@ Scenario('I can register', async ({ I }) => {
   I.fillField('lastName', 'Doe');
 
   I.click('Continue');
-  I.waitForLoaderDone(10);
+  I.waitForLoaderDone();
 
   I.see('Welcome to JW OTT Web App (AuthVod)');
 });
diff --git a/test-e2e/tests/video_detail_test.ts b/test-e2e/tests/video_detail_test.ts
index 77bc4ae57..1bd03bfe1 100644
--- a/test-e2e/tests/video_detail_test.ts
+++ b/test-e2e/tests/video_detail_test.ts
@@ -1,6 +1,6 @@
 import * as assert from 'assert';
 
-import constants from '#utils/constants';
+import constants, { longTimeout, normalTimeout } from '#utils/constants';
 import { testConfigs } from '#test/constants';
 import passwordUtils, { LoginContext } from '#utils/password_utils';
 
@@ -106,7 +106,7 @@ Scenario('I can play a trailer without signing in', async ({ I }) => {
   I.see(constants.signUpToWatch);
   I.click(constants.signUpToWatch);
   await I.checkPlayerClosed();
-  I.waitForText('Email', 5);
+  I.waitForText('Email', normalTimeout);
   I.see('Password');
   I.click('div[aria-label=Close]');
 
@@ -175,20 +175,20 @@ Scenario('I can share the media', async ({ I }) => {
 
   // The url should be copied to the clipboard
   assert.strictEqual(await I.executeScript(() => navigator.clipboard.readText()), url);
-  I.waitForInvisible('text="Copied url"', 5);
+  I.waitForInvisible('text="Copied url"', normalTimeout);
 });
 
 async function playBigBuckBunny(I) {
   I.useConfig(testConfigs.basicNoAuth);
   await I.openVideoCard(constants.bigBuckBunnyTitle);
-  I.waitForText(constants.startWatchingButton, 5);
+  I.waitForText(constants.startWatchingButton, normalTimeout);
   I.dontSeeInCurrentUrl('play=1');
   I.click(constants.startWatchingButton);
 
   I.seeInCurrentUrl('play=1');
 
-  I.waitForElement('div[class*="jwplayer"]', 10);
-  I.waitForElement('video', 5);
+  I.waitForElement('div[class*="jwplayer"]', longTimeout);
+  I.waitForElement('video', normalTimeout);
 
   await I.waitForPlayerPlaying(constants.bigBuckBunnyDescription);
 }
diff --git a/test-e2e/tests/watch_history/logged_in_test.ts b/test-e2e/tests/watch_history/logged_in_test.ts
index 98632fdcb..2a40c6ea0 100644
--- a/test-e2e/tests/watch_history/logged_in_test.ts
+++ b/test-e2e/tests/watch_history/logged_in_test.ts
@@ -1,4 +1,4 @@
-import constants, { makeShelfXpath, ShelfId } from '#utils/constants';
+import constants, { makeShelfXpath, normalTimeout, ShelfId } from '#utils/constants';
 import { checkElapsed, checkProgress, playVideo } from '#utils/watch_history';
 import { LoginContext } from '#utils/password_utils';
 import { testConfigs } from '#test/constants';
@@ -42,7 +42,7 @@ Scenario('I can get my watch history stored to my account after login', async ({
 
   await registerOrLogin(I);
   I.clickHome();
-  I.waitForText(constants.continueWatchingShelfTitle, 10);
+  I.waitForText(constants.continueWatchingShelfTitle, normalTimeout);
 
   await I.openVideoCard(videoTitle, ShelfId.allFilms);
   I.dontSee(constants.startWatchingButton);
diff --git a/test-e2e/utils/constants.ts b/test-e2e/utils/constants.ts
index 054025add..ed8a736bd 100644
--- a/test-e2e/utils/constants.ts
+++ b/test-e2e/utils/constants.ts
@@ -1,5 +1,8 @@
 const baseUrl = 'http://localhost:8080/';
 
+export const normalTimeout = 10;
+export const longTimeout = 20;
+
 export enum ShelfId {
   featured = 'featured',
   allFilms = 'all-films',
diff --git a/test-e2e/utils/payments.ts b/test-e2e/utils/payments.ts
index 8362159e7..e48a66f24 100644
--- a/test-e2e/utils/payments.ts
+++ b/test-e2e/utils/payments.ts
@@ -1,9 +1,14 @@
-import constants from './constants';
+import constants, { longTimeout } from './constants';
+
+import { overrideIPCookieKey } from '#test/constants';
 
 const yearlyPrice = formatPrice(50);
 
-export function goToCheckout(I: CodeceptJS.I) {
-  I.amOnPage(constants.offersUrl);
+export async function goToCheckout(I: CodeceptJS.I) {
+  await I.openMainMenu();
+  I.click('Payments');
+  I.click('Complete subscription');
+  I.waitForLoaderDone();
 
   I.click('Continue');
   I.waitForLoaderDone();
@@ -30,17 +35,29 @@ export function formatDate(date: Date) {
   return date.toLocaleDateString('en-US');
 }
 
-export function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date) {
+export async function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, today: Date) {
   I.click('Continue');
-  I.waitForLoaderDone(15);
-  I.see('Welcome to JW OTT Web App');
+  I.waitForLoaderDone(longTimeout);
+  I.waitForText('Welcome to JW OTT Web App (SVOD)');
   I.see('Thank you for subscribing to JW OTT Web App (SVOD). Please enjoy all our content.');
 
   I.click('Start watching');
 
-  I.waitForLoaderDone();
-  // It takes a few seconds for transactions to load
-  I.waitForText('Annual subscription', 10);
+  const transactionText = 'Annual subscription';
+
+  // It takes a few seconds for transactions to load, so try and refresh a few times
+  for (let i = 0; i < 5; i++) {
+    I.waitForLoaderDone();
+
+    if ((await I.grabTextFrom('body')).indexOf(transactionText) >= 0) {
+      break;
+    }
+    I.wait(1);
+    I.refreshPage();
+  }
+
+  I.see(transactionText);
+
   I.see(yearlyPrice);
   I.see('/year');
   I.see('Next billing date is on ' + formatDate(billingDate));
@@ -53,6 +70,8 @@ export function finishAndCheckSubscription(I: CodeceptJS.I, billingDate: Date, t
 
 export function cancelPlan(I: CodeceptJS.I, expirationDate: Date) {
   I.amOnPage(constants.paymentsUrl);
+  I.waitForLoaderDone();
+
   I.click('Cancel subscription');
   I.see('We are sorry to see you go.');
   I.see('You will be unsubscribed from your current plan by clicking the unsubscribe button below.');
@@ -64,7 +83,7 @@ export function cancelPlan(I: CodeceptJS.I, expirationDate: Date) {
 
   I.click('Cancel subscription');
   I.click('Unsubscribe');
-  I.waitForLoaderDone(10);
+  I.waitForLoaderDone();
   I.see('Miss you already.');
   I.see('You have been successfully unsubscribed. Your current plan will expire on ' + formatDate(expirationDate));
   I.click('Return to profile');
@@ -74,6 +93,8 @@ export function cancelPlan(I: CodeceptJS.I, expirationDate: Date) {
 
 export function renewPlan(I: CodeceptJS.I, billingDate: Date) {
   I.amOnPage(constants.paymentsUrl);
+  I.waitForLoaderDone();
+
   I.click('Renew subscription');
   I.see('Renew your subscription');
   I.see('By clicking the button below you can renew your plan.');
@@ -88,7 +109,7 @@ export function renewPlan(I: CodeceptJS.I, billingDate: Date) {
   I.click('Renew subscription');
 
   I.click('Renew subscription', '[class*=_dialog]');
-  I.waitForLoaderDone(10);
+  I.waitForLoaderDone();
   I.see('Your subscription has been renewed');
   I.see(`You have been successfully resubscribed. Your fee will be ${yearlyPrice} starting from ${formatDate(billingDate)}`);
   I.click('Back to profile');
@@ -100,5 +121,5 @@ export function renewPlan(I: CodeceptJS.I, billingDate: Date) {
 
 export function overrideIP(I: CodeceptJS.I) {
   // Set this as a cookie so it persists between page navigations (local storage would also work, but the permissions don't work)
-  I.setCookie({ name: 'overrideIP', value: '101.33.29.0', domain: 'localhost', path: '/' });
+  I.setCookie({ name: overrideIPCookieKey, value: '5.132.0.0', domain: 'localhost', path: '/' });
 }
diff --git a/test-e2e/utils/steps_file.ts b/test-e2e/utils/steps_file.ts
index 591bfc7f6..8fef7640b 100644
--- a/test-e2e/utils/steps_file.ts
+++ b/test-e2e/utils/steps_file.ts
@@ -1,7 +1,7 @@
 import * as assert from 'assert';
 
 import { TestConfig } from '#test/constants';
-import constants, { makeShelfXpath, ShelfId } from '#utils/constants';
+import constants, { makeShelfXpath, normalTimeout, ShelfId } from '#utils/constants';
 import passwordUtils, { LoginContext } from '#utils/password_utils';
 
 const configFileQueryKey = 'app-config';
@@ -14,14 +14,15 @@ const stepsObj = {
     url.searchParams.append(configFileQueryKey, config.id);
 
     this.amOnPage(url.toString());
+    this.waitForLoaderDone();
   },
   login: async function (this: CodeceptJS.I, { email, password }: { email: string; password: string }) {
     await this.openSignInMenu();
     this.click('Sign in');
 
-    this.waitForElement('input[name=email]', 10);
+    this.waitForElement('input[name=email]', normalTimeout);
     this.fillField('email', email);
-    this.waitForElement('input[name=password]', 10);
+    this.waitForElement('input[name=password]', normalTimeout);
     this.fillField('password', password);
     this.submitForm(15);
 
@@ -57,7 +58,7 @@ const stepsObj = {
   },
   fillRegisterForm: async function (this: CodeceptJS.I, context: LoginContext, onRegister?: () => void) {
     await this.seeQueryParams({ u: 'create-account' });
-    this.waitForElement(constants.registrationFormSelector, 10);
+    this.waitForElement(constants.registrationFormSelector, normalTimeout);
 
     this.fillField('Email', context.email);
     this.wait(2);
@@ -76,11 +77,11 @@ const stepsObj = {
       this.clickCloseButton();
     }
   },
-  submitForm: function (this: CodeceptJS.I, loaderTimeout: number | false = 5) {
+  submitForm: function (this: CodeceptJS.I, loaderTimeout: number | false = normalTimeout) {
     this.click('button[type="submit"]');
     this.waitForLoaderDone(loaderTimeout);
   },
-  waitForLoaderDone: function (this: CodeceptJS.I, timeout: number | false = 5) {
+  waitForLoaderDone: function (this: CodeceptJS.I, timeout: number | false = normalTimeout) {
     // Specify false when the loader is NOT expected to be shown at all
     if (timeout === false) {
       this.dontSeeElement(loaderElement);
@@ -182,7 +183,7 @@ const stepsObj = {
       );
     }, args);
   },
-  waitForPlayerPlaying: async function (title, tries = 10) {
+  waitForPlayerPlaying: async function (title, tries = normalTimeout) {
     this.seeElement('div[class*="jwplayer"]');
     this.see(title);
     await this.waitForPlayerState('playing', ['buffering', 'idle', ''], tries);
diff --git a/test/constants.ts b/test/constants.ts
index 0647be21f..a67228d19 100644
--- a/test/constants.ts
+++ b/test/constants.ts
@@ -36,3 +36,5 @@ export const jwDevEnvConfigs = {
     label: 'JW-Dev Basic Demo',
   } as TestConfig,
 };
+
+export const overrideIPCookieKey = 'overrideIP';
diff --git a/types/account.d.ts b/types/account.d.ts
index 507b6a372..248711f27 100644
--- a/types/account.d.ts
+++ b/types/account.d.ts
@@ -13,7 +13,11 @@ export type JwtDetails = {
   publisherId: number;
 };
 
-export type LoginPayload = {
+export type PayloadWithIPOverride = {
+  customerIP?: string;
+};
+
+export type LoginPayload = PayloadWithIPOverride & {
   email: string;
   password: string;
   offerId?: string;
@@ -44,7 +48,7 @@ export type ChooseOfferFormData = {
   offerId?: string;
 };
 
-export type RegisterPayload = {
+export type RegisterPayload = PayloadWithIPOverride & {
   email: string;
   password: string;
   offerId?: string;
diff --git a/types/checkout.d.ts b/types/checkout.d.ts
index 2a2da2cb2..fd7c57f92 100644
--- a/types/checkout.d.ts
+++ b/types/checkout.d.ts
@@ -1,3 +1,5 @@
+import type { PayloadWithIPOverride } from '#types/account';
+
 export type Offer = {
   offerId: string;
   offerPrice: number;
@@ -151,7 +153,7 @@ export type PaymentWithoutDetailsPayload = {
   orderId: number;
 };
 
-export type PaymentWithAdyenPayload = {
+export type PaymentWithAdyenPayload = PayloadWithIPOverride & {
   orderId: number;
   card: AdyenPaymentMethod;
 };
diff --git a/vite.config.ts b/vite.config.ts
index e67092e5a..3138fbb1d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,8 +8,18 @@ import { VitePWA } from 'vite-plugin-pwa';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
 
-// noinspection JSUnusedGlobalSymbols
-export default ({ mode }: { mode: string }) => {
+export default ({ mode, command }: { mode: string; command: string }) => {
+  // Shorten default mode names to dev / prod
+  // Also differentiates from build type (production / development)
+  mode = mode === 'development' ? 'dev' : mode;
+  mode = mode === 'production' ? 'prod' : mode;
+
+  // Make sure to builds are always production type,
+  // otherwise modes other than 'production' get built in dev
+  if (command === 'build') {
+    process.env.NODE_ENV = 'production';
+  }
+
   const plugins = [
     react(),
     eslintPlugin({ emitError: mode === 'production' || mode === 'demo' }), // Move linting to pre-build to match dashboard
@@ -21,7 +31,7 @@ export default ({ mode }: { mode: string }) => {
   ];
 
   // These files are only needed in dev / test / demo, so don't include in prod builds
-  if (mode !== 'production') {
+  if (mode !== 'prod') {
     plugins.push(
       viteStaticCopy({
         targets: [
@@ -41,8 +51,33 @@ export default ({ mode }: { mode: string }) => {
     server: {
       port: 8080,
     },
+    mode: mode,
     build: {
       outDir: './build/public',
+      cssCodeSplit: false,
+      minify: true,
+      rollupOptions: {
+        output: {
+          manualChunks: (id) => {
+            // I originally just wanted to separate react-dom as its own bundle,
+            // but you get an error at runtime without these dependencies
+            if (
+              id.includes('/node_modules/react-dom/') ||
+              id.includes('/node_modules/scheduler/') ||
+              id.includes('/node_modules/object-assign/') ||
+              id.includes('/node_modules/react/')
+            ) {
+              return 'react';
+            }
+
+            if (id.includes('/node_modules/')) {
+              return 'vendor';
+            }
+
+            return 'index';
+          },
+        },
+      },
     },
     css: {
       devSourcemap: true,
diff --git a/yarn.lock b/yarn.lock
index 759858f65..05cba39c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1037,7 +1037,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.17.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.2.tgz#66f68591605e59da47523c631416b18508779941"
   integrity sha512-hzeyJyMA1YGdJTuWU0e/j4wKXrU4OMFvY2MSlaI9B7VQb0r5cxTE3EAIS2Q7Tn2RIcDkRvTA/v2JsAEhxe99uw==
@@ -1798,11 +1798,6 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/history@^4.7.11":
-  version "4.7.11"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
-  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -1930,23 +1925,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-router-dom@^5.3.3":
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
-  integrity sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-    "@types/react-router" "*"
-
-"@types/react-router@*":
-  version "5.1.18"
-  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
-  integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
-  dependencies:
-    "@types/history" "^4.7.11"
-    "@types/react" "*"
-
 "@types/react@*", "@types/react@^17.0.14":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"
@@ -4911,18 +4889,6 @@ heimdalljs@^0.2.6:
   dependencies:
     rsvp "~3.2.1"
 
-history@^4.10.1:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
-
 hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
@@ -6048,7 +6014,7 @@ lookup-closest-locale@6.2.0:
   resolved "https://registry.yarnpkg.com/lookup-closest-locale/-/lookup-closest-locale-6.2.0.tgz#57f665e604fd26f77142d48152015402b607bcf3"
   integrity sha512-/c2kL+Vnp1jnV6K6RpDTHK3dgg0Tu2VVp+elEiJpjfS1UyY7AjOYHohRug6wT0OpoX2qFgNORndE9RqesfVxWQ==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -7761,11 +7727,6 @@ resolve-options@^1.1.0:
   dependencies:
     value-or-function "^3.0.0"
 
-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
 resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
@@ -8639,16 +8600,6 @@ timezone-mock@^1.3.4:
   resolved "https://registry.yarnpkg.com/timezone-mock/-/timezone-mock-1.3.4.tgz#16cc40bfad10d461f8a41ed7396eeb6ea1e1b2b3"
   integrity sha512-B0CGmOgMPVUZqp63eU/FGcDaL68JjHeiVnCF24K99Kj6AwCV15BHWMLCv8ZKSUq5oyVHTtg7p1ajOWfXB+0wnQ==
 
-tiny-invariant@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9"
-  integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==
-
-tiny-warning@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
-  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
-
 tinybench@^2.1.5:
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/tinybench/-/tinybench-2.1.5.tgz#6864341415ff0f912ed160cfd90b7f833ece674c"
@@ -9056,11 +9007,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
 value-or-function@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813"