@capillarytech/creatives-library 7.12.58 → 7.12.60

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.58",
+  "version": "7.12.60",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -255,6 +255,17 @@
     }
   }
 
+  .whatsapp-brand-name {
+    position: absolute;
+    top: 11%;
+    left: 38%;
+    color: white;
+    font-size: small;
+    max-width: 100px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
   .whatsapp-divider{
     margin: 8px 0;
   }

package/v2Components/TemplatePreview/index.js

@@ -154,7 +154,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       showTestAndPreviewIcon,
       module,
       viberBrandName,
-      viberAccountName,
+      whatsappAccountName,
       whatsappContentLen,
       intl,
       templateData,
@@ -321,6 +321,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       return renderArray;
     };
 
+    const whatsappUpdatedAccountName = whatsappAccountName || templateData?.versions?.base?.content?.whatsapp?.accountName || '';
     const whatsappUpdatedLen = whatsappContentLen !== undefined ? whatsappContentLen : content?.charCount;
 
     return (
@@ -723,6 +724,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       src={whatsappMobileAndroid}
                       alt={formatMessage(messages.previewGenerated)}
                     />
+                    <CapLabel className="whatsapp-brand-name">
+                      {whatsappUpdatedAccountName || ''}
+                    </CapLabel>
                     <div className="msg-container whatsapp-message-container">
                       <div className="message-pop align-left" style={whatsappSectionStyle}>
                         <div className="whatsapp-content">

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -59,6 +59,12 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
+        <CapLabel
+          className="whatsapp-brand-name"
+          type="label1"
+        >
+          30
+        </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -74,49 +80,48 @@ exports[`Test Templates container Should render correct preview component for wh
               }
             }
           >
-            <CapLabel
+            <div
               className="whatsapp-content"
-              type="label1"
             >
               You have received {{1}} points
-            </CapLabel>
-            <CapDivider
-              className="whatsapp-divider"
-            />
-            <CapLabel
-              className="whatsapp-cta-preview"
-              type="label21"
-            >
-              <CapIcon
-                size="xs"
-                svgProps={
-                  Object {
-                    "style": Object {
-                      "marginRight": "4px",
-                    },
-                  }
-                }
-                type="call"
+              <CapDivider
+                className="whatsapp-divider"
               />
-              Call
-            </CapLabel>
-            <CapLabel
-              className="whatsapp-cta-preview"
-              type="label21"
-            >
-              <CapIcon
-                size="xs"
-                svgProps={
-                  Object {
-                    "style": Object {
-                      "marginRight": "4px",
-                    },
+              <CapLabel
+                className="whatsapp-cta-preview"
+                type="label21"
+              >
+                <CapIcon
+                  size="xs"
+                  svgProps={
+                    Object {
+                      "style": Object {
+                        "marginRight": "4px",
+                      },
+                    }
                   }
-                }
-                type="launch"
-              />
-              Visit
-            </CapLabel>
+                  type="call"
+                />
+                Call
+              </CapLabel>
+              <CapLabel
+                className="whatsapp-cta-preview"
+                type="label21"
+              >
+                <CapIcon
+                  size="xs"
+                  svgProps={
+                    Object {
+                      "style": Object {
+                        "marginRight": "4px",
+                      },
+                    }
+                  }
+                  type="launch"
+                />
+                Visit
+              </CapLabel>
+            </div>
           </div>
         </div>
       </div>
@@ -134,7 +139,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": 30,
+              "length": "test",
             }
           }
         />
@@ -160,6 +165,12 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
+        <CapLabel
+          className="whatsapp-brand-name"
+          type="label1"
+        >
+          30
+        </CapLabel>
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -175,15 +186,14 @@ exports[`Test Templates container Should render correct preview component for wh
               }
             }
           >
-            <CapLabel
+            <div
               className="whatsapp-content"
-              type="label1"
             >
               You have received {{1}} points
-            </CapLabel>
-            <CapDivider
-              className="whatsapp-divider"
-            />
+              <CapDivider
+                className="whatsapp-divider"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -201,7 +211,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": 30,
+              "length": "test",
             }
           }
         />
@@ -227,6 +237,10 @@ exports[`Test Templates container Should render correct preview component for wh
           className="preview-image"
           src="test-file-stub"
         />
+        <CapLabel
+          className="whatsapp-brand-name"
+          type="label1"
+        />
         <div
           className="msg-container whatsapp-message-container"
         >
@@ -242,9 +256,8 @@ exports[`Test Templates container Should render correct preview component for wh
               }
             }
           >
-            <CapLabel
+            <div
               className="whatsapp-content"
-              type="label1"
             />
           </div>
         </div>
