@capillarytech/creatives-library 8.0.89 → 8.0.90

package/package.json

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

package/utils/commonUtils.js

@@ -81,3 +81,5 @@ export const transformCustomFieldsData = (customFields) => {
 
   return result;
 };
+
+export const isTagIncluded = (value) => value && value.includes('{{') && value.includes('}}');

package/v2Containers/Zalo/index.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { get, isEmpty } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
@@ -54,6 +54,7 @@ import * as globalActions from '../Cap/actions';
 import v2ZaloReducer from './reducer';
 import { v2ZaloSagas } from './saga';
 import { CapIcon } from '@capillarytech/cap-ui-library';
+import { isTagIncluded } from '../../utils/commonUtils';
 
 export const Zalo = (props) => {
   const {
@@ -237,7 +238,7 @@ export const Zalo = (props) => {
         const { name = '', value = '', minLength = '', maxLength = '' } = listParams;
         if (name === textAreaId) {
           const text = `${value}{{${data}}}`;
-          const hasTag = text.includes('{{') && text.includes('}}');
+          const hasTag = isTagIncluded(text);
           const isLengthError = !hasTag && (text.length <= minLength || text.length > maxLength);
           return {
             ...listParams,
@@ -285,7 +286,7 @@ export const Zalo = (props) => {
     let error = e ? tagValidationErrorMessage(e) : '';
     
     // Only check length validation if there are no tags in the content
-    const hasTag = e && e.includes('{{') && e.includes('}}');
+    const hasTag = isTagIncluded(e);
     if (!hasTag && (!e || e.length <= minLength || e.length > maxLength)) {
       error = formatMessage(messages.maxMinLengthMessage, {
         minLength,
@@ -356,7 +357,7 @@ export const Zalo = (props) => {
     let disableCheck = false;
     templateListParams?.forEach((listParams) => {
       const { error = '', value = '' } = listParams;
-      const hasTag = value && value.includes('{{') && value.includes('}}');
+      const hasTag = isTagIncluded(value);
       const errorMessage = !error && !hasTag
         ? handleErrorValidation(value, listParams)
         : error;
@@ -403,7 +404,7 @@ export const Zalo = (props) => {
   const renderContent = () =>
     templateListParams?.map((listParam) => {
       const { name = '', value = '', maxLength = '' } = listParam;
-      const hasTag = value && value.includes('{{') && value.includes('}}');
+      const hasTag = isTagIncluded(value);
       
       return (
         <>
@@ -427,6 +428,12 @@ export const Zalo = (props) => {
       );
     });
 
+  const hasTag = templateListParams?.some((listParam) => {
+    const { value = '' } = listParam;
+    const isTagAvailable = isTagIncluded(value);
+    return isTagAvailable;
+  });
+
   return (
     <CapSpin spinning={zaloTemplateInfoStatus === REQUEST}>
       <CapRow type="flex" className="cap-zalo-creatives">
@@ -469,17 +476,21 @@ export const Zalo = (props) => {
             </CapRow>
             <CapRow className="zalo-variable-list">
               {renderContent()}
-            </CapRow>
-            <CapAlert
-              message={
-                <CapLabel type="label2">
-                  <CapIcon type="warning" />
-                  {formatMessage(messages.tagLengthWarning)}
-                </CapLabel>
+              {
+                hasTag && (
+                  <CapAlert
+                    message={
+                      <CapLabel type="label2">
+                        <CapIcon type="warning" className="alert-icon-zalo" />
+                        {formatMessage(messages.tagLengthWarning)}
+                      </CapLabel>
+                    }
+                    type="warning"
+                    className="zalo-warning-message"
+                  />
+                )
               }
-              type="warning"
-              className="zalo-warning-message"
-            />
+            </CapRow>
           </CapRow>
         </CapColumn>
         <CapColumn span={10}>

package/v2Containers/Zalo/index.scss

@@ -28,7 +28,11 @@
   }
 
   .zalo-warning-message {
-    margin-bottom: $CAP_SPACE_16;
+    margin-top: $CAP_SPACE_24;
+
+    .alert-icon-zalo {
+      margin-right: $CAP_SPACE_08;
+    }
   }
 
   .variable-field-container {