@capillarytech/creatives-library 7.17.37-alpha.4 → 7.17.37

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-alpha.4",
+  "version": "7.17.37",
   "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);
+  const error = new Error({ statusText, status });
   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 disabled={this?.props?.disabled} isAddBtn type="flat">{label || ''}</CapButton>
+          <CapButton isAddBtn type="flat">{label || ''}</CapButton>
         </CapPopover>
         }
         <CapModal
@@ -358,7 +358,6 @@ 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,12 +510,11 @@ export function SlideBoxContent(props) {
       {
         isEditZalo &&
         <Zalo
-          templateData={templateData}
-          location={creativesLocationProps}
-          selectedOfferDetails={selectedOfferDetails}
-          getDefaultTags={type}
-          channel={channel}
-          isFullMode={isFullMode}
+            templateData={templateData}
+            location={creativesLocationProps}
+            selectedOfferDetails={selectedOfferDetails}
+            getDefaultTags={type}
+            channel={channel}
         />
       }
       {

package/v2Containers/CreativesContainer/index.js

@@ -1,12 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  CapSlideBox,
-  CapHeader,
-  CapLink,
-  CapInput,
-  CapNotification,
-} from "@capillarytech/cap-ui-library";
+  CapSlideBox, CapHeader, CapLink, CapInput,
+} from '@capillarytech/cap-ui-library';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import {isEmpty, get, forEach, cloneDeep} from 'lodash';
@@ -27,10 +23,8 @@ 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';
@@ -103,35 +97,12 @@ export class Creatives extends React.Component {
     }
     this.setState(data);
   };
