@capillarytech/creatives-library 8.0.113 → 8.0.114-alpha.0

package/v2Components/FormBuilder/index.js

@@ -49,10 +49,10 @@ import * as actions from "../../v2Containers/Cap/actions";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 import { checkSupport, extractNames, preprocessHtml, validateIfTagClosed } from '../../utils/tagValidations';
-import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS,AI_CONTENT_BOT_DISABLED, EMAIL, LIQUID_SUPPORTED_CHANNELS, INAPP } from '../../v2Containers/CreativesContainer/constants';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
-import { GLOBAL_CONVERT_OPTIONS, OUTBOUND } from './constants';
+import { OUTBOUND } from './constants';
 import { GET_TRANSLATION_MAPPED } from '../../containers/TagList/constants';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX} from '../../containers/App/constants';
@@ -60,7 +60,7 @@ import { REQUEST } from '../../v2Containers/Cap/constants'
 import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
-
+import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -135,9 +135,13 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     this.handleSetRadioValue = this.handleSetRadioValue.bind(this);
     this.formElements = [];
     // Check if the liquid flow feature is supported and the channel is in the supported list.
-    this.liquidFlow = Boolean(LIQUID_SUPPORTED_CHANNELS.includes(props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
-  }
+    this.liquidFlow = this.isLiquidFlowSupported.bind(this);
+    this.onSubmitWrapper = this.onSubmitWrapper.bind(this);
 
+  }
+  isLiquidFlowSupported = () => {
+    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
+  }
   componentWillMount() {
     this.setState({usingTabContainer: this.props.usingTabContainer ? this.props.usingTabContainer : false});
     if (this.props.formData && (this.props.isEdit || (!this.props.isEdit && !_.isEmpty(this.props.formData)))) {
@@ -538,6 +542,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else {
         errorData['template-name'] = false;
       }
+      isLiquidValid = isValid;
     }
 
     //validation for LINE
@@ -653,20 +658,21 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       let isOnlyAndroid = false, isOnlyIos = false;
       const { TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
       const androidData = {};
-      for(let data in this.state.formData[0]){
-        if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
-          androidData[data] = this.state.formData[0][data];
+      if (this.state.formData && this.state.formData[0]) {
+        for(let data in this.state.formData[0]){
+          if(!!this.state.formData[0][data] && data !== "tabKey" && data !== "base"){
+            androidData[data] = this.state.formData[0][data];
+          }
         }
-      }
       if(_.isEmpty(androidData)){
         isOnlyIos = true;
       }
       const iosData = {};
-      for(let data in this.state.formData[1]){
-        if(!!this.state.formData[1][data] && data !== "tabKey" && data !== "base"){
-          iosData[data] = this.state.formData[1][data];
+        for(let data in this.state.formData[1]){
+          if(!!this.state.formData[1][data] && data !== "tabKey" && data !== "base"){
+            iosData[data] = this.state.formData[1][data];
+          }
         }
-      }
       if(_.isEmpty(iosData)){
         isOnlyAndroid = true;
       }
@@ -701,17 +707,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorData[parseInt(index)]['invalid-tags'] = tagValidationResponse.unsupportedTags;
                   errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
                   isValid = false;
+                  isCurrentTabValid = false;
                 }
               }
 
             } else {
-                errorData[parseInt(index)][`message-editor${selector}`] = true;
-                isValid = false;
-                isCurrentTabValid = false;
+
+              errorData[parseInt(index)][`message-editor${selector}`] = true;
+              isValid = false;
+              isCurrentTabValid = false;
             }
             
-            
 
+            
             let title = tab[`message-title${selector}`]
             if(title){
               title = title.trim();
@@ -730,6 +738,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   errorData[parseInt(index)][`message-title${selector}`] = isBraceError ? TAG_BRACKET_COUNT_MISMATCH_ERROR : true;
                   errorData[parseInt(index)][`bracket-error`] = isBraceError && TAG_BRACKET_COUNT_MISMATCH_ERROR;
                   isValid = false;
+                  isCurrentTabValid = false;
                 }
               }
             } else {
@@ -858,9 +867,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   isCurrentTabValid = false;
                 }else {
                   errorData[parseInt(index)][key] = false;
-                }
-              }
-            });
+          }
+        }
+      });
           }
         }
         if(index == 0){
@@ -873,7 +882,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         errorData['template-name'] = true;
         isValid = false;
         androidValid = false;
-        iosValid = false
+        iosValid = false;
       } else {
         errorData['template-name'] = false;
       }
