@capillarytech/creatives-library 8.0.183 → 8.0.184-beta.0

package/package.json

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

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -149,6 +149,22 @@ 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
@@ -569,13 +585,8 @@ const MediaUploaders = ({
 
       const button = card?.buttons[0]; // We're handling only one button for now
 
-      const onButtonTagSelect = useCallback(
-        (value) => {
-          const newUrl = `${button?.externalLinkValue}{{${value}}}`;
-          handleCarouselExternalLinkChange(cardIndex, newUrl);
-        },
-        [handleCarouselExternalLinkChange, button?.externalLinkValue]
-      );
+      // Use the callback creator instead of useCallback inside render function
+      const onButtonTagSelect = createCarouselButtonTagSelectCallback(cardIndex);
 
       return (
         <>
@@ -647,7 +658,7 @@ const MediaUploaders = ({
                 )}
                 {button?.linkType === EXTERNAL_LINK && (
                   <CapColumn span={14}>
-                    <CapRow>
+                    <CapRow className="buttons-heading-container">
                       <CapHeading type="h4" className="buttons-heading">
                         {formatMessage(messages.externalLink)}
                       </CapHeading>

package/v2Containers/MobilePushNew/index.scss

@@ -148,10 +148,15 @@
   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: 48%;
+  margin-right: 43%;
 }
 
 .helper-text {

package/v2Containers/Templates/sagas.js

@@ -7,8 +7,8 @@ import * as Api from '../../services/api';
 import * as types from './constants';
 import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../constants/unified';
-// Removed Zalo imports - handled by Zalo component's own saga
-import { watchCreateTemplate } from '../MobilePushNew/sagas';
+import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
+import { getTemplateInfoById } from '../Zalo/saga';
 // Individual exports for testing
 export function* getAllTemplates(channel, queryParams) {
   try {
@@ -226,6 +226,18 @@ export function* watchGetCdnTransformationConfig() {
   );
 }
 
+// Zalo template info watcher - only for preview functionality from Templates component
+export function* watchForGetTemplateInfoById() {
+  yield takeLatest(ZALO_TEMPLATE_INFO_REQUEST, function* handleZaloTemplateInfoRequest(action) {
+    // Only handle requests that are specifically for preview (have preview flag)
+    // Ignore edit requests (handled by Zalo component saga)
+    if (action.payload && action.payload.preview && !action.payload.edit) {
+      yield call(getTemplateInfoById, action);
+    }
+    // If it's not a preview request or is an edit request, let the Zalo component handle it
+  });
+}
+
 
 // All sagas to be loaded
 export default [
@@ -239,6 +251,7 @@ export default [
   watchGetOrgLevelCampaignSettings,
   watchGetSenderDetails,
   watchGetCdnTransformationConfig,
+  watchForGetTemplateInfoById, // Restored for preview functionality from Templates component
 ];
 
 export function* v2TemplateSaga() {
@@ -251,7 +264,7 @@ export function* v2TemplateSaga() {
     watchGetCdnTransformationConfig(),
     watchFetchWeCrmAccounts(),
     watchGetSenderDetails(),
-    // Removed watchForGetTemplateInfoById() - this is handled by Zalo component's own saga
+    watchForGetTemplateInfoById(), // Restored for preview functionality from Templates component
   ]);
 }
 

package/v2Containers/Zalo/index.js

@@ -132,15 +132,20 @@ export const Zalo = (props) => {
     }
   }, [selectedZaloAccount, templateData]);
 
-  //gets template details
+  //gets template details - prevent duplicate calls with Templates saga
   useEffect(() => {
-    if (zaloTempId && oa_id && token && username && hostName) {
+    const hasRequiredData = zaloTempId && oa_id && token && username && hostName;
+
+    // Only make API call if we have all required data
+    // Add edit flag to distinguish from preview requests handled by Templates saga
+    if (hasRequiredData) {
       actions.getTemplateInfoById({
         username,
         oa_id,
         token,
         host: hostName,
         id: zaloTempId,
+        edit: true, // Flag to indicate this is an edit request, not preview
         actionCallback,
       });
     }