feat(project): jwp tvod implementation

src/hooks/useOffers.ts

@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import shallow from 'zustand/shallow';
 
 import useClientIntegration from './useClientIntegration';
@@ -19,23 +19,21 @@ const useOffers = () => {
   if (!checkoutService) throw new Error('checkout service is not available');
 
   const { requestedMediaOffers } = useCheckoutStore(({ requestedMediaOffers }) => ({ requestedMediaOffers }), shallow);
+  const hasTvodOffer = (requestedMediaOffers || []).some((offer) => offer.offerId);
   const hasPremierOffer = (requestedMediaOffers || []).some((offer) => offer.premier);
-  const [offerType, setOfferType] = useState<OfferType>(accessModel === 'SVOD' ? 'svod' : 'tvod');
+  const isPPV = hasTvodOffer || hasPremierOffer;
+  const [offerType, setOfferType] = useState<OfferType>(accessModel === 'SVOD' && !isPPV ? 'svod' : 'tvod');
 
   const offerIds: string[] = useMemo(() => {
     return [...(requestedMediaOffers || []).map(({ offerId }) => offerId), ...clientOffers].filter(Boolean);
   }, [requestedMediaOffers, clientOffers]);
 
   const { data: allOffers = [], isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutService.getOffers({ offerIds }, sandbox));
 
-  useEffect(() => {
-    if (isLoading) return;
-    if (hasPremierOffer) setOfferType('tvod');
-  }, [isLoading, hasPremierOffer, setOfferType]);
-
   // The `offerQueries` variable mutates on each render which prevents the useMemo to work properly.
   return useMemo(() => {
     const offers = allOffers.filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
+
     const offersDict = (!isLoading && Object.fromEntries(offers.map((offer: Offer) => [offer.offerId, offer]))) || {};
     // we need to get the offerIds from the offer responses since it contains different offerIds based on the customers
     // location. E.g. if an offer is configured as `S12345678` it becomes `S12345678_US` in the US.
@@ -51,7 +49,7 @@ const useOffers = () => {
       offers,
       offersDict,
     };
-  }, [requestedMediaOffers, allOffers]);
+  }, [requestedMediaOffers, allOffers, offerType]);
 };
 
 export default useOffers;

src/services/api.service.ts

@@ -16,17 +16,19 @@ enum ImageProperty {
 
 /**
  * Transform incoming media items
- * - Parses productId into MediaOffer[] for all cleeng offers
+ * - Parses productId into MediaOffer[] for all cleexng offers
  */
 export const transformMediaItem = (item: PlaylistItem, playlist?: Playlist) => {
   const config = ConfigStore.getState().config;
 
+  const offerKeys = Object.keys(config?.integrations)[0];
+
   return {
     ...item,
     shelfImage: generateImageData(config, ImageProperty.SHELF, item, playlist),
     backgroundImage: generateImageData(config, ImageProperty.BACKGROUND, item),
     channelLogoImage: generateImageData(config, ImageProperty.CHANNEL_LOGO, item),
-    mediaOffers: item.productIds ? filterMediaOffers('cleeng', item.productIds) : undefined,
+    mediaOffers: item.productIds ? filterMediaOffers(offerKeys, item.productIds) : undefined,
   };
 };
 
@@ -98,7 +100,6 @@ export const getMediaById = async (id: string, token?: string, drmPolicyId?: str
   const mediaItem = data.playlist[0];
 
   if (!mediaItem) throw new Error('MediaItem not found');
-
   return transformMediaItem(mediaItem);
 };
 

src/services/inplayer.checkout.service.ts

@@ -198,9 +198,10 @@ const formatEntitlements = (expiresAt: number = 0, accessGranted: boolean = fals
 };
 
 const formatOffer = (offer: GetAccessFee): Offer => {
+  const offerId = offer.access_type.name === 'ppv' ? `C${offer.id}` : `S${offer.id}`;
   return {
     id: offer.id,
-    offerId: `S${offer.id}`,
+    offerId,
     offerCurrency: offer.currency,
     customerPriceInclTax: offer.amount,
     customerCurrency: offer.currency,