@@ -893,7 +902,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           // modal.body = "Android template is not configured. Save without Android template";
           // modal.id = "ios";
           // modal.type = 'confirm';
-          return;
+          return; //returning from here will not call the liquid middleware
         }
         const iosData = {};
         for(let data in this.state.formData[1]){
@@ -909,7 +918,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           // modal.id = 'android';
           // modal.type = 'confirm';
           // this.setState({modal, showModal: true, androidValid, iosValid});
-          return;
+          return; //returning from here will not call the liquid middleware
         }
       }
       if (!androidValid || !iosValid) {
@@ -922,7 +931,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       } else if (!isOnlyIos && !isOnlyAndroid && androidValid && iosValid) {
         isValid = isValid && true;
       }
+      isLiquidValid = isValid;
     }
+  }
 
     // Form Data Validation for Email Channel
     if (this.props?.schema?.channel?.toUpperCase() === EMAIL) {
@@ -983,7 +994,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               errorData[index][currentLang]['template-content'] = true;
               isValid = false;
               isLiquidValid = false;
-              if ((showMessages && !isNaN(index)) ||  this.liquidFlow) {
+              if ((showMessages && !isNaN(index)) ||  this.liquidFlow()) {
                 if (tagValidationResponse?.missingTags?.length > 0 || tagValidationResponse?.unsupportedTags?.length > 0) {
                   errorString += `${this.props.intl.formatMessage(messages.contentNotValidLanguage)} ${currentLang}\n`;
                 }
@@ -999,7 +1010,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 if (tagValidationResponse?.isContentEmpty) {
                   errorString += this.props.intl.formatMessage(messages.emailBodyEmptyError);
                   // Adds a bypass for cases where content is initially empty in the creation flow.
-                  if(this.liquidFlow){
+                  if(this.liquidFlow()){
                     errorString = "";
                     isLiquidValid = true;
                   }
@@ -1007,8 +1018,8 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               }
             }
           }
-          if (errorString !== "") {
-            if (this.liquidFlow) {
+          if (errorString) {
+            if (this.liquidFlow()) {
               this.setState(
                 (prevState) => ({
                   liquidErrorMessage: {
@@ -1018,7 +1029,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 }),
                 () => {
                   // Callback after the state is updated
-                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+                  this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
                 }
               );
             } else {
@@ -1034,7 +1045,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       });
     }
 
-    const isTemplateValid = this.liquidFlow ? isLiquidValid : isValid;
+    const isTemplateValid = this.liquidFlow() ? isLiquidValid : isValid;
     //Updating the state with the error data
     this.setState((prevState) => ({
       isFormValid: isTemplateValid,
@@ -1046,126 +1057,172 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       },
       errorData,
     }), () => {
-      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+      this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+
       if (onValidationComplete) {
+
         onValidationComplete();
       }
     });
     
+
     this.props.onFormValidityChange(isTemplateValid, errorData);
     return isTemplateValid;
-  }
+}
 
   indexOfEnd(targetString, string) {
     var io = targetString.indexOf(string);
     return io == -1 ? -1 : io + string.length;
   }
-  continueSaveForm = (id) => {
 
-  };
-  handleLiquidTemplateSubmit =(templateContent) => {
-    if(templateContent){this.setState((prevState) => {
-      return {
-        formData: {
-          ...prevState?.formData,
-          base: {
-            ...prevState?.formData?.base,
-            en: {
-              ...prevState?.formData?.base?.en,
-              "template-content": preprocessHtml(templateContent)
+  handleLiquidTemplateSubmit = (templateContent) => {
+    const channel = this.props.channel || this.props?.schema?.channel?.toUpperCase();
+    
+    if (templateContent && channel === EMAIL) {
+      this.setState((prevState) => {
+        return {
+          formData: {
+            ...prevState?.formData,
+            base: {
+              ...prevState?.formData?.base,
+              en: {
+                ...prevState?.formData?.base?.en,
+                "template-content": preprocessHtml(templateContent)
+              }
             }
           }
+        };
+      }, () => {
+        if (this.props.onSubmit) {
+          this.props.onSubmit(this.state.formData);
         }
-      };
-    }, () => {
-      if (this.props.onSubmit) {
-        this.props.onSubmit(this.state.formData);
+      });
+    } else {
+      // For all other channels
+      this.props.onSubmit(this.state.formData);
+    }
+  }
+  onSubmitWrapper = () => {
+    if (this.liquidFlow()) {
+      // For MPUSH, we need to validate both Android and iOS content separately
+      if (this.props.channel === MOBILE_PUSH || this.props?.schema?.channel?.toUpperCase() === MOBILE_PUSH) {
+        this.validateFormBuilderMPush(this.state.formData);
+        return;
       }
-    });}
+      
+      // For other channels (EMAIL, SMS, INAPP)
+      const content = getChannelData(this.props.schema.channel || this.props.channel, this.state.formData);
+
+      // Set up callbacks for error and success handling
+      const onError = ({ standardErrors, liquidErrors }) => {
+        this.setState(
+          (prevState) => ({
+            liquidErrorMessage: {
+              ...prevState.liquidErrorMessage,
+              STANDARD_ERROR_MSG: standardErrors,
+              LIQUID_ERROR_MSG: liquidErrors,
+            },
+          }),
+          () => {
+            this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
+            this.props.stopValidation();
+          }
+        );
+      };
+      
+      const onSuccess = (contentToSubmit) => {
+        this.handleLiquidTemplateSubmit(contentToSubmit);
+      };
+      
+      // Call the common validation function
+      validateLiquidTemplateContent(content, this.props.schema.channel || this.props.channel, {
+        getLiquidTags: this.props.actions.getLiquidTags,
+        formatMessage: this.props.intl.formatMessage,
+        messages,
+        onError,
+        onSuccess,
+        tagLookupMap: this.props?.metaEntities?.tagLookupMap,
+        eventContextTags: this.props?.eventContextTags,
+        isLiquidFlow: this.liquidFlow(),
+        forwardedTags: this.props?.isLoyaltyModule ? this.props?.forwardedTags : {},
+        skipTags: this.skipTags.bind(this)
+      });
+    } else {
+      this.props.onSubmit(this.state.formData);
+    }
   }
-  
+
   saveForm(saveForm) {
     if (this.props.isNewVersionFlow && !saveForm) {
       this.props.getValidationData();
       return;
     }
     if ( this.state.isFormValid ) {
-      if (this.liquidFlow) {
-        const templateContent = this.state.formData?.base?.en?.["template-content"] || "";
-        //Converts given HTML content to plain text string.
-        const content = convert(
-          templateContent, GLOBAL_CONVERT_OPTIONS
-        );
-      /* 
-        The `handleResult` function is used as a callback for `getLiquidTags` to handle the results post-processing. 
-        It checks for errors and unsupported tags in the fetched liquid tags, displays any necessary validation messages,
-        and proceeds with form submission if all checks pass.
-      */
-        const handleResult = (result) => {
-          const {formatMessage} = this.props.intl;
-          // Checks for errors in the result and displays them if any are found.
-          const validString = /\S/.test(content);
-          // If the content is empty or there are errors in the result, display the necessary validation messages.
-          if (result?.errors?.length > 0 || !validString) {
-            this.setState((prevState) => ({
-              liquidErrorMessage: {
-                ...prevState.liquidErrorMessage,
-                STANDARD_ERROR_MSG: !validString ? [...(prevState.liquidErrorMessage?.STANDARD_ERROR_MSG || []), formatMessage(messages.emailBodyEmptyError)] : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
-                LIQUID_ERROR_MSG: result?.errors?.map(error => error?.message) ?? [formatMessage(messages.somethingWentWrong)],
-              }
-            }), () => {
-              this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage);
-            });
-            this.props.stopValidation();
-            return;
-          }
-          // Extracts the supported liquid tags from the given content and do the necessary checks.
-          else {
-            const extractedLiquidTags = extractNames(result?.data || []);
-            // Extracts the supported liquid tags from the given content.
-            const supportedLiquidTags = checkSupport(
-              result,
-              this.props?.metaEntities?.tagLookupMap,
-              this.props?.eventContextTags,
-              this.liquidFlow,
-              this.props?.isLoyaltyModule ? this.props?.forwardedTags : {}
-            );
-            const unsupportedLiquidTags = extractedLiquidTags?.filter(
-              (tag) => !supportedLiquidTags?.includes(tag) && !this.skipTags(tag)
-            );
-            if (
-              unsupportedLiquidTags?.length > 0
-            ) {
-              this.setState(
-                (prevState) => ({
-                  liquidErrorMessage: {
-                    ...prevState.liquidErrorMessage,
-                    LIQUID_ERROR_MSG: [formatMessage(messages.unsupportedTagsValidationError, {
-                      unsupportedTags: unsupportedLiquidTags.join(", ")})],
-                  },
-                }),
-                () => {
-                  this.props.showLiquidErrorInFooter(
-                    this.state.liquidErrorMessage
-                  );
-                }
-              );
-              this.props.stopValidation();
-              return;
-            }
-            this.handleLiquidTemplateSubmit(templateContent);
-          }
-        };
-        this.props.actions.getLiquidTags(preprocessHtml(content), handleResult);
-      } else {
-        this.props.onSubmit(this.state.formData);
-      }
+      this.onSubmitWrapper();
+
     } else {
       this.setState({checkValidation: true});
       this.validateForm(null, null, true);
     }
   }
 
+
+  // New function to handle MPUSH content validation for both Android and iOS
+  validateFormBuilderMPush = (formData) => {
+    const currentTab = this.state.currentTab;
+    
+    // Set up callbacks for error and success handling
+    const onLiquidError = ({ standardErrors, liquidErrors }) => {
+      this.setState(
+        (prevState) => ({
+          liquidErrorMessage: {
+            ...prevState.liquidErrorMessage,
+            STANDARD_ERROR_MSG: standardErrors,
+            LIQUID_ERROR_MSG: liquidErrors,
+          },
+        }),
+        () => {
+          this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.state.currentTab);
+          this.props.stopValidation();
+        }
+      );
+    };
+    
+    const onSuccess = (contentToSubmit) => {
+      // Clear any previous errors
+      this.setState(
+        (prevState) => ({
+          liquidErrorMessage: {
+            ...prevState.liquidErrorMessage,
+            STANDARD_ERROR_MSG: [],
+            LIQUID_ERROR_MSG: [],
+          },
+        }),
+        () => {
+          // Format depends on the tabType
+          this.handleLiquidTemplateSubmit(contentToSubmit);
+        }
+      );
+    };
+
+    // Call the utility function with our callbacks
+    validateMobilePushContent(formData, {
+      currentTab,
+      onError: onLiquidError,
+      onSuccess,
+      getLiquidTags: this.props.actions.getLiquidTags,
+      formatMessage: this.props.intl.formatMessage,
+      messages: globalMessages,
+      tagLookupMap: _.get(this.props, 'tagStore.tagLookupMap', {}),
+      eventContextTags: _.get(this.props, 'tagStore.eventContextTags', []),
+      isLiquidFlow: this.isLiquidFlowSupported(), // Use the method instead of props
+      forwardedTags: _.get(this.props, 'tagStore.forwardedTags', {}),
+      skipTags: this.skipTags.bind(this),
+      extractNames,
+      checkSupport
+    });
+  }
+
   transformInjectedTags(tags) {
     _.forEach(tags, (tag) => {
       const temp = tag;
@@ -1304,7 +1361,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         });
 
         ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
-        if (!ifSupported && !this.liquidFlow) {
+        if (!ifSupported && !this.liquidFlow()) {
           response.unsupportedTags.push(tagValue);
           response.valid = false;
         }
@@ -2278,12 +2335,11 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   };
   handleOk = (ev) => {
     const id = ev.target.id;
-
     this.setState({showModal: false});
     if (id === "android" && this.state.androidValid) {
-      this.props.onSubmit(this.state.formData);
+      this.onSubmitWrapper();
     } else if (id === "ios" && this.state.iosValid) {
-      this.props.onSubmit(this.state.formData);
+      this.onSubmitWrapper();
     } else if (id === "sms-version-modal") {
       this.state.currentEvent.call(this.props.parent, this.state.currentEventData, this.state.currentTab);
       this.setState({currentEvent: {}, currentEventData: {}});
@@ -2483,6 +2539,19 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       default:
         break;
     }
+    const prevErrorMessage = this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.[0];
+    if (prevErrorMessage !== errorMessageText && errorMessageText && this.liquidFlow()) {
+      this.setState((prevState) => ({
+        liquidErrorMessage: {
+        ...prevState.liquidErrorMessage,
+        STANDARD_ERROR_MSG: [errorMessageText],
+        }
+      }), () => {
+
+        this.props.showLiquidErrorInFooter(this.state.liquidErrorMessage, this.props.channel === SMS? null: this.state.currentTab);
+      });
+    }
+    else{
     if (styling === 'semantic') {
       columns.push(
         <CapColumn key="input" span={val.width} offset={offset}>
@@ -2490,7 +2559,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             id={val.id}
             placeholder={val.placeholder ? val.placeholder : ''}
             className={`${ifError ? 'error-form-builder' : ''}`}
-            errorMessage={errorMessageText}
+            errorMessage={errorMessageText && !this.liquidFlow() ? errorMessageText : ''}
             label={val.label}
             autosize={val.autosize ? val.autosizeParams : false}
             onChange={(e) => this.updateFormData(e.target.value, val)}
@@ -2520,8 +2589,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         </CapColumn>
       );
     }
+  }
   };
 
+
   renderColLabelSection(section, childIndex) {
     // const schema = this.props.schema
     const fields = [];
@@ -3465,7 +3536,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}  `}
+                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}  `}
                 >
                   <CKEditor
                     id={val.id}
@@ -3509,7 +3580,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isModuleFilterEnabled = this.props.isFullMode;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow && "error-boundary"}`}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}`}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}
@@ -3877,7 +3948,8 @@ FormBuilder.propTypes = {
   isFullMode: PropTypes.bool,
   currentOrgDetails: PropTypes.object,
   liquidExtractionInProgress: PropTypes.bool,
-  showLiquidErrorInFooter: PropTypes.func
+  showLiquidErrorInFooter: PropTypes.func,
+  channel: PropTypes.string,
 };
 
 const mapStateToProps = createStructuredSelector({
@@ -3894,3 +3966,4 @@ function mapDispatchToProps(dispatch) {
 }
 
 export default connect(mapStateToProps,mapDispatchToProps)(injectIntl(FormBuilder));
+

package/v2Components/FormBuilder/messages.js

@@ -94,7 +94,7 @@ export default defineMessages({
     id: 'creatives.componentsV2.FormBuilder.somethingWentWrong',
     defaultMessage: 'Something went wrong while validating content, please try again later',
   },
-  liquidSpinText:{
+  liquidSpinText: {
     id: 'creatives.componentsV2.FormBuilder.liquidSpinText',
     defaultMessage: 'Validating the template, it might take a few seconds',
   },

package/v2Components/MarketingObjective/test/index.test.js

@@ -26,7 +26,7 @@ const initializeComponent = () => {
 describe('renders a MarketingObjective', () => {
   it("Test if MarketingObjective component renders", () => {
     initializeComponent();
-    const button = screen.getByRole('button', {name: 'Done'});
+    const button = screen.getByText('Done');
     expect(button).toBeInTheDocument();
     fireEvent.click(button);
   });

package/v2Components/NavigationBar/tests/saga.test.js

@@ -5,11 +5,10 @@ import CapCollapsibleLeftNavigationSagas from '@capillarytech/cap-ui-library/Cap
 import { analyticsBotSaga } from "@capillarytech/cap-ui-library/CapAskAira";
 
 describe("analyticsBotSagaFn", () => {
-  it("should call all analytics bot sagas", () => {
+  test.concurrent("should call all analytics bot sagas", () => {
     const { saga: analyticsBotSagaFn } = rootSagas.find(
       s => s.key === "analyticsBotSaga"
     );
-
     return expectSaga(analyticsBotSagaFn)
       .provide([
         [matchers.call.fn(analyticsBotSaga[0]), undefined],
@@ -20,7 +19,7 @@ describe("analyticsBotSagaFn", () => {
 });
 
 describe("navigationConfigSaga", () => {
-    it("should call all analytics bot sagas", () => {
+    it.concurrent("should call all analytics bot sagas", () => {
       const { saga: navigationConfigSaga } = rootSagas.find(
         s => s.key === "navigation"
       );

package/v2Containers/Assets/Gallery/tests/__snapshots__/reducer.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`galleryReducer Initial State should match snapshot returns the initial state 1`] = `
+exports[` 1`] = `
 Immutable.Map {
   "assetList": Immutable.List [],
   "assetUploading": false,

package/v2Containers/Assets/Gallery/tests/actions.test.js

@@ -1,10 +1,9 @@
-
 import * as actions from '../actions';
 import * as types from '../constants';
 
 describe('Gallery actions', () => {
   describe('uploadAsset', () => {
-    it('has a type of UPLOAD_ASSET_REQUEST', () => {
+    test.concurrent('has a type of UPLOAD_ASSET_REQUEST', () => {
       const expected = {
         type: types.UPLOAD_ASSET_REQUEST,
         file: 'test',
@@ -15,7 +14,7 @@ describe('Gallery actions', () => {
   });
 
   describe('getAllAssets', () => {
-    it('has a type of GET_ALL_ASSETS_REQUEST', () => {
+    test.concurrent('has a type of GET_ALL_ASSETS_REQUEST', () => {
       const expected = {
         type: types.GET_ALL_ASSETS_REQUEST,
         assetType: 'IMAGE',

package/v2Containers/Assets/Gallery/tests/reducer.test.js

@@ -6,7 +6,7 @@ import * as actions from '../actions';
 
 describe('galleryReducer', () => {
   describe('Initial State should match snapshot', () => {
-    it('returns the initial state', () => {
+    it.concurrent('returns the initial state', () => {
       expect(galleryReducer(undefined, {})).toMatchSnapshot();
     });
   });
@@ -50,14 +50,14 @@ describe('galleryReducer', () => {
       error: 'Some error Occurred',
     };
     const stateOnFailure = galleryReducer(initialState, failureAction);
-    it('should set fetching_schedule_message to true on request', () => {
+    it.concurrent('should set fetching_schedule_message to true on request', () => {
       expect(stateOnRequest.toJS()).toEqual({ assetList: [], fetchingAllAssets: true, fetchAllAssetSuccess: false });
     });
 
-    it('should set assetList from response on success', () => {
+    it.concurrent('should set assetList from response on success', () => {
       expect(stateOnSuccess.toJS()).toEqual(successStateExpected);
     });
-    it('should set fetching_schedule_message to false on GET_ALL_ASSETS_FAILURE', () => {
+    it.concurrent('should set fetching_schedule_message to false on GET_ALL_ASSETS_FAILURE', () => {
       expect(stateOnFailure.toJS()).toEqual({assetList: [], fetchingAllAssets: false, fetchAllAssetSuccess: false});
     });
   });
@@ -82,14 +82,14 @@ describe('galleryReducer', () => {
       error: 'Some error Occurred',
     };
     const stateOnFailure = galleryReducer(initialState, failureAction);
-    it('should set assetUploading to true and uploadAssetSuccess to false on request', () => {
+    it.concurrent('should set assetUploading to true and uploadAssetSuccess to false on request', () => {
       expect(stateOnRequest.toJS()).toEqual({ uploadAssetSuccess: false, assetUploading: true });
     });
 
-    it('should set assetUploading to false and uploadAssetSuccess to true on success', () => {
+    it.concurrent('should set assetUploading to false and uploadAssetSuccess to true on success', () => {
       expect(stateOnSuccess.toJS()).toEqual(successStateExpected);
     });
-    it('should set assetUploading to false and uploadAssetSuccess to false on UPLOAD_ASSET_FAILURE', () => {
+    it.concurrent('should set assetUploading to false and uploadAssetSuccess to false on UPLOAD_ASSET_FAILURE', () => {
       expect(stateOnFailure.toJS()).toEqual({ uploadAssetSuccess: false, assetUploading: false });
     });
   });