@capillarytech/creatives-library 7.17.35-alpha.2 → 7.17.36

package/containers/Templates/actions.js

@@ -7,7 +7,6 @@
  import * as types from './constants';
 
  export function getAllTemplates(channel, queryParams) {
-   
    return {
      type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
    };
@@ -26,7 +25,6 @@
  }
 
  export function deleteTemplate(channel, id) {
-   
    return {
      type: types.DELETE_TEMPLATE_REQUEST, channel, id,
    };
@@ -45,7 +43,6 @@
  }
 
  export function setWeChatAccount(weChatAccount) {
-   
    return {
      type: types.SET_WECHAT_ACCOUNT,
      weChatAccount,
@@ -80,7 +77,6 @@
  }
 
  export function getTemplateDetails(id, channel) {
-   
    return {
      type: types.GET_TEMPLATE_DETAILS_REQUEST,
      id,
@@ -95,7 +91,6 @@
  }
 
  export function resetUploadData() {
-   
    return {
      type: types.RESET_UPLOAD_DATA,
    };

package/index.js

@@ -91,6 +91,10 @@ import Whatsapp from './v2Containers/Whatsapp';
 import whatsappReducer from './v2Containers/Whatsapp/reducer';
 import whatsappSaga from './v2Containers/Whatsapp/sagas';
 
+import Zalo from './v2Containers/Zalo';
+import zaloReducer from './v2Containers/Zalo/reducer';
+import zaloSaga from './v2Containers/Zalo/saga';
+
 import Rcs from './v2Containers/Rcs';
 import rcsReducer from './v2Containers/Rcs/reducer';
 import rcsSaga from './v2Containers/Rcs/sagas';
@@ -120,6 +124,7 @@ 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 GalleryContainer = {Gallery, galleryReducer, gallerySagas};
@@ -168,5 +173,6 @@ export { CapContainer,
   FacebookPreviewContainer,
   SmsTraiContainer,
   WhatsappContainer,
+  zaloContainer,
   RcsContainer,
 };

package/package.json

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

package/routes.js

@@ -663,6 +663,8 @@ export default function createRoutes(store) {
           import('v2Containers/SmsTrai/Create/reducer'),
           import('v2Containers/Whatsapp/sagas'),
           import('v2Containers/Whatsapp/reducer'),
+          import('v2Containers/Zalo/saga'),
+          import('v2Containers/Zalo/reducer'),
           import('v2Containers/Rcs/sagas'),
           import('v2Containers/Rcs/reducer'),
         ]);
@@ -689,6 +691,7 @@ export default function createRoutes(store) {
           capFacebookPreviewSagas, capFacebookPreviewReducer,
           smsTraiSagas, smsTraiReducer,
           whatsappSagas, whatsappReducer,
+          zaloSagas, zaloReducer,
           rcsSagas, rcsReducer,
         ]) => {
           injectReducer('templates', reducer.default);
@@ -710,6 +713,7 @@ export default function createRoutes(store) {
           injectReducer('facebookPreview', capFacebookPreviewReducer.default);
           injectReducer('smsTrai', smsTraiReducer.default);
           injectReducer('whatsapp', whatsappReducer.default);
+          injectReducer('zalo', zaloReducer.default);
           injectReducer('rcs', rcsReducer.default);
           injectSagas(gallerySagas.default);
           injectSagas(sagas.default);
@@ -730,6 +734,7 @@ export default function createRoutes(store) {
           injectSagas(capFacebookPreviewSagas.default);
           injectSagas(smsTraiSagas.default);
           injectSagas(whatsappSagas.default);
+          injectSagas(zaloSagas.default);
           injectSagas(rcsSagas.default);
           renderRoute(component);
         });

package/services/api.js

@@ -498,4 +498,9 @@ export const getCdnTransformationConfig = () => {
 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'));
+  }

package/utils/common.js

@@ -13,7 +13,6 @@ import {
   REGISTRATION_CUSTOM_FIELD,
   JP_LOCALE_HIDE_FEATURE,
   ENABLE_CUSTOMER_BARCODE_TAG,
-  CUSTOMER_BARCODE_TAG,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -96,10 +95,6 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
     //filtering HOSPITALITY_RELATED_TAGS if org does not have HOSPITALITY_BASED_SCOPE feature enabled
     clonedTags = filterTags(HOSPITALITY_RELATED_TAGS, tagsList);
   }
-  if (!hasCustomerBarcodeFeatureEnabled()) {
-    //filtering CUSTOMER_BARCODE_TAG if org does not have CUSTOMER_BARCODE_TAG feature enabled
-    clonedTags = filterTags(CUSTOMER_BARCODE_TAG, clonedTags);
-  }
   _.forEach(clonedTags, (temp) => {
     const tag = temp.definition;
     if (!tag['tag-header']) { //if tag doesn't have subtag(s), which means this tag itself is tag and not a tag header.

package/v2Components/CapTagList/index.js

@@ -187,6 +187,10 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       //filtering HOSPITALITY_RELATED_TAGS if org does not have HOSPITALITY_BASED_SCOPE feature enabled
       clonedTags = _.omit(clonedTags, HOSPITALITY_RELATED_TAGS);
     }
+    if (!hasCustomerBarcodeFeatureEnabled()) {
+      //filtering CUSTOMER_BARCODE_TAG if org does not have CUSTOMER_BARCODE_TAG feature enabled
+      clonedTags = _.omit(clonedTags, CUSTOMER_BARCODE_TAG);
+    }
     _.forEach(clonedTags, (val = '', key) => {
       let supportedTagsString = '';
       _.forEach(val.supportedTags, (supportedTag) => {

package/v2Components/WhatsappStatusContainer/_whatsappStatusContainer.scss

@@ -1,6 +1,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
-.whatsapp-status-container {
+.whatsapp-status-container, 
+.zalo-status-container {
   margin-top: $CAP_SPACE_12;
   width: 150%;
   height: 20px;

package/v2Containers/App/constants.js

@@ -53,6 +53,7 @@ export const RCS = 'rcs';
 export const LINE = 'line';
 export const EMAIL = 'email';
 export const ASSETS = 'assets';
+export const ZALO = 'zalo';
 
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -25,6 +25,7 @@ import Whatsapp from '../Whatsapp';
 import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
+import Zalo from '../Zalo';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -196,6 +197,7 @@ export function SlideBoxContent(props) {
   let isEditFTP = false;
   let isEditWhatsapp = false;
   let isEditRcs = false;
+  let isEditZalo = false;
   const isEmailCreate = isCreate && channel === constants.EMAIL;
   if (templateData && channel) {
     channel = templateData.type;// for edit mode with template data
@@ -211,6 +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
   }
   const isDltEnabled = commonUtil.isTraiDLTEnable(isFullMode, smsRegister);
   const hasJPLocaleHideFeatureEnabled = commonUtil?.hasJPLocaleHideFeatureEnabled();
@@ -504,6 +507,16 @@ export function SlideBoxContent(props) {
             messageDetails={messageDetails}
           />
       }
+      {
+        isEditZalo &&
+        <Zalo
+            templateData={templateData}
+            location={creativesLocationProps}
+            selectedOfferDetails={selectedOfferDetails}
+            getDefaultTags={type}
+            channel={channel}
+        />
+      }
       {
          isCreateCallTask &&
          <CallTask

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -11,7 +11,7 @@ import whatsppMsg from '../Whatsapp/messages';
 import { LANGUAGE_OPTIONS } from '../Whatsapp/constants';
 import globalMessages from '../Cap/messages';
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
-import { NO_COMMUNICATION, FTP, WHATSAPP, RCS } from '../App/constants';
+import { NO_COMMUNICATION, FTP, WHATSAPP, RCS, ZALO } from '../App/constants';
 import { isTraiDLTEnable } from '../../utils/common';
 import { formatString } from '../../utils/Formatter';
 import {
@@ -26,8 +26,8 @@ const StyledLabel = styled(CapLabelInline)`
 const PrefixWrapper = styled.div`
   margin-right: 16px;
 `;
-const renderData = (type, value) => (
-  <StyledLabel type={type}>
+const renderData = (type, value, channel) => (
+  <StyledLabel className={channel?.toLowerCase() === ZALO ? 'zalo-template-name-spacing' : ''} type={type}>
     {value}
   </StyledLabel>
 );
@@ -40,8 +40,10 @@ export function SlideBoxHeader(props) {
   const showCreateTraiSMSHeader = isTraiDlt && channel.toLowerCase() === "sms";
   const isWhatsappEdit = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'editTemplate';
   const isWhatsappCreate = channel.toLowerCase() === WHATSAPP && slidBoxContent === 'createTemplate';
+  const isZaloEdit = channel.toLowerCase() === ZALO && slidBoxContent === 'editTemplate';
+  const zaloOverview = isZaloEdit && isFullMode;
   const whatsappOverview = isWhatsappEdit && isFullMode;
-  const headerMessage = whatsappOverview ? messages.whatsappOverview : messages.editMessageContent;
+  const headerMessage = whatsappOverview ? messages.whatsappOverview : zaloOverview ? messages.zaloOverview : messages.editMessageContent;
   const {
     whatsappTemplateName,
     whatsappTemplateCategory,
@@ -49,7 +51,7 @@ export function SlideBoxHeader(props) {
   } = templateData || {};
   const templateName = whatsappTemplateName || templateData?.name;
   const showRcsTemplateName = channel.toLowerCase() === RCS && slidBoxContent === 'editTemplate' && !isFullMode && templateName;
-  const showTemplateName = isWhatsappEdit || showRcsTemplateName;
+  const showTemplateName = isWhatsappEdit || showRcsTemplateName || isZaloEdit;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
   const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
@@ -63,6 +65,7 @@ export function SlideBoxHeader(props) {
       ftp: 'FTP',
       whatsapp: <FormattedMessage {...messages.whatsappTemplate} />,
       rcs: <FormattedMessage {...messages.rcsCreative} />,
+      zalo: <FormattedMessage {...messages.zaloTemplate} />
     };
     return labels[currentChannel.toLowerCase()];
   };
@@ -102,7 +105,7 @@ export function SlideBoxHeader(props) {
             <>
               {showTemplateName ? (
                 <>
-                  {renderData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />)}
+                  {renderData("label1", <FormattedMessage {...globalMessages.templateNameLabel} />, channel)}
                   <StyledLabel className='whatsapp-rcs-slidebox-template-name' type="label2">{templateName}</StyledLabel>
                 </>
               ) : ""}

package/v2Containers/CreativesContainer/constants.js

@@ -18,6 +18,7 @@ export const NO_COMMUNICATION = "NO_COMMUNICATION";
 export const VIBER = "VIBER";
 export const WHATSAPP = "WHATSAPP";
 export const RCS = "RCS";
+export const ZALO = "ZALO";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";

package/v2Containers/CreativesContainer/index.scss

@@ -57,4 +57,7 @@ $classPrefix: add-creatives-section;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-bottom: -3px;
+}
+.zalo-template-name-spacing {
+    margin-right: 8px;
 }

package/v2Containers/CreativesContainer/messages.js

@@ -310,10 +310,18 @@ export default defineMessages({
     id: `${scope}.whatsappOverview`,
     defaultMessage: `WhatsApp template overview`,
   },
+  "zaloOverview": {
+    id: `${scope}.zaloOverview`,
+    defaultMessage: `Zalo template overview`,
+  },
   "whatsappTemplate": {
     id: `${scope}.whatsappTemplate`,
     defaultMessage: `WhatsApp template`,
   },
+  "zaloTemplate": {
+    id: `${scope}.zaloTemplate`,
+    defaultMessage: `Zalo template`,
+  },
   "learnTips": {
     id: `${scope}.learnTips`,
     defaultMessage: `Learn tips to get approved`,

package/v2Containers/CreativesContainer/tests/SlideBoxHeader.test.js

@@ -4,7 +4,7 @@ import { shallowWithIntl } from '../../../helpers/intl-enzym-test-helpers';
 import { SlideBoxHeader } from '../SlideBoxHeader';
 import mockdata from '../../mockdata';
 
-const { whatsappEditTemplateData, rcsEditTemplateData, whatsappPreviewTemplateData, rcsPreviewTemplateData } = mockdata;
+const { whatsappEditTemplateData, rcsEditTemplateData, whatsappPreviewTemplateData, rcsPreviewTemplateData,zaloEditTemplateData } = mockdata;
 
 jest.mock("../../../v2Components/FormBuilder", () => ({
   __esModule: true,
@@ -66,4 +66,9 @@ describe('Test SlideBoxHeader container', () => {
     renderFunction("RCS", "templates");
     expect(renderedComponent).toMatchSnapshot();
   });
+
+  it('Should render correct component for zalo channel edit mode', () => {
+    renderFunction("ZALO", "editTemplate", zaloEditTemplateData, true);
+    expect(renderedComponent).toMatchSnapshot();
+  });
 });

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -143,6 +143,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
       <React.Fragment>
         <React.Fragment>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label1"
           >
             <FormattedMessage
@@ -160,6 +161,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
         </React.Fragment>
         <React.Fragment>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label3"
           >
             <FormattedMessage
@@ -169,6 +171,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
             />
           </SlideBoxHeader__StyledLabel>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label1"
           >
             <FormattedMessage
@@ -178,11 +181,13 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
             />
           </SlideBoxHeader__StyledLabel>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label2"
           >
             Alert Update
           </SlideBoxHeader__StyledLabel>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label3"
           >
             <FormattedMessage
@@ -192,6 +197,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
             />
           </SlideBoxHeader__StyledLabel>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label1"
           >
             <FormattedMessage
@@ -201,6 +207,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
             />
           </SlideBoxHeader__StyledLabel>
           <SlideBoxHeader__StyledLabel
+            className=""
             type="label2"
           >
             <FormattedMessage
@@ -304,3 +311,54 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
   />
 </div>
 `;
+
+exports[`Test SlideBoxHeader container Should render correct component for zalo channel edit mode 1`] = `
+<div
+  key="creatives-container-slidebox-header-content"
+>
+  <CapHeader
+    description={
+      <React.Fragment>
+        <React.Fragment>
+          <SlideBoxHeader__StyledLabel
+            className="zalo-template-name-spacing"
+            type="label1"
+          >
+            <FormattedMessage
+              defaultMessage="Template name"
+              id="creatives.containersV2.templateNameLabel"
+              values={Object {}}
+            />
+          </SlideBoxHeader__StyledLabel>
+          <SlideBoxHeader__StyledLabel
+            className="whatsapp-rcs-slidebox-template-name"
+            type="label2"
+          >
+            Test sample
+          </SlideBoxHeader__StyledLabel>
+        </React.Fragment>
+      </React.Fragment>
+    }
+    descriptionClass=""
+    inline={false}
+    prefix={false}
+    size="large"
+    title={
+      <FormattedMessage
+        defaultMessage="Zalo template overview"
+        id="creatives.containersV2.Creatives.zaloOverview"
+        values={
+          Object {
+            "channel": <FormattedMessage
+              defaultMessage="Zalo template"
+              id="creatives.containersV2.Creatives.zaloTemplate"
+              values={Object {}}
+            />,
+          }
+        }
+      />
+    }
+    titleClass=""
+  />
+</div>
+`;