@capillarytech/creatives-library 7.10.47 → 7.10.48

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -697,6 +697,7 @@ function SlideBoxContent(props) {
       {isEditWhatsapp && (<Whatsapp
         isFullMode={isFullMode}
         templateData={templateData}
+        getFormData={getFormData}
         params={{
           id: templateData._id,
         }}

package/v2Containers/CreativesContainer/index.js

@@ -364,6 +364,28 @@ class Creatives extends React.Component {
           };
           break;
         }
+        case constants.WHATSAPP: {
+          const { messageBody } = templateData;
+          const body = JSON.parse(messageBody || '{}');
+          console.log("getTemplateData body", body);
+          creativesTemplateData = {
+            type: constants.WHATSAPP,
+            edit: true,
+            name: "",
+            versions: {
+              base: {
+                content: {
+                  ...body,
+                  whatsapp: {
+                    ...body.whatsapp,
+                    status: 'approved'
+                  }
+                },
+              },
+            },
+          };
+          break;
+        }
         default:
           break;
       }
@@ -495,6 +517,27 @@ 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 whatsappContent = cloneDeep(versions.base.content.whatsapp);
+          console.log("accountDetailsaccountDetails", accountDetails, accountDetails.name)
+          templateData = {
+            channel,
+            accountId,
+            accountName: accountDetails.name,
+            messageBody: JSON.stringify(whatsappContent.languages[0].content),
+            category: whatsappContent.category,
+            language: whatsappContent.languages[0].language,
+            mediaType: whatsappContent.mediaType,
+          };
+        }
+        break;
       case constants.FACEBOOK: {
         if (template.value) {
           const FacebookAd = template?.value?.versions?.base?.content?.FacebookAd;
@@ -660,13 +703,11 @@ 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(reloadTemplates));
+    }), this.props.handleCloseCreatives);
   };
   saveMessage = () => {
     this.setState({ isGetFormData: true });

package/v2Containers/Templates/index.js

@@ -77,7 +77,7 @@ import emailIllustration from '../Assets/images/emailIllustration.svg';
 import smsIllustration from '../Assets/images/smsIllustration.svg';
 import pushIllustration from '../Assets/images/pushIllustration.svg';
 import whatsappIllustration from '../Assets/images/whatsappIllustration.png';
-import { CAP_SPACE_16, CAP_SPACE_44 } from '@capillarytech/cap-ui-library/styled/variables';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 const { timeTracker } = GA;
 const {CapCustomCardList} = CapCustomCard;
@@ -568,8 +568,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     this.getAllTemplates({getNextPage: true});
   }
   onCreateComplete = (isReloadTemplates) => {
+    const isWhatsappEdit = this.state.routeParams?.pathname?.includes(`${WHATSAPP_LOWERCASE}/edit`);
     this.setState({routeParams: null, previewOpen: false}, () => {
-      if (this.isFullMode() && isReloadTemplates) {
+      if (this.isFullMode() && (isReloadTemplates || isWhatsappEdit)) {
         this.getAllTemplates({params: {}}, true);
       }
     });
@@ -705,10 +706,16 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   isStatusMatching = (status, selectedWhatsappStatus) => {
-    if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
-      return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+    if(this.props.isFullMode && selectedWhatsappStatus) {
+      if ( [WHATSAPP_STATUSES.unsubmitted, WHATSAPP_STATUSES.pending].includes(status) ) {
+        return selectedWhatsappStatus === WHATSAPP_STATUSES.awaitingApproval;
+      }
+        return selectedWhatsappStatus === status;
+    }
+    else if (!this.props.isFullMode){
+      return status === WHATSAPP_STATUSES.approved;
     }
-      return selectedWhatsappStatus === status;
+    return true;
   }
 
   filterWhatsappTemplates = (templates) => {
@@ -718,9 +725,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
       // if status or category filter is applied, filter templates which match these filters
       return (
-        selectedWhatsappStatus
-        ? this.isStatusMatching(status, selectedWhatsappStatus)
-        : true
+        this.isStatusMatching(status, selectedWhatsappStatus)
       ) && (
         selectedWhatsappCategory
         ? category === selectedWhatsappCategory
@@ -750,6 +755,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
     let isTraiDltFeature = false;
+    console.log("getTemplateDataForGrid", currentChannel);
     switch (currentChannel) {
       case WECHAT:
         filteredTemplates = this.filterWechatTemplates(templates);
@@ -1000,22 +1006,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               </CapHeading>
             </div> : (
               [WHATSAPP_LOWERCASE].includes(this.state.channel.toLowerCase()) &&
+              isEmpty(filteredTemplates) &&
               isEmpty(this.state.searchText) &&
               !isLoading &&
-              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto' } : {}}>
-                {isEmpty(templates) && <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />}
-                {!isEmpty(templates) && isEmpty(filteredTemplates) && <CapHeader
-                  title={
-                    <CapHeading type="h3" style={{ textAlign: "center", marginTop: CAP_SPACE_44 }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesTitle)}
-                    </CapHeading>
-                  }
-                  description={
-                    <CapLabel style={{ textAlign: "center" }}>
-                      {this.props.intl.formatMessage(messages.noFilteredWhatsappTemplatesDesc)}
-                    </CapLabel>
-                  }
-                />}
+              <div style={this.isFullMode() ? { height: "calc(100vh - 325px)", overflow: 'auto'} : {}}>
+                <CapIllustration buttonClassName={`create-new-${channelLowerCase}`} {...this.getChannelTypeIllustrationInfo(currentChannel)} />
               </div>
             )
           }
@@ -2305,7 +2300,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       type={"primary"}
       disabled={this.isCreateDisabled()}
       style={{marginLeft: '8px', marginBottom: '12px'}}
-      onClick={this.createTemplate} >
+      onClick={this.createTemplate}
+      target={channelLowerCase === WHATSAPP_LOWERCASE && !this.props.isFullMode ? "_blank" : null}
+      >
       { this.props.intl.formatMessage((isTraiDltFeature && channel.toUpperCase() === SMS ) ? messages.uploadTemplate : messages.createNewActionButton) }
     </CapButton>);
 
@@ -2339,16 +2336,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       {
         channel.toUpperCase() === WHATSAPP && (
           <div className="whatsapp-filters">
-            <CapSelectFilter
-              placement="bottomLeft"
-              data={STATUS_OPTIONS}
-              onSelect={this.setWhatsappStatus}
-              selectedValue={this.state.selectedWhatsappStatus}
-              placeholder="Status"
-              showBadge={true}
-              width="90px"
-              overlayStyle={{ overflowY: "hidden" }}
-            />
+            {
+              this.props.isFullMode ? (
+                <CapSelectFilter
+                  placement="bottomLeft"
+                  data={STATUS_OPTIONS}
+                  onSelect={this.setWhatsappStatus}
+                  selectedValue={this.state.selectedWhatsappStatus}
+                  placeholder="Status"
+                  showBadge={true}
+                  width="90px"
+                />
+              ) : null
+            }
             <CapSelectFilter
               placement="bottomLeft"
               data={CATEGORY_OPTIONS}
@@ -2357,7 +2357,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               placeholder="Category"
               showBadge={true}
               width="105px"
-              overlayStyle={{ overflowY: "hidden" }}
             />
           </div>
           
@@ -2481,10 +2480,21 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
+
+          {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
               {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: this.props.TemplatesList, filterContent, handlers: {handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}
             </Pagination>
             {(((this.state.selectedAccount !== '' && !isEmpty(this.props.Templates.selectedWeChatAccount) && this.state.channel.toLowerCase() === 'wechat') || this.state.channel.toLowerCase() !== 'wechat') && isEmpty(this.props.TemplatesList)) && !this.props.Templates.getAllTemplatesInProgress && !isEmpty(this.state.searchText) &&
             <div style={{ height: '65vh', textAlign: 'center', lineHeight: '65vh'}}>
+                        {
+            channel.toLowerCase() === WHATSAPP_LOWERCASE ? (
+              <CapAlert message={whatsappCountExceedText} type="info" />
+            ) : null
+          }
               <CapHeading type="h6">{this.props.intl.formatMessage(messages.noTemplatesFound)}</CapHeading>
             </div>}
           </CapRow>

package/v2Containers/Templates/messages.js

@@ -342,14 +342,6 @@ export default defineMessages({
     id: `${scope}.whatsappDescIllustration`,
     defaultMessage: 'These templates can be reused when creating a\nnew message content.',
   },
-  "noFilteredWhatsappTemplatesTitle": {
-    id: `${scope}.noFilteredWhatsappTemplatesTitle`,
-    defaultMessage: 'Sorry, we couldn’t find any matches',
-  },
-  "noFilteredWhatsappTemplatesDesc": {
-    id: `${scope}.noFilteredWhatsappTemplatesDesc`,
-    defaultMessage: 'Please try searching with another term or apply different filter',
-  },
   "smsTitleIllustartion": {
     id: `${scope}.smsTitleIllustartion`,
     defaultMessage: 'Create an SMS {template}',

package/v2Containers/Whatsapp/index.js

@@ -73,6 +73,7 @@ export const Whatsapp = (props) => {
     metaEntities,
     injectedTags,
     loadingTags,
+    getFormData
   } = props || {};
   const { formatMessage } = intl;
   const { TextArea } = CapInput;
@@ -91,7 +92,9 @@ export const Whatsapp = (props) => {
   //for edit only
   const [isEditFlow, setEditFlow] = useState(false);
   const [templateDate, setTemplateDate] = useState('');
-  const [templateStatus, setTemplateStatus] = useState();
+  const [templateStatus, setTemplateStatus] = useState(
+    WHATSAPP_STATUSES.unsubmitted,
+  );
   const [templateRejectionReason, setTemplateRejectionReason] = useState(null);
   const [tempMsgArray, updateTempMsgArray] = useState([]);
   const [updatedSmsEditor, setUpdatedSmsEditor] = useState([]);
@@ -108,7 +111,8 @@ export const Whatsapp = (props) => {
     width: 100%;
     margin-left: -32px;
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
-
+    z-index: 1;
+    
     .ant-btn {
       margin-right: ${CAP_SPACE_16};
     }
@@ -140,7 +144,6 @@ export const Whatsapp = (props) => {
         setSpin(true);
         actions.getTemplateDetails(id);
       }
-      setEditFlow(true);
     }
     //cleanup code
     return () => {
@@ -154,9 +157,10 @@ export const Whatsapp = (props) => {
       name = '',
       versions = {},
       createdAt = '',
-    } = editData.templateDetails || templateData || {};
+    } = isFullMode ? editData.templateDetails : templateData;
     editContent = get(versions, `base.content.whatsapp`, {});
     if (editContent && !isEmpty(editContent)) {
+      setEditFlow(true);
       setTemplateName(name);
       setTemplateDate(createdAt);
       const {
@@ -467,13 +471,16 @@ export const Whatsapp = (props) => {
             languages: [
               {
                 language: 'en',
-                content: `$'${templateMessage}\nClick {{${
-                  addedVarCount + 1
-                }}} to unsubscribe'`,
+                content: 
+                  isEditFlow 
+                  ? `${updatedSmsEditor.join('')} ${formatMessage(messages.templateMessageUnsubscribeText)}`
+                  : `$'${templateMessage}\nClick {{${
+                    addedVarCount + 1 }}} to unsubscribe'`,
               },
             ],
-            mediaType: 'text',
-            varMapped: {},
+            mediaType: 'TEXT',
+            varMapped: varMap,
+            templateEditor: templateMessage,
             accountId,
             accessToken,
             accountName,
@@ -518,6 +525,15 @@ export const Whatsapp = (props) => {
     }
   };
 
+  const saveToMessage = () => {
+    getFormData({
+      value: createPayload(),
+      _id: params?.paramObj?.id,
+      validity: true,
+      type: 'WHATSAPP',
+    });
+  }
+
   const isDisableDone = () => {
     //if template name is not entered
     if (templateName.trim() === '' || templateNameError) {
@@ -775,12 +791,10 @@ export const Whatsapp = (props) => {
 
   const editModeContent = (
     <>
-      {templateStatus && (
-        <CapAlert
-          message={getTemplateStatusMessage()}
-          type={getTemplateStatusType()}
-        />
-      )}
+      <CapAlert
+        message={getTemplateStatusMessage()}
+        type={getTemplateStatusType()}
+      />
       <CapRow className="whatsapp-render-heading">
         <CapHeader
           title={
@@ -873,6 +887,17 @@ export const Whatsapp = (props) => {
             </CapButton>
           </>
         )}
+        {!isFullMode && isEditFlow && (
+          <>
+            <CapButton
+              onClick={saveToMessage}
+              //disabled={isDisableDone()}
+              className="whatsapp-create-btn"
+            >
+              <FormattedMessage {...messages.done} />
+            </CapButton>
+          </>
+        )}
       </WhatsappFooter>
     </CapSpin>
   );

package/v2Containers/Whatsapp/messages.js

@@ -232,4 +232,8 @@ export default defineMessages({
     id: `${prefix}.disabledEditTooltipStatus`,
     defaultMessage: 'awaiting for approval',
   },
+  done: {
+    id: `${prefix}.done`,
+    defaultMessage: 'Done',
+  },
 });