@@ -263,7 +276,7 @@ exports[`Test Templates container Should render correct preview component for wh
           id="app.components.TemplatePreview.whatsappMessageLength"
           values={
             Object {
-              "length": 0,
+              "length": "test",
             }
           }
         />

package/v2Components/TemplatePreview/tests/index.test.js

@@ -9,12 +9,14 @@ describe('Test Templates container', () => {
   const renderFunction = (
     channel,
     content,
+    whatsappAccountName,
     whatsappContentLen,
   ) => {
     renderedComponent = shallowWithIntl(
       <TemplatePreview
         channel={channel}
         content={content}
+        whatsappAccountName={whatsappAccountName}
         whatsappContentLen={whatsappContentLen}
       />,
     );

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -414,6 +414,7 @@ export function SlideBoxContent(props) {
         content={getChannelPreviewContent(templateData)}
         viberBrandName={selectedAccount || ""}
         viberAccountName={(selectedAccount || "")[0]}
+        whatsappAccountName={selectedAccount}
         unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
         channel={(templateData.type || '').toLowerCase()}
         charCounterEnabled={channel === constants.SMS}

package/v2Containers/CreativesContainer/index.js

@@ -369,7 +369,6 @@ export class Creatives extends React.Component {
           const {
             messageBody = '',
             templateConfigs: {
-              id,
               name,
               template,
               varMapped,
@@ -391,7 +390,6 @@ export class Creatives extends React.Component {
           });
           const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
           creativesTemplateData = {
-            _id: id,
             type: constants.WHATSAPP,
             edit: true,
             name,
@@ -583,6 +581,11 @@ export class Creatives extends React.Component {
         break;
       case constants.WHATSAPP:
         if (template.value) {
+          const { Templates, templateData: templateDataProps } = this.props;
+          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
+          const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
+          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
+          const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
             languages = [{}],
@@ -606,10 +609,11 @@ export class Creatives extends React.Component {
           });
           templateData = {
             channel,
-            accountName: '',
+            accountId,
+            accountName: accountDetails?.name || '',
             messageBody: languages[0].content,
             templateConfigs: {
-              id: template._id,
+              id: template?.value?.name,
               name: template?.value?.name,
               template: templateEditor,
               varMapped,

package/v2Containers/Templates/constants.js

@@ -67,4 +67,4 @@ export const GET_SENDER_DETAILS_REQUEST =
 export const GET_SENDER_DETAILS_SUCCESS =
   'app/v2Containers/Templates/GET_SENDER_DETAILS_SUCCESS';
 export const GET_SENDER_DETAILS_FAILURE =
-  'app/v2Containers/Templates/GET_SENDER_DETAILS_FAILURE';
+  'app/v2Containers/Templates/GET_SENDER_DETAILS_FAILURE';

package/v2Containers/Templates/index.js

@@ -263,6 +263,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WHATSAPP:
           channel = 'Whatsapp';
           activeMode = ACCOUNT_SELECTION_MODE;
+          this.props.actions.getWeCrmAccounts(channel);
           this.props.actions.getSenderDetails({
             channel: WHATSAPP,
             orgUnitId: -1,
@@ -301,7 +302,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE, WHATSAPP_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -428,21 +429,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
     }
 
-    if (
-      selectedChannel === WHATSAPP_LOWERCASE &&
-      isEmpty(nextProps.Templates.selectedWhatsappAccount)
-    ) {
-      const { connectionProperties = {}, hostName = '' } = get(nextProps.Templates, 'senderDetails.data[0].domainProperties', {});
-      if (isEmpty(connectionProperties) || hostName === '') {
-        return;
-      }
-      this.setState({activeMode: TEMPLATES_MODE, hostName}, () => {
-        this.props.actions.setChannelAccount(WHATSAPP, { connectionProperties, hostName });
-        this.getAllTemplates({ params });
-      }
-      );
-    }
-
     if ((selectedChannel === 'wechat' || selectedChannel === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
       let selectedAccount = '';
       if (isEmpty(nextProps.Templates.weCrmAccounts)) {
@@ -572,8 +558,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (!isEmpty(nextProps.Templates.templateDetails) && !isEqual(nextProps.Templates.templateDetails, this.props.Templates.templateDetails)) {
       this.setState({previewTemplate: nextProps.Templates.templateDetails});
     }
-    const weCrmAccountsList = get(nextProps, `Templates.weCrmAccounts`, []);
-    const weCrmChannels = ['wechat'];
+    const { weCrmAccounts: weCrmAccountsList = [], senderDetails: { hostName = '' } = {} } = get(nextProps, 'Templates', {});
+    const weCrmChannels = ['wechat', WHATSAPP_LOWERCASE];
 
     if (weCrmAccountsList.length === 1 && this.state.defaultAccount && (weCrmChannels.indexOf(selectedChannel) > -1)) {
       const paramsDefault = {
@@ -581,14 +567,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         sortBy: this.state.sortBy,
       };
       if (weCrmChannels.includes(selectedChannel)) {
-        paramsDefault.wecrmId = weCrmAccountsList[0].configs.wecrm_app_id;
-        paramsDefault.wecrmToken = weCrmAccountsList[0].configs.wecrm_token;
-        paramsDefault.originalId = weCrmAccountsList[0].sourceAccountIdentifier;
+        if ([WHATSAPP_LOWERCASE].includes(selectedChannel)) {
+          if (hostName === '') {
+            return;
+          }
+          weCrmAccountsList[0].hostName = hostName;
+          nextProps.actions.setChannelAccount(selectedChannel.toUpperCase(), weCrmAccountsList[0]);
+        } else {
+          paramsDefault.wecrmId = weCrmAccountsList[0].configs.wecrm_app_id;
+          paramsDefault.wecrmToken = weCrmAccountsList[0].configs.wecrm_token;
+          paramsDefault.originalId = weCrmAccountsList[0].sourceAccountIdentifier;
           nextProps.actions.setWeChatAccount(
             weCrmAccountsList[0],
           );
+        }
       }
-      this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name });
+      this.setState({ defaultAccount: false, activeMode: TEMPLATES_MODE, selectedAccount: weCrmAccountsList[0].name, hostName });
       this.getAllTemplates({params: paramsDefault}, true);
     }
   }
@@ -2051,7 +2045,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const rcsLoader = this.checkLoader(RCS_LOWERCASE);
 
     const wechatLoader = (((this.state.selectedAccount !== '' && getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'wechat');
-    const whatsappLoader = this.checkLoader(WHATSAPP_LOWERCASE) || this.props.Templates?.senderDetails?.status === 'REQUEST';
+    const whatsappLoader =
+    (
+      (this.state.selectedAccount !== "" && getAllTemplatesInProgress) ||
+      fetchingWeCrmAccounts ||
+      this.props.Templates?.senderDetails?.status === "REQUEST"
+    ) &&
+    this.state.channel.toLowerCase() === WHATSAPP_LOWERCASE;
     const mobilePushLoader = (((getAllTemplatesInProgress) || (fetchingWeCrmAccounts)) && this.state.channel.toLowerCase() === 'mobilepush');
     const emailLoader = (
       (getAllTemplatesInProgress ||
@@ -2167,19 +2167,13 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const { selectedAccount } = this.state;
     let { channel = '' } = this.state;
     channel = channel.toUpperCase();
-    const { Templates: templates = {}, location = {}, intl: {formatMessage}} = this.props;
+    const { Templates: templates = {}, location = {} } = this.props;
     const { query = {} } = location;
-    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {}, selectedWhatsappAccount = {} } = templates;
+    const { weCrmAccounts = [], fetchingWeCrmAccounts = false, campaignSettings = {} } = templates;
     const isWechatChannel = channel === WECHAT;
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isFacebookChannel = channel === FACEBOOK;
 
-    if (channel === WHATSAPP && isEmpty(selectedWhatsappAccount)) {
-      return <CapHeading>{formatMessage(messages.noAccountsPresentWhatsapp)}</CapHeading>;
-    } else if (channel === WHATSAPP && !isEmpty(selectedWhatsappAccount)) {
-      this.setTemplatesMode();
-    }
-    
     if ([WECHAT, MOBILE_PUSH, LINE].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
         if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, LINE].includes(channel)) {
@@ -2215,6 +2209,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
       });
     }
+    const {
+      intl: {
+        formatMessage,
+      },
+    } = this.props;
     let accountHeader = formatMessage(messages.mobilepushAccount);
     let noAccountHeader = messages.noAccountsPresent;
     switch (channel) {
@@ -2241,10 +2240,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         noAccountHeader = messages.noAccountsPresentFacebook;
         break;
       }
+      case WHATSAPP: {
+        accountHeader = formatMessage(messages.whatsappAccount);
+        noAccountHeader = messages.noAccountsPresentWhatsapp;
+        break;
+      }
       default:
         break;
     }
     let showNoAccountHeader = isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts;
+    if (channel === WHATSAPP && this.state.hostName === '') {
+      showNoAccountHeader = true;
+    }
     if (channel === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};

package/v2Containers/Templates/messages.js

@@ -124,7 +124,7 @@ export default defineMessages({
   },
   "noAccountsPresent": {
     id: `${scope}.noAccountsPresent`,
-    defaultMessage: "Account not setup for your brand",
+    defaultMessage: "Push notifications are not setup for your brand",
   },
   "noAccountsPresentWeChat": {
     id: `${scope}.noAccountsPresentWeChat`,

package/v2Containers/Templates/reducer.js

@@ -181,13 +181,13 @@ function templatesReducer(state = initialState, action) {
     case types.GET_SENDER_DETAILS_SUCCESS:
       return state.set('senderDetails', {
         status: 'SUCCESS',
-        data: action.payload,
+        hostName: action.payload,
         errors: [],
       });
     case types.GET_SENDER_DETAILS_FAILURE:
       return state.set('senderDetails', {
         status: 'FAILURE',
-        data: [],
+        hostName: '',
         errors: action.payload,
       });
     default:

package/v2Containers/Templates/sagas.js

@@ -157,7 +157,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: apiResponse.entity.WHATSAPP,
+        payload: apiResponse.entity.WHATSAPP[0].domainProperties.hostName,
       });
     } else {
       yield put({