@capillarytech/creatives-library 7.17.115 → 7.17.117

package/containers/App/constants.js

@@ -16,6 +16,7 @@ export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
+export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
 
 export const CARD_RELATED_TAGS = [
   'card_series',

package/package.json

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

package/styles/containers/layout/_layoutPage.scss

@@ -84,14 +84,11 @@
 }
 
 .contet-width-collapse {
-  margin-left: 17.438rem;
-  .component-wrapper {
-    max-width: 70.063rem;
-  }
+  margin-left: 17rem;
 }
 
 .content-width-expanded {
-  margin-left: 8.375rem;
+  margin-left: 4.475rem;
 }
 
 .breadcrumbs{

package/utils/common.js

@@ -18,6 +18,7 @@ import {
   ENABLE_CUSTOMER_BARCODE_TAG,
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
 } from '../containers/App/constants';
@@ -112,6 +113,10 @@ export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_CUSTOMER_BARCODE_TAG,
 );
 
+export const isEmailUnsubscribeTagMandatory = Auth.hasFeatureAccess.bind(
+  null,
+  EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
+);
 //filtering tags based on scope
 export const filterTags = (tagsToFilter, tagsList) => tagsList?.filter(
     (tag) => !tagsToFilter?.includes(tag?.definition?.value)

package/v2Components/FormBuilder/index.js

@@ -55,6 +55,7 @@ import { AI_SUGGESTION_API_URL, CONTENT_RECOMMENDATION_BOT } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF} from '../../containers/App/constants';
+import { isEmailUnsubscribeTagMandatory } from '../../utils/common';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -989,6 +990,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (tagValidationResponse.isBraceError){
                   errorString += this.props.intl.formatMessage(globalMessages.unbalanacedCurlyBraces);
                 }
+                if (tagValidationResponse?.isContentEmpty) {
+                  errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
+                }
               }
             }
           }
@@ -1127,6 +1131,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.missingTags = [];
     response.unsupportedTags = [];
     response.isBraceError = false;
+    response.isContentEmpty = false;
+    const contentForValidation = isEmail ? convert(content) : content ;
     if(tags && tags.length) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
@@ -1144,6 +1150,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let matchImg = regexImgSrc.exec(content);
       const regexCustomerBarcode = /{{customer_barcode}}(?![^<]*>)/g;
       let matchCustomerBarcode = regexCustomerBarcode.exec(content);
+      // \S matches anything other than a space, a tab, a newline, or a carriage return.
+      const validString= /\S/.test(contentForValidation);
+      if (isEmailUnsubscribeTagMandatory() && isEmail) {
+        const missingTagIndex = response?.missingTags?.indexOf("unsubscribe");
+        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+          response?.missingTags?.splice(missingTagIndex, 1);
+          if (validString) {
+            response.valid = true;
+          } else {
+            response.isContentEmpty = true;
+          }
+        }
+      }
       while (match !== null ) {
         const tagValue = match[0].substring(this.indexOfEnd(match[0], '{{'), match[0].indexOf('}}'));
         match = regex.exec(content);
@@ -1177,7 +1196,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
     }
-    const contentForValidation = isEmail ? convert(content) : content ;
     if(!validateIfTagClosed(contentForValidation)){
       response.isBraceError = true;
       response.valid = false;

package/v2Components/FormBuilder/messages.js

@@ -86,4 +86,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.imageReUpload',
     defaultMessage: 'Re upload',
   },
+  emailBodyEmptyError: {
+    id: 'creatives.componentsV2.FormBuilder.emailBodyEmptyError',
+    defaultMessage: 'Email body cannot be empty',
+  },
 });

package/v2Components/NavigationBar/style.js

@@ -1,11 +1,9 @@
 export const CapLeftNavigationCss = {
-  'padding-right': '1.28rem',
-  "width": '71.25rem',
-  'margin-left': '14.9rem',
+  'width': '75.770rem',
+  'margin-left': 'calc((100vw - 70.063rem)/2 + 1.6rem)',
 };
 
 export const CapLeftNavigatioOpenCss = {
-  'padding-left': '0',
-  "width": '70.063rem',
-  'margin-left': '18.5rem',
+  'width': '71.063rem',
+  'margin-left': 'calc((100vw - 70.063rem)/2 + 8rem)',
 };

package/v2Containers/Cap/index.js

@@ -62,6 +62,12 @@ const MainWrapper = styled.div`
   top: ${(props) => (props.isLatestLeftNavigationEnabled ? '1.72rem' : '5.29rem')};
 `;
 
+const ContentWrapper = styled.div`
+  && {
+    margin-left: ${(props) => (props.isLatestLeftNavigationEnabled ? (props.leftNavbarExpanded ? '17rem' : '4.475rem') : 0)};
+  }
+`;
+
 export class Cap extends React.Component { // eslint-disable-line react/prefer-stateless-function
 
   constructor(props) {
@@ -519,9 +525,13 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                 />) : ''}
               <MainWrapper isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled} className="main">
 
-                <div className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}>
+                <ContentWrapper
+                  className={`main-content ${this.state.leftNavbarExpanded ? "contet-width-collapse" : "content-width-expanded"}`}
+                  isLatestLeftNavigationEnabled={isLatestLeftNavigationEnabled}
+                  leftNavbarExpanded={this.state.leftNavbarExpanded}
+                >
                   {React.Children.toArray(this.props.children)}
-                </div>
+                </ContentWrapper>
               </MainWrapper>
             </div>
             {(toastMessages && toastMessages.length > 0) &&

package/v2Containers/TemplatesV2/TemplatesV2.style.js

@@ -11,6 +11,7 @@ export default css`
   .component-wrapper {
     ${(props) => props.isFullMode ? `
       max-width: 1140px;
+      margin: 0 auto;
       width: 100%;
       padding: ${CAP_SPACE_24} 0;
       .ant-tabs-content{