@capillarytech/creatives-library 8.0.177 → 8.0.178-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.177",
+  "version": "8.0.178-alpha.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 {