fix(payment): infinite render loop when opening choose offer modal

src/hooks/useOffers.ts

@@ -28,16 +28,15 @@ const useOffers = () => {
     return [...(requestedMediaOffers || []).map(({ offerId }) => offerId), ...clientOffers].filter(Boolean);
   }, [requestedMediaOffers, clientOffers]);
 
-  const { data: allOffers = [], isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutService.getOffers({ offerIds }, sandbox));
+  const { data: allOffers, isLoading } = useQuery(['offers', offerIds.join('-')], () => checkoutService.getOffers({ offerIds }, sandbox));
 
   // 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 hasMultipleOfferTypes = allOffers.some((offer: Offer) => (offerType === 'tvod' ? isSVODOffer(offer) : !isSVODOffer(offer)));
+    const offers = (allOffers || []).filter((offer: Offer) => (offerType === 'tvod' ? !isSVODOffer(offer) : isSVODOffer(offer)));
+    const hasMultipleOfferTypes = (allOffers || []).some((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
+    // 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.
     const defaultOfferId = (!isLoading && offers[offers.length - 1]?.offerId) || '';