@capillarytech/creatives-library 8.0.159 → 8.0.161

package/v2Containers/CreativesContainer/index.js

@@ -103,6 +103,7 @@ export class Creatives extends React.Component {
       activeFormBuilderTab: constants.ANDROID,
       // NEW: Test and Preview feature state
       showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false, // Add flag to track Test & Preview mode
     };
     this.liquidFlow = Boolean(commonUtil.hasLiquidSupportFeature());
     this.creativesTemplateSteps = {
@@ -877,7 +878,7 @@ export class Creatives extends React.Component {
           const { Templates, templateData: templateDataProps } = this.props;
           const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
           const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
-          const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
+          const accountDetails = (selectedWhatsappAccount || selectedAccountDetails);
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
@@ -917,13 +918,12 @@ export class Creatives extends React.Component {
           //to send {{unsubscribe}} to backend inside varMapped
           const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
           if (
-            languages[0].content?.match(unsubscribeRegex)?.length > 0 &&
-            Object.keys(varMapped)?.every(
+            languages[0].content?.match(unsubscribeRegex)?.length > 0
+            && Object.keys(varMapped)?.every(
               (key) => !key?.includes("_unsubscribe")
             )
           ) {
-            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
-              "{{unsubscribe}}";
+            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] = "{{unsubscribe}}";
           }
           const whatsappMedia = {
             header,
@@ -1255,14 +1255,21 @@ export class Creatives extends React.Component {
     this.setState({ isDiscardMessage: true });
   }
 
+
   // NEW: Handler for Test and Preview button
   handleTestAndPreview = () => {
-    this.setState({ showTestAndPreviewSlidebox: true });
+    this.setState({
+      showTestAndPreviewSlidebox: true,
+      isTestAndPreviewMode: true, // Set flag to prevent validation
+    });
   }
 
   // NEW: Handler to close Test and Preview slidebox
   handleCloseTestAndPreview = () => {
-    this.setState({ showTestAndPreviewSlidebox: false });
+    this.setState({
+      showTestAndPreviewSlidebox: false,
+      isTestAndPreviewMode: false, // Reset flag when closing
+    });
   }
 
   shouldShowFooter = () => {
@@ -1300,8 +1307,8 @@ export class Creatives extends React.Component {
     }
     if (channel === constants.MOBILE_PUSH
       && ((slidBoxContent === 'createTemplate' && !isEmpty(mobilePushCreateMode))
-        || (slidBoxContent === 'editTemplate' && (currentStep === 'modeSelection' || isFullMode))) &&
-      templateNameExists) {
+        || (slidBoxContent === 'editTemplate' && (currentStep === 'modeSelection' || isFullMode)))
+      && templateNameExists) {
       showFooter = true;
     }
 
@@ -1312,8 +1319,8 @@ export class Creatives extends React.Component {
     }
 
     if (showFooter) {
-      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent') ||
-        ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
+      if (slidBoxContent === "createTemplate" && ((channel === constants.EMAIL && currentStep === 'createTemplateContent')
+        || ([constants.SMS, constants.WECHAT].includes(channel) && currentStep === 'modeSelection'))) {
         showFooter = showFooter && !this.state.isLoadingContent;
       } else if (slidBoxContent === "editTemplate"
         && ([constants.SMS, constants.WECHAT, constants.EMAIL].includes(channel)
@@ -1378,7 +1385,7 @@ export class Creatives extends React.Component {
       onBlur={() => { this.setState({ isEditName: false }, () => { this.showTemplateName({ formData, onFormDataChange }); }); }}
       onChange={(ev) => {
         const { value } = ev.currentTarget;
-        const isEmptyTemplateName = value.trim() ? false : true;
+        const isEmptyTemplateName = !value.trim();
 
         const newFormData = { ...formData, 'template-name': value, 'isTemplateNameEdited': true };
         this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
@@ -1405,7 +1412,6 @@ export class Creatives extends React.Component {
   }
 
   showLiquidErrorInFooter = (errorMessagesFromFormBuilder, currentFormBuilderTab) => {
-
     this.setState({
       isLiquidValidationError: !isEmpty(get(errorMessagesFromFormBuilder, constants.LIQUID_ERROR_MSG, [])) || !isEmpty(get(errorMessagesFromFormBuilder, constants.STANDARD_ERROR_MSG, [])),
       liquidErrorMessage: errorMessagesFromFormBuilder,
@@ -1476,6 +1482,7 @@ export class Creatives extends React.Component {
       liquidErrorMessage,
       activeFormBuilderTab,
       showTestAndPreviewSlidebox,
+      isTestAndPreviewMode,
     } = this.state;
     const {
       isFullMode,
@@ -1498,8 +1505,7 @@ export class Creatives extends React.Component {
       isLoyaltyModule,
       loyaltyMetaData = {},
     } = this.props;
-    const mapTemplateCreate =
-      slidBoxContent === "createTemplate"
+    const mapTemplateCreate = slidBoxContent === "createTemplate"
       && weChatTemplateType === MAP_TEMPLATE
       && templateStep !== "modeSelection";
     const slideBoxWrapperMargin = (get(liquidErrorMessage, 'STANDARD_ERROR_MSG.length', 0) > 0 && get(liquidErrorMessage, 'LIQUID_ERROR_MSG.length', 0) > 0)
@@ -1606,6 +1612,7 @@ export class Creatives extends React.Component {
               showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
               handleTestAndPreview={this.handleTestAndPreview}
               handleCloseTestAndPreview={this.handleCloseTestAndPreview}
+              isTestAndPreviewMode={(() => this.state.isTestAndPreviewMode)()}
             />
           )}
           footer={this.shouldShowFooter() ? (