@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.256

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -28,10 +28,6 @@ import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
 import MobilePushNew from '../MobilePushNew';
-import WebPush from '../WebPush';
-import DevicePreviewContent from '../WebPush/Create/preview/DevicePreviewContent';
-import { LAYOUT_MODE } from '../WebPush/Create/preview/constants';
-import { WEBPUSH_CONTENT_FIELDS, WEBPUSH_TEMPLATE_PATHS } from '../WebPush/constants';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -168,7 +164,6 @@ export function SlideBoxContent(props) {
       handleTestAndPreview,
       handleCloseTestAndPreview,
       isTestAndPreviewMode,
-      supportedTags = [],
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -205,7 +200,6 @@ export function SlideBoxContent(props) {
   const isCreateRcs = isCreate && channel === constants.RCS;
   const isCreateMPush = isCreate && channel === constants.MOBILE_PUSH;
   const isCreateCallTask = isCreate && channel === constants.CALL_TASK;
-  const isCreateWebPush = isCreate && channel === constants.WEBPUSH;
   let isEditSms = false;
   let isEditEmailWithId = false;
   let isEmailEditWithContent = false;
@@ -213,14 +207,12 @@ export function SlideBoxContent(props) {
   let isEmailPreview = false;
   let isMpushPreview = false;
   let isInappPreview = false;
-  let isWebPushPreview = false;
   let isEditCallTask = false;
   let isEditMPush = false;
   let isEditFacebook = false;
   let isEditFTP = false;
   let isEditWhatsapp = false;
   let isEditInApp = false;
-  let isEditWebPush = false;
   let isEditRcs = false;
   let isEditZalo = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
@@ -234,12 +226,10 @@ export function SlideBoxContent(props) {
     isEditFacebook = isEdit && channel === constants.FACEBOOK;
     isEditWhatsapp = isEdit && channel === constants.WHATSAPP;
     isEditRcs = isEdit && channel === constants.RCS;
-    isEditWebPush = isEdit && channel === constants.WEBPUSH;
     isPreview = slidBoxContent === 'preview' && [constants.SMS, constants.LINE, constants.WHATSAPP, constants.FACEBOOK, constants.VIBER, constants.RCS].includes(channel);
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isInappPreview = slidBoxContent === 'preview' && channel === constants.INAPP;
-    isWebPushPreview = slidBoxContent === 'preview' && channel === constants.WEBPUSH;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
     isEditZalo = isEdit && channel?.toUpperCase() === constants.ZALO;
     isEditInApp = isEdit && channel === constants.INAPP;
@@ -487,30 +477,8 @@ export function SlideBoxContent(props) {
           templateData={templateData}
           channel={channel}
           forwardedTags={forwardedTags}
-      />
+        />
       )}
-      {isWebPushPreview && (() => {
-        const webpushContent = get(templateData, WEBPUSH_TEMPLATE_PATHS.CONTENT, {});
-        const notificationTitle = webpushContent?.[WEBPUSH_CONTENT_FIELDS.TITLE] || '';
-        const notificationBody = webpushContent?.[WEBPUSH_CONTENT_FIELDS.MESSAGE] || '';
-        const imageSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.IMAGE] || '';
-        const brandIconSrc = webpushContent?.[WEBPUSH_CONTENT_FIELDS.BRAND_ICON] || '';
-        // Extract URL from onClickAction or use empty string
-        const url = webpushContent?.[WEBPUSH_CONTENT_FIELDS.ON_CLICK_ACTION]?.url || '';
-        
-        return (
-          <div className="webpush-preview-container">
-            <DevicePreviewContent
-              notificationTitle={notificationTitle}
-              notificationBody={notificationBody}
-              url={url}
-              imageSrc={imageSrc}
-              brandIconSrc={brandIconSrc}
-              layoutMode={LAYOUT_MODE.COMPACT}
-            />
-          </div>
-        );
-      })()}
 
       {
         (currentChannel === constants.WECHAT && !!slidBoxContent) && <WechatWrapper
@@ -1046,28 +1014,6 @@ export function SlideBoxContent(props) {
       />
       )}
 
-      {(isCreateWebPush || isEditWebPush) && (
-        <WebPush
-          isFullMode={isFullMode}
-          handleClose={handleClose}
-          onCreateComplete={onCreateComplete}
-          getFormData={getFormData}
-          isGetFormData={isGetFormData}
-          templateData={isEditWebPush ? templateData : undefined}
-          creativesMode={creativesMode}
-          params={isEditWebPush && templateData ? { id: templateData._id } : undefined}
-          location={{
-            pathname: isEditWebPush ? '/webpush/edit' : '/webpush/create',
-            query,
-            search: '',
-          }}
-          getDefaultTags={type}
-          forwardedTags={forwardedTags}
-          supportedTags={supportedTags}
-          selectedOfferDetails={selectedOfferDetails}
-          eventContextTags={eventContextTags}
-        />
-      )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
@@ -1130,7 +1076,6 @@ SlideBoxContent.propTypes = {
   onValidationFail: PropTypes.func,
   channelsToHide: PropTypes.array,
   forwardedTags: PropTypes.object,
-  supportedTags: PropTypes.array,
   selectedOfferDetails: PropTypes.array,
   channelsToDisable: PropTypes.array,
   weChatTemplateType: PropTypes.string,
@@ -1146,7 +1091,7 @@ SlideBoxContent.propTypes = {
   onFTPSubmit: PropTypes.func,
   messageStrategy: PropTypes.string,
   fbAdManager: PropTypes.string,
-  showDisabledFBInfo: PropTypes.bool,
+  showDisabledFBInfo: PropTypes.boolean,
   orgUnitId: PropTypes.any,
   smsRegister: PropTypes.any,
   getCmsTemplatesInProgress: PropTypes.bool,

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -71,7 +71,6 @@ export function SlideBoxHeader(props) {
       rcs: <FormattedMessage {...messages.rcsCreative} />,
       zalo: <FormattedMessage {...messages.zaloTemplate} />,
       viber: <FormattedMessage {...messages.viberTemplate} />,
-      webpush: <FormattedMessage {...messages.webPushTemplate} />,
     };
     return labels[currentChannel.toLowerCase()];
   };

package/v2Containers/CreativesContainer/constants.js

@@ -21,8 +21,6 @@ export const PUSH = "PUSH";
 export const RCS = "RCS";
 export const ZALO = "ZALO";
 export const INAPP = "INAPP";
-export const WEBPUSH = "WEBPUSH";
-export const WEBPUSH_BRAND_ICON = "WEBPUSH_BRAND_ICON";
 export const PREVIEW = "preview";
 export const EDIT_TEMPLATE = "editTemplate";
 export const JOURNEY = "journey";
@@ -50,4 +48,3 @@ export const BIG_TEXT = "BIG_TEXT";
 export const GENERIC = "GENERIC";
 export const LIQUID_ERROR_MSG = "LIQUID_ERROR_MSG";
 export const STANDARD_ERROR_MSG = "STANDARD_ERROR_MSG";
-export const COMMON_CHANNELS = ['sms', 'email', 'wechat', 'mobilepush', 'webpush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];

package/v2Containers/CreativesContainer/index.js

@@ -42,7 +42,6 @@ import { makeSelectFetchingCmsData } from '../Email/selectors';
 import {
   IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER,
 } from '../Line/Container/constants';
-import {EXTERNAL_URL, SITE_URL, WEBPUSH_MEDIA_TYPES} from '../WebPush/constants';
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import {RCS_STATUSES} from '../Rcs/constants';
 import { CREATIVE } from '../Facebook/constants';
@@ -709,73 +708,6 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WEBPUSH: {
-          // Convert from campaign format (messageContent.content.content) to creatives format
-          const webpushContent = get(templateData, 'content', {});
-          const accountId = get(templateData, 'accountId');
-          const { 
-            title, 
-            message, 
-            iconImageUrl: brandIcon = "", 
-            cta, 
-            expandableDetails 
-          } = webpushContent || {};
-          
-          // Map cta to onClickAction
-          let onClickAction = null;
-          if (cta) {
-            if (cta?.type === EXTERNAL_URL) {
-              onClickAction = {
-                type: URL,
-                url: cta?.actionLink || '',
-              };
-            } else {
-              onClickAction = {
-                type: cta?.type || SITE_URL,
-              };
-            }
-          }
-          
-          // Map expandableDetails.ctas to ctas array
-          let ctas = [];
-          if (expandableDetails?.ctas && expandableDetails?.ctas?.length > 0) {
-            ctas = expandableDetails?.ctas?.map((ctaItem) => ({
-              actionText: ctaItem?.title || ctaItem?.actionText || '',
-              type: URL,
-              actionLink: ctaItem?.actionLink || '',
-            }));
-          }
-          
-          // Map expandableDetails.media to image if present
-          let image = null;
-          if (expandableDetails?.media && expandableDetails?.media?.length > 0) {
-            const firstMedia = expandableDetails?.media[0];
-            if (firstMedia?.type === WEBPUSH_MEDIA_TYPES.IMAGE && firstMedia?.url) {
-              image = firstMedia?.url;
-            }
-          }
-          
-          creativesTemplateData = {
-            type: channel,
-            name: templateData?.messageSubject,
-            versions: {
-              base: {
-                content: {
-                  webpush: {
-                    title: title || '',
-                    message: message || '',
-                    ...(brandIcon && { brandIcon }),
-                    ...(onClickAction && { onClickAction }),
-                    ...(ctas.length > 0 && { ctas }),
-                    ...(image && { image, mediaType: IMAGE }),
-                  },
-                },
-              },
-            },
-            definition: { accountId },
-          };
-          break;
-        }
         default:
           break;
       }
@@ -1190,105 +1122,6 @@ export class Creatives extends React.Component {
         }
       }
         break;
-      case constants.WEBPUSH: {
-        if (template.value) {
-          const channelTemplate = template.value;
-          const accountId = get(channelTemplate, 'definition.accountId');
-          const webpushContent = get(channelTemplate, 'versions.base.content.webpush', {});
-          const { 
-            title, 
-            message, 
-            brandIcon, 
-            iconImageUrl: templateImageUrl , 
-            onClickAction, 
-            ctas: templateCtas, 
-            cta: templateCta, 
-            expandableDetails: templateExpandableDetails, 
-            image 
-          } = webpushContent || {};
-          
-          const iconImageUrl = brandIcon || templateImageUrl || '';
-          
-          // Map onClickAction to cta
-          let cta = null;
-          if (onClickAction) {
-            if (onClickAction?.type === URL) {
-              cta = {
-                type: EXTERNAL_URL,
-                actionLink: onClickAction?.url || '',
-              };
-            } else {
-              cta = {
-                type: onClickAction?.type || SITE_URL,
-                actionLink: onClickAction?.url || '',
-              };
-            }
-          } else if (templateCta) {
-            // Fallback to cta if onClickAction is not present
-            cta = {
-              type: templateCta?.type || EXTERNAL_URL,
-              actionLink: templateCta?.actionLink || '',
-            };
-          }
-          
-          // Map ctas array to expandableDetails.ctas
-          let expandableDetails = null;
-          const hasCtas = templateCtas && templateCtas.length > 0;
-          const hasImage = image;
-          
-          if (hasCtas || hasImage) {
-            expandableDetails = {
-              media: [],
-              ctas: [],
-            };
-            
-            // Map image to expandableDetails.media
-            if (hasImage) {
-              expandableDetails.media = [{
-                url: image,
-                type: IMAGE,
-              }];
-            }
-            
-            // Map ctas array to expandableDetails.ctas
-            if (hasCtas) {
-              expandableDetails.ctas = templateCtas.map((ctaItem) => ({
-                type: ctaItem?.type === URL ? EXTERNAL_URL : ctaItem?.type,
-                action: ctaItem?.action || '',
-                title: ctaItem?.actionText || ctaItem?.title || '',
-                actionLink: ctaItem?.actionLink || '',
-              }));
-            }
-          } else if (templateExpandableDetails) {
-            // If expandableDetails already exists, use it
-            expandableDetails = {
-              media: templateExpandableDetails?.media || [],
-              ctas: templateExpandableDetails?.ctas || [],
-            };
-          }
-          
-          // Convert from creatives format to campaign format
-          templateData = {
-            channel,
-            messageContent: {
-              content: {
-                channel: constants.WEBPUSH,
-                accountId,
-                content: {
-                  title: title || '',
-                  message: message || '',
-                  ...(iconImageUrl && { iconImageUrl }),
-                  ...(cta && { cta }),
-                  ...(expandableDetails && { expandableDetails }),
-                },
-                messageSubject: channelTemplate?.name ? channelTemplate.name : 'messageSubject',
-                offers: [],
-              },
-            },
-          };
-        }
-        break;
-      }
       default:
         break;
     }
@@ -1340,7 +1173,6 @@ export class Creatives extends React.Component {
       case constants.SMS:
       case constants.WECHAT:
       case constants.VIBER:
-      case constants.WEBPUSH:
         break;
       case constants.EMAIL:
         gtmDetails = {

package/v2Containers/CreativesContainer/messages.js

@@ -338,10 +338,6 @@ export default defineMessages({
     id: `${scope}.rcsCreative`,
     defaultMessage: `RCS creative`,
   },
-  "webPushTemplate": {
-    id: `${scope}.webPushTemplate`,
-    defaultMessage: `Web Push Template`,
-  },
   "templateNameEmpty": {
     id: `${scope}.templateNameEmpty`,
     defaultMessage: `Template name cannot be empty`

package/v2Containers/CreativesContainer/tests/SlideBoxContent.test.js

@@ -24,24 +24,6 @@ jest.mock('../../../v2Components/FormBuilder', () => ({
   ),
 }));
 
-jest.mock('../../WebPush/Create/preview/DevicePreviewContent', () => ({
-  __esModule: true,
-  default: (props) => (
-    <div className="DevicePreviewContent-mock" {...props}>
-      DevicePreviewContent
-    </div>
-  ),
-}));
-
-jest.mock('../../WebPush', () => ({
-  __esModule: true,
-  default: (props) => (
-    <div className="WebPush-mock" {...props}>
-      WebPush
-    </div>
-  ),
-}));
-
 describe('Test SlideBoxContent container', () => {
   const onCreateComplete = jest.fn();
   let renderedComponent;
@@ -718,196 +700,4 @@ describe('Test SlideBoxContent container', () => {
       expect(renderedComponent).toMatchSnapshot();
     });
   });
-
-  describe('WebPush channel functionality', () => {
-    it('Should render correct component for webpush channel create mode', () => {
-      renderFunction('WEBPUSH', 'createTemplate', { mode: 'create' });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel edit mode', () => {
-      const webpushEditTemplateData = {
-        type: 'WEBPUSH',
-        _id: '123',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message',
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'editTemplate', webpushEditTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel preview mode with all fields', () => {
-      const webpushPreviewTemplateData = {
-        type: 'WEBPUSH',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Notification Title',
-                message: 'Test notification body text',
-                image: 'https://example.com/image.jpg',
-                brandIcon: 'https://example.com/brand-icon.png',
-                onClickAction: {
-                  url: 'https://example.com'
-                }
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'preview', webpushPreviewTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel preview mode with minimal fields', () => {
-      const webpushPreviewTemplateData = {
-        type: 'WEBPUSH',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message'
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'preview', webpushPreviewTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel preview mode with empty fields', () => {
-      const webpushPreviewTemplateData = {
-        type: 'WEBPUSH',
-        versions: {
-          base: {
-            content: {
-              webpush: {}
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'preview', webpushPreviewTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel preview mode with missing onClickAction url', () => {
-      const webpushPreviewTemplateData = {
-        type: 'WEBPUSH',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message',
-                onClickAction: {}
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'preview', webpushPreviewTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should render correct component for webpush channel preview mode with null onClickAction', () => {
-      const webpushPreviewTemplateData = {
-        type: 'WEBPUSH',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message',
-                onClickAction: null
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'preview', webpushPreviewTemplateData);
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle supportedTags prop in webpush create mode', () => {
-      renderFunction('WEBPUSH', 'createTemplate', { mode: 'create' }, { 
-        supportedTags: ['tag1', 'tag2'] 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle supportedTags prop in webpush edit mode', () => {
-      const webpushEditTemplateData = {
-        type: 'WEBPUSH',
-        _id: '123',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message',
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'editTemplate', webpushEditTemplateData, { 
-        supportedTags: ['tag1', 'tag2'] 
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle webpush create mode with all props', () => {
-      renderFunction('WEBPUSH', 'createTemplate', { mode: 'create' }, {
-        isFullMode: true,
-        handleClose: jest.fn(),
-        onCreateComplete: jest.fn(),
-        creativesMode: 'test',
-        getDefaultTags: 'outbound',
-        forwardedTags: {},
-        supportedTags: ['tag1'],
-        selectedOfferDetails: [],
-        eventContextTags: {}
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-
-    it('Should handle webpush edit mode with all props', () => {
-      const webpushEditTemplateData = {
-        type: 'WEBPUSH',
-        _id: '123',
-        versions: {
-          base: {
-            content: {
-              webpush: {
-                title: 'Test Title',
-                message: 'Test Message',
-              }
-            }
-          }
-        }
-      };
-      renderFunction('WEBPUSH', 'editTemplate', webpushEditTemplateData, {
-        isFullMode: true,
-        handleClose: jest.fn(),
-        onCreateComplete: jest.fn(),
-        creativesMode: 'test',
-        getDefaultTags: 'outbound',
-        forwardedTags: {},
-        supportedTags: ['tag1'],
-        selectedOfferDetails: [],
-        eventContextTags: {}
-      });
-      expect(renderedComponent).toMatchSnapshot();
-    });
-  });
 });