@capillarytech/creatives-library 1.0.2 → 2.0.0

package/components/organisms/Creatives/Creatives.js

@@ -1,1071 +0,0 @@
-/* eslint-disable no-unused-vars */
-/**
- *
- * Creatives
- *
- */
-
-import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { createStructuredSelector } from 'reselect';
-import { compose, bindActionCreators } from 'redux';
-import { ErrorBoundary } from 'react-error-boundary';
-import cloneDeep from 'lodash/cloneDeep';
-import isEmpty from 'lodash/isEmpty';
-import keys from 'lodash/keys';
-import max from 'lodash/max';
-import get from 'lodash/get';
-import unset from 'lodash/unset';
-import set from 'lodash/set';
-import forEach from 'lodash/forEach';
-import pick from 'lodash/pick';
-import values from 'lodash/values';
-import mapValues from 'lodash/mapValues';
-import findIndex from 'lodash/findIndex';
-import groupBy from 'lodash/groupBy';
-import * as StyledVars from '@capillarytech/cap-ui-library/styled/variables';
-import { getChannelNameWithIcon } from 'utils/communication';
-import { getBoolean } from 'utils/validationHelper';
-import { notifyHandledException } from 'utils/bugsnag';
-
-import withStyles from 'utils/withStyles';
-import { CapSlideBox, CapSpin } from '@capillarytech/cap-ui-library';
-import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
-import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
-import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
-import CapCard from '@capillarytech/cap-ui-library/CapCard';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
-import CreativesContainer from '@capillarytech/creatives-library/v2Containers/CreativesContainer';
-import { filterChannelContent, getContentBody } from 'utils/commonUtils';
-import injectSaga from 'utils/injectSaga';
-import injectReducer from 'utils/injectReducer';
-import withErrorBoundary from 'utils/withErrorBoundary';
-import styles from './style';
-import useDidMountEffect from './useDidMountEffect';
-
-import * as constants from './constants';
-import {
-  SMS,
-  EMAIL,
-  MOBILEPUSH,
-  WECHAT,
-  CHANNEL_SMS,
-  CHANNEL_EMAIL,
-  CHANNEL_WECHAT,
-  CHANNEL_MPUSH,
-  CHANNEL_MOBILEPUSH,
-  REQUEST,
-} from '../../pages/App/constants';
-import { makeSelectOrgDetailsDetails } from './selectors';
-import { makeSelectCap } from '../../pages/Cap/selectors';
-import { makeSelectLoyaltyTags } from '../../pages/ProgramSummary/selectors';
-import SomethingWentWrong from '../../molecules/SomethingWentWrong';
-import reducer from './reducer';
-import * as actions from './actions';
-import * as programSummaryActions from '../../pages/ProgramSummary/actions';
-import saga from './saga';
-import messages from './messages';
-import CreativesErrorFallback from '../../molecules/CreativesErrorFallBack';
-import { SMS_CUSTOM } from '../../pages/Cap/constants';
-
-const { FONT_SIZE_M, CAP_SPACE_52 } = StyledVars;
-const { CapCustomCardList } = CapCustomCard;
-const {
-  DEFAULT,
-  EDIT,
-  CHANNEL_PRIORITY,
-  STORE,
-  MESSAGE_CONTENT_ID_1,
-  CREATIVES,
-  CREATE,
-  _DEFAULT,
-} = constants;
-const defaultHiddenChannels = ['callTask', 'facebook', 'line', 'viber', 'FTP'];
-const visibleChannels = [
-  CHANNEL_SMS,
-  CHANNEL_EMAIL,
-  CHANNEL_WECHAT,
-  CHANNEL_MPUSH,
-];
-
-const actionsArray = [
-  'PE_ISSUE_VOUCHER_ACTION',
-  'AWARD_POINTS_ACTION',
-  'AWARD_REFERRER_POINTS_ACTION',
-  'AWARD_REFEREE_POINTS_ACTION',
-  'TRANSACTION_POINTS_ACTION',
-  'UPGRADE_SLAB_ACTION',
-  'EBILL_ACTION',
-];
-
-function Creatives({
-  match: {
-    params: { programId },
-  },
-  cap,
-  className,
-  dataSource,
-  showPreview,
-  currentChannel,
-  currentOrgDetails,
-  onChangeCreatives,
-  intl: { formatMessage },
-  tagsData: { tags = {}, tagsStatus = {}, tagsError = {} } = {},
-  type = [],
-  actionType,
-  rulesetId,
-  programSummaryActions,
-  addTrackerTags,
-}) {
-  const channel =
-    currentChannel === CHANNEL_MPUSH ? CHANNEL_MOBILEPUSH : currentChannel;
-  const isDataLoaded = useRef(false);
-  const [addCreative, updateAddCreative] = useState(false);
-  const [mode, setMode] = useState('create');
-  const [contentId, setContentId] = useState('');
-  const [showPreviewSlidebox, setShowPreviewSlidebox] = useState(false);
-  const [showTestSlidebox, setShowTestSlidebox] = useState(false);
-  const [previewProps, updatePreviewProps] = useState({});
-  const [testProps, updateTestProps] = useState({});
-  const [didMount, setDidMount] = useState(false);
-  const [messageDetails, updateMessageDetails] = useState({
-    messageStrategy: {
-      type: 'DEFAULT',
-      timeType: 'DEFAULT',
-    },
-    type: 'loyalty',
-    deliverySetting: {
-      channelSetting: {
-        // SMS: {
-        //   channel: 'SMS',
-        //   // gsmSenderId: 'INTOUCH',
-        //   // cdmaSenderId: 'INTOUCH',
-        //   // domainGatewayMapId: ,
-        //   targetNdnc: false,
-        // },
-        // EMAIL: {
-        //   channel: 'EMAIL',
-        //   // domainGatewayMapId: 23519,
-        //   // senderLabel: '123',
-        //   // senderEmail: 'senderemail@gmail.com',
-        //   // senderReplyTo: 'replyemail@gmail.com',
-        // },
-      },
-      additionalSetting: {
-        useTinyUrl: false,
-        encryptUrl: false,
-        //  skipRateLimit: true by default, it will be set to false after checking if communication limit is enabled and rate limit is set for that org
-        skipRateLimit: true,
-      },
-      messageDetails: {},
-    },
-  });
-
-  const Header = () => {
-    const channelNameObj = getChannelNameWithIcon(formatMessage);
-    const channelName = channelNameObj?.[channel]?.text || channel;
-    const channelIcon = channelNameObj?.[channel]?.icon;
-    return (
-      <CapHeader
-        size="label1"
-        titleClass="truncate-text"
-        title={<span title={channelName}>{channelName}</span>}
-        prefix={
-          channelIcon && (
-            <CapIcon
-              type={channelIcon}
-              className={classnames(
-                'channel-perfix-icon',
-                `channel-icon-${channelIcon}`,
-              )}
-            />
-          )
-        }
-      />
-    );
-  };
-
-  useEffect(
-    () => {
-      if (addCreative) {
-        isDataLoaded.current = true;
-      }
-    },
-    [addCreative],
-  );
-
-  useDidMountEffect(
-    () => {
-      if (isDataLoaded.current) {
-        const channelDataObj = Object.values(
-          messageDetails.messageContent,
-        ).pop();
-        const defaultSMSValue = {
-          sms_domain: '',
-          sms_sender_id: '',
-          sms_cdma_sender_id: '',
-        };
-        const defaultEmailValue = {
-          email_domain: '',
-          email_sender_id: '',
-          email_sender_label: '',
-        };
-        const sourceObject =
-          channel === CHANNEL_SMS || channel === CHANNEL_EMAIL
-            ? dataSource
-            : {};
-        const defaultValue =
-          channel === CHANNEL_SMS ? defaultSMSValue : defaultEmailValue;
-        const data = {
-          ...defaultValue,
-          ...sourceObject,
-          ...channelDataObj,
-        };
-        onChangeCreatives(channel, data);
-      }
-    },
-    [JSON.stringify(messageDetails.messageContent)],
-  );
-
-  const showCreative = () => updateAddCreative(true);
-  const hideCreatives = () => updateAddCreative(false);
-  const handleCloseslidebox = () => {
-    setShowPreviewSlidebox(false);
-  };
-  const handleTestSlideBoxClose = () => {
-    setShowTestSlidebox(false);
-  };
-  const testCreativesContent = () => {};
-  const extractMessageContentForChannelPriority = (key, test = false) => {
-    const { messageContent } = messageDetails;
-    const mobilePushC = messageContent[key];
-    const { channel, messageBody, emailBody, emailSubject } =
-      messageContent[key] || {};
-    const mobilePushContent =
-      channel === MOBILEPUSH && (test ? mobilePushC : [mobilePushC]);
-    let content;
-    switch (channel) {
-      case SMS:
-        content = messageBody;
-        break;
-      case EMAIL:
-        content = emailBody;
-        break;
-      case MOBILEPUSH:
-        content = mobilePushContent;
-        break;
-      default:
-        content = '';
-        break;
-    }
-    const subject = channel === EMAIL && emailSubject;
-    return { channel, content, subject };
-  };
-  const previewCreativesContent = params => {
-    const { channel, content, subject } = params;
-    const previewProps = {
-      previewType: CREATIVES,
-      contentHeader: (
-        <FormattedMessage
-          {...messages.previewContentHeader}
-          values={{ channel }}
-        />
-      ),
-    };
-    switch (channel) {
-      case SMS:
-        previewProps.contents = [
-          {
-            channel,
-            messageBody: content,
-            id: MESSAGE_CONTENT_ID_1,
-          },
-        ];
-        break;
-      case EMAIL:
-        previewProps.contents = [
-          {
-            channel,
-            emailBody: content,
-            emailSubject: subject,
-            id: MESSAGE_CONTENT_ID_1,
-          },
-        ];
-        break;
-      case MOBILEPUSH:
-        previewProps.contents = content;
-        break;
-    }
-    onPreviewContentClicked(previewProps);
-  };
-  const onPreviewContentClicked = previewProps => {
-    setShowPreviewSlidebox(true);
-    updatePreviewProps(previewProps);
-  };
-  const onTestContentClicked = testProps => {
-    setShowTestSlidebox(true);
-    updateTestProps(testProps);
-  };
-  const isEditMode = () => mode === EDIT;
-  const onMessageDataChange = ({ path, value, callback, operation }) => {
-    updateMessageDetails(prevState => {
-      let messageDetails = cloneDeep(prevState);
-      let updatedMessage;
-      if (operation === 'delete') {
-        unset(messageDetails, path, value); // delete message details contents
-      } else if (path) {
-        messageDetails = set({}, path, value); // add values into sub objects of message details
-      } else if (!path) {
-        // to modify the direct child of messageDetails
-        messageDetails = { ...messageDetails, ...value };
-      }
-      return { ...prevState, ...messageDetails };
-    });
-    if (callback) callback();
-  };
-
-  const onEditTemplate = contentId => {
-    setMode(EDIT);
-    updateAddCreative(true);
-    setContentId(contentId);
-  };
-
-  const onDeleteTemplate = (messageContentId, deleteChannel) => {
-    onChangeCreatives(channel, {});
-    const { offers, isDefault = false } = get(
-      messageDetails,
-      `messageContent.${messageContentId}`,
-      [],
-    );
-    const { couponSeriesId, programId } = (offers || []).length // Any one of couponSeriesId or programId will be there at a time
-      ? offers[0]
-      : [{}];
-    onMessageDataChange({
-      operation: 'delete',
-      path: `messageContent.${messageContentId}`,
-      callback: () => {
-        // remove product category and offer if template is removed in case of personliasation
-        // detachOffersOfContent({ contentId: messageContentId });
-      },
-    });
-    // if store char is there and I am removing last content then remove default also
-
-    const { additionalProperties = {} } = cloneDeep(messageDetails);
-    let additionalEmailProperties = {};
-    if (additionalProperties.EMAIL) {
-      // to support new approach to handle multiple content email
-      const emailData = JSON.parse(additionalProperties.EMAIL || '{}');
-      delete emailData[messageContentId];
-      additionalEmailProperties.EMAIL = JSON.stringify(emailData);
-      onMessageDataChange({
-        path: 'additionalProperties',
-        value: additionalEmailProperties,
-      });
-    } else {
-      // to support already existing record
-      onMessageDataChange({
-        operation: 'delete',
-        path: 'additionalProperties',
-      });
-    }
-    setMode(CREATE);
-  };
-
-  const getContentWithSequenceLabel = contentId => {
-    const messageContent = filterChannelContent(
-      cloneDeep(messageDetails.messageContent),
-    );
-    const contentsWithId = mapValues(messageContent, (value, key) => ({
-      ...value,
-      id: key,
-    }));
-
-    const contents = values(contentsWithId);
-    const contentsByChannel = groupBy(contents, 'channel');
-
-    const contentGroupByChannel = mapValues(
-      messageContent,
-      (contentByChannel, id) => {
-        const { channel } = contentByChannel;
-        const serialNum = findIndex(contentsByChannel[channel], { id: id }); //content id
-        return {
-          ...contentByChannel,
-          serialNum: `${channel}${serialNum + 1}`,
-        };
-      },
-    );
-    return contentGroupByChannel[contentId].serialNum;
-  };
-  const findDefault = (array = []) => array.find(element => element.default);
-
-  const getChannelSpecificDeliverySetting = channel => {
-    const { deliverySetting } = messageDetails;
-    switch (channel) {
-      case SMS: {
-        if (!isEmpty(deliverySetting.channelSetting[channel])) {
-          const {
-            domainGatewayMapId,
-            domainId,
-            gsmSenderId,
-            cdmaSenderId,
-          } = get(deliverySetting, `channelSetting[${channel}]`, {});
-          return {
-            domainGatewayMapId: domainGatewayMapId,
-            domainId: domainId,
-            channel,
-            cdmaSenderId: cdmaSenderId,
-            gsmSenderId: gsmSenderId,
-            targetNdnc: false,
-          };
-        } else {
-          const { dgmId, domainId, cdmaSenders, gsmSenders } = get(
-            currentOrgDetails?.senderDetails,
-            `data[${channel}][0]`,
-            {},
-          );
-          return {
-            domainGatewayMapId: dgmId,
-            domainId: domainId,
-            channel,
-            cdmaSenderId: findDefault(cdmaSenders).value,
-            gsmSenderId: findDefault(gsmSenders).value,
-            targetNdnc: false,
-          };
-        }
-      }
-      case EMAIL: {
-        if (!isEmpty(deliverySetting.channelSetting[channel])) {
-          const {
-            domainGatewayMapId,
-            domainId,
-            senderEmail,
-            senderLabel,
-            senderReplyTo,
-          } = get(deliverySetting, `channelSetting[${channel}]`, {});
-          return {
-            domainGatewayMapId: domainGatewayMapId,
-            domainId: domainId,
-            channel,
-            senderEmail: senderEmail,
-            senderLabel: senderLabel,
-            senderReplyTo: senderReplyTo,
-          };
-        } else {
-          const { dgmId, domainId, emailSenders, emailRepliers } = get(
-            currentOrgDetails?.senderDetails,
-            `data[${channel}][0]`,
-            {},
-          );
-          const { value, label } = findDefault(emailSenders);
-          return {
-            domainGatewayMapId: dgmId,
-            domainId: domainId,
-            channel,
-            senderEmail: value,
-            senderLabel: label,
-            senderReplyTo: findDefault(emailRepliers).value,
-          };
-        }
-      }
-      case MOBILEPUSH: {
-        return {
-          channel,
-        };
-      }
-      default:
-        return {};
-    }
-  };
-
-  const getMessageContentCardList = (messageContent, key) => {
-    const { deliverySetting = {} } = messageDetails;
-    const isWechatSelected = messageContent.channel === WECHAT;
-    const isDefault = get(messageContent, 'isDefault', false);
-    let testPreviewContent = cloneDeep(messageContent);
-    const channel = messageContent.channel;
-    if (messageContent.channel === MOBILEPUSH) {
-      messageContent = getTemplateDataForEdit({ contentId: key });
-      testPreviewContent = cloneDeep(messageContent);
-      const additionalProperties = getAdditionalProperties(
-        testPreviewContent,
-        key,
-      ).additionalProperties;
-      Object.keys(additionalProperties || {}).forEach(
-        property => {
-          const mPushMessageProp = property.split('.');
-          mPushMessageProp.splice(0, 1);
-          unset(testPreviewContent, mPushMessageProp.join('.'));
-        }, //removing extra properties which are not required for preview and test of mpush
-      );
-    }
-    const extra = [
-      <CapDropdown
-        overlay={
-          <CapMenu>
-            {showPreview &&
-              !isWechatSelected && (
-                <>
-                  <CapMenu.Item
-                    className="ant-dropdown-menu-item"
-                    onClick={() =>
-                      onPreviewContentClicked({
-                        previewType: CREATIVES,
-                        contentHeader: (
-                          <FormattedMessage
-                            {...messages.previewContentHeader}
-                            values={{
-                              channel: getContentWithSequenceLabel(key),
-                            }}
-                          />
-                        ),
-                        currentlySelectedContentId: key,
-                        contents: [{ ...messageContent, id: key }],
-                      })
-                    }
-                  >
-                    <FormattedMessage {...messages.preview} />
-                  </CapMenu.Item>
-                </>
-              )}
-            {/* user is not allowed to delete default content */}
-            {!isDefault && (
-              <CapMenu.Item
-                onClick={() => onDeleteTemplate(key, messageContent.channel)}
-              >
-                <FormattedMessage {...messages.remove} />
-              </CapMenu.Item>
-            )}
-          </CapMenu>
-        }
-      >
-        <CapIcon type="more" />
-      </CapDropdown>,
-    ];
-    if (messageContent.channel !== WECHAT) {
-      extra.unshift(
-        <CapIcon
-          type="edit"
-          style={{ marginRight: '8px' }}
-          onClick={() => onEditTemplate(key)}
-        />,
-      );
-    }
-    let channelSpecificMessageContent = {};
-
-    const title = isDefault ? _DEFAULT : '';
-    const contentTitle = `${messageContent.channel}${title}`;
-    let messageContentCardList = {
-      title: <Header />,
-      content: getContentBody(messageContent),
-      cardType: messageContent.channel || SMS,
-      extra,
-      ...channelSpecificMessageContent,
-    };
-
-    return messageContentCardList;
-  };
-
-  const getMessageMultipleContentCardList = messageContent => {
-    let messageContentData = [];
-    let sortedMessageContent = cloneDeep(messageContent);
-    let updatedChannel = '';
-    let defaultId;
-    forEach(sortedMessageContent, (content, key) => {
-      if (get(content, 'isDefault', false) === true) {
-        defaultId = key;
-        return;
-      }
-    });
-    // if default exists put default at the end of object
-    if (defaultId) {
-      const defaultIdContent = sortedMessageContent[defaultId];
-      delete sortedMessageContent[defaultId];
-      sortedMessageContent[defaultId] = defaultIdContent;
-    }
-    // temporary fix ==> we are filtering out message content
-    // because in getTemplateDataForEdit for EMAIL we are adding additionalProperties in message content that is wrong
-    keys(sortedMessageContent)
-      .filter(key => get(sortedMessageContent[key], 'channel'))
-      .map(key => {
-        messageContentData.push(
-          getMessageContentCardList(
-            sortedMessageContent[key],
-            key,
-            updatedChannel,
-          ),
-        );
-      });
-    return messageContentData;
-  };
-
-  const getAdditionalProperties = (template, contentId) => {
-    const { channel } = template;
-    let templateData = template;
-    let additionalProperties = {};
-    switch (channel) {
-      case EMAIL: {
-        let {
-          additionalProperties: emailAdditionalProperties = {},
-        } = cloneDeep(messageDetails);
-        if (!emailAdditionalProperties.EMAIL) {
-          emailAdditionalProperties = { EMAIL: '{}' };
-        }
-        const { emailSubject, emailBody, channel, ...rest } = templateData;
-        templateData = { emailBody, emailSubject, channel };
-        let emailData = JSON.parse(emailAdditionalProperties.EMAIL) || {};
-        emailData[contentId] = { ...rest };
-        emailData = JSON.stringify(emailData);
-        additionalProperties.EMAIL = emailData;
-        break;
-      }
-      case MOBILEPUSH: {
-        const IosCtas = get(template, 'iosContent.expandableDetails.ctas');
-        if (!isEmpty(IosCtas)) {
-          const actionLabelKey = `${contentId}.iosContent.expandableDetails.ctas[0].actionLabel`;
-          const actionLabelValue = get(
-            templateData,
-            'iosContent.expandableDetails.ctas[0].actionLabel',
-          );
-          additionalProperties[actionLabelKey] = actionLabelValue;
-          const actionLabelKey2 = `${contentId}.iosContent.expandableDetails.ctas[0].actionLabel2`;
-          const actionLabelValue2 = get(
-            templateData,
-            'iosContent.expandableDetails.ctas[0].actionLabel2',
-          );
-          additionalProperties[actionLabelKey2] = actionLabelValue2;
-        }
-        break;
-      }
-    }
-    return { templateData, additionalProperties };
-  };
-
-  const addPriorities = (channel, messageContentId) => {
-    const { messageStrategy = {} } = messageDetails;
-    let { criteria = {}, type = DEFAULT } = cloneDeep(messageStrategy);
-    const { priorityChannels = [], priorityType } = criteria;
-    if (type === CHANNEL_PRIORITY) {
-      if (
-        priorityType === DEFAULT &&
-        messageContentId === MESSAGE_CONTENT_ID_1
-      ) {
-        criteria['defaultChannel'] = channel;
-      } else {
-        // add channel in priorityChannels on content sorted order
-        const position = priorityType === DEFAULT ? 2 : 1;
-        if (mode !== EDIT && !priorityChannels.includes(channel)) {
-          priorityChannels.splice(
-            Number(messageContentId.substr(19)) - position,
-            0,
-            channel,
-          );
-          criteria['priorityChannels'] = priorityChannels;
-        }
-      }
-      onMessageDataChange({
-        path: `messageStrategy.criteria`,
-        value: criteria,
-      });
-    }
-  };
-
-  const getDefaultTemplate = template => {
-    const defaultTemplate = {
-      channel: template.channel,
-      isDefault: true,
-    };
-    const mpushContent = {
-      custom: {},
-      message: '',
-      title: '',
-      expandableDetails: {
-        message: '',
-        style: '',
-      },
-    };
-    switch (template.channel) {
-      case SMS:
-        defaultTemplate['messageBody'] = '';
-        break;
-      case EMAIL:
-        (defaultTemplate['emailBody'] = ''),
-          (defaultTemplate['emailSubject'] = '');
-        break;
-      case MOBILEPUSH:
-        defaultTemplate['accountId'] = template['accountId'];
-        defaultTemplate['messageSubject'] = '';
-        if (!isEmpty(get(template, 'androidContent', {}))) {
-          defaultTemplate['androidContent'] = {
-            type: get(template, 'androidContent.type', ''),
-            deviceType: 'ANDROID',
-            ...mpushContent,
-          };
-        }
-        if (!isEmpty(get(template, 'iosContent', {}))) {
-          defaultTemplate['iosContent'] = {
-            deviceType: 'IOS',
-            type: get(template, 'androidContent.type', ''),
-            ...mpushContent,
-          };
-        }
-
-        break;
-    }
-    return defaultTemplate;
-  };
-
-  const getFormData = template => {
-    const { messageContent = {}, messageStrategy = {} } = cloneDeep(
-      messageDetails,
-    );
-    const { criteria = {}, type = DEFAULT } = messageStrategy;
-    let contentId;
-    let count =
-      (!isEmpty(messageContent) &&
-        max(keys(messageContent).map(c => Number(c[c.length - 1]))) + 1) ||
-      1;
-    contentId =
-      mode === EDIT || (type === CHANNEL_PRIORITY && contentId)
-        ? contentId
-        : `message_content_id_${count}`;
-    const messageContentId = contentId;
-    const { templateData, additionalProperties } = getAdditionalProperties(
-      template,
-      contentId,
-    );
-    // edit default_message_content case
-    if (mode === EDIT && get(messageContent, `${contentId}.isDefault`, false)) {
-      templateData['isDefault'] = true;
-    }
-
-    // if channel is mobile push replace account id with license code(sourceAccountIdentifier) as their is a design difference in backend service. They are considering sourceAccountIdentifier as account Id.
-    if (template.channel === MOBILEPUSH && template.licenseCode) {
-      templateData.accountId = template.licenseCode;
-    }
-
-    onMessageDataChange({
-      path: `messageContent.${messageContentId}`,
-      value: templateData,
-      callback: () => {
-        // attachClaimedCoupons({
-        //   contentId: messageContentId,
-        // });
-        hideCreatives();
-        // if type === CHANNEL_PRIORITY then add priorityType and defaultChannel
-        addPriorities(templateData.channel, messageContentId);
-      },
-    });
-    // default will be only auto added once first content added + criteriaTypes should be store only
-    if (
-      get(criteria, 'criteriaTypes', []).includes(STORE) &&
-      (keys(messageContent) || []).length <= 1 &&
-      !isEditMode()
-    ) {
-      const defaultContentId = `message_content_id_${count + 1}`;
-      let defaultTemplateData = getDefaultTemplate(templateData);
-      onMessageDataChange({
-        path: `messageContent.${defaultContentId}`,
-        value: defaultTemplateData,
-        callback: () => {
-          // attachClaimedCoupons({
-          //   contentId: defaultContentId,
-          // });
-          hideCreatives();
-        },
-      });
-    }
-    onMessageDataChange({
-      path: 'additionalProperties',
-      value: additionalProperties,
-    });
-  };
-
-  const getTemplateDataForEdit = ({ contentId }) => {
-    const { additionalProperties = {} } = messageDetails;
-    const contentKey = keys(
-      pick(get(messageDetails, 'messageContent'), contentId),
-    );
-    let templateData = cloneDeep(
-      get(messageDetails, `messageContent.${contentKey[0]}`),
-    );
-    const { channel } = templateData;
-    let templateContent;
-    switch (channel) {
-      case EMAIL: {
-        let additionalEmailProperties = '';
-        if (additionalProperties.EMAIL) {
-          // to support new approach to handle multiple content emai
-          const emailData = JSON.parse(additionalProperties.EMAIL || '{}');
-          additionalEmailProperties = emailData[contentId] || {};
-        } else {
-          // to support already existing record
-          additionalEmailProperties = additionalProperties;
-        }
-        return {
-          ...templateData,
-          ...additionalEmailProperties,
-          is_drag_drop: getBoolean(
-            get(additionalEmailProperties, 'is_drag_drop'),
-          ),
-        };
-      }
-      case MOBILEPUSH:
-        templateContent = templateData;
-        if (!isEmpty(additionalProperties)) {
-          Object.keys(additionalProperties || {}).forEach(propertyKey => {
-            const messageTemplateData = get(messageDetails, 'messageContent');
-            templateData = set(
-              messageTemplateData,
-              propertyKey,
-              additionalProperties[propertyKey],
-            );
-          });
-          templateContent = templateData[contentId];
-        }
-        return templateContent;
-      default:
-        return templateData;
-    }
-  };
-
-  const getForwardedTags = () => {
-    try {
-      if (isEmpty(type)) {
-        return {};
-      }
-      const removeGenericType = type =>
-        type.reduce((filteredtag, typeAtom) => {
-          if (!typeAtom.includes('GENERIC')) {
-            filteredtag.push(typeAtom);
-            return filteredtag;
-          }
-          return filteredtag;
-        }, []);
-
-      if (type.length > 1 && !actionsArray.includes(actionType)) {
-        type = removeGenericType(type);
-      } else if (type.length > 1 && actionType) {
-        type = removeGenericType(type);
-        type = type.concat([actionType]);
-      } else {
-        type = [actionType];
-      }
-      let forwardedTagsObject = type.reduce((forwardedTags, type) => {
-        if (tags[type])
-          forwardedTags = {
-            ...forwardedTags,
-            ...tags[type],
-          };
-        return forwardedTags;
-      }, {});
-      const filteredTagsObject = {};
-      const keyAdded = {};
-      Object.keys(forwardedTagsObject || {}).map(tag => {
-        if (!keyAdded[forwardedTagsObject[tag].name]) {
-          filteredTagsObject[tag] = forwardedTagsObject[tag];
-          keyAdded[forwardedTagsObject[tag].name] = true;
-        } else if (forwardedTagsObject[tag].subtags) {
-          Object.keys(forwardedTagsObject[tag].subtags || {}).map(subTag => {
-            const subTagObject = forwardedTagsObject[tag].subtags[subTag];
-            const filteredTagKey = Object.keys(filteredTagsObject || {}).filter(
-              filteredtag =>
-                forwardedTagsObject[tag].name ===
-                filteredTagsObject[filteredtag].name,
-            );
-            if (!filteredTagKey) return;
-            if (!filteredTagsObject[filteredTagKey]?.subtags?.[subTag]) {
-              if (filteredTagsObject[filteredTagKey].subtags) {
-                filteredTagsObject[filteredTagKey].subtags[
-                  subTag
-                ] = subTagObject;
-              } else {
-                filteredTagsObject[filteredTagKey] = {
-                  ...filteredTagsObject[filteredTagKey],
-                  subtags: {
-                    [subTag]: subTagObject,
-                  },
-                };
-              }
-              keyAdded[subTagObject.name] = true;
-            }
-          });
-        }
-      });
-      if (addTrackerTags) {
-        filteredTagsObject['tracked_value'] = {
-          name: 'Tracked Value',
-          desc: 'Tracked Value',
-        };
-        filteredTagsObject['current_aggregate'] = {
-          name: 'Current Aggregate',
-          desc: 'Current Aggregate',
-        };
-      }
-      const sortedTagsObject = (Object.entries(filteredTagsObject) || [])
-        .sort(function(a, b) {
-          var x = a[1].name;
-          var y = b[1].name;
-          return x < y ? -1 : x > y ? 1 : 0;
-        })
-        .reduce((object, entry) => {
-          object[entry[0]] = entry[1];
-          return object;
-        }, {});
-      return sortedTagsObject;
-    } catch (err) {
-      notifyHandledException(err);
-    }
-  };
-
-  useLayoutEffect(
-    () => {
-      if (channel && dataSource) {
-        isDataLoaded.current = false;
-        getFormData(dataSource);
-      }
-    },
-    [channel, dataSource],
-  );
-
-  const allChannels = filterChannelContent(messageDetails.messageContent);
-  let directChannel = cloneDeep(allChannels);
-  const channelsToHide = visibleChannels.filter(
-    channel => channel !== currentChannel,
-  );
-
-  useEffect(() => {
-    Array.isArray(type) &&
-      type.length > 0 &&
-      type.map(type => {
-        if (!tags[type] && !tagsStatus[type]) {
-          programSummaryActions.getLoyaltyTags(type, null, programId);
-        }
-      });
-    if (actionType && !tags[actionType] && !tagsStatus[actionType])
-      programSummaryActions.getLoyaltyTags(null, actionType, programId);
-  }, []);
-
-  const showSpin = () =>
-    Object.keys(tagsStatus || {}).some(type => tagsStatus[type] === REQUEST);
-
-  const errorHandler = (error, info) => {
-    notifyHandledException(error);
-  };
-
-  const resetBoundary = () => updateAddCreative(false);
-
-  return (
-    <>
-      <CapSpin spinning={showSpin()}>
-        {isEmpty(directChannel) ? (
-          messageDetails.messageStrategy.type === DEFAULT && (
-            <CapCard
-              title={<Header />}
-              headStyle={{
-                borderBottom: 0,
-                fontSize: FONT_SIZE_M,
-                height: CAP_SPACE_52,
-              }}
-              className={classnames(className, 'preview-card-item', 'empty-card')}
-            >
-              <CapRow type="flex" justify="center">
-                <CapButton
-                  className="add-creative-button"
-                  type="secondary"
-                  onClick={showCreative}
-                >
-                  <FormattedMessage {...messages.addCreative} />
-                </CapButton>
-              </CapRow>
-            </CapCard>
-          )
-        ) : (
-          // if content is added and in case of Personlisation showPersonalisationCharacetristic=false
-          <CapRow>
-            <CapCustomCardList
-              cardList={getMessageMultipleContentCardList(directChannel)}
-              className={classnames(className, 'message-content-list')}
-            />
-          </CapRow>
-        )}
-      </CapSpin>
-      {addCreative && (
-        <ErrorBoundary
-          FallbackComponent={CreativesErrorFallback}
-          onError={errorHandler}
-          onReset={resetBoundary}
-        >
-          <CreativesContainer
-            cap={cap}
-            getCreativesData={getFormData}
-            creativesMode={mode}
-            messages={messages}
-            messageDetails={cloneDeep(messageDetails)}
-            location={location}
-            templateData={isEditMode() && getTemplateDataForEdit({ contentId })}
-            handleCloseCreatives={hideCreatives}
-            isFullMode={false}
-            editor="BEE"
-            channel={
-              channel ||
-              get(messageDetails, `messageContent.${contentId}.channel`)
-            }
-            channelsToHide={[...defaultHiddenChannels, ...channelsToHide]}
-            forwardedTags={getForwardedTags()}
-          />
-        </ErrorBoundary>
-      )}
-    </>
-  );
-}
-
-Creatives.propTypes = {
-  cap: PropTypes.object,
-  showPreview: PropTypes.bool,
-  className: PropTypes.string,
-  dataSource: PropTypes.object,
-  currentChannel: PropTypes.string,
-  currentOrgDetails: PropTypes.object,
-  onChangeCreatives: PropTypes.func,
-};
-
-Creatives.defaultProps = {
-  cap: {},
-  className: '',
-  dataSource: {},
-  currentChannel: '',
-  showPreview: false,
-  currentOrgDetails: {},
-  onChangeCreatives: () => {},
-};
-
-const mapStateToProps = createStructuredSelector({
-  currentOrgDetails: makeSelectOrgDetailsDetails(),
-  cap: makeSelectCap(),
-  tagsData: makeSelectLoyaltyTags(),
-});
-
-const mapDispatchToProps = dispatch => ({
-  actions: bindActionCreators(actions, dispatch),
-  programSummaryActions: bindActionCreators(programSummaryActions, dispatch),
-});
-
-const withConnect = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-);
-
-const withReducer = reducer.map(reducer => injectReducer(reducer));
-
-export default compose.apply(null, [
-  withErrorBoundary,
-  ...withReducer,
-  withConnect,
-])(injectIntl(withRouter(withStyles(Creatives, styles))));