OWA-85: New payment flow

packages/common/package.json

@@ -9,7 +9,6 @@
     "test-watch": "TZ=UTC LC_ALL=en_US.UTF-8 vitest"
   },
   "dependencies": {
-    "@inplayer-org/inplayer.js": "^3.13.28",
     "broadcast-channel": "^7.0.0",
     "date-fns": "^3.6.0",
     "fast-xml-parser": "^4.5.0",

packages/common/src/controllers/AccessController.ts

@@ -10,7 +10,6 @@ import { useConfigStore } from '../stores/ConfigStore';
 import { INTEGRATION_TYPE } from '../modules/types';
 import { getNamedModule } from '../modules/container';
 import { useAccountStore } from '../stores/AccountStore';
-import { ApiError } from '../utils/api';
 import { useAccessStore } from '../stores/AccessStore';
 
 const ACCESS_TOKENS = 'access_tokens';
@@ -53,7 +52,7 @@ export default class AccessController {
   /**
    * Retrieves media by its ID using a passport token.
    * If no access tokens exist, it attempts to generate them, if the passport token is expired, it attempts to refresh them.
-   * If an access token retrieval fails or the user is not entitled to the content, an error is thrown.
+   * If the passport is not accepted, tries to generate new access tokens to get the latest entitled plans.
    */
   getMediaById = async (mediaId: string) => {
     const { entitledPlan } = useAccountStore.getState();
@@ -62,23 +61,27 @@ export default class AccessController {
       return;
     }
 
-    try {
-      const accessTokens = await this.generateOrRefreshAccessTokens();
+    const getMediaWithPassport = async (forceGenerate: boolean = false) => {
+      const accessTokens = forceGenerate ? await this.generateAccessTokens() : await this.generateOrRefreshAccessTokens();
       if (!accessTokens?.passport) {
-        throw new Error('Failed to get / generate access tokens and retrieve media.');
+        throw new Error('Failed to generate / refresh access tokens.');
       }
-      return await this.apiService.getMediaByIdWithPassport({ id: mediaId, siteId: this.siteId, planId: entitledPlan.id, passport: accessTokens.passport });
+
+      return await this.apiService.getMediaByIdWithPassport({
+        id: mediaId,
+        siteId: this.siteId,
+        planId: entitledPlan.id,
+        passport: accessTokens.passport,
+      });
+    };
+
+    try {
+      return await getMediaWithPassport();
     } catch (error: unknown) {
-      if (error instanceof ApiError && error.code === 403) {
-        // If the passport is invalid or expired, refresh the access tokens and try to get the media again.
-        const accessTokens = await this.refreshAccessTokens();
-        if (accessTokens?.passport) {
-          return await this.apiService.getMediaByIdWithPassport({ id: mediaId, siteId: this.siteId, planId: entitledPlan.id, passport: accessTokens.passport });
-        }
-
-        throw new Error('Failed to refresh access tokens and retrieve media.');
-      }
-      throw error;
+      // If the initial attempt fails, it may indicate the passport does not have the latest plans.
+      // Force new access tokens generation and retry fetching the media.
+      // TODO: Revisit this logic once we address the passport update possibility in Q4
+      return await getMediaWithPassport(true);
     }
   };
 

packages/common/src/controllers/AccountController.ts

@@ -9,15 +9,7 @@ import SubscriptionService from '../services/integrations/SubscriptionService';
 import JWPEntitlementService from '../services/JWPEntitlementService';
 import type { Offer } from '../../types/checkout';
 import type { Plan } from '../../types/plans';
-import type {
-  Capture,
-  Customer,
-  CustomerConsent,
-  EmailConfirmPasswordInput,
-  FirstLastNameInput,
-  GetCaptureStatusResponse,
-  SubscribeToNotificationsPayload,
-} from '../../types/account';
+import type { Capture, Customer, CustomerConsent, EmailConfirmPasswordInput, FirstLastNameInput, GetCaptureStatusResponse } from '../../types/account';
 import { assertFeature, assertModuleMethod, getModule, getNamedModule } from '../modules/container';
 import { INTEGRATION_TYPE } from '../modules/types';
 import type { ServiceResponse } from '../../types/service';
@@ -92,8 +84,8 @@ export default class AccountController {
     // set the accessModel before restoring the user session
     useConfigStore.setState({ accessModel: this.accountService.accessModel });
 
-    await this.loadUserData();
     await this.getEntitledPlans();
+    await this.loadUserData();
 
     useAccountStore.setState({ loading: false });
   };
@@ -173,6 +165,7 @@ export default class AccountController {
 
       if (response) {
         await this.accessController?.generateAccessTokens();
+        await this.getEntitledPlans();
         await this.afterLogin(response.user, response.customerConsents);
         return;
       }
@@ -203,6 +196,8 @@ export default class AccountController {
 
       if (response) {
         const { user, customerConsents } = response;
+        await this.accessController?.generateAccessTokens();
+        await this.getEntitledPlans();
         await this.afterLogin(user, customerConsents, true);
 
         return;
@@ -395,15 +390,14 @@ export default class AccountController {
   // TODO: Support for multiple plans should be added. Revisit this logic once the dependency on plan_id is changed.
   getEntitledPlans = async (): Promise<Plan | null> => {
     const { config, settings } = useConfigStore.getState();
-    const siteId = config.siteId;
     const isAccessBridgeEnabled = !!settings?.apiAccessBridgeUrl;
 
-    // This should be only used when access bridge is defined, regardless of the integration type.
+    // This should be only available when access bridge is defined, regardless of the integration type.
     if (!isAccessBridgeEnabled) {
       return null;
     }
 
-    const response = await this.entitlementService.getEntitledPlans({ siteId });
+    const response = await this.entitlementService.getEntitledPlans({ siteId: config.siteId });
     if (response?.plans?.length) {
       // Find the SVOD plan or fallback to the first available plan
       const entitledPlan = response.plans.find((plan) => plan.metadata.access_model === 'svod') || response.plans[0];
@@ -422,7 +416,7 @@ export default class AccountController {
   ): Promise<unknown> => {
     useAccountStore.setState({ loading: true });
 
-    const { getAccountInfo } = useAccountStore.getState();
+    const { getAccountInfo, entitledPlan } = useAccountStore.getState();
     const { customerId } = getAccountInfo();
     const { accessModel } = useConfigStore.getState();
 
@@ -444,7 +438,7 @@ export default class AccountController {
     }
 
     const [activeSubscription, transactions, activePayment] = await Promise.all([
-      this.subscriptionService.getActiveSubscription({ customerId }),
+      this.subscriptionService.getActiveSubscription({ customerId, entitledPlan }),
       this.subscriptionService.getAllTransactions({ customerId }),
       this.subscriptionService.getActivePayment({ customerId }),
     ]);
@@ -533,10 +527,6 @@ export default class AccountController {
     return this.accountService.getAuthData();
   };
 
-  subscribeToNotifications = async ({ uuid, onMessage }: SubscribeToNotificationsPayload) => {
-    return this.accountService.subscribeToNotifications({ uuid, onMessage });
-  };
-
   getFeatures() {
     return this.features;
   }

packages/common/src/controllers/CheckoutController.ts

@@ -28,6 +28,7 @@ import { useAccountStore } from '../stores/AccountStore';
 import { FormValidationError } from '../errors/FormValidationError';
 import { determineSwitchDirection } from '../utils/subscription';
 import { findDefaultCardMethodId } from '../utils/payments';
+import { useConfigStore } from '../stores/ConfigStore';
 
 @injectable()
 export default class CheckoutController {
@@ -62,8 +63,10 @@ export default class CheckoutController {
 
   getSubscriptionOfferIds = () => this.accountService.svodOfferIds;
 
-  chooseOffer = async (selectedOffer: Offer) => {
-    useCheckoutStore.setState({ selectedOffer });
+  chooseOffer = async (params: { offer: Offer; successUrl: string; cancelUrl: string }) => {
+    useCheckoutStore.setState({ selectedOffer: params.offer });
+
+    return this.checkoutService.chooseOffer(params);
   };
 
   initialiseOrder = async (offer: Offer): Promise<void> => {
@@ -349,6 +352,19 @@ export default class CheckoutController {
     return response.responseData;
   };
 
+  generateBillingPortalUrl = async (returnUrl: string) => {
+    assertModuleMethod(this.checkoutService.generateBillingPortalUrl, 'generateBillingPortalUrl is not available in checkout service');
+
+    // This method should only be available when Access Bridge is being used, regardless of the integration type.
+    const { settings } = useConfigStore.getState();
+    const isAccessBridgeEnabled = !!settings?.apiAccessBridgeUrl;
+    if (!isAccessBridgeEnabled) {
+      return null;
+    }
+
+    return this.checkoutService.generateBillingPortalUrl(returnUrl);
+  };
+
   getOffers: GetOffers = (payload) => {
     return this.checkoutService.getOffers(payload);
   };

packages/common/src/modules/register.ts

@@ -12,6 +12,7 @@ import JWPEntitlementService from '../services/JWPEntitlementService';
 import FavoriteService from '../services/FavoriteService';
 import ConfigService from '../services/ConfigService';
 import SettingsService from '../services/SettingsService';
+import PaymentService from '../services/PaymentService';
 
 import WatchHistoryController from '../controllers/WatchHistoryController';
 import CheckoutController from '../controllers/CheckoutController';
@@ -57,6 +58,7 @@ container.bind(GenericEntitlementService).toSelf();
 container.bind(ApiService).toSelf();
 container.bind(SettingsService).toSelf();
 container.bind(AccessService).toSelf();
+container.bind(PaymentService).toSelf();
 
 // Common controllers
 container.bind(AppController).toSelf();

packages/common/src/paths.tsx

@@ -14,7 +14,9 @@ export const PATH_USER = `${PATH_USER_BASE}/*`;
 export const RELATIVE_PATH_USER_ACCOUNT = 'my-account';
 export const RELATIVE_PATH_USER_FAVORITES = 'favorites';
 export const RELATIVE_PATH_USER_PAYMENTS = 'payments';
+export const RELATIVE_PATH_USER_SUBSCRIPTION = 'subscription';
 
 export const PATH_USER_ACCOUNT = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_ACCOUNT}`;
 export const PATH_USER_FAVORITES = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_FAVORITES}`;
 export const PATH_USER_PAYMENTS = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_PAYMENTS}`;
+export const PATH_USER_SUBSCRIPTIONS = `${PATH_USER_BASE}/${RELATIVE_PATH_USER_SUBSCRIPTION}`;

packages/common/src/services/PaymentService.ts

@@ -0,0 +1,93 @@
+import { inject, injectable } from 'inversify';
+
+import { API_ACCESS_BRIDGE_URL, INTEGRATION_TYPE } from '../modules/types';
+import type { IntegrationType } from '../../types/config';
+import type { Product } from '../../types/payment';
+import { logError } from '../logger';
+import { getNamedModule } from '../modules/container';
+
+import AccountService from './integrations/AccountService';
+
+@injectable()
+export default class PaymentService {
+  private readonly apiAccessBridgeUrl;
+  private readonly accountService;
+
+  private siteId: string = '';
+
+  constructor(@inject(API_ACCESS_BRIDGE_URL) apiAccessBridgeUrl: string, @inject(INTEGRATION_TYPE) integrationType: IntegrationType) {
+    this.apiAccessBridgeUrl = apiAccessBridgeUrl;
+    this.accountService = getNamedModule(AccountService, integrationType);
+  }
+
+  initialize = async (siteId: string) => {
+    this.siteId = siteId;
+  };
+
+  getProducts = async (): Promise<Product[]> => {
+    const url = `${this.apiAccessBridgeUrl}/v2/sites/${this.siteId}/products`;
+    const response = await fetch(url);
+
+    if (!response.ok) {
+      logError('PaymentService', 'Failed to fetch products.', {
+        status: response.status,
+        error: response.json(),
+      });
+
+      return [];
+    }
+
+    return (await response.json()) as Product[];
+  };
+
+  generateCheckoutSessionUrl = async (priceId: string, successUrl: string, cancelUrl: string): Promise<{ url: string | null }> => {
+    const auth = await this.accountService.getAuthData();
+
+    const url = `${this.apiAccessBridgeUrl}/v2/sites/${this.siteId}/checkout`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${auth?.jwt}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        price_id: priceId,
+        success_url: successUrl,
+        cancel_url: cancelUrl,
+      }),
+    });
+
+    if (!response.ok) {
+      logError('PaymentService', `Failed to generate checkout URL. Status: ${response.status}`);
+      return { url: null };
+    }
+
+    return (await response.json()) as { url: string };
+  };
+
+  generateBillingPortalUrl = async (returnUrl: string): Promise<{ url: string | null }> => {
+    const auth = await this.accountService.getAuthData();
+
+    const url = `${this.apiAccessBridgeUrl}/v2/sites/${this.siteId}/billing-portal`;
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${auth?.jwt}`,
+      },
+      body: JSON.stringify({
+        return_url: returnUrl,
+      }),
+    });
+
+    if (!response.ok) {
+      logError('PaymentService', 'Failed to generate billing portal url.', {
+        status: response.status,
+        error: response.json(),
+      });
+
+      return { url: null };
+    }
+
+    return (await response.json()) as { url: string };
+  };
+}

packages/common/src/services/integrations/AccountService.ts

@@ -8,7 +8,6 @@ import type {
   GetCustomerConsents,
   GetPublisherConsents,
   Login,
-  NotificationsData,
   Register,
   ResetPassword,
   GetSocialURLs,
@@ -87,8 +86,6 @@ export default abstract class AccountService {
 
   abstract getFavorites: GetFavorites;
 
-  abstract subscribeToNotifications: NotificationsData;
-
   abstract getSocialUrls?: GetSocialURLs;
 
   abstract exportAccountData?: ExportAccountData;

packages/common/src/services/integrations/CheckoutService.ts

@@ -1,5 +1,6 @@
 import type {
   AddAdyenPaymentDetails,
+  ChooseOffer,
   CreateOrder,
   DeletePaymentMethod,
   FinalizeAdyenPaymentDetails,
@@ -19,9 +20,12 @@ import type {
   SwitchSubscription,
   UpdateOrder,
   UpdatePaymentWithPayPal,
+  GenerateBillingPortalURL,
 } from '../../../types/checkout';
 
 export default abstract class CheckoutService {
+  abstract initializePaymentService: () => void;
+
   abstract getOffers: GetOffers;
 
   abstract createOrder: CreateOrder;
@@ -38,6 +42,8 @@ export default abstract class CheckoutService {
 
   abstract directPostCardPayment: GetDirectPostCardPayment;
 
+  abstract chooseOffer: ChooseOffer;
+
   abstract getOffer?: GetOffer;
 
   abstract getOrder?: GetOrder;
@@ -61,4 +67,6 @@ export default abstract class CheckoutService {
   abstract addAdyenPaymentDetails?: AddAdyenPaymentDetails;
 
   abstract finalizeAdyenPaymentDetails?: FinalizeAdyenPaymentDetails;
+
+  abstract generateBillingPortalUrl?: GenerateBillingPortalURL;
 }

packages/common/src/services/integrations/cleeng/CleengAccountService.ts

@@ -13,7 +13,6 @@ import type {
   JwtDetails,
   Login,
   LoginPayload,
-  NotificationsData,
   Register,
   RegisterPayload,
   ResetPassword,
@@ -344,10 +343,6 @@ export default class CleengAccountService extends AccountService {
     return (this.externalData['favorites'] || []) as SerializedFavorite[];
   };
 
-  subscribeToNotifications: NotificationsData = async () => {
-    return false;
-  };
-
   getSocialUrls: undefined;
 
   exportAccountData: undefined;