TW-655 Don't render promotion in case it's empty

src/app/atoms/partners-promotion.tsx

@@ -1,11 +1,12 @@
-import React, { FC, memo, useCallback } from 'react';
+import React, { FC, memo, useCallback, useState } from 'react';
 
 import { useDispatch } from 'react-redux';
 
 import { useAppEnv } from 'app/env';
 import { ReactComponent as CloseIcon } from 'app/icons/close.svg';
 import { togglePartnersPromotionAction } from 'app/store/partners-promotion/actions';
 import { useShouldShowPartnersPromoSelector, usePartnersPromoSelector } from 'app/store/partners-promotion/selectors';
+import { isEmptyPromotion } from 'lib/apis/optimal';
 import { t } from 'lib/i18n';
 import { useConfirm } from 'lib/ui/dialog';
 
@@ -30,6 +31,7 @@ export const PartnersPromotion: FC<Props> = memo(({ variant }) => {
   const dispatch = useDispatch();
   const { popup } = useAppEnv();
 
+  const [isImageBroken, setIsImageBroken] = useState(false);
   const { data: promo, isLoading, error } = usePartnersPromoSelector();
   const shouldShowPartnersPromo = useShouldShowPartnersPromoSelector();
 
@@ -45,7 +47,11 @@ export const PartnersPromotion: FC<Props> = memo(({ variant }) => {
     }
   }, [confirm]);
 
-  if (!shouldShowPartnersPromo || Boolean(error)) {
+  const onImageError = useCallback(() => {
+    setIsImageBroken(true);
+  }, []);
+
+  if (!shouldShowPartnersPromo || Boolean(error) || isEmptyPromotion(promo) || isImageBroken) {
     return null;
   }
 
@@ -68,7 +74,7 @@ export const PartnersPromotion: FC<Props> = memo(({ variant }) => {
           testID={PartnersPromotionSelectors.promoLink}
           testIDProperties={{ variant, href: promo.link }}
         >
-          <img className="h-10 w-10 rounded-circle" src={promo.image} alt="Partners promotion" />
+          <img className="h-10 w-10 rounded-circle" src={promo.image} alt="Partners promotion" onError={onImageError} />
           <div className="flex flex-col gap-1">
             <div className="flex gap-1">
               <span className="text-gray-910 font-medium">{promo.copy.headline}</span>
@@ -106,7 +112,7 @@ export const PartnersPromotion: FC<Props> = memo(({ variant }) => {
         testID={PartnersPromotionSelectors.promoLink}
         testIDProperties={{ variant, href: promo.link }}
       >
-        <img src={promo.image} alt="Partners promotion" className="shadow-lg rounded-lg" />
+        <img src={promo.image} alt="Partners promotion" className="shadow-lg rounded-lg" onError={onImageError} />
       </Anchor>
     </div>
   );

src/app/store/partners-promotion/actions.ts

@@ -1,9 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
 
-import { OptimalPromotionInterface, OptimalPromoVariantEnum } from 'lib/apis/optimal';
+import { OptimalPromotionType, OptimalPromoVariantEnum } from 'lib/apis/optimal';
 import { createActions } from 'lib/store';
 
-export const loadPartnersPromoAction = createActions<OptimalPromoVariantEnum, OptimalPromotionInterface, string>(
+export const loadPartnersPromoAction = createActions<OptimalPromoVariantEnum, OptimalPromotionType, string>(
   'partnersPromo/LOAD_PARTNERS'
 );
 

src/app/store/partners-promotion/state.ts

@@ -1,10 +1,10 @@
-import { OptimalPromotionInterface } from 'lib/apis/optimal';
+import { OptimalPromotionType } from 'lib/apis/optimal';
 import { LoadableEntityState, createEntity } from 'lib/store';
 
 import { mockPartnersPromotion } from './state.mock';
 
 export interface PartnersPromotionState {
-  promotion: LoadableEntityState<OptimalPromotionInterface>;
+  promotion: LoadableEntityState<OptimalPromotionType>;
   shouldShowPromotion: boolean;
 }
 

src/lib/apis/optimal.ts

@@ -10,7 +10,8 @@ export enum OptimalPromoVariantEnum {
   Token = 'tw-token'
 }
 
-export interface OptimalPromotionInterface {
+type EmptyPromotion = Record<string, undefined>;
+type NormalPromotion = {
   body: string;
   campaign_type: string;
   copy: {
@@ -28,11 +29,17 @@ export interface OptimalPromotionInterface {
   text: string;
   view_time_url: string;
   view_url: string;
+};
+
+export type OptimalPromotionType = EmptyPromotion | NormalPromotion;
+
+export function isEmptyPromotion(promotion: OptimalPromotionType): promotion is EmptyPromotion {
+  return !('link' in promotion && 'image' in promotion && 'copy' in promotion);
 }
 
 export const getOptimalPromotionImage$ = (variant: OptimalPromoVariantEnum) =>
   from(
-    optimalApi.get<OptimalPromotionInterface>('api/v1/decision', {
+    optimalApi.get<OptimalPromotionType>('api/v1/decision', {
       params: {
         publisher: 'templewallet', // your-publisher-slug
         ad_types: variant,