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

package/v2Containers/Facebook/test/saga.test.js

@@ -9,7 +9,7 @@ import * as matchers from 'redux-saga-test-plan/matchers';
 
 describe('Facebook Ad Management Sagas', () => {
   describe('fetchMarketingObjectives Saga', () => {
-    it('handles successful fetching of marketing objectives', () => {
+    it.concurrent('handles successful fetching of marketing objectives', () => {
       const fakeResponse = {
         data: [{ id: 1, name: 'Increase Reach' }],
         errors: []
@@ -26,7 +26,7 @@ describe('Facebook Ad Management Sagas', () => {
         .run();
     });
 
-    it('handles errors in fetching marketing objectives', () => {
+    it.concurrent('handles errors in fetching marketing objectives', () => {
       const fakeResponse = {
         errors: ['Error fetching data'],
         data: null
@@ -47,7 +47,7 @@ describe('Facebook Ad Management Sagas', () => {
   describe('getOrgOUs Saga', () => {
     const orgID = '123';
 
-    it('handles successful fetching of org OUs', () => {
+    it.concurrent('handles successful fetching of org OUs', () => {
       const fakeResponse = {
         status: 200,
         result: [{ id: 1, name: 'Org Unit One' }],
@@ -64,7 +64,7 @@ describe('Facebook Ad Management Sagas', () => {
         .run();
     });
 
-    it('handles failure in fetching org OUs', () => {
+    it.concurrent('handles failure in fetching org OUs', () => {
       const error = new Error('Fetch failed');
 
       return expectSaga(sagas.getOrgOUs, { orgID })
@@ -84,7 +84,7 @@ describe('Facebook Ad Management Sagas', () => {
     const assetType = 'video';
     const fileParams = {};
 
-    it('handles successful asset upload', () => {
+    it.concurrent('handles successful asset upload', () => {
       const uploadResponse = {
         status: { code: 200 },
         response: { asset: { id: 1, metaInfo: { secure_file_path: 'http://example.com/ad.mp4' } } }
@@ -114,7 +114,7 @@ describe('Facebook Ad Management Sagas', () => {
         .run();
     });
 
-    it('handles failure in asset upload', () => {
+    it.concurrent('handles failure in asset upload', () => {
       const error = new Error('Upload failed');
 
       return expectSaga(sagas.uploadFbAdAsset, file, assetType, fileParams)
@@ -132,7 +132,7 @@ describe('Facebook Ad Management Sagas', () => {
 
   // Test combined saga
   describe('Combined v2FacebookSagas', () => {
-    it('should initialize all Facebook-related watcher sagas without error', () => {
+    it.concurrent('should initialize all Facebook-related watcher sagas without error', () => {
       return expectSaga(v2FacebookSagas)
         .run();
     });

package/v2Containers/InApp/index.js

@@ -20,7 +20,8 @@ import {
   isLoadingMetaEntities,
   makeSelectMetaEntities,
   setInjectedTags,
-  selectCurrentOrgDetails
+  selectCurrentOrgDetails,
+  selectLiquidStateDetails
 } from "../Cap/selectors";
 import * as inAppActions from "./actions";
 import './index.scss';
@@ -51,7 +52,11 @@ import { INAPP, SMS } from "../CreativesContainer/constants";
 import { ALL, TAG, EMBEDDED, DEFAULT, FULL, LIBRARY } from "../Whatsapp/constants";
 import CapDeviceContent from "../../v2Components/CapDeviceContent";
 import { getCdnUrl } from "../../utils/cdnTransformation";
-import { getCtaObject } from "./utils";
+import { getCtaObject, hasAnyErrors } from "./utils";
+import { validateInAppContent } from "../../utils/commonUtils";
+import ErrorInfoNote from "../../v2Components/ErrorInfoNote";
+import { hasLiquidSupportFeature } from "../../utils/common";
+import formBuilderMessages from "../../v2Components/FormBuilder/messages";
 let editContent = {};
 
 export const InApp = (props) => {
@@ -72,8 +77,10 @@ export const InApp = (props) => {
     injectedTags,
     getFormData,
     selectedOfferDetails,
-    currentOrgDetails
+    currentOrgDetails,
+    fetchingLiquidValidation,
   } = props || {};
+  const isLiquidFlow = !hasLiquidSupportFeature();
   const { formatMessage } = intl;
   const [titleAndroid, setTitleAndroid] = useState("");
   const [titleIos, setTitleIos] = useState("");
@@ -121,6 +128,18 @@ export const InApp = (props) => {
   const isAiContentBotDisabled = accessibleFeatures?.includes(
     AI_CONTENT_BOT_DISABLED
   );
+  const [errorMessage, setErrorMessage] = useState({
+    STANDARD_ERROR_MSG: {
+      ANDROID: [],
+      IOS: [],
+      GENERIC: [],
+    },
+    LIQUID_ERROR_MSG: {
+      ANDROID: [],
+      IOS: [],
+      GENERIC: [],
+    },
+  });
 
   //gets account details
   useEffect(() => {
@@ -599,47 +618,54 @@ export const InApp = (props) => {
       sourceAccountIdentifier = "",
       id,
     } = accountObj;
+    
+    // Construct Android content if not disabled
+    const androidContent = !isDisableDone(ANDROID) ? {
+      ...commonDevicePayload,
+      title: titleAndroid,
+      message: templateMessageAndroid,
+      bodyType: templateLayoutType,
+      expandableDetails: {
+        style: BIG_TEXT,
+        message: templateMessageAndroid,
+        ...androidMediaParams,
+        ...(isBtnTypeCtaAndroid && {
+          ctas: getCtaPayload(ANDROID),
+        }),
+      },
+      custom: [],
+      ...(deepLinkValueAndroid && {
+        ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
+      }),
+    } : {};
+    
+    // Construct iOS content if not disabled
+    const iosContent = !isDisableDone(IOS) ? {
+      ...commonDevicePayload,
+      title: titleIos,
+      message: templateMessageIos,
+      bodyType: templateLayoutType,
+      expandableDetails: {
+        style: BIG_TEXT,
+        message: templateMessageIos,
+        ...iosMediaParams,
+        ...(isBtnTypeCTaIos && {
+          ctas: getCtaPayload(IOS),
+        }),
+      },
+      custom: [],
+      ...(deepLinkValueIos && {
+        ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
+      }),
+    } : {};
+    
     const data = {
       name: templateName,
       versions: {
         base: {
           content: {
-            ANDROID: !isDisableDone(ANDROID) ? {
-              ...commonDevicePayload,
-              title: titleAndroid,
-              message: templateMessageAndroid,
-              bodyType: templateLayoutType,
-              expandableDetails: {
-                style: BIG_TEXT,
-                message: templateMessageAndroid,
-                ...androidMediaParams,
-                ...(isBtnTypeCtaAndroid && {
-                  ctas: getCtaPayload(ANDROID),
-                }),
-              },
-              custom: [],
-              ...(deepLinkValueAndroid && {
-                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueAndroid}],
-              }),
-            } : {},
-            IOS: !isDisableDone(IOS) ? {
-              ...commonDevicePayload,
-              title: titleIos,
-              message: templateMessageIos,
-              bodyType: templateLayoutType,
-              expandableDetails: {
-                style: BIG_TEXT,
-                message: templateMessageIos,
-                ...iosMediaParams,
-                ...(isBtnTypeCTaIos && {
-                  ctas: getCtaPayload(IOS),
-                }),
-              },
-              custom: [],
-              ...(deepLinkValueIos && {
-                ctas: [{type: DEEP_LINK, actionLink: deepLinkValueIos}],
-              }),
-            } : {},
+            ANDROID: androidContent,
+            IOS: iosContent,
           },
         },
       },
@@ -703,21 +729,66 @@ export const InApp = (props) => {
   const onDoneCallback = () => {
     if (isFullMode) {
       if (isEditFlow) {
-        return onEditInApp;
+        return onEditInApp();
       }
-      return onCreateInApp;
+      return onCreateInApp();
     }
-    return () =>
-      getFormData({
-        value: createPayload(),
-        _id: params && params.id,
-        validity: true,
-        type: INAPP,
+    return getFormData({
+      value: createPayload(),
+      _id: params && params.id,
+      validity: true,
+      type: INAPP,
+    });
+  };
+
+  const liquidMiddleWare = () => {
+    // Set up callbacks for validation results
+    const onError = ({ standardErrors, liquidErrors }) => {
+
+      setErrorMessage({
+        STANDARD_ERROR_MSG: standardErrors,
+        LIQUID_ERROR_MSG: liquidErrors,
       });
+    };
+    
+    const onSuccess = () => {
+
+      // setSpin(false);
+      // Proceed with submission when validation is successful
+      onDoneCallback();
+    };
+
+    // Validate the INAPP content
+    const payload = createPayload();
+    
+    validateInAppContent(payload, {
+      currentTab: panes === ANDROID ? 1 : 2, // Convert ANDROID/IOS to tab numbers
+      onError,
+      onSuccess,
+      getLiquidTags: (content, callback) => globalActions.getLiquidTags(content, callback),
+      formatMessage,
+      messages: globalMessages,
+      tagLookupMap: metaEntities?.tagLookupMap || {},
+      eventContextTags: metaEntities?.eventContextTags || [],
+      isLiquidFlow,
+      forwardedTags: {},
+      skipTags: (tag) => {
+        // Skip certain tags if needed
+        const skipRegexes = [
+          /dynamic_expiry_date_after_\d+_days\.FORMAT_\d/,
+          /unsubscribe\(#[a-zA-Z\d]{6}\)/,
+          /Link_to_[a-zA-z]/,
+          /SURVEY.*\.TOKEN/,
+          /^[A-Za-z].*\([a-zA-Z\d]*\)/,
+        ];
+
+        return skipRegexes.some((regex) => regex.test(tag));
+      },
+    });
   };
 
   return (
-    <CapSpin spinning={spin}>
+    <CapSpin spinning={spin || fetchingLiquidValidation} tip={fetchingLiquidValidation ? <FormattedMessage {...formBuilderMessages.liquidSpinText} /> : ""}>
       <CapRow className="cap-inapp-creatives">
         <CapColumn span={14}>
           {isFullMode && createModeContent}
@@ -762,8 +833,14 @@ export const InApp = (props) => {
       <div className={`inapp-footer ${!isFullMode && `inapp-footer-lib`}`}>
         {
           <>
+            {hasAnyErrors(errorMessage) && (
+              <ErrorInfoNote
+                errorMessages={errorMessage}
+                currentTab={panes}
+              />
+            )}
             <CapButton
-              onClick={onDoneCallback()}
+              onClick={isLiquidFlow ? liquidMiddleWare : onDoneCallback}
               disabled={isDisableDone(panes)}
               className="inapp-create-btn"
             >
@@ -793,6 +870,7 @@ const mapStateToProps = createStructuredSelector({
   loadingTags: isLoadingMetaEntities(),
   injectedTags: setInjectedTags(),
   currentOrgDetails: selectCurrentOrgDetails(),
+  fetchingLiquidValidation: selectLiquidStateDetails()
 });
 
 const mapDispatchToProps = (dispatch) => ({

package/v2Containers/InApp/tests/action.test.js

@@ -2,7 +2,7 @@ import * as types from "../constants";
 import * as actions from "../actions";
 
 describe("Test inapp actions", () => {
-  it("has a type of INAPP_TEMPLATE_CREATE_REQUEST action", () => {
+  test.concurrent("has a type of INAPP_TEMPLATE_CREATE_REQUEST action", () => {
     const payload = {};
     const expected = {
       type: types.INAPP_TEMPLATE_CREATE_REQUEST,
@@ -11,25 +11,25 @@ describe("Test inapp actions", () => {
     expect(actions.createInAppTemplate(payload)).toEqual(expected);
   });
 
-  it("has a type of CLEAR_CREATE_RESPONSE_REQUEST action", () => {
+  test.concurrent("has a type of CLEAR_CREATE_RESPONSE_REQUEST action", () => {
     const expected = {
       type: types.CLEAR_CREATE_RESPONSE_REQUEST,
     };
     expect(actions.clearCreateResponse()).toEqual(expected);
   });
-  it("has a type of INAPP_EDIT_TEMPLATE_REQUEST action", () => {
+  test.concurrent("has a type of INAPP_EDIT_TEMPLATE_REQUEST action", () => {
     const expected = {
       type: types.INAPP_EDIT_TEMPLATE_REQUEST,
     };
     expect(actions.editTemplate()).toEqual(expected);
   });
-  it("has a type of RESET_EDIT_TEMPLATE action", () => {
+  test.concurrent("has a type of RESET_EDIT_TEMPLATE action", () => {
     const expected = {
       type: types.RESET_EDIT_TEMPLATE,
     };
     expect(actions.resetEditTemplate()).toEqual(expected);
   });
-  it("has a type of GET_INAPP_TEMPLATE_DETAILS_REQUEST action", () => {
+  test.concurrent("has a type of GET_INAPP_TEMPLATE_DETAILS_REQUEST action", () => {
     const expected = {
       type: types.GET_INAPP_TEMPLATE_DETAILS_REQUEST,
       callback: undefined,
@@ -38,13 +38,13 @@ describe("Test inapp actions", () => {
     };
     expect(actions.getTemplateDetails()).toEqual(expected);
   });
-  it("has a type of UPLOAD_INAPP_ASSET_REQUEST action", () => {
+  test.concurrent("has a type of UPLOAD_INAPP_ASSET_REQUEST action", () => {
     const expected = {
       type: types.UPLOAD_INAPP_ASSET_REQUEST,
     };
     expect(actions.uploadInAppAsset()).toEqual(expected);
   });
-  it("has a type of CLEAR_INAPP_ASSET action", () => {
+  test.concurrent("has a type of CLEAR_INAPP_ASSET action", () => {
     const expected = {
       type: types.CLEAR_INAPP_ASSET,
     };

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

@@ -85,7 +85,7 @@ describe('Test activity inApp container', () => {
     });
     expect(updateBtn).toBeEnabled();
     fireEvent.click(updateBtn);
-    expect(mockActions.editTemplate).toBeCalled();
+    expect(mockActions.editTemplate).toHaveBeenCalled();
   });
   it('test case for inApp template configuration', async () => {
     renderComponent({
@@ -109,9 +109,7 @@ describe('Test activity inApp container', () => {
     const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
     msgBox[0].focus();
     fireEvent.change(msgBox[0], { target: { value: 'val' }});
-    const doneBtn = screen.getByRole('button', {
-      name: /done/i,
-    });
+    const doneBtn = screen.getByText(/done/i);
     expect(doneBtn).toBeEnabled();
   });
   it('test case for inApp template copy content flow', async () => {