@capillarytech/creatives-library 1.0.0 → 1.0.1-alpha.0

package/components/organisms/Creatives/Creatives.js

@@ -0,0 +1,1128 @@
+/* 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 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 messages from './messages';
+import globalMessages from '../../pages/Cap/messages';
+import CreativesErrorFallback from '../../molecules/CreativesErrorFallBack';
+import { SMS_CUSTOM } from '../../pages/Cap/constants';
+
+import { getWorkflowMode } from '../ConfigureWorkflows/context';
+
+const { FONT_SIZE_M, CAP_SPACE_52 } = StyledVars;
+const { CapCustomCardList } = CapCustomCard;
+const {
+  DEFAULT,
+  EDIT,
+  CHANNEL_PRIORITY,
+  STORE,
+  MESSAGE_CONTENT_ID_1,
+  CREATIVES,
+  CREATE,
+  _DEFAULT,
+  BEHAVIORAL,
+} = constants;
+const defaultHiddenChannels = [
+  'callTask',
+  'facebook',
+  'line',
+  'viber',
+  'FTP',
+  'whatsapp',
+  'rcs',
+];
+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',
+];
+
+export function Creatives({
+  cap,
+  className,
+  dataSource,
+  showPreview,
+  currentChannel,
+  currentOrgDetails,
+  onChangeCreatives,
+  intl: { formatMessage },
+  tagsData: { tags = {}, tagsStatus = {}, tagsError = {} } = {},
+  type = [],
+  actionType,
+  rulesetId,
+  actions,
+  addTrackerTags,
+  currentProgram: { id: programId } = {},
+  isPreviewSupplementaryReminder = false,
+}) {
+  const {
+    isPreviewMode,
+    eventType,
+    promotionsEventCategory,
+  } = getWorkflowMode() ?? {
+    isPreviewMode: false,
+    eventType: undefined,
+    promotionsEventCategory: undefined,
+  };
+
+  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
+          {...globalMessages.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
+                            {...globalMessages.previewContentHeader}
+                            values={{
+                              channel: getContentWithSequenceLabel(key),
+                            }}
+                          />
+                        ),
+                        currentlySelectedContentId: key,
+                        contents: [{ ...messageContent, id: key }],
+                      })
+                    }
+                  >
+                    <FormattedMessage {...globalMessages.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>
+        }
+        disabled={isPreviewMode}
+      >
+        <CapIcon type="more" />
+      </CapDropdown>,
+    ];
+    if (messageContent.channel !== WECHAT) {
+      extra.unshift(
+        <CapIcon
+          type="edit"
+          style={{ marginRight: '8px' }}
+          onClick={() => onEditTemplate(key)}
+          disabled={isPreviewMode}
+        />,
+      );
+    }
+    let channelSpecificMessageContent = {};
+
+    const title = isDefault ? _DEFAULT : '';
+    const contentTitle = `${messageContent.channel}${title}`;
+    let messageContentCardList = {
+      title: <Header />,
+      content: getContentBody(messageContent),
+      cardType: messageContent.channel || SMS,
+      extra: !isPreviewSupplementaryReminder ? extra : null,
+      ...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),
+        );
+      });
+    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 getChannelType = channel => {
+    switch (channel) {
+      case CHANNEL_SMS:
+        return SMS;
+      case CHANNEL_EMAIL:
+        return EMAIL;
+      case CHANNEL_WECHAT:
+        return WECHAT;
+      case CHANNEL_MPUSH:
+        return MOBILEPUSH;
+    }
+  };
+
+  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 || {}).forEach(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 || {}).forEach(
+            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(() => {
+    const eventNameData =
+      promotionsEventCategory === BEHAVIORAL ? eventType : undefined;
+    const channelType =
+      promotionsEventCategory === BEHAVIORAL
+        ? getChannelType(currentChannel)
+        : undefined;
+
+    Array.isArray(type) &&
+      type.length > 0 &&
+      type.forEach(type => {
+        if (!tags[type] && !tagsStatus[type]) {
+          actions.getLoyaltyTags(
+            type,
+            null,
+            programId,
+            eventNameData,
+            channelType,
+          );
+        }
+      });
+    if (actionType && !tags[actionType] && !tagsStatus[actionType])
+      actions.getLoyaltyTags(
+        null,
+        actionType,
+        programId,
+        eventNameData,
+        channelType,
+      );
+  }, []);
+
+  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}
+                  disabled={isPreviewMode}
+                >
+                  <FormattedMessage {...globalMessages.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
+            id="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,
+  isPreviewSupplementaryReminder: PropTypes.bool,
+};
+
+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),
+});
+
+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))));