@capillarytech/creatives-library 7.10.59 → 7.10.61

package/v2Containers/CreativesContainer/index.js

@@ -31,6 +31,7 @@ import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TE
 import {IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
+import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
 
 
 const classPrefix = 'add-creatives-section';
@@ -364,6 +365,42 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.WHATSAPP: {
+          const { 
+            templateConfigs: {
+              name,
+              template,
+              varMapped,
+              language,
+              category,
+              mediaType
+            }
+          } = templateData;
+          creativesTemplateData = {
+            type: constants.WHATSAPP,
+            edit: true,
+            name,
+            versions: {
+              base: {
+                content: {
+                  whatsapp: {
+                    status: WHATSAPP_STATUSES.approved,
+                    category,
+                    varMapped,
+                    mediaType,
+                    languages: [
+                      {
+                        language,
+                        content: `$'${template}'`,
+                      }
+                    ]
+                  }
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -420,8 +457,8 @@ class Creatives extends React.Component {
         if (get(template, "value.versions.base")) {
           const mobilpushTemplate = template.value;
           templateData.accountId = get(mobilpushTemplate, 'definition.accountId');
-          const type = (get(this.props,"messageDetails.type") || '').toLowerCase();
-          if(type === LOYALTY){
+          const type = (get(this.props, "messageDetails.type") || '').toLowerCase();
+          if (type === LOYALTY) {
             templateData.licenseCode = get(mobilpushTemplate, 'definition.licenseCode');
           }
           const androidContent = get(mobilpushTemplate, 'versions.base.ANDROID');
@@ -495,6 +532,38 @@ class Creatives extends React.Component {
           };
         }
         break;
+      case constants.WHATSAPP:
+        if (template.value) {
+          const { Templates, templateData: templateDataProps } = this.props;
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
+          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
+          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
+          const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
+          const { versions } = template.value;
+          const {
+            languages,
+            mediaType,
+            category,
+            templateEditor,
+            varMapped
+          } = cloneDeep(versions.base.content.whatsapp);
+          templateData = {
+            channel,
+            accountId,
+            accountName: accountDetails.name,
+            messageBody: languages[0].content,
+            templateConfigs: {
+              id: template._id,
+              name: template?.value?.name,
+              template: templateEditor,
+              varMapped,
+              category,
+              language: languages[0].language,
+              mediaType,
+            },
+          };
+        }
+        break;
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
@@ -660,11 +729,13 @@ class Creatives extends React.Component {
     });
   }
   handleCloseSlideBox = () => {
+    const { currentChannel = '', slidBoxContent = '' } = this.state;
+    const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
       showSlideBox: false,
-    }), this.props.handleCloseCreatives);
+    }), () => this.props.handleCloseCreatives(reloadTemplates));
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });
@@ -819,7 +890,24 @@ class Creatives extends React.Component {
   }
   render() {
     const {slidBoxContent, isGetFormData, showSlideBox, templateData, currentChannel, emailCreateMode, templateStep, isLoadingContent, mobilePushCreateMode, isDiscardMessage, weChatTemplateType, weChatMaptemplateStep} = this.state;
-    const {isFullMode, creativesMode, cap, isUploading, channelsToHide, selectedWeChatAccount, forwardedTags, channelsToDisable, selectedOfferDetails, onTestContentClicked, onPreviewContentClicked, getCreativesData, fetchingCmsData, editor, smsRegister} = this.props;
+    const {
+      isFullMode,
+      creativesMode,
+      cap,
+      isUploading,
+      channelsToHide,
+      selectedWeChatAccount,
+      forwardedTags,
+      channelsToDisable,
+      selectedOfferDetails,
+      onTestContentClicked,
+      onPreviewContentClicked,
+      getCreativesData,
+      fetchingCmsData,
+      editor,
+      smsRegister,
+      enableNewChannels,
+    } = this.props;
     const mapTemplateCreate = slidBoxContent === 'createTemplate' && weChatTemplateType === MAP_TEMPLATE && templateStep !== 'modeSelection';
     /* TODO: Instead of passing down same props separately to each component down, write common function to these props and pass it accordingly */
     return (
@@ -900,6 +988,7 @@ class Creatives extends React.Component {
               smsRegister={smsRegister}
               messageStrategy={this.props.strategy}
               orgUnitId={this.props.orgUnitId}
+              enableNewChannels={enableNewChannels}
           />
           }
           footer={this.shouldShowFooter() &&

package/v2Containers/CreativesContainer/messages.js

@@ -306,4 +306,12 @@ export default defineMessages({
     id: `${scope}.UploadSMStemplates`,
     defaultMessage: `Upload SMS templates`,
   },
+  "whatsappOverview": {
+    id: `${scope}.whatsappOverview`,
+    defaultMessage: `WhatsApp template overview`,
+  },
+  "whatsappTemplate": {
+    id: `${scope}.whatsappTemplate`,
+    defaultMessage: `WhatsApp template`,
+  },
 });

package/v2Containers/Email/index.js

@@ -2179,7 +2179,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     } else {
       this.setState({injectedTags: data.tags});
     }
-    this.props.globalActions.setInjectedTags(data.tags);
+    if (data.tags) {
+      this.props.globalActions.setInjectedTags(data.tags);
+    }
   }
 
   startLoading = (ifEdit) => {

package/v2Containers/Line/Container/index.js

@@ -83,7 +83,7 @@ export const LineContainer = ({
 
     const onAccountSelect = (account) => {
         const { value } = account.target;
-        templateActions.setLineAccount(Templates.weCrmAccounts.find((item) => item.name === value));
+        templateActions.setChannelAccount(LINE, Templates.weCrmAccounts.find((item) => item.name === value));
         updateSelectedAccount(value);
         updateAccountSelectFlow(false);
         createNew();

package/v2Containers/Templates/_templates.scss

@@ -19,6 +19,25 @@
 }
 
 .creatives-templates-list {
+
+  .delete-template-confirm {
+    .ant-modal-footer {
+      padding: $CAP_SPACE_16 $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_24;
+    }
+
+    .ant-modal-header {
+      padding: $CAP_SPACE_24 $CAP_SPACE_24 $CAP_SPACE_08 $CAP_SPACE_24;
+    }
+
+    .ant-modal-body {
+      padding: 0 $CAP_SPACE_24;
+    }
+
+    .ant-modal-close-x {
+      padding: $CAP_SPACE_12;
+    }
+  }
+
   .pagination-container {
     .FACEBOOK {
       .ant-card-body {
@@ -132,6 +151,20 @@
 
     }
   }
+
+  .create-new-link{
+    .ant-anchor-link {
+      display: flex;
+
+      .ant-anchor-link-title {
+        margin: 0;
+      }
+
+      .cap-link-v2-suffix {
+        margin-top: -2px;
+      }
+    }
+  }
 }
 
 .card-title {
@@ -499,3 +532,34 @@
     box-shadow: none;
   }
 }
+
+.whatsapp-filters {
+  display: flex;
+  width: 100%;
+  padding-left: 8px;
+  padding-bottom: 16px;
+  .cap-select-filter-v2 {
+    margin: 0 8px;
+  }
+}
+
+.selected-whatsapp-filters {
+  margin-top: -16px;
+
+  .cap-tag-v2{
+    font-size: 12px;
+    color: $CAP_G04;
+    white-space: pre-wrap;
+  }
+
+  .ant-anchor-link-title {
+    font-size: 12px;
+  }
+}
+
+.whatsapp-illustration-desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.87);
+  margin: 8px 0;
+  white-space: pre-wrap;
+}

package/v2Containers/Templates/actions.js

@@ -5,9 +5,9 @@
  */
 
 import * as types from './constants';
+import { LINE, WHATSAPP } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams) {
-  // 
   return {
     type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
   };
@@ -26,7 +26,6 @@ export function resetAccount() {
 }
 
 export function deleteTemplate(channel, id) {
-  
   return {
     type: types.DELETE_TEMPLATE_REQUEST, channel, id,
   };
@@ -51,18 +50,23 @@ export function getAccountsSettings() {
 }
 
 export function setWeChatAccount(weChatAccount) {
-  
   return {
     type: types.SET_WECHAT_ACCOUNT,
     weChatAccount,
   };
 }
-
-export function setLineAccount(lineAccount) {
-  return {
-    type: types.SET_LINE_ACCOUNT,
-    lineAccount,
+export function setChannelAccount(channel, account) {
+  const channelTypeMapping = {
+    LINE: types.SET_LINE_ACCOUNT,
+    WHATSAPP: types.SET_WHATSAPP_ACCOUNT,
   };
+  if (channelTypeMapping[channel]) {
+    return {
+      type: channelTypeMapping[channel],
+      account,
+    };
+  }
+  return {};
 }
 
 export function setViberAccount(viberAccount) {
@@ -114,7 +118,6 @@ export function setBEETemplate(template) {
   };
 }
 export function getTemplateDetails(id, channel) {
-  
   return {
     type: types.GET_TEMPLATE_DETAILS_REQUEST,
     id,
@@ -129,7 +132,6 @@ export function resetTemplateData() {
 }
 
 export function resetUploadData() {
-  
   return {
     type: types.RESET_UPLOAD_DATA,
   };

package/v2Containers/Templates/constants.js

@@ -45,7 +45,7 @@ export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPL
 export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
 export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
 export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACCOUNT";
-
+export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
@@ -57,3 +57,5 @@ export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_SUCCESS';
 export const GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE =
   'app/v2Containers/Templates/GET_ORG_LEVEL_CAMPAIGN_SETTINGS_FAILURE';
+
+export const MAX_WHATSAPP_TEMPLATES = 250;