Handle multiple plans from the AppConfig in the Web App

packages/common/package.json

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

packages/common/src/controllers/AccountController.ts

@@ -86,6 +86,8 @@ export default class AccountController {
 
     await this.profileController?.loadPersistedProfile();
     await this.accountService.initialize(config, url, this.logout);
+    await this.checkoutService.initialize(config);
+    await this.subscriptionService.initialize(config);
 
     // set the accessModel before restoring the user session
     useConfigStore.setState({ accessModel: this.accountService.accessModel });

packages/common/src/controllers/CheckoutController.ts

@@ -2,6 +2,7 @@ import { inject, injectable } from 'inversify';
 import i18next from 'i18next';
 
 import type {
+  AccessMethod,
   AddAdyenPaymentDetailsResponse,
   AdyenPaymentSession,
   CardPaymentData,
@@ -45,7 +46,7 @@ export default class CheckoutController {
   initialiseOffers = async () => {
     const requestedMediaOffers = useCheckoutStore.getState().requestedMediaOffers;
     const mediaOffers = requestedMediaOffers ? await this.getOffers({ offerIds: requestedMediaOffers.map(({ offerId }) => offerId) }) : [];
-    useCheckoutStore.setState({ mediaOffers });
+    useCheckoutStore.setState({ mediaOffers, accessMethod: this.getAccessMethod() });
 
     if (!useCheckoutStore.getState().subscriptionOffers.length && this.accountService.svodOfferIds) {
       const subscriptionOffers = await this.getOffers({ offerIds: this.accountService.svodOfferIds });
@@ -352,7 +353,15 @@ export default class CheckoutController {
     return this.checkoutService.getOffers(payload);
   };
 
+  getPlansWithPriceOffers = (searchString: string) => {
+    return this.checkoutService.getPlansWithPriceOffers(searchString);
+  };
+
   getEntitlements: GetEntitlements = (payload) => {
     return this.checkoutService.getEntitlements(payload);
   };
+
+  getAccessMethod = (): AccessMethod => {
+    return this.checkoutService.accessMethod;
+  };
 }

packages/common/src/env.ts

@@ -14,8 +14,8 @@ export type Env = {
 
 const env: Env = {
   APP_VERSION: '',
-  APP_API_BASE_URL: 'https://cdn.jwplayer.com',
-  APP_PLAYER_ID: 'M4qoGvUk',
+  APP_API_BASE_URL: 'https://content-portal.jwplatform.com',
+  APP_PLAYER_ID: 'ov7MiL14',
   APP_FOOTER_TEXT: '',
   APP_DEFAULT_LANGUAGE: 'en',
 };

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

@@ -1,4 +1,5 @@
 import type {
+  AccessMethod,
   AddAdyenPaymentDetails,
   CreateOrder,
   DeletePaymentMethod,
@@ -10,6 +11,7 @@ import type {
   GetInitialAdyenPayment,
   GetOffer,
   GetOffers,
+  GetPlansWithPriceOffers,
   GetOrder,
   GetPaymentMethods,
   GetSubscriptionSwitch,
@@ -20,10 +22,17 @@ import type {
   UpdateOrder,
   UpdatePaymentWithPayPal,
 } from '../../../types/checkout';
+import type { Config } from '../../../types/config';
 
 export default abstract class CheckoutService {
+  abstract initialize: (config: Config) => Promise<void>;
+
+  abstract accessMethod: AccessMethod;
+
   abstract getOffers: GetOffers;
 
+  abstract getPlansWithPriceOffers: GetPlansWithPriceOffers;
+
   abstract createOrder: CreateOrder;
 
   abstract updateOrder: UpdateOrder;

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

@@ -10,8 +10,11 @@ import type {
   UpdateCardDetails,
   UpdateSubscription,
 } from '../../../types/subscription';
+import type { Config } from '../../../types/config';
 
 export default abstract class SubscriptionService {
+  abstract initialize: (config: Config) => Promise<void>;
+
   abstract getActiveSubscription: GetActiveSubscription;
 
   abstract getAllTransactions: GetAllTransactions;

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

@@ -1,6 +1,7 @@
 import { inject, injectable } from 'inversify';
 
 import type {
+  AccessMethod,
   AddAdyenPaymentDetails,
   CreateOrder,
   CreateOrderPayload,
@@ -35,12 +36,16 @@ export default class CleengCheckoutService extends CheckoutService {
   private readonly cleengService: CleengService;
   private readonly getCustomerIP: GetCustomerIP;
 
+  accessMethod: AccessMethod = 'offer';
+
   constructor(cleengService: CleengService, @inject(GET_CUSTOMER_IP) getCustomerIP: GetCustomerIP) {
     super();
     this.cleengService = cleengService;
     this.getCustomerIP = getCustomerIP;
   }
 
+  initialize = async () => {};
+
   getOffers: GetOffers = async (payload) => {
     return await Promise.all(
       payload.offerIds.map(async (offerId) => {
@@ -55,6 +60,8 @@ export default class CleengCheckoutService extends CheckoutService {
     );
   };
 
+  getPlansWithPriceOffers = async () => [];
+
   getOffer: GetOffer = async (payload) => {
     const customerIP = await this.getCustomerIP();
 

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

@@ -24,6 +24,8 @@ export default class CleengSubscriptionService extends SubscriptionService {
     this.cleengService = cleengService;
   }
 
+  initialize = async () => {};
+
   getActiveSubscription: GetActiveSubscription = async ({ customerId }) => {
     const response = await this.getSubscriptions({ customerId });
 

packages/common/src/services/integrations/jwp/JWPAccountService.ts

@@ -51,7 +51,7 @@ export default class JWPAccountService extends AccountService {
   private readonly storageService;
   private clientId = '';
 
-  accessModel: AccessModel = ACCESS_MODEL.AUTHVOD;
+  accessModel: AccessModel = ACCESS_MODEL.SVOD;
   assetId: number | null = null;
   svodOfferIds: string[] = [];
   sandbox = false;
@@ -135,18 +135,14 @@ export default class JWPAccountService extends AccountService {
     // set environment
     this.sandbox = !!jwpConfig.useSandbox;
 
-    const env: string = this.sandbox ? InPlayerEnv.Development : InPlayerEnv.Production;
+    const env: string = this.sandbox ? InPlayerEnv.Daily : InPlayerEnv.Production;
     InPlayer.setConfig(env as Env);
 
     // calculate access model
-    if (jwpConfig.clientId) {
-      this.clientId = jwpConfig.clientId;
-    }
+    this.clientId = jwpConfig.clientId;
 
-    if (jwpConfig.assetId) {
-      this.accessModel = ACCESS_MODEL.SVOD;
-      this.assetId = jwpConfig.assetId;
-      this.svodOfferIds = jwpConfig.assetId ? [String(jwpConfig.assetId)] : [];
+    if (jwpConfig.planId) {
+      this.svodOfferIds = jwpConfig.planId ? jwpConfig.planId.split(',') : [];
     }
 
     // restore session from URL params

packages/common/src/services/integrations/jwp/JWPCheckoutService.ts

@@ -1,8 +1,10 @@
-import InPlayer, { type AccessFee, type MerchantPaymentMethod } from '@inplayer-org/inplayer.js';
+import InPlayer, { type MerchantPaymentMethod } from '@inplayer-org/inplayer.js';
 import { injectable } from 'inversify';
 
+import type { PlanPrice } from '../../../../../../packages/common/types/jw';
 import { isSVODOffer } from '../../../utils/offers';
 import type {
+  AccessMethod,
   CardPaymentData,
   CreateOrder,
   CreateOrderArgs,
@@ -19,13 +21,21 @@ import type {
   PaymentWithPayPal,
   UpdateOrder,
 } from '../../../../types/checkout';
+import type { Config } from '../../../../types/config';
 import CheckoutService from '../CheckoutService';
 import type { ServiceResponse } from '../../../../types/service';
 import { isCommonError } from '../../../utils/api';
 
 @injectable()
 export default class JWPCheckoutService extends CheckoutService {
   private readonly cardPaymentProvider = 'stripe';
+  siteId = '';
+
+  accessMethod: AccessMethod = 'plan';
+
+  initialize = async (config: Config) => {
+    this.siteId = config.siteId;
+  };
 
   private formatPaymentMethod = (method: MerchantPaymentMethod, cardPaymentProvider: string): PaymentMethod => {
     return {
@@ -50,10 +60,8 @@ export default class JWPCheckoutService extends CheckoutService {
    * Format a (Cleeng like) offer id for the given access fee (pricing option). For JWP, we need the asset id and
    * access fee id in some cases.
    */
-  private formatOfferId(offer: AccessFee) {
-    const ppvOffers = ['ppv', 'ppv_custom'];
-
-    return ppvOffers.includes(offer.access_type.name) ? `C${offer.item_id}_${offer.id}` : `S${offer.item_id}_${offer.id}`;
+  private formatOfferId(offer: PlanPrice & { planOriginalId: number }) {
+    return `${offer.access.type === 'subscription' ? 'S' : 'C'}${offer.planOriginalId}_${offer.id}`;
   }
 
   /**
@@ -74,18 +82,18 @@ export default class JWPCheckoutService extends CheckoutService {
     return offerId;
   }
 
-  private formatOffer = (offer: AccessFee): Offer => {
+  private formatOffer = ({ title, ...offer }: PlanPrice & { title: string; planOriginalId: number }): Offer => {
     return {
-      id: offer.id,
+      id: offer.original_id,
       offerId: this.formatOfferId(offer),
-      offerCurrency: offer.currency,
-      customerPriceInclTax: offer.amount,
-      customerCurrency: offer.currency,
-      offerTitle: offer.description,
+      offerCurrency: offer.metadata.currency,
+      customerPriceInclTax: offer.metadata.amount,
+      customerCurrency: offer.metadata.currency,
+      offerTitle: title,
       active: true,
-      period: offer.access_type.period === 'month' && offer.access_type.quantity === 12 ? 'year' : offer.access_type.period,
-      freePeriods: offer.trial_period ? 1 : 0,
-      planSwitchEnabled: offer.item.plan_switch_enabled ?? false,
+      period: offer.access.period,
+      freePeriods: offer.metadata.trial?.quantity ?? 0,
+      planSwitchEnabled: false,
     } as Offer;
   };
 
@@ -120,20 +128,88 @@ export default class JWPCheckoutService extends CheckoutService {
     };
   };
 
+  getPlans = async (searchString: string) => {
+    const response = await InPlayer.Payment.getSitePlans(this.siteId, searchString);
+
+    const plans = (response.data.plans || []).filter((plan) => plan.metadata.access_model === 'svod');
+
+    return plans;
+  };
+
+  getPlanPrices = async (planId: string) => {
+    const response = await InPlayer.Payment.getSitePlanPrices(this.siteId, planId);
+
+    return response.data.prices || [];
+  };
+
+  getPlansWithPriceOffers = async (searchString: string) => {
+    try {
+      const plans = await this.getPlans(searchString);
+
+      const plansWithPrices = await Promise.all(
+        plans.map(async (plan) => {
+          try {
+            const prices = await this.getPlanPrices(plan.id);
+
+            const planProps = { id: plan.id, name: plan.metadata.name };
+
+            if (prices.length) {
+              const offers = prices.map((offer) => this.formatOffer({ ...offer, planOriginalId: plan.original_id, title: plan.metadata.name }));
+
+              return [planProps, offers] as const;
+            }
+
+            return [planProps, [] as Offer[]] as const;
+          } catch {
+            throw new Error();
+          }
+        }),
+      );
+
+      return plansWithPrices.filter(([, offers]) => offers.length > 0);
+    } catch {
+      throw new Error('Failed to get plans');
+    }
+  };
+
+  getAppPlansPriceOffers = async (searchString: string) => {
+    try {
+      const plans = await this.getPlans(searchString);
+
+      const offers = await Promise.all(
+        plans.map(async (plan) => {
+          try {
+            const prices = await this.getPlanPrices(plan.id);
+
+            if (prices.length) {
+              return prices.map((offer) => this.formatOffer({ ...offer, planOriginalId: plan.original_id, title: plan.metadata.name }));
+            }
+
+            return [];
+          } catch {
+            throw new Error();
+          }
+        }),
+      );
+
+      return offers;
+    } catch {
+      throw new Error('Failed to get plans');
+    }
+  };
+
   getOffers: GetOffers = async (payload) => {
-    const offers = await Promise.all(
-      payload.offerIds.map(async (offerId) => {
-        try {
-          const { data } = await InPlayer.Asset.getAssetAccessFees(this.parseOfferId(offerId));
-
-          return data?.map((offer) => this.formatOffer(offer));
-        } catch {
-          throw new Error('Failed to get offers');
-        }
-      }),
-    );
+    if (!payload.offerIds.length) {
+      return [];
+    }
 
-    return offers.flat();
+    try {
+      const offers = await this.getAppPlansPriceOffers(`q=id:(${payload.offerIds.map((planId) => `"${planId}"`).join(' OR ')})`);
+
+      return offers.flat();
+    } catch {
+      throw new Error('Failed to get offers');
+    }
   };
 
   getPaymentMethods: GetPaymentMethods = async () => {