diff --git a/.depcheckrc.yaml b/.depcheckrc.yaml index d24eaa3c9..5b5e22f65 100644 --- a/.depcheckrc.yaml +++ b/.depcheckrc.yaml @@ -15,15 +15,16 @@ ignores: [ '\#types', '\#components', '\#utils', - # This is used in src/styles, which recognizes absolute paths from the repo root - 'src', - # To support e2e-reports - 'allure-commandline', + 'src', # This is used in src/styles, which recognizes absolute paths from the repo root + 'allure-commandline', # To support e2e-reports '@codeceptjs/allure-legacy', - # For extracting i18next translation keys - 'i18next-parser', - # To run linting checks - 'npm-run-all', - # SW code is injected at build time - 'virtual:pwa-register', + 'faker', + 'i18next-parser', # For extracting i18next translation keys + 'npm-run-all', # To run linting checks + 'virtual:pwa-register', # Service Worker code is injected at build time + 'vite-plugin-pwa/client', # Used to generate pwa framework + 'reflect-metadata', # Used for ioc resolution + '@babel/plugin-proposal-decorators', # Used to build with decorators for ioc resolution + 'babel-plugin-transform-typescript-metadata', # Used to build with decorators for ioc resolution + '@babel/core', # Required peer dependency for babel plugins above ] diff --git a/.github/workflows/release-create-release-candidate-branch.yml b/.github/workflows/release-create-release-candidate-branch.yml index 2e3e2c580..964292fdb 100644 --- a/.github/workflows/release-create-release-candidate-branch.yml +++ b/.github/workflows/release-create-release-candidate-branch.yml @@ -29,7 +29,7 @@ jobs: - name: Generate changelog id: changelog - uses: TriPSs/conventional-changelog-action@v4.1.1 + uses: TriPSs/conventional-changelog-action@v5.1.0 with: github-token: ${{ secrets.ACTION_TOKEN }} release-count: 0 @@ -37,13 +37,13 @@ jobs: git-push: false skip-ci: false preset: conventionalcommits - input-file: "CHANGELOG.md" + input-file: 'CHANGELOG.md' - name: Create Pull Request uses: peter-evans/create-pull-request@v5 with: token: ${{ secrets.ACTION_TOKEN }} - title: Release Candidate - ${{ steps.changelog.outputs.tag }}${{ github.ref_name != 'develop' && ' (Hotfix)' || ''}} + title: Release Candidate - ${{ steps.changelog.outputs.tag }}${{ github.ref_name != 'develop' && ' (Hotfix)' || ''}} base: release branch: ${{ github.ref_name == 'develop' && 'release-candidate' || 'hotfix-release-candidate' }} body: ${{ steps.changelog.outputs.clean_changelog }} diff --git a/.github/workflows/release-merge-back.yml b/.github/workflows/release-merge-back.yml index 109840070..b601b5dc7 100644 --- a/.github/workflows/release-merge-back.yml +++ b/.github/workflows/release-merge-back.yml @@ -19,6 +19,7 @@ jobs: uses: devmasx/merge-branch@master with: type: now + from_branch: release target_branch: develop message: 'chore: merge release to develop' github_token: ${{ secrets.ACTION_TOKEN }} diff --git a/CHANGELOG.md b/CHANGELOG.md index a878d8cb7..72d3deda7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,34 @@ +## [5.0.0](https://github.com/jwplayer/ott-web-app/compare/v4.31.1...v5.0.0) (2024-01-11) + + +### ⚠ BREAKING CHANGES + +* **project:** services and controllers modularization + +### Features + +* **payment:** generate billing receipt ([#401](https://github.com/jwplayer/ott-web-app/issues/401)) ([621e9e7](https://github.com/jwplayer/ott-web-app/commit/621e9e741530ced0be1739527f5da0b62c303384)) +* **project:** empty commit for services and controllers modularization. ([dda841a](https://github.com/jwplayer/ott-web-app/commit/dda841a92f7696a90f145e2c2d7ee77fdec6b6a3)) +* **project:** modularization docs ([#413](https://github.com/jwplayer/ott-web-app/issues/413)) ([547775e](https://github.com/jwplayer/ott-web-app/commit/547775e68a47d5915677b1ed2ab76c90f5f6ca2e)) +* **project:** services modularization ([#363](https://github.com/jwplayer/ott-web-app/issues/363)) ([6b1285b](https://github.com/jwplayer/ott-web-app/commit/6b1285b6f703e8a6de04b1ad9d7f3a2bb77897a9)) +* **project:** update changelog generation package ([#426](https://github.com/jwplayer/ott-web-app/issues/426)) ([016fd4e](https://github.com/jwplayer/ott-web-app/commit/016fd4e775fbe95df291a9257430b31e1e0e5bd7)) +* **project:** use xml for ad config ([#421](https://github.com/jwplayer/ott-web-app/issues/421)) ([2aec0dd](https://github.com/jwplayer/ott-web-app/commit/2aec0dde9a7624d28494720ca0164f925e983384)) +* **user:** add ability to add password to a social account ([b3aa739](https://github.com/jwplayer/ott-web-app/commit/b3aa7394131227aa2713a5951c6047f2ae7be804)) + + +### Bug Fixes + +* add truthy param check to evaluation of urlSigning enabled ([#422](https://github.com/jwplayer/ott-web-app/issues/422)) ([527ca02](https://github.com/jwplayer/ott-web-app/commit/527ca02088ba62765db442af66c5bfe6c14b573a)) +* **e2e:** fix cleeng test ([#414](https://github.com/jwplayer/ott-web-app/issues/414)) ([65ea840](https://github.com/jwplayer/ott-web-app/commit/65ea840449444ad0e5652aad76e27db5fa5fe54f)) +* **home:** parse the scheduled date ([#417](https://github.com/jwplayer/ott-web-app/issues/417)) ([de4ff48](https://github.com/jwplayer/ott-web-app/commit/de4ff48019835ea0bbeaa8641ef8bfafb7107bad)) +* **project:** change variable name ([#402](https://github.com/jwplayer/ott-web-app/issues/402)) ([8518460](https://github.com/jwplayer/ott-web-app/commit/85184608dc387675ed73274c56dedac5d57fc8f3)) +* **project:** fix error state for preview and demo modes ([#423](https://github.com/jwplayer/ott-web-app/issues/423)) ([ca9d905](https://github.com/jwplayer/ott-web-app/commit/ca9d905a8af4c49811fb65085520d4a98b9a54af)) +* **project:** pre-release fixes ([#430](https://github.com/jwplayer/ott-web-app/issues/430)) ([d0d86ff](https://github.com/jwplayer/ott-web-app/commit/d0d86ff134c944ee0fb46d4c71221166c670b1cc)) +* **series:** add empty media items filter ([#415](https://github.com/jwplayer/ott-web-app/issues/415)) ([c47ca66](https://github.com/jwplayer/ott-web-app/commit/c47ca66bfb1d757597555ee8d6c7e5373b9a7a70)) +* **series:** fix 'hasMore' param ([#416](https://github.com/jwplayer/ott-web-app/issues/416)) ([111fcfb](https://github.com/jwplayer/ott-web-app/commit/111fcfb548ee162b7e04930626a0c089f88ebcb7)) +* switch to playlist_multiselect ([0885580](https://github.com/jwplayer/ott-web-app/commit/08855805a9292eda3704094e0e9c196132b40738)) +* **user:** missing isCommon error check ([#403](https://github.com/jwplayer/ott-web-app/issues/403)) ([5e2ce14](https://github.com/jwplayer/ott-web-app/commit/5e2ce144ca8b1920df460178632d8448f3226d8a)) + ## [4.31.1](https://github.com/jwplayer/ott-web-app/compare/v4.31.0...v4.31.1) (2023-11-28) diff --git a/docs/modularization.md b/docs/modularization.md new file mode 100644 index 000000000..8c26de5c3 --- /dev/null +++ b/docs/modularization.md @@ -0,0 +1,87 @@ +# Architecture + +In order to implement a more structural approach of organizing the code and to reduce coupling we decided to add Dependency Injection (DI) and Inversion of Control (IOC) patterns support for services and controllers present in the application. We expect these patterns to be even more effective when working with different OTT platforms where JS code can be reused. + +## DI library + +InversifyJS is used to provide IOC container and to perform DI for both services and controllers. Injection happens automatically with the help of the reflect-metadata package (by adding `injectable` decorators). + +> **Important:** The type of the service / controller defined in the constructor should be used as a value, without the `type` keyword. + +Won't work: + +``` +import type {CleengService} from './cleeng.service'; + +@injectable() +export default class CleengAccountService extends AccountService { + private readonly cleengService: CleengService; + + constructor(cleengService: CleengService) { + ... + } +} +``` + +Will work: + +``` +import CleengService from './cleeng.service'; + +@injectable() +export default class CleengAccountService extends AccountService { + private readonly cleengService: CleengService; + + constructor(cleengService: CleengService) { + ... + } +} +``` + +This is the price we need to pay to remove `inject` decorators from the constructor to avoid boilerplate code. + +## Initialization + +We use [register](src/modules/register.ts) function to initialize services and controllers. Some services don't depend on any integration provider (like `ConfigService` or `EpgService`), while such services as `CleengAccountService` or `InplayerAccountService` depend on the provider and get injected into controllers conditionally based on the `INTEGRATION_TYPE` dynamic value (`JWP` or `CLEENG`). + +Initialization starts in the [index.tsx](src/index.tsx) file where we register services. We do it outside of the react component to make services available in different parts of the application. + +The app is loaded in the [useBootstrapApp](src/hooks/useBootstrapApp.ts) hook with the help of the `AppController` which is responsible for retrieving data from the Config and Settings services, initializing the initial state of the application and hitting init methods of the base app's controllers. + +## Controllers and Services + +Both Controllers and Services are defined as classes. We use `injectable` decorator to make them visible for the InversifyJS library. + +> **Important:** Use arrow functions for class methods to avoid lost context. + +### Services + +Business logic should be mostly stored in Services. We use services to communicate with the back-end and to process the data we receive. + +Services also help to manage different dependencies. For example, we can use them to support several integration providers. If this is the case we should also create a common interface and make dependant entities use the interface instead of the actual implementation. This is how inversion of control principle can be respected. Then when we inject services into controllers, we use interface types instead of the implementation classes. + +All in all: + +- Services contain the actual business logic; +- They can be injected into controllers (which orchestrate different services) or into other services; +- We should avoid using services in the View part of the application and prefer controllers instead. However, it is still possible to do in case controllers fully duplicate service's methods (EPG service). In this case we can use a react hook (for the web app) and get access to the service there. +- One service can use provides different implementations. For example, we can split it into Cleeng and JWP implementation (account, checkout and so on). + +> **Important:** Services should be written in an environment / client agnostic way (i.e. no Window usage) to be reused on different platforms (Web, SmartTV and so on). + +### Controllers + +Controllers bind different parts of the application. Controllers use services, store and provide methods to operate with business logic in the UI and in the App. If we need to share code across controllers then it is better to promote the code to the next level (we do it in the AppController). Then it is possible to modify both controllers to call the same (now shared) code. + +- They can be called from the View part of the application; +- They use the data from the Store and from the UI to operate different injected services; +- They use the Store to persist the entities when needed; +- They return data back to the UI when needed. + +> **Important:** We should try to avoid controllers calling each other because it leads to circular dependencies and makes the code messy. However now they do it sometimes (to be refactored). + +### Controllers / Services retrieval + +To get access to the service / controller [getModule](src/modules/container.ts) utility can be used. It also accepts a `required` param which can be used in case the presence of the service is optional. If `required` is provided but service itself is not bound then the error will be thrown. + +`getNamedModule` function is mostly use in controllers to retrieve integration-specific services, like AccountService or CheckoutService. diff --git a/package.json b/package.json index 1279accad..d79c45fe4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jw-ott-webapp", - "version": "4.31.1", + "version": "5.0.0", "main": "index.js", "repository": "https://github.com/jwplayer/ott-web-app.git", "author": "JW Player", @@ -43,7 +43,7 @@ "dependencies": { "@adyen/adyen-web": "^5.42.1", "@codeceptjs/allure-legacy": "^1.0.2", - "@inplayer-org/inplayer.js": "^3.13.21", + "@inplayer-org/inplayer.js": "^3.13.24", "classnames": "^2.3.1", "date-fns": "^2.28.0", "dompurify": "^2.3.8", @@ -51,6 +51,7 @@ "i18next-browser-languagedetector": "^6.1.1", "i18next-http-backend": "^2.2.0", "ini": "^3.0.1", + "inversify": "^6.0.1", "jwt-decode": "^3.1.2", "lodash.merge": "^4.6.2", "marked": "^4.1.1", @@ -63,11 +64,14 @@ "react-infinite-scroller": "^1.2.6", "react-query": "^3.39.0", "react-router-dom": "^6.4.0", + "reflect-metadata": "^0.1.13", "wicg-inert": "^3.1.1", "yup": "^0.32.9", "zustand": "^3.6.9" }, "devDependencies": { + "@babel/core": "^7.22.11", + "@babel/plugin-proposal-decorators": "^7.22.10", "@codeceptjs/configure": "^0.8.0", "@commitlint/cli": "^12.1.1", "@commitlint/config-conventional": "^12.1.1", @@ -90,6 +94,7 @@ "@vitejs/plugin-react": "^4.0.4", "@vitest/coverage-v8": "^0.33.0", "allure-commandline": "^2.17.2", + "babel-plugin-transform-typescript-metadata": "^0.3.2", "codeceptjs": "3.5.5", "confusing-browser-globals": "^1.0.10", "csv-parse": "^5.4.0", diff --git a/public/locales/en/user.json b/public/locales/en/user.json index 2d7f31b6d..6b9844ef8 100644 --- a/public/locales/en/user.json +++ b/public/locales/en/user.json @@ -1,6 +1,9 @@ { "account": { "about_you": "Profile info", + "add_password": "Add password", + "add_password_error": "Failed to proceed to the Add Password screen. Please try again.", + "add_password_modal_text": "We sent instructions to {{email}} on how to add a password. If you don’t receive the email within a few minutes, check your spam folder or", "add_profile": "Add profile", "cancel": "Cancel", "confirm_password": "Confirm password", @@ -20,6 +23,10 @@ }, "title": "Delete account" }, + "delete_account_password_warning": { + "text": "To delete your account when using social media account(s) for sign-in, you will first need to add an account password and then initiate the deletion process again.", + "title": "Warning" + }, "edit_account": "Edit account", "edit_information": "Edit information", "edit_password": "Edit password", @@ -44,6 +51,9 @@ "manage_profiles": "Manage profiles", "other_registration_details": "Other registration details", "password": "Password", + "proceed_to_adding_a_password": "Proceed to adding a password", + "resend_mail": "resend the email.", + "resend_mail_error": "An error occurred while resending the email. Please try again.", "save": "Save", "security": "Password", "terms_and_tracking": "Legal & Marketing", diff --git a/public/locales/es/user.json b/public/locales/es/user.json index 4accc14c7..1081c26c7 100644 --- a/public/locales/es/user.json +++ b/public/locales/es/user.json @@ -1,6 +1,9 @@ { "account": { "about_you": "Información de perfil", + "add_password": "Agregar contraseña", + "add_password_error": "No se pudo pasar a la pantalla Agregar contraseña. Inténtalo de nuevo.", + "add_password_modal_text": "Enviamos instrucciones a {{email}} sobre cómo agregar una contraseña. Si no recibes el correo electrónico en unos minutos, revisa tu carpeta de spam o", "add_profile": "Añadir perfil", "cancel": "Cancelar", "confirm_password": "Confirmar contraseña", @@ -20,6 +23,10 @@ }, "title": "Borrar cuenta" }, + "delete_account_password_warning": { + "text": "Para eliminar su cuenta cuando utiliza cuentas de redes sociales para iniciar sesión, primero deberá agregar una contraseña de cuenta y luego iniciar el proceso de eliminación nuevamente.", + "title": "Advertencia" + }, "edit_account": "Editar cuenta", "edit_information": "Editar información", "edit_password": "Editar contraseña", @@ -44,6 +51,9 @@ "manage_profiles": "Administrar perfiles", "other_registration_details": "Otros detalles de registro", "password": "Contraseña", + "proceed_to_adding_a_password": "Proceda a agregar una contraseña", + "resend_mail": "reenvíe el correo electrónico.", + "resend_mail_error": "Se produjo un error al reenviar el correo electrónico. Inténtalo de nuevo.", "save": "Guardar", "security": "Contraseña", "terms_and_tracking": "Jurídico y marketing", diff --git a/scripts/build-tools/settings.ts b/scripts/build-tools/settings.ts new file mode 100644 index 000000000..898586995 --- /dev/null +++ b/scripts/build-tools/settings.ts @@ -0,0 +1,17 @@ +/* eslint-disable no-console */ +import fs from 'fs'; + +export const initSettings = (mode: string) => { + const localFile = `ini/.webapp.${mode}.ini`; + const templateFile = `ini/templates/.webapp.${mode}.ini`; + + // The build ONLY uses .ini files in /ini to include in the build output. + // All .ini files in the directory are git ignored to customer specific values out of source control. + // However, this script will automatically create a .ini file for the current mode if it doesn't exist + // by copying the corresponding mode file from the ini/templates directory. + if (!fs.existsSync(localFile) && fs.existsSync(templateFile)) { + fs.copyFileSync(templateFile, localFile); + } + + return localFile; +}; diff --git a/scripts/content-types/content-types.json b/scripts/content-types/content-types.json index e63b6baa0..2162962f5 100644 --- a/scripts/content-types/content-types.json +++ b/scripts/content-types/content-types.json @@ -326,7 +326,7 @@ "description": "The playlist ID to display on this hub page", "required": true, "details": { - "field_type": "playlist_select" + "field_type": "playlist_multiselect" } }, { diff --git a/src/App.tsx b/src/App.tsx index d0ed19a89..6591ca415 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useState } from 'react'; import { BrowserRouter } from 'react-router-dom'; import QueryProvider from '#src/containers/QueryProvider/QueryProvider'; -import '#src/screenMapping'; -import '#src/styles/main.scss'; import initI18n from '#src/i18n/config'; import Root from '#components/Root/Root'; import { ErrorPageWithoutTranslation } from '#components/ErrorPage/ErrorPage'; import LoadingOverlay from '#components/LoadingOverlay/LoadingOverlay'; +import '#src/screenMapping'; +import '#src/styles/main.scss'; interface State { isLoading: boolean; error?: Error; diff --git a/src/components/Account/Account.test.tsx b/src/components/Account/Account.test.tsx index 3d6b0e363..dff1f7a18 100644 --- a/src/components/Account/Account.test.tsx +++ b/src/components/Account/Account.test.tsx @@ -6,6 +6,19 @@ import customer from '#test/fixtures/customer.json'; import { useAccountStore } from '#src/stores/AccountStore'; import { renderWithRouter } from '#test/testUtils'; import type { Consent } from '#types/account'; +import AccountController from '#src/stores/AccountController'; + +vi.mock('#src/modules/container', () => ({ + getModule: (type: typeof AccountController) => { + switch (type) { + case AccountController: + return { + exportAccountData: vi.fn(), + getFeatures: vi.fn(() => ({ canChangePasswordWithOldPassword: false, canExportAccountData: false, canDeleteAccount: false })), + }; + } + }, +})); describe('', () => { test('renders and matches snapshot', () => { diff --git a/src/components/Account/Account.tsx b/src/components/Account/Account.tsx index 60e4c2b92..5342090d0 100644 --- a/src/components/Account/Account.tsx +++ b/src/components/Account/Account.tsx @@ -24,7 +24,8 @@ import useToggle from '#src/hooks/useToggle'; import { formatConsentsFromValues, formatConsents, formatConsentValues, formatConsentsToRegisterFields } from '#src/utils/collection'; import { addQueryParam } from '#src/utils/location'; import { useAccountStore } from '#src/stores/AccountStore'; -import { exportAccountData, updateConsents, updateUser } from '#src/stores/AccountController'; +import AccountController from '#src/stores/AccountController'; +import { getModule } from '#src/modules/container'; type Props = { panelClassName?: string; @@ -41,11 +42,13 @@ interface FormErrors { } const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true }: Props): JSX.Element => { + const accountController = getModule(AccountController); + const { t } = useTranslation('user'); const navigate = useNavigate(); const location = useLocation(); const [viewPassword, toggleViewPassword] = useToggle(); - const exportData = useMutation(exportAccountData); + const exportData = useMutation(accountController.exportAccountData); const [isAlertVisible, setIsAlertVisible] = useState(false); const exportDataMessage = exportData.isSuccess ? t('account.export_data_success') : t('account.export_data_error'); @@ -55,18 +58,21 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } } }, [exportData.isSuccess, exportData.isError]); - const { customer, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount } = useAccountStore( - ({ user, customerConsents, publisherConsents, canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount }) => ({ + const { customer, customerConsents, publisherConsents } = useAccountStore( + ({ user, customerConsents, publisherConsents }) => ({ customer: user, customerConsents, publisherConsents, - canChangePasswordWithOldPassword, - canExportAccountData, - canDeleteAccount, }), shallow, ); + const { canChangePasswordWithOldPassword, canExportAccountData, canDeleteAccount } = accountController.getFeatures(); + // users authenticated with social (register_source: facebook, google, twitter) do not have password by default + const registerSource = customer?.metadata?.register_source; + const isSocialLogin = (registerSource && registerSource !== 'inplayer') || false; + const shouldAddPassword = (isSocialLogin && !customer?.metadata?.has_password) || false; + const [termsConsents, nonTermsConsents] = useMemo(() => { const terms: Consent[] = []; const nonTerms: Consent[] = []; @@ -173,7 +179,14 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } }; } - const editPasswordClickHandler = () => { + const editPasswordClickHandler = async () => { + if (!customer) { + return; + } + if (isSocialLogin && shouldAddPassword) { + await accountController.resetPassword(customer.email, ''); + return navigate(addQueryParam(location, 'u', 'add-password')); + } const modal = canChangePasswordWithOldPassword ? 'edit-password' : 'reset-password'; navigate(addQueryParam(location, 'u', modal)); }; @@ -188,7 +201,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } onSubmit: (values) => { const consents = formatConsentsFromValues(publisherConsents, { ...values.metadata, ...values.consentsValues }); - return updateUser({ + return accountController.updateUser({ firstName: values.firstName || '', lastName: values.lastName || '', metadata: { @@ -226,7 +239,7 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } formSection({ label: t('account.email'), onSubmit: (values) => - updateUser({ + accountController.updateUser({ email: values.email || '', confirmationPassword: values.confirmationPassword, }), @@ -269,12 +282,18 @@ const Account = ({ panelClassName, panelHeaderClassName, canUpdateEmail = true } }), formSection({ label: t('account.security'), - editButton: