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

package/package.json

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

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,12 @@ export function SlideBoxContent(props) {
       {
         isEditZalo &&
         <Zalo
-            templateData={templateData}
-            location={creativesLocationProps}
-            selectedOfferDetails={selectedOfferDetails}
-            getDefaultTags={type}
-            channel={channel}
+          templateData={templateData}
+          location={creativesLocationProps}
+          selectedOfferDetails={selectedOfferDetails}
+          getDefaultTags={type}
+          channel={channel}
+          isFullMode={isFullMode}
         />
       }
       {

package/v2Containers/CreativesContainer/index.js

@@ -23,6 +23,7 @@ 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 { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
@@ -98,11 +99,26 @@ export class Creatives extends React.Component {
     this.setState(data);
   };
   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,
+      });
+    }
   };
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
@@ -1202,6 +1218,7 @@ Creatives.propTypes = {
   channel: PropTypes.string,
   templateActions: PropTypes.object,
   globalActions: PropTypes.object,
+  zaloActions: PropTypes.object,
   cap: PropTypes.object,
   // isLoading: PropTypes.bool,
   templateUserList: PropTypes.array,
@@ -1230,6 +1247,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/Zalo/index.js

@@ -4,7 +4,7 @@ import { injectIntl } from "react-intl";
 import { createStructuredSelector } from "reselect";
 import { bindActionCreators } from "redux";
 import { get } from "lodash";
-import styled from 'styled-components';
+import styled from "styled-components";
 import {
   CapSpin,
   CapRow,
@@ -21,7 +21,7 @@ import {
   CAP_SPACE_24,
   CAP_SPACE_32,
   CAP_WHITE,
-} from '@capillarytech/cap-ui-library/styled/variables';
+} from "@capillarytech/cap-ui-library/styled/variables";
 import messages from "./messages";
 import withCreatives from "../../hoc/withCreatives";
 import {
@@ -48,7 +48,6 @@ import { makeSelectMetaEntities, setInjectedTags } from "../Cap/selectors";
 import * as globalActions from "../Cap/actions";
 import { validateTags } from "../../utils/tagValidations";
 
-
 export const Zalo = ({
   intl,
   actions,
@@ -61,13 +60,16 @@ export const Zalo = ({
   injectedTags,
   selectedOfferDetails,
   template,
+  isFullMode,
 }) => {
   const { formatMessage } = intl;
   const [zaloTemplateListParams, setZaloTemplateListParams] = useState([]);
   const [templatePreviewUrl, setTemplatePreviewUrl] = useState("");
   const [tags, updateTags] = useState([]);
   const [textAreaId, updateTextAreaId] = useState("");
-  const [templateStatus, setZaloTemplateStatus] = useState(ZALO_STATUSES.ENABLE);
+  const [templateStatus, setZaloTemplateStatus] = useState(
+    ZALO_STATUSES.ENABLE
+  );
 
   const ZaloFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -256,6 +258,7 @@ export const Zalo = ({
         value={value || ""}
         size="default"
         onFocus={() => setTextAreaId(name)}
+        disabled={isFullMode}
       />
     );
   };
@@ -311,6 +314,7 @@ export const Zalo = ({
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
+                    disabled={isFullMode}
                   />
                 }
               />
@@ -340,26 +344,28 @@ export const Zalo = ({
             </CapRow>
           </CapRow>
         </CapColumn>
-        <CapColumn type="flex" span={10} className="zalo-preview-container">
-          <CapRow>
-            <CapLabel className="preview-head">
-              {formatMessage(messages.previewHead)}
-            </CapLabel>
-          </CapRow>
-          <CapRow>
-            <CapLabel className="preview-text">
-              {formatMessage(messages.previewText)}
-            </CapLabel>
-          </CapRow>
-          <CapRow>
-            <CapLabel
-              data-testid="preview-link-button"
-              onClick={handlePreview}
-              className="preview-link"
-            >
-              {formatMessage(messages.openPreview)}{" "}
-              <CapIcon type="open-in-new-light"></CapIcon>
-            </CapLabel>
+        <CapColumn span={10}>
+          <CapRow className="zalo-preview-container">
+            <CapRow>
+              <CapLabel className="preview-head">
+                {formatMessage(messages.previewHead)}
+              </CapLabel>
+            </CapRow>
+            <CapRow>
+              <CapLabel className="preview-text">
+                {formatMessage(messages.previewText)}
+              </CapLabel>
+            </CapRow>
+            <CapRow>
+              <CapLabel
+                data-testid="preview-link-button"
+                onClick={handlePreview}
+                className="preview-link"
+              >
+                {formatMessage(messages.openPreview)}{" "}
+                <CapIcon type="open-in-new-light"></CapIcon>
+              </CapLabel>
+            </CapRow>
           </CapRow>
         </CapColumn>
       </CapRow>

package/v2Containers/Zalo/index.scss

@@ -42,11 +42,10 @@
   }
 
   .zalo-preview-container {
-    text-align: center;
     position: fixed;
-    right: 0;
-    padding-left: 194px;
-    padding-right: 116px;
+    text-align: center;
+    padding-left: 72px;
+    padding-right: 110px;
 
     .preview-head {
       font-weight: 500;