@capillarytech/creatives-library 8.0.182 → 8.0.183

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

@@ -1,6 +1,6 @@
 import { fromJS } from 'immutable';
 
-import { makeSelectDemoVideoAndLink, setInjectedTags } from 'v2Containers/Cap/selectors';
+import { makeSelectDemoVideoAndLink } from 'v2Containers/Cap/selectors';
 
 describe('CapSelectors', () => {
   const mockState = fromJS({
@@ -11,6 +11,7 @@ describe('CapSelectors', () => {
     },
   });
 
+
   //not need now :Temp
   // describe('makeSelectLocationState', () => {
   //   it.concurrent('should select the route as a plain JS object', () => {
@@ -49,443 +50,4 @@ describe('CapSelectors', () => {
       });
     });
   });
-
-  describe('setInjectedTags selector', () => {
-    // Helper function to safely convert result to plain object
-    const toPlainObject = (result) => {
-      return result && typeof result.toJS === 'function' ? result.toJS() : result;
-    };
-    it('should merge all tag types when all are present', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: {
-              custom: { customTag: 'customValue' },
-              extended: { extendedTag: 'extendedValue' },
-              loyaltyTags: { loyaltyTag: 'loyaltyValue' },
-            },
-          },
-        },
-      });
-      // Due to destructuring bug in selector: const { tags } = metaEntities; fails with Immutable Maps
-      // So tags becomes undefined and only injectedTags is returned
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle empty globalState with default parameter', () => {
-      // Arrange
-      const state = fromJS({ cap: {} });
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined injectedTags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          metaEntities: {
-            tags: {
-              custom: { customTag: 'customValue' },
-            },
-          },
-        },
-      });
-      // Since metaEntities is an Immutable Map, destructuring { tags } = metaEntities returns undefined
-      // So tags will be undefined, and customTags will be undefined
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle null injectedTags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: null,
-          metaEntities: {
-            tags: {
-              custom: { customTag: 'customValue' },
-            },
-          },
-        },
-      });
-      // Same issue - destructuring doesn't work with Immutable Maps
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined metaEntities', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-        },
-      });
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle null metaEntities', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: null,
-        },
-      });
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {},
-        },
-      });
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle null tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: null,
-          },
-        },
-      });
-      // Destructuring { tags } = metaEntities will return undefined because metaEntities is Immutable Map
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined custom tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: {
-              extended: { extendedTag: 'extendedValue' },
-              loyaltyTags: { loyaltyTag: 'loyaltyValue' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined extended tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: {
-              custom: { customTag: 'customValue' },
-              loyaltyTags: { loyaltyTag: 'loyaltyValue' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle undefined loyalty tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: {
-              custom: { customTag: 'customValue' },
-              extended: { extendedTag: 'extendedValue' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle empty tag objects', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { existing: 'tag1' },
-          metaEntities: {
-            tags: {
-              custom: {},
-              extended: {},
-              loyaltyTags: {},
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {
-        existing: 'tag1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle merge with overlapping keys (later values override)', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { shared: 'injected', unique1: 'value1' },
-          metaEntities: {
-            tags: {
-              custom: { shared: 'custom', unique2: 'value2' },
-              extended: { shared: 'extended', unique3: 'value3' },
-              loyaltyTags: { shared: 'loyalty', unique4: 'value4' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined, so only injectedTags will be returned
-      const expected = {
-        shared: 'injected',
-        unique1: 'value1',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle only injectedTags with no metaEntities', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: { onlyInjected: 'value' },
-        },
-      });
-      const expected = {
-        onlyInjected: 'value',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle only custom tags with no injectedTags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          metaEntities: {
-            tags: {
-              custom: { onlyCustom: 'value' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle only extended tags with no injectedTags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          metaEntities: {
-            tags: {
-              extended: { onlyExtended: 'value' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle only loyalty tags with no injectedTags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          metaEntities: {
-            tags: {
-              loyaltyTags: { onlyLoyalty: 'value' },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle completely empty state', () => {
-      // Arrange
-      const state = fromJS({ cap: {} });
-      const expected = {};
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-
-    it('should handle nested object values in tags', () => {
-      // Arrange
-      const state = fromJS({
-        cap: {
-          injectedTags: {
-            nested: { level1: { level2: 'deep' } },
-            simple: 'value',
-          },
-          metaEntities: {
-            tags: {
-              custom: {
-                customNested: { customLevel1: 'customDeep' },
-                customSimple: 'customValue',
-              },
-            },
-          },
-        },
-      });
-      // Destructuring issue - tags will be undefined
-      const expected = {
-        nested: { level1: { level2: 'deep' } },
-        simple: 'value',
-      };
-      const selector = setInjectedTags();
-
-      // Act
-      const result = selector(state);
-
-      // Assert
-      expect(toPlainObject(result)).toEqual(expected);
-    });
-  });
 });
-

package/v2Containers/CreativesContainer/actions.js

@@ -8,7 +8,6 @@ import {
   DEFAULT_ACTION,
   HIDE_CONTAINER_LOADER,
   SHOW_CONTANER_LOADER,
-  STORE_LOYALTY_TAG_PROPS,
 } from './constants';
 
 export function defaultAction() {
@@ -25,11 +24,4 @@ export function hideCreativesContanerLoader() {
   return {
     type: HIDE_CONTAINER_LOADER,
   };
-}
-
-export function storeLoyaltyTagProps(props) {
-  return {
-    type: STORE_LOYALTY_TAG_PROPS,
-    props,
-  };
-}
+}

package/v2Containers/CreativesContainer/constants.js

@@ -29,7 +29,6 @@ export const LOYALTY_SUPPORTED_ACTION = "SEND_COMMUNICATION_ACTION";
 
 export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER";
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
-export const STORE_LOYALTY_TAG_PROPS = "app/CreativesContainer/STORE_LOYALTY_TAG_PROPS";
 
 export const WHATSAPP_HELP_DOC_LINK = "https://docs.capillarytech.com/docs/create-whatsapp-template";
 

package/v2Containers/CreativesContainer/index.js

@@ -125,12 +125,6 @@ export class Creatives extends React.Component {
     if (!this.props?.isFullMode) {
       this.props?.templateActions.getCdnTransformationConfig();
     }
-    
-    // Store loyalty tag props if loyaltyTagFetchingDependencies is provided
-    const { loyaltyTagFetchingDependencies } = this.props;
-    if (loyaltyTagFetchingDependencies) {
-      this.props.actions.storeLoyaltyTagProps({ ...loyaltyTagFetchingDependencies });
-    }
   }
 
   onEnterTemplateName = () => {
@@ -1695,7 +1689,6 @@ Creatives.propTypes = {
   orgUnitId: PropTypes.number,
   hostName: PropTypes.string,
   eventContextTags: PropTypes.array,
-  loyaltyTagFetchingDependencies: PropTypes.object,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func,
   }),

package/v2Containers/CreativesContainer/reducer.js

@@ -9,15 +9,11 @@ import {
   DEFAULT_ACTION,
   SHOW_CONTANER_LOADER,
   HIDE_CONTAINER_LOADER,
-  STORE_LOYALTY_TAG_PROPS,
 } from './constants';
 
 const initialState = fromJS({containerLoader: true});
 
 function creativesContainerReducer(state = initialState, action) {
-  if (!action || !action.type) {
-    return state;
-  }
   switch (action.type) {
     case DEFAULT_ACTION:
       return state;
@@ -25,8 +21,6 @@ function creativesContainerReducer(state = initialState, action) {
       return state.set('containerLoader', true);
     case HIDE_CONTAINER_LOADER:
       return state.set('containerLoader', false);
-    case STORE_LOYALTY_TAG_PROPS:
-      return state.set('loyaltyTagProps', action.props);
     default:
       return state;
   }

package/v2Containers/CreativesContainer/selectors.js

@@ -22,14 +22,9 @@ const isLoading = () => createSelector(
   makeSelectCreativesContainer(),
   (substate) => substate?.containerLoader
 );
-const loyaltyTagProps = () => createSelector(
-  makeSelectCreativesContainer(),
-  (substate) => substate?.loyaltyTagProps
-);
 
 export default makeSelectCreativesContainer;
 export {
   selectCreativesContainerDomain,
   isLoading,
-  loyaltyTagProps,
 };

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -149,22 +149,6 @@ const MediaUploaders = ({
     )));
   }, [getCurrentCarouselData, setCurrentCarouselData]);
 
-  // Create carousel button tag select callback at component level to avoid hooks violation
-  const createCarouselButtonTagSelectCallback = useCallback((cardIndex) => {
-    return (value) => {
-      const currentData = getCurrentCarouselData();
-      const card = currentData[cardIndex];
-      const button = card?.buttons?.[0];
-      if (button) {
-        const newUrl = `${button?.externalLinkValue}{{${value}}}`;
-        // Update carousel card directly using updateCarouselCard
-        const updatedButtons = [...card?.buttons];
-        updatedButtons[0] = { ...updatedButtons[0], externalLinkValue: newUrl };
-        updateCarouselCard(cardIndex, { buttons: updatedButtons });
-      }
-    };
-  }, [getCurrentCarouselData, updateCarouselCard]);
-
   // Clear previous media data when switching media types
   useEffect(() => {
     // Clear carousel data when switching to non-carousel media types
@@ -585,8 +569,13 @@ const MediaUploaders = ({
 
       const button = card?.buttons[0]; // We're handling only one button for now
 
-      // Use the callback creator instead of useCallback inside render function
-      const onButtonTagSelect = createCarouselButtonTagSelectCallback(cardIndex);
+      const onButtonTagSelect = useCallback(
+        (value) => {
+          const newUrl = `${button?.externalLinkValue}{{${value}}}`;
+          handleCarouselExternalLinkChange(cardIndex, newUrl);
+        },
+        [handleCarouselExternalLinkChange, button?.externalLinkValue]
+      );
 
       return (
         <>
@@ -658,7 +647,7 @@ const MediaUploaders = ({
                 )}
                 {button?.linkType === EXTERNAL_LINK && (
                   <CapColumn span={14}>
-                    <CapRow className="buttons-heading-container">
+                    <CapRow>
                       <CapHeading type="h4" className="buttons-heading">
                         {formatMessage(messages.externalLink)}
                       </CapHeading>

package/v2Containers/MobilePushNew/index.scss

@@ -148,15 +148,10 @@
   margin-bottom: $CAP_SPACE_16;
 }
 
-.buttons-heading-container {
-  display: flex;
-  justify-content: space-between;
-}
-
 .buttons-heading {
   margin-bottom: $CAP_SPACE_12;
   margin-top: $CAP_SPACE_12;
-  margin-right: 43%;
+  margin-right: 48%;
 }
 
 .helper-text {

package/v2Containers/Templates/sagas.js

@@ -7,8 +7,7 @@ import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../constants/unified';
-import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
-import { getTemplateInfoById } from '../Zalo/saga';
+// Removed Zalo imports - handled by Zalo component's own saga
 import { watchCreateTemplate } from '../MobilePushNew/sagas';
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
@@ -227,9 +226,6 @@ export function* watchGetCdnTransformationConfig() {
   );
 }
 
-export function* watchForGetTemplateInfoById() {
-  yield takeLatest(ZALO_TEMPLATE_INFO_REQUEST, getTemplateInfoById);
-}
 
 // All sagas to be loaded
 export default [
@@ -255,7 +251,7 @@ export function* v2TemplateSaga() {
     watchGetCdnTransformationConfig(),
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
-    watchForGetTemplateInfoById(),
+    // Removed watchForGetTemplateInfoById() - this is handled by Zalo component's own saga
   ]);
 }