-
-  actionCallback = () => {
-    CapNotification.error({
-      message: <FormattedMessage {...zaloMessages.zaloFailureNotificationPreview}/>,
-    });
-  };
-
   onPreviewTemplate = (template) => {
-    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,
-      });
-    }
+    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 });
   };
   onEditTemplate = () => {
     this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
@@ -925,6 +896,9 @@ export class Creatives extends React.Component {
   handleCloseSlideBox = () => {
     const { currentChannel = '', slidBoxContent = '' } = this.state;
     const reloadTemplates = currentChannel === constants.WHATSAPP && slidBoxContent === 'editTemplate';
+    if (window.location.search.includes('?channel=whatsapp&mode=create')) {
+      window.history.pushState({}, null, '/creatives/ui/v2');
+    }
     this.setState((prevState) => ({
       ...prevState,
       templateData: undefined,
@@ -1231,7 +1205,6 @@ Creatives.propTypes = {
   channel: PropTypes.string,
   templateActions: PropTypes.object,
   globalActions: PropTypes.object,
-  zaloActions: PropTypes.object,
   cap: PropTypes.object,
   // isLoading: PropTypes.bool,
   templateUserList: PropTypes.array,
@@ -1260,7 +1233,6 @@ 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/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -295,3 +295,78 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
   />
 </CreativesContainer__SlideBoxWrapper>
 `;
+
+exports[`Test SlideBoxContent container it should clear the url, on channel change from new whatsapp to another 1`] = `
+<CreativesContainer__SlideBoxWrapper
+  className="add-creatives-section creatives-library-mode "
+>
+  <CapSlideBox
+    closeIconPosition="right"
+    closeIconSize="m"
+    closeIconType="close"
+    content={
+      <SlideBoxContent
+        currentChannel="WHATSAPP"
+        getFormData={[Function]}
+        handleClose={[Function]}
+        onCallTaskSubmit={[Function]}
+        onChannelChange={[Function]}
+        onCreateComplete={[MockFunction]}
+        onCreateNew={[Function]}
+        onCreateNextStep={[Function]}
+        onEmailModeChange={[Function]}
+        onEnterTemplateName={[Function]}
+        onFTPSubmit={[MockFunction]}
+        onFacebookSubmit={[MockFunction]}
+        onMobilepushModeChange={[Function]}
+        onPreviewTemplate={[Function]}
+        onRemoveTemplateName={[Function]}
+        onResetStep={[Function]}
+        onSelectTemplate={[Function]}
+        onShowTemplates={[Function]}
+        onValidationFail={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        onWechatTemplateChange={[Function]}
+        saveMessage={[Function]}
+        setIsLoadingContent={[Function]}
+        showTemplateName={[Function]}
+        slidBoxContent="editTemplate"
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    footer={
+      <SlideBoxFooter
+        currentChannel="WHATSAPP"
+        onCreateNextStep={[Function]}
+        onDiscard={[Function]}
+        onEditTemplate={[Function]}
+        onSave={[Function]}
+        shouldShowContinueFooter={[Function]}
+        shouldShowDoneFooter={[Function]}
+        slidBoxContent="editTemplate"
+        templateStep="modeSelection"
+      />
+    }
+    handleClose={[Function]}
+    header={
+      <SlideBoxHeader
+        channel="WHATSAPP"
+        isLoadingContent={true}
+        onShowTemplates={[Function]}
+        onWeChatMaptemplateStepChange={[Function]}
+        showPrefix={true}
+        slidBoxContent="editTemplate"
+        templateNameRenderProp={[Function]}
+        templateStep="modeSelection"
+        weChatMaptemplateStep={0}
+        weChatTemplateType=""
+      />
+    }
+    position="right"
+    show={false}
+    size="size-xl"
+  />
+</CreativesContainer__SlideBoxWrapper>
+`;

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

@@ -74,6 +74,22 @@ describe('Test SlideBoxContent container', () => {
     expect(handleCloseCreatives).toHaveBeenCalledWith(true);
   });
 
+  it('it should clear the url, on channel change from new whatsapp to another', () => {
+    renderFunction(
+      'WHATSAPP',
+      'editTemplate',
+      whatsappTemplates,
+      whatsappGetTemplateData1,
+    );
+    delete window.location;
+    window.location = new URL('http://127.0.0.1:3030/creatives/ui/v2?channel=whatsapp&mode=create');
+    renderedComponent.instance().onEditTemplate();
+    renderedComponent.find('CapSlideBox').props().content.props.handleClose();
+    expect(renderedComponent).toMatchSnapshot();
+    expect(handleCloseCreatives).toHaveBeenCalledTimes(1);
+    expect(handleCloseCreatives).toHaveBeenCalledWith(true);
+  });
+
   it('campaign message, whatsapp edit all data', () => {
     renderFunction(
       'WHATSAPP',

package/v2Containers/TagList/index.js

@@ -260,7 +260,6 @@ 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>
     );
@@ -287,7 +286,6 @@ TagList.propTypes = {
   modalProps: PropTypes.any,
   currentOrgDetails: PropTypes.object,
   channel: PropTypes.string,
-  disabled: PropTypes.bool
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/index.js

@@ -869,11 +869,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   }
 
   filterZaloTemplates = (templates) => {
-    let { selectedZaloStatus } = this.state;
-    selectedZaloStatus = !this.props.isFullMode ? ZALO_STATUSES.ENABLE : selectedZaloStatus;
+    const { selectedZaloStatus } = this.state;
     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;
   }
 
@@ -1910,12 +1909,6 @@ 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();
@@ -1958,7 +1951,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         token: token,
         id: template?._id,
         preview: true,
-        actionCallback: this.actionCallback,
       });
     }
   }
@@ -2908,12 +2900,6 @@ 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,8 +502,4 @@ 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,6 +1038,134 @@ 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 {
@@ -1045,34 +1173,7 @@ 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/Zalo/constants.js

@@ -10,6 +10,7 @@ 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';

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,
@@ -15,14 +15,13 @@ import {
   CapHeading,
   CapHeader,
   CapIcon,
-  CapNotification,
 } from "@capillarytech/cap-ui-library";
 import {
   CAP_SPACE_16,
   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 {
@@ -37,6 +36,7 @@ import {
   ERROR_ALERT,
   WARNING_ALERT,
   ZALO_STATUSES,
+  ENABLE,
 } from "./constants";
 import "./index.scss";
 import { makeSelectZalo } from "./selectors";
@@ -49,6 +49,7 @@ import { makeSelectMetaEntities, setInjectedTags } from "../Cap/selectors";
 import * as globalActions from "../Cap/actions";
 import { validateTags } from "../../utils/tagValidations";
 
+
 export const Zalo = ({
   intl,
   actions,
@@ -61,16 +62,13 @@ 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(ENABLE);
 
   const ZaloFooter = styled.div`
     background-color: ${CAP_WHITE};
@@ -125,7 +123,6 @@ export const Zalo = ({
       oa_id: sourceAccountIdentifier,
       token,
       id,
-      actionCallback,
     });
   }, []);
 
@@ -260,7 +257,6 @@ export const Zalo = ({
         value={value || ""}
         size="default"
         onFocus={() => setTextAreaId(name)}
-        disabled={isFullMode}
       />
     );
   };
@@ -284,12 +280,6 @@ export const Zalo = ({
     }
   };
 
-  const actionCallback = () => {
-    CapNotification.error({
-      message: formatMessage(messages.zaloFailureNotificationTemplate),
-    });
-  };
-
   return (
     <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
       <CapRow type="flex" className="cap-zalo-creatives">
@@ -322,7 +312,6 @@ export const Zalo = ({
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
                     selectedOfferDetails={selectedOfferDetails}
-                    disabled={isFullMode}
                   />
                 }
               />
@@ -352,28 +341,26 @@ export const Zalo = ({
             </CapRow>
           </CapRow>
         </CapColumn>
-        <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>
+        <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>
           </CapRow>
         </CapColumn>
       </CapRow>

package/v2Containers/Zalo/index.scss

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

package/v2Containers/Zalo/messages.js

@@ -70,13 +70,5 @@ export default defineMessages({
   PENDING_REVIEW: {
     id: `${prefix}.PENDING_REVIEW`,
     defaultMessage: 'pending review',
-  },
-  zaloFailureNotificationTemplate: {
-    id: `${prefix}.zaloFailureNotificationTemplate`,
-    defaultMessage: 'Unable to load zalo template',
-  },
-  zaloFailureNotificationPreview: {
-    id: `${prefix}.zaloFailureNotificationPreview`,
-    defaultMessage: 'Unable to load zalo preview',
-  },
+  }
 });

package/v2Containers/Zalo/saga.js

@@ -8,29 +8,23 @@ import {
 } from "./constants";
 
 export function* getTemplateInfoById({ payload }) {
-  const { preview = "", actionCallback } = payload;
   try {
     const res = yield call(Api.getTemplateInfoById, payload);
     if (res?.success) {
       yield put({
-        type: preview ? ZALO_TEMPLATE_PREVIEW_INFO : ZALO_TEMPLATE_INFO_SUCCESS,
+        type: payload?.preview
+          ? ZALO_TEMPLATE_PREVIEW_INFO
+          : ZALO_TEMPLATE_INFO_SUCCESS,
         result: res?.response || {},
       });
     } else {
-      const errorMsg = res?.message || res?.status?.message;
       yield put({
         type: ZALO_TEMPLATE_INFO_ERROR,
-        error: errorMsg,
+        error: res?.error || res?.message,
       });
-      if (actionCallback) {
-        actionCallback(errorMsg);
-      }
     }
   } catch (error) {
     yield put({ type: ZALO_TEMPLATE_INFO_ERROR, error });
-    if (actionCallback) {
-      actionCallback(error);
-    }
   }
 }