@capillarytech/creatives-library 7.17.37 → 7.17.39-alpha.0

package/index.js

@@ -124,8 +124,8 @@ const ViberContainer = {Viber, viberReducer, viberSaga};
 const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, facebookPreviewSaga };
 const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga};
 const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
-const zaloContainer = { Zalo, zaloReducer, zaloSaga };
 const RcsContainer = { Rcs, rcsReducer, rcsSaga };
+const ZaloContainer = { Zalo, zaloReducer, zaloSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};
 const FTPContainer = {FTP, FTPReducer, FTPSagas};
@@ -173,6 +173,6 @@ export { CapContainer,
   FacebookPreviewContainer,
   SmsTraiContainer,
   WhatsappContainer,
-  zaloContainer,
   RcsContainer,
+  ZaloContainer,
 };

package/package.json

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

package/services/api.js

@@ -90,7 +90,7 @@ function checkStatus(response) {
   const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
   if (!isLoginPage) redirectIfUnauthenticated(response);
 
-  const error = new Error({ statusText, status });
+  const error = new Error(statusText);
   error.response = response;
   error.isError = true;
   error.status = status;
@@ -493,14 +493,14 @@ export const getSenderDetails = (channel, orgUnitId) => {
 export const getCdnTransformationConfig = () => {
   const url = `${API_ENDPOINT}/common/getCdnTransformationConfig`;
   return request(url, getAPICallObject('GET'));
-}
+};
 
 export const getS3UrlFileSizes = (data) => {
   const url = `${API_ENDPOINT}/assets/files/metadata`;
   return request(url, getAPICallObject('POST', data));
-}
+};
 
 export const getTemplateInfoById = ({id, username, oa_id, token}) => {
-    const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
-    return request(url, getAPICallObject('GET'));
-  }
+  const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
+  return request(url, getAPICallObject('GET'));
+};

package/v2Components/CapTagList/index.js

@@ -321,7 +321,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           trigger="click"
           placement={translationLang === "ja-JP" && channel === 'EMAIL' ? "bottom" : "rightTop"}
           >
-          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
+          <CapButton disabled={this?.props?.disabled} isAddBtn type="flat">{label || ''}</CapButton>
         </CapPopover>
         }
         <CapModal
@@ -358,6 +358,7 @@ CapTagList.propTypes = {
   disableTagsDetails: PropTypes.object,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
+  disabled: PropTypes.bool
 };
 
 CapTagList.defaultValue = {

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -213,7 +213,7 @@ export function SlideBoxContent(props) {
     isEmailPreview = slidBoxContent === 'preview' && channel === constants.EMAIL;
     isMpushPreview = slidBoxContent === 'preview' && channel === constants.MOBILE_PUSH;
     isEditFTP = isEdit && [constants.NO_COMMUNICATION, constants.FTP].includes(channel);
-    isEditZalo = isEdit && channel === constants.ZALO
+    isEditZalo = isEdit && channel === constants.ZALO;
   }
   const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
   const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
@@ -510,11 +510,17 @@ export function SlideBoxContent(props) {
       {
         isEditZalo &&
         <Zalo
-            templateData={templateData}
-            location={creativesLocationProps}
-            selectedOfferDetails={selectedOfferDetails}
-            getDefaultTags={type}
-            channel={channel}
+          isFullMode={isFullMode}
+          templateData={templateData}
+          getFormData={getFormData}
+          getDefaultTags={type}
+          forwardedTags={forwardedTags}
+          selectedOfferDetails={selectedOfferDetails}
+          location={{
+            pathname: `/zalo/edit`,
+            query,
+            search: '',
+          }}
         />
       }
       {

package/v2Containers/CreativesContainer/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  CapSlideBox, CapHeader, CapLink, CapInput,
-} from '@capillarytech/cap-ui-library';
+  CapSlideBox,
+  CapHeader,
+  CapLink,
+  CapInput,
+  CapNotification,
+} from "@capillarytech/cap-ui-library";
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {isEmpty, get, forEach, cloneDeep} from 'lodash';
@@ -23,8 +27,10 @@ import { gtmPush } from '../../utils/gtmTrackers';
 import './index.scss';
 import * as templateActions from '../Templates/actions';
 import * as globalActions from '../Cap/actions';
+import * as zaloActions from '../Zalo/actions';
 import {isLoading as isLoadingSelector} from './selectors';
 import messages from './messages';
+import zaloMessages from '../Zalo/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { makeSelectFetchingCmsData } from '../Email/selectors';
 import { IMAGE as LINE_IMAGE, IMAGE_MAP, IMAGE_CAROUSEL, VIDEO as LINE_VIDEO, TEMPLATE, STICKER } from '../Line/Container/constants';
@@ -97,12 +103,35 @@ export class Creatives extends React.Component {
     }
     this.setState(data);
   };
