Merge branch 'release-candidate' into release

Author: AntonLantukh

CHANGELOG.md

@@ -1,3 +1,15 @@
+## [6.1.2](https://github.com/jwplayer/ott-web-app/compare/v6.1.1...v6.1.2) (2024-05-21)
+
+
+### Bug Fixes
+
+* **a11y:** improve accessibility of offers modal ([af654ec](https://github.com/jwplayer/ott-web-app/commit/af654ecc9b481353522b8e08a2d8078a7b91aa2a))
+* **home:** broken home skeleton ([#523](https://github.com/jwplayer/ott-web-app/issues/523)) ([35cd2db](https://github.com/jwplayer/ott-web-app/commit/35cd2db26ed3ffee65a6e2edf38447bce7957c7f))
+* **menu:** reintroduce profile menu styling ([39fd840](https://github.com/jwplayer/ott-web-app/commit/39fd840019405797069e84f7dbfd9d10a746b534))
+* **project:** alignment of password toggle button ([642068d](https://github.com/jwplayer/ott-web-app/commit/642068dc4babba8e9660e9bfee6acf16931aa8aa))
+* **project:** favicon paths ([7acf234](https://github.com/jwplayer/ott-web-app/commit/7acf234446d8dc62e3f43b13f49c3b2ad3c72a8a))
+* remove simultaneous logins ([9aa4a71](https://github.com/jwplayer/ott-web-app/commit/9aa4a71d8c12865bdf13fadf3d93b420343bd672))
+
 ## [6.1.1](https://github.com/jwplayer/ott-web-app/compare/v6.1.0...v6.1.1) (2024-04-23)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jwp/ott",
-  "version": "6.1.1",
+  "version": "6.1.2",
   "private": true,
   "license": "Apache-2.0",
   "repository": "https://github.com/jwplayer/ott-web-app.git",

packages/common/src/constants.ts

@@ -75,8 +75,6 @@ export const DEFAULT_FEATURES = {
   watchListSizeLimit: MAX_WATCHLIST_ITEMS_COUNT,
 };
 
-export const simultaneousLoginWarningKey = 'simultaneous_logins';
-
 export const EPG_TYPE = {
   jwp: 'jwp',
   viewNexa: 'viewnexa',

packages/common/src/controllers/AccountController.ts

@@ -334,7 +334,7 @@ export default class AccountController {
 
     if (response.errors.length > 0) throw new Error(response.errors[0]);
 
-    await this.reloadSubscriptions({ delay: 2000 });
+    await this.reloadSubscriptions({ retry: 10 });
 
     return response?.responseData;
   };
@@ -386,7 +386,7 @@ export default class AccountController {
     return !!responseData?.accessGranted;
   };
 
-  reloadSubscriptions = async ({ delay }: { delay: number } = { delay: 0 }): Promise<unknown> => {
+  reloadSubscriptions = async ({ delay, retry }: { delay?: number; retry?: number } = { delay: 0, retry: 0 }): Promise<unknown> => {
     useAccountStore.setState({ loading: true });
 
     const { getAccountInfo } = useAccountStore.getState();
@@ -395,10 +395,10 @@ export default class AccountController {
 
     // The subscription data takes a few seconds to load after it's purchased,
     // so here's a delay mechanism to give it time to process
-    if (delay > 0) {
+    if (delay && delay > 0) {
       return new Promise((resolve: (value?: unknown) => void) => {
         setTimeout(() => {
-          this.reloadSubscriptions().finally(resolve);
+          this.reloadSubscriptions({ retry }).finally(resolve);
         }, delay);
       });
     }
@@ -418,6 +418,12 @@ export default class AccountController {
 
     let pendingOffer: Offer | null = null;
 
+    if (!activeSubscription && !!retry && retry > 0) {
+      const retryDelay = 1500; // Any initial delay has already occured, so we can set this to a fixed value
+
+      return await this.reloadSubscriptions({ delay: retryDelay, retry: retry - 1 });
+    }
+
     // resolve and fetch the pending offer after upgrade/downgrade
     try {
       if (activeSubscription?.pendingSwitchId) {

packages/common/src/stores/UIStore.ts

@@ -4,6 +4,7 @@ type UIState = {
   searchQuery: string;
   searchActive: boolean;
   userMenuOpen: boolean;
+  sideBarOpen: boolean;
   languageMenuOpen: boolean;
   preSearchPage?: string;
 };
@@ -12,5 +13,6 @@ export const useUIStore = createStore<UIState>('UIStore', () => ({
   searchQuery: '',
   searchActive: false,
   userMenuOpen: false,
+  sideBarOpen: false,
   languageMenuOpen: false,
 }));

packages/common/types/form.d.ts

@@ -1,5 +1,5 @@
-export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+export type UseFormChangeHandler = React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+export type UseFormBlurHandler = React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
 export type UseFormSubmitHandler = React.FormEventHandler<HTMLFormElement>;
 
 export type GenericFormErrors = { form: string };

packages/hooks-react/src/useCheckAccess.ts

@@ -31,7 +31,7 @@ const useCheckAccess = () => {
         const hasAccess = await accountController.checkEntitlements(offerId);
 
         if (hasAccess) {
-          await accountController.reloadSubscriptions({ delay: 2000 }); // Delay needed for backend processing (Cleeng API returns empty subscription, even after accessGranted from entitlements call
+          await accountController.reloadSubscriptions({ retry: 10, delay: 2000 });
           callback?.(true);
         } else if (--iterations === 0) {
           window.clearInterval(intervalRef.current);

packages/hooks-react/src/useCheckout.ts

@@ -47,7 +47,7 @@ const useCheckout = ({ onUpdateOrderSuccess, onSubmitPaymentWithoutDetailsSucces
     mutationKey: ['submitPaymentWithoutDetails'],
     mutationFn: checkoutController.paymentWithoutDetails,
     onSuccess: async () => {
-      await accountController.reloadSubscriptions({ delay: 1000 });
+      await accountController.reloadSubscriptions({ retry: 10 });
       onSubmitPaymentWithoutDetailsSuccess();
     },
   });

packages/hooks-react/src/useOffers.ts

@@ -1,5 +1,4 @@
-import { useMutation } from 'react-query';
-import { useEffect } from 'react';
+import { useMutation, useQuery } from 'react-query';
 import { shallow } from '@jwp/ott-common/src/utils/compare';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
@@ -21,9 +20,9 @@ const useOffers = () => {
     shallow,
   );
 
-  const { mutate: initialise, isLoading: isInitialisationLoading } = useMutation<void>({
-    mutationKey: ['initialiseOffers', requestedMediaOffers],
-    mutationFn: checkoutController.initialiseOffers,
+  const { isLoading: isInitialisationLoading } = useQuery<void>({
+    queryKey: ['initialiseOffers', requestedMediaOffers],
+    queryFn: checkoutController.initialiseOffers,
   });
 
   const chooseOffer = useMutation({
@@ -34,13 +33,9 @@ const useOffers = () => {
   const switchSubscription = useMutation({
     mutationKey: ['switchSubscription'],
     mutationFn: checkoutController.switchSubscription,
-    onSuccess: () => accountController.reloadSubscriptions({ delay: 7500 }), // @todo: Is there a better way to wait?
+    onSuccess: () => accountController.reloadSubscriptions({ delay: 3000, retry: 10 }), // A subscription switch usually takes at least 3 secs
   });
 
-  useEffect(() => {
-    initialise();
-  }, [requestedMediaOffers, initialise]);
-
   const hasMediaOffers = mediaOffers.length > 0;
   const hasSubscriptionOffers = subscriptionOffers.length > 0;
   const hasPremierOffers = requestedMediaOffers.some((mediaOffer) => mediaOffer.premier);

packages/hooks-react/src/usePlaylists.ts

@@ -14,9 +14,9 @@ const placeholderData = generatePlaylistPlaceholder(30);
 
 type UsePlaylistResult = {
   data: Playlist | undefined;
-  isLoading: boolean;
   isSuccess?: boolean;
   error?: unknown;
+  isPlaceholderData?: boolean;
 }[];
 
 const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undefined) => {
@@ -57,13 +57,13 @@ const usePlaylists = (content: Content[], rowsToLoad: number | undefined = undef
     if (type === PersonalShelf.Favorites) return { data: favorites, isLoading: false, isSuccess: true };
     if (type === PersonalShelf.ContinueWatching) return { data: watchHistory, isLoading: false, isSuccess: true };
 
-    const { data, isLoading, isSuccess, error } = playlistQueries[index];
+    const { data, isSuccess, error, isPlaceholderData } = playlistQueries[index];
 
     return {
       data,
-      isLoading,
       isSuccess,
       error,
+      isPlaceholderData,
     };
   });