@capillarytech/creatives-library 8.0.60-alpha.7 → 8.0.61-alpha.0

package/components/TemplatePreview/_templatePreview.scss

@@ -8,14 +8,14 @@
     .action-text-reply{
       position: absolute;
       left: 34%;
-      top: 59%;
+      top: 43% !important;
       color: #3861ca;
       font-weight: $FONT_WEIGHT_MEDIUM;
     }
     .action-text-cancel{
       position: absolute;
       left: 33.5%;
-      top: 66%;
+      top: 48% !important;
       color: #3861ca;
       font-weight: $FONT_WEIGHT_MEDIUM;
     }
@@ -25,7 +25,7 @@
   }
   .lock-screen-preview .lock-msgContainer{
     position: absolute;
-    top: 40%;
+    top: 30% !important;
     left: 25.9%;
     width: 21.5%;
     height: 60px;
@@ -55,7 +55,7 @@
   }
   .main-screen-preview .msgContainer{
     position: absolute;
-    top: 30%;
+    top: 30% !important;
     left: 53%;
     width: 42%;
     height: 336px;
@@ -138,8 +138,8 @@
     margin: 0 20px 0 auto;
     .action-text{
       position: absolute;
-      left: 27.5%;
-      top: 54%;
+      left: 28.5%;
+      top: 39% !important;
       font-size: $FONT_SIZE_VS;
       color: #3861ca;
       font-weight: $FONT_WEIGHT_MEDIUM;
@@ -150,8 +150,8 @@
   }
   .lock-screen-preview .lock-msgContainer{
     position: absolute;
-    top: 43%;
-    left: 25.9%;
+    top: 32% !important;
+    left: 26.9%;
     width: 21.5%;
     height: 52px;
     display: -webkit-box;
@@ -181,7 +181,7 @@
 
   .main-screen-preview .msgContainer{
     position: absolute;
-    top: 30%;
+    top: 30% !important;
     left: 53%;
     width: 42%;
     height: 336px;

package/config/app.js

@@ -17,7 +17,6 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    // api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',

package/hoc/withCreatives.js

@@ -5,6 +5,9 @@ import { injectIntl } from 'react-intl';
 import * as globalActions from '../v2Containers/Cap/actions';
 import * as creativesContainerActions from '../v2Containers/CreativesContainer/actions';
 import { UserIsAuthenticated } from '../utils/authWrapper';
+import { v2ZaloSagas } from '../v2Containers/Zalo/saga';
+import { injectSaga } from '@capillarytech/vulcan-react-sdk/utils';
+import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
 
 /**
  * Higher Order Component to common out creatives channel logic
@@ -18,6 +21,7 @@ export default ({
   userAuth,
   sagas = [],
   reducers = [],
+  zaloSaga = false,
 }) => {
   const CreativesCommon = (props) => {
     useEffect(() => {
@@ -44,7 +48,9 @@ export default ({
   };
 
   const withConnect = connect(mapStateToProps, hocMapDispatchToProps);
+  const withZaloSaga =  injectSaga({ key: 'zalo', saga: v2ZaloSagas,mode: DAEMON });
   return compose(
+    withZaloSaga,
     ...sagas,
     ...reducers,
     withConnect,

package/index.js

@@ -93,7 +93,7 @@ import whatsappSaga from './v2Containers/Whatsapp/sagas';
 
 import Zalo from './v2Containers/Zalo';
 import zaloReducer from './v2Containers/Zalo/reducer';
-import zaloSaga from './v2Containers/Zalo/saga';
+import { v2ZaloSagas } from './v2Containers/Zalo/sagas';
 
 import InApp from './v2Containers/InApp';
 import inAppReducer from './v2Containers/InApp/reducer';
@@ -129,7 +129,7 @@ const FacebookPreviewContainer = { FacebookPreview, facebookPreviewReducer, face
 const SmsTraiContainer = {SmsTraiCreate, SmsTraiCreateReducer, SmsTraiCreateSaga};
 const WhatsappContainer = { Whatsapp, whatsappReducer, whatsappSaga };
 const RcsContainer = { Rcs, rcsReducer, rcsSaga };
-const ZaloContainer = { Zalo, zaloReducer, zaloSaga };
+const ZaloContainer = { Zalo, zaloReducer, v2ZaloSagas };
 const InAppContainer = { InApp, inAppReducer, inAppSaga };
 
 const GalleryContainer = {Gallery, galleryReducer, gallerySagas};

package/package.json

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

package/utils/tagValidations.js

@@ -294,4 +294,36 @@ export const getTagMapValue = (object = {}) => {
   ).reduce((acc, current) => {
     return { ...acc?.subtags ?? {}, ...current?.subtags ?? {} };
   }, {});
+};
+
+
+/**
+ * Extracts and merges all subtags and top-level keys from the provided object into a single flat map.
+ *
+ * @param {Object} object - The input object containing top-level keys with optional subtags.
+ * @returns {Object} - A flat map containing all top-level keys and their subtags.
+ */
+export const getForwardedMapValues = (object = {}) => {
+  return Object?.entries(object)?.reduce((acc, [key, current]) => {
+    // Check if current has 'subtags' and it's an object
+    if (current && current?.subtags && typeof current?.subtags === 'object') {
+      // Add the top-level key with its 'name' and 'desc'
+      acc[key] = {
+        name: current?.name,
+        desc: current?.desc,
+      };
+      
+      // Merge the subtags into the accumulator
+      acc = { ...acc, ...current?.subtags };
+    } else if (current && typeof current === 'object') {
+      // If no 'subtags', add the top-level key with its 'name' and 'desc'
+      acc[key] = {
+        name: current?.name,
+        desc: current?.desc,
+      };
+    }
+    
+    // If the current entry is not an object or lacks 'name'/'desc', skip it
+    return acc;
+  }, {});
 };

package/utils/tests/tagValidations.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import '@testing-library/jest-dom';
-import { checkSupport, extractNames, getTagMapValue, preprocessHtml, validateIfTagClosed,validateTags, skipTags } from '../tagValidations';
+import { checkSupport, extractNames, getTagMapValue,getForwardedMapValues, preprocessHtml, validateIfTagClosed,validateTags, skipTags } from '../tagValidations';
 import { eventContextTags } from '../../v2Containers/TagList/tests/mockdata';
 
 describe("check if curly brackets are balanced", () => {
@@ -496,4 +496,273 @@ describe("skipTags", () => {
     const result = skipTags(tag);
     expect(result).toEqual(true);
   });
+});
+
+
+describe('getForwardedMapValues', () => {
+  test('should return an empty object when input is empty', () => {
+    const input = {};
+    const expected = {};
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should correctly process objects with subtags', () => {
+    const input = {
+      customer: {
+        name: 'Customer',
+        desc: 'Customer Description',
+        subtags: {
+          cumulative_points_currency: {
+            name: 'Lifetime Points (in ₹)',
+            desc: 'Lifetime Points in ₹ Description',
+          },
+          mobile_number: {
+            name: 'Mobile Number',
+            desc: 'Mobile Number Description',
+          },
+        },
+      },
+      store: {
+        name: 'Store',
+        desc: 'Store Description',
+        subtags: {
+          store_name: {
+            name: 'Store Name',
+            desc: 'Store Name Description',
+          },
+          store_address: {
+            name: 'Store Address',
+            desc: 'Store Address Description',
+          },
+        },
+      },
+    };
+
+    const expected = {
+      customer: {
+        name: 'Customer',
+        desc: 'Customer Description',
+      },
+      cumulative_points_currency: {
+        name: 'Lifetime Points (in ₹)',
+        desc: 'Lifetime Points in ₹ Description',
+      },
+      mobile_number: {
+        name: 'Mobile Number',
+        desc: 'Mobile Number Description',
+      },
+      store: {
+        name: 'Store',
+        desc: 'Store Description',
+      },
+      store_name: {
+        name: 'Store Name',
+        desc: 'Store Name Description',
+      },
+      store_address: {
+        name: 'Store Address',
+        desc: 'Store Address Description',
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should correctly process objects without subtags', () => {
+    const input = {
+      points_on_event: {
+        name: 'Points on event',
+        desc: 'Points on event Description',
+      },
+      unsubscribe: {
+        name: 'Unsubscribe',
+        desc: 'Unsubscribe Description',
+      },
+    };
+
+    const expected = {
+      points_on_event: {
+        name: 'Points on event',
+        desc: 'Points on event Description',
+      },
+      unsubscribe: {
+        name: 'Unsubscribe',
+        desc: 'Unsubscribe Description',
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should handle a mix of entries with and without subtags', () => {
+    const input = {
+      customer: {
+        name: 'Customer',
+        desc: 'Customer Description',
+        subtags: {
+          cumulative_points_currency: {
+            name: 'Lifetime Points (in ₹)',
+            desc: 'Lifetime Points in ₹ Description',
+          },
+        },
+      },
+      points_on_event: {
+        name: 'Points on event',
+        desc: 'Points on event Description',
+      },
+      store: {
+        name: 'Store',
+        desc: 'Store Description',
+        subtags: {
+          store_name: {
+            name: 'Store Name',
+            desc: 'Store Name Description',
+          },
+        },
+      },
+    };
+
+    const expected = {
+      customer: {
+        name: 'Customer',
+        desc: 'Customer Description',
+      },
+      cumulative_points_currency: {
+        name: 'Lifetime Points (in ₹)',
+        desc: 'Lifetime Points in ₹ Description',
+      },
+      points_on_event: {
+        name: 'Points on event',
+        desc: 'Points on event Description',
+      },
+      store: {
+        name: 'Store',
+        desc: 'Store Description',
+      },
+      store_name: {
+        name: 'Store Name',
+        desc: 'Store Name Description',
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should ignore entries that are not objects', () => {
+    const input = {
+      valid_entry: {
+        name: 'Valid Entry',
+        desc: 'Valid Entry Description',
+      },
+      invalid_entry: 'This is a string, not an object',
+      another_invalid_entry: null,
+    };
+
+    const expected = {
+      valid_entry: {
+        name: 'Valid Entry',
+        desc: 'Valid Entry Description',
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should handle entries missing name or desc', () => {
+    const input = {
+      incomplete_entry1: {
+        name: 'Incomplete Entry 1',
+        // desc is missing
+        subtags: {
+          subtag1: {
+            name: 'Subtag 1',
+            desc: 'Subtag 1 Description',
+          },
+        },
+      },
+      incomplete_entry2: {
+        // name is missing
+        desc: 'Incomplete Entry 2 Description',
+      },
+    };
+
+    const expected = {
+      incomplete_entry1: {
+        name: 'Incomplete Entry 1',
+        desc: undefined,
+      },
+      subtag1: {
+        name: 'Subtag 1',
+        desc: 'Subtag 1 Description',
+      },
+      incomplete_entry2: {
+        name: undefined,
+        desc: 'Incomplete Entry 2 Description',
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+  test('should handle deeply nested subtags by only flattening one level', () => {
+    const input = {
+      parent: {
+        name: 'Parent',
+        desc: 'Parent Description',
+        subtags: {
+          child: {
+            name: 'Child',
+            desc: 'Child Description',
+            subtags: {
+              grandchild: {
+                name: 'Grandchild',
+                desc: 'Grandchild Description',
+              },
+            },
+          },
+        },
+      },
+    };
+
+    const expected = {
+      parent: {
+        name: 'Parent',
+        desc: 'Parent Description',
+      },
+      child: {
+        name: 'Child',
+        desc: 'Child Description',
+        subtags: {
+          grandchild: {
+            name: 'Grandchild',
+            desc: 'Grandchild Description',
+          },
+        },
+      },
+    };
+
+    expect(getForwardedMapValues(input)).toEqual(expected);
+  });
+
+
+  test('should not mutate the original input object', () => {
+    const input = {
+      customer: {
+        name: 'Customer',
+        desc: 'Customer Description',
+        subtags: {
+          cumulative_points_currency: {
+            name: 'Lifetime Points (in ₹)',
+            desc: 'Lifetime Points in ₹ Description',
+          },
+        },
+      },
+    };
+
+    const inputCopy = JSON.parse(JSON.stringify(input)); // Deep copy
+
+    getForwardedMapValues(input);
+
+    expect(input).toEqual(inputCopy);
+  });
 });

package/v2Containers/Cap/index.js

@@ -54,6 +54,8 @@ import { v2ViberSagas } from '../Viber/sagas';
 import { v2FacebookSagas } from '../Facebook/sagas';
 import createReducer from '../Line/Container/reducer';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import { v2ZaloSagas } from '../Zalo/saga';
+
 const gtm = window.dataLayer || [];
 const {
   logNewTab,
@@ -609,6 +611,7 @@ function mapDispatchToProps(dispatch) {
 const withConnect = connect(mapStateToProps, mapDispatchToProps);
 const withReducer = injectReducer({ key: 'cap', reducer });
 const withZaloReducer = injectReducer({ key: 'zalo', reducer: zaloReducer });
+const withZaloSagas = injectSaga({ key: 'zalo', saga: v2ZaloSagas });
 const withSaga = injectSaga({ key: 'cap', saga: v2CapSagas });
 const withLiquidSaga = injectSaga({ key: 'liquid', saga: capSagaLiquidEntity, mode : DAEMON });
 const withSmsCreateSaga = injectSaga({ key: 'create', saga: v2SmsCreateSagas });
@@ -638,6 +641,7 @@ export default compose(
   withFacebookSaga,
   withReducer,
   withZaloReducer,
+  withZaloSagas,
   withLineReducer,
   withConnect,
 )(injectIntl(Cap));

package/v2Containers/Cap/mockData.js

@@ -71,4 +71,20 @@ export const expectedStateGetLiquidTagsRequest = {
     },
     orgID: "",
     token: ""
+  };
+
+  export const expectedForwardedTags = {
+    fetchingLiquidTags: false,
+    fetchingSchema: true,
+    fetchingSchemaError: '',
+    injectedTags: undefined,
+    liquidTags: [],
+    messages: [],
+    metaEntities: {
+      layouts: [],
+      tagLookupMap: {},
+      tags: []
+    },
+    orgID: "",
+    token: ""
   };

package/v2Containers/Cap/reducer.js

@@ -7,7 +7,7 @@ import * as types from './constants';
 import initialState from '../../initialState';
 import { FAILURE } from '../App/constants';
 import { TAG } from '../Whatsapp/constants';
-import { getTagMapValue } from '../../utils/tagValidations';
+import { getTagMapValue, getForwardedMapValues } from '../../utils/tagValidations';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -117,7 +117,8 @@ function capReducer(state = fromJS(initialState.cap), action) {
       const combinedTagMap = {
         ...standardTagMap,
         ...customSubtags,
-        ...extendedSubtags
+        ...extendedSubtags,
+        ...state.getIn(['metaEntities', 'tagLookupMap'])?.toJS(),
       };
       const stateMeta = state.get("metaEntities");
       return state
@@ -142,7 +143,18 @@ function capReducer(state = fromJS(initialState.cap), action) {
       metaEntities.tags.custom = _.filter(state.get('metaEntities').tags.custom, (tag) => action.tagList.indexOf(tag.name) === -1);
       return state.setIn(['metaEntities'], metaEntities);
     case types.SET_INJECTED_TAGS:
-      return state.set('injectedTags', action.injectedTags);
+
+      // Deep clone the tagLookupMap to avoid direct mutations
+      let updatedMetaEntitiesTagLookUp = _.cloneDeep(state.getIn(['metaEntities', 'tagLookupMap']));
+      const formattedInjectedTags = getForwardedMapValues(action?.injectedTags);
+      // Merge the injectedTags with the existing tagLookupMap
+      updatedMetaEntitiesTagLookUp = {
+        ...formattedInjectedTags || {},
+        ...updatedMetaEntitiesTagLookUp || {},
+      };
+      return state
+        .set('injectedTags', action.injectedTags)
+        .setIn(['metaEntities', 'tagLookupMap'], fromJS(updatedMetaEntitiesTagLookUp));
     case types.GET_TOPBAR_MENU_DATA_REQUEST:
       return state.set('topbarMenuData', fromJS({ status: 'request' }));
     case types.GET_TOPBAR_MENU_DATA_SUCCESS:

package/v2Containers/Cap/tests/reducer.test.js

@@ -10,6 +10,7 @@ import {
     GET_LIQUID_TAGS_FAILURE,
     GET_LIQUID_TAGS_REQUEST,
     GET_SCHEMA_FOR_ENTITY_SUCCESS,
+    SET_INJECTED_TAGS,
 } from '../constants';
 import reducer from '../reducer';
 import initialState from '../../../initialState';
@@ -18,7 +19,8 @@ import {
   expectedStateGetLiquidTagsFailure,
   expectedStateGetLiquidTagsSuccess,
   expectedStateGetSchemaForEntitySuccessTAG,
-  expectedStateGetSchemaForEntitySuccess
+  expectedStateGetSchemaForEntitySuccess,
+  expectedForwardedTags
 } from '../mockData';
 
 const mockedInitialState = fromJS(initialState.cap);
@@ -106,4 +108,12 @@ describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
 
     expect(reducer(mockedInitialState, action).toJS()).toEqual(expectedStateGetSchemaForEntitySuccess);
   });
+  it('handles the GET_SCHEMA_FOR_ENTITY_SUCCESS action', () => {
+    const action = {
+      type: SET_INJECTED_TAGS,
+      data: {},
+    };
+    
+    expect(reducer(mockedInitialState, action).toJS())?.fetchingSchema?.toEqual(true);
+  });
 });

package/v2Containers/Templates/constants.js

@@ -73,8 +73,3 @@ export const GET_SENDER_DETAILS_FAILURE =
 export const GET_CDN_TRANSFORMATION_CONFIG_REQUEST = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_REQUEST';
 export const GET_CDN_TRANSFORMATION_CONFIG_SUCCESS = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_SUCCESS';
 export const GET_CDN_TRANSFORMATION_CONFIG_FAILURE = 'app/v2Containers/Templates/GET_CDN_TRANSFORMATION_CONFIG_FAILURE';
-
-export const ACCOUNT_MAPPING_ON_CHANNEL = {
-  whatsapp: 'selectedWhatsappAccount',
-  zalo: 'selectedZaloAccount',
-};