+
+  actionCallback = () => {
+    CapNotification.error({
+      message: <FormattedMessage {...zaloMessages.zaloFailureNotificationPreview}/>,
+    });
+  };
+
   onPreviewTemplate = (template) => {
-    const templateData = template;
-    const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
-    const userId = parseInt(template.updatedBy, 10);
-    templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
-    this.setState({ slidBoxContent: 'preview', templateData });
+    if (template.type !== constants.ZALO.toLowerCase()) {
+      const templateData = template;
+      const usersList = commonUtil.getMergedUserList(this.props.templateUserList);
+      const userId = parseInt(template.updatedBy, 10);
+      templateData.updatedByName = commonUtil.getUserNameById(userId, usersList );
+      this.setState({ slidBoxContent: 'preview', templateData });
+    } else {
+      const {
+        name = "",
+        sourceAccountIdentifier = "",
+        configs: { token = "" } = {},
+      } = get(this.props, "Templates.weCrmAccounts[0]", {});
+      this.props.zaloActions.getTemplateInfoById({
+        username: name,
+        oa_id: sourceAccountIdentifier,
+        token,
+        id: template?._id,
+        preview: true,
+        actionCallback: this.actionCallback,
+      });
+    }
   };
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
@@ -771,6 +800,14 @@ export class Creatives extends React.Component {
         }
       }
         break;
+      case constants.ZALO: {
+        if (template.value) {
+          templateData = {
+            ...template.value,
+          };
+        }
+      }
+        break;
       default:
         break;
     }
@@ -1205,6 +1242,7 @@ Creatives.propTypes = {
   channel: PropTypes.string,
   templateActions: PropTypes.object,
   globalActions: PropTypes.object,
+  zaloActions: PropTypes.object,
   cap: PropTypes.object,
   // isLoading: PropTypes.bool,
   templateUserList: PropTypes.array,
@@ -1233,6 +1271,7 @@ function mapDispatchToProps(dispatch) {
     templateActions: bindActionCreators(templateActions, dispatch),
     globalActions: bindActionCreators(globalActions, dispatch),
     actions: bindActionCreators(actions, dispatch),
+    zaloActions: bindActionCreators(zaloActions, dispatch),
   };
 }
 export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));

package/v2Containers/TagList/index.js

@@ -260,6 +260,7 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           modalProps={this.props.modalProps}
           currentOrgDetails={this.props.currentOrgDetails}
           channel={this.props.channel}
+          disabled={this.props.disabled}
         />
       </div>
     );
@@ -286,6 +287,7 @@ TagList.propTypes = {
   modalProps: PropTypes.any,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
+  disabled: PropTypes.bool
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/index.js

@@ -869,10 +869,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   filterZaloTemplates = (templates) => {
-    const { selectedZaloStatus } = this.state;
+    let { selectedZaloStatus } = this.state;
+    selectedZaloStatus = !this.props.isFullMode ? ZALO_STATUSES.ENABLE : selectedZaloStatus;
     if (selectedZaloStatus) {
-      return templates?.filter((template) => template?.versions?.base?.content?.zalo.status === selectedZaloStatus);
-    } 
+      return templates?.filter((template) => template?.versions?.base?.content?.zalo?.status === selectedZaloStatus);
+    }
     return templates;
   }
 
@@ -1909,6 +1910,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   selectTemplate = (id) => find(this.props.TemplatesList, {_id: id})
 
+  actionCallback = () => {
+    CapNotification.error({
+      message: this.props.intl.formatMessage(zaloMessages.zaloFailureNotificationPreview),
+    });
+  };
+
   handlePreviewClick(template, modeType) {
     if (this.state.channel.toLowerCase() !== ZALO_LOWERCASE) {
       this.togglePreview();
@@ -1951,6 +1958,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         token: token,
         id: template?._id,
         preview: true,
+        actionCallback: this.actionCallback,
       });
     }
   }
@@ -2900,6 +2908,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             ) : null
           }
 
+          {
+            channel.toLowerCase() === ZALO_LOWERCASE && !isFullMode ? (
+              <CapInfoNote message={formatMessage(messages.zaloOnlyApprovedTemplates)} />
+            ) : null
+          }
+
           <CapRow>
             <Pagination onPageChange={templates.length ? this.onPaginationChange : () => {}} paginationSelector="pagination-container">
               {this.getTemplateDataForGrid({ isLoading, loadingTip, channel: this.state.channel, templates: this.state.searchingZaloTemplate ? this.state.searchedZaloTemplates : this.props.TemplatesList, filterContent, handlers: { handlePreviewClick: this.handlePreviewClick, handleEditClick: this.handleEditClick}})}

package/v2Containers/Templates/messages.js

@@ -502,4 +502,8 @@ export default defineMessages({
     id: `${scope}.zaloPreview`,
     defaultMessage: 'Open preview in new tab',
   },
+  "zaloOnlyApprovedTemplates": {
+    id: `${scope}.zaloOnlyApprovedTemplates`,
+    defaultMessage: 'Only enabled templates are shown here',
+  },
 });

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -1038,134 +1038,6 @@ exports[`Test Templates container Should render temlates when zalo templates are
             tip="Getting all templates..."
           >
             <div>
-              <div
-                className="pagination-container"
-              >
-                <CapCustomCardList
-                  cardList={
-                    Array [
-                      Object {
-                        "content": <CapLabel
-                          className="zalo-listing-content desc"
-                          type="label19"
-                        >
-                          Test1
-                        </CapLabel>,
-                        "extra": Array [
-                          <CapTooltip
-                            title="Open preview in new tab"
-                          >
-                            <CapIcon
-                              className="view-zalo"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "marginRight": "16px",
-                                }
-                              }
-                              type="eye"
-                            />
-                          </CapTooltip>,
-                        ],
-                        "hoverOption": <CapButton
-                          className="select-zalo"
-                          isAddBtn={false}
-                          onClick={[Function]}
-                          type="primary"
-                        >
-                          Select
-                        </CapButton>,
-                        "key": "ZALO-card-Test1",
-                        "title": <CapRow>
-                          <CapLabel
-                            className="zalo-template-name"
-                            type="label1"
-                          >
-                            
-                          </CapLabel>
-                          <CapRow
-                            align="middle"
-                            className="zalo-status-container"
-                            type="flex"
-                          >
-                            <CapStatus
-                              color=""
-                              height="0.571rem"
-                              labelType="label3"
-                              text=""
-                              type="pending"
-                              width="0.571rem"
-                            />
-                          </CapRow>
-                        </CapRow>,
-                      },
-                      Object {
-                        "content": <CapLabel
-                          className="zalo-listing-content desc"
-                          type="label19"
-                        >
-                          Test2
-                        </CapLabel>,
-                        "extra": Array [
-                          <CapTooltip
-                            title="Open preview in new tab"
-                          >
-                            <CapIcon
-                              className="view-zalo"
-                              onClick={[Function]}
-                              style={
-                                Object {
-                                  "marginRight": "16px",
-                                }
-                              }
-                              type="eye"
-                            />
-                          </CapTooltip>,
-                        ],
-                        "hoverOption": <CapButton
-                          className="select-zalo"
-                          isAddBtn={false}
-                          onClick={[Function]}
-                          type="primary"
-                        >
-                          Select
-                        </CapButton>,
-                        "key": "ZALO-card-Test2",
-                        "title": <CapRow>
-                          <CapLabel
-                            className="zalo-template-name"
-                            type="label1"
-                          >
-                            
-                          </CapLabel>
-                          <CapRow
-                            align="middle"
-                            className="zalo-status-container"
-                            type="flex"
-                          >
-                            <CapStatus
-                              color=""
-                              height="0.571rem"
-                              labelType="label3"
-                              text=""
-                              type="pending"
-                              width="0.571rem"
-                            />
-                          </CapRow>
-                        </CapRow>,
-                      },
-                    ]
-                  }
-                  fbType="list"
-                  key="ZALO-card-list"
-                  style={
-                    Object {
-                      "marginLeft": "16px",
-                    }
-                  }
-                  type="ZALO"
-                />
-              </div>
               <div
                 style={
                   Object {
@@ -1173,7 +1045,34 @@ exports[`Test Templates container Should render temlates when zalo templates are
                     "overflow": "auto",
                   }
                 }
-              />
+              >
+                <CapHeader
+                  description={
+                    <CapLabel
+                      style={
+                        Object {
+                          "textAlign": "center",
+                        }
+                      }
+                      type="label1"
+                    >
+                      Please try searching with another term or apply different filter
+                    </CapLabel>
+                  }
+                  descriptionClass=""
+                  inline={false}
+                  size="large"
+                  title={
+                    <CapHeading
+                      className="channel-specific-illustration-text"
+                      type="h3"
+                    >
+                      Sorry, we couldn’t find any matches
+                    </CapHeading>
+                  }
+                  titleClass=""
+                />
+              </div>
             </div>
           </CapSpin>
         </div>

package/v2Containers/TemplatesV2/tests/index.test.js

@@ -93,6 +93,7 @@ describe("Test TemplatesV2", () => {
     expect(getByText('Viber')).toBeInTheDocument();
     expect(getByText('Facebook')).toBeInTheDocument();
     expect(getByText('WhatsApp')).toBeInTheDocument();
+    expect(getByText('Zalo')).toBeInTheDocument();
     expect(getByText('Gallery')).toBeInTheDocument();
   });
 });

package/v2Containers/Zalo/constants.js

@@ -10,7 +10,6 @@ export const ERROR = 'ERROR';
 export const STRING = 'STRING';
 export const NUMBER = 'NUMBER';
 export const DATE = 'DATE';
-export const ENABLE = 'ENABLE';
 
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';