@capillarytech/creatives-library 8.0.138 → 8.0.139-alpha.1

package/package.json

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

package/v2Components/CapImageUpload/index.js

@@ -143,7 +143,7 @@ function CapImageUpload(props) {
 
   const capUploaderCustomRequest = useCallback((uploadData) => {
     uploadImages(undefined, {files: [uploadData.file]});
-  }, []);
+  }, [uploadImages]);
 
   const setDrawerVisibility = useCallback((drawervisibleFlag) => updateDrawerRequirement(drawervisibleFlag), [isDrawerRequired]);
 

package/v2Containers/Line/Container/_lineCreate.scss

@@ -57,7 +57,7 @@
   }
   img {
     object-fit: cover;
-    max-height: 150px;
+    max-height: 9.375rem;
     max-width: 18.75rem;
   }
 }
@@ -106,7 +106,7 @@
 .sms-text {
   img {
     display: block;
-    max-width: 100%;
+    // max-width: 100%;
     object-fit: cover;
   }
 }

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -61,6 +61,22 @@ const CAROUSEL_INITIAL_DATA = {
 // Maximum number of carousel cards allowed
 const MAX_CAROUSEL_ALLOWED = 10;
 
+// Helper function to find selected deep link with fallback to base URL
+const findSelectedDeepLink = (links, value) => {
+  if (!links || !value) return undefined;
+  
+  // Try to find exact match first
+  let selectedDeepLink = links.find((link) => link?.value === value);
+  
+  // If no exact match and value contains query parameters, try base URL match
+  if (!selectedDeepLink && value?.includes('?')) {
+    const baseDeepLinkValue = value.split('?')[0];
+    selectedDeepLink = links.find((link) => link?.value === baseDeepLinkValue);
+  }
+  
+  return selectedDeepLink;
+};
+
 const MediaUploaders = ({
   mediaType,
   activeTab,
@@ -93,6 +109,16 @@ const MediaUploaders = ({
   // Track re-upload mode to prevent automatic restoration during re-upload
   const [isReUploading, setIsReUploading] = useState(false);
 
+  // Track which card is currently uploading to handle completion properly
+  const [uploadingCardIndex, setUploadingCardIndex] = useState(null);
+  
+  // Track upload ID to prevent processing stale Redux data
+  const [currentUploadId, setCurrentUploadId] = useState(null);
+  const uploadIdRef = useRef(0); // Counter for generating unique upload IDs
+  
+  // Track previous upload data to detect when a new upload completes
+  const previousUploadDataRef = useRef(null);
+
   // Track previous media type to handle transitions
   const previousMediaTypeRef = useRef(mediaType);
 
@@ -109,12 +135,25 @@ const MediaUploaders = ({
     }
   }, [activeTab, onCarouselDataChange]);
 
+  // Move updateCarouselCard to top level so useEffect can access it
+  const updateCarouselCard = useCallback((index, fields) => {
+    const currentData = getCurrentCarouselData();
+    setCurrentCarouselData(currentData.map((card, i) => (
+      i === index ? { ...card, ...fields } : card
+    )));
+  }, [getCurrentCarouselData, setCurrentCarouselData]);
+
   // Clear previous media data when switching media types
   useEffect(() => {
     // Clear carousel data when switching to non-carousel media types
     if (mediaType !== CAROUSEL) {
       setCurrentCarouselData([]);
       setCarouselActiveTabIndex(0);
+      
+      // Reset carousel upload tracking
+      setUploadingCardIndex(null);
+      setCurrentUploadId(null);
+      previousUploadDataRef.current = null;
     }
 
     // Clear image data when switching away from IMAGE media type
@@ -139,7 +178,14 @@ const MediaUploaders = ({
   useEffect(() => {
     // Reset active tab index when switching platforms
     setCarouselActiveTabIndex(0);
-  }, [activeTab]);
+    
+    // Reset upload tracking when switching platforms to prevent cross-platform conflicts
+    if (mediaType === CAROUSEL) {
+      setUploadingCardIndex(null);
+      setCurrentUploadId(null);
+      previousUploadDataRef.current = null;
+    }
+  }, [activeTab, mediaType]);
 
   // Initialize carousel data if empty
   useEffect(() => {
@@ -148,37 +194,8 @@ const MediaUploaders = ({
     }
   }, [mediaType, carouselData, activeTab, setCurrentCarouselData]);
 
-  // Listen for upload success and update carousel data
-  useEffect(() => {
-    // Skip automatic updates during re-upload mode
-    if (isReUploading) {
-      return;
-    }
-
-    if (mediaType === CAROUSEL && imageData) {
-      const platformIndex = activeTab === ANDROID ? 0 : 1;
-      const uploadedAssetData = imageData[`uploadedAssetData${platformIndex}`];
-
-      // Only update if there's new upload data and it's different from current carousel data
-      if (uploadedAssetData && uploadedAssetData.metaInfo && uploadedAssetData.metaInfo.secure_file_path) {
-        const currentData = getCurrentCarouselData();
-        if (currentData?.length > carouselActiveTabIndex) {
-          const currentCard = currentData[carouselActiveTabIndex];
-          const newImageUrl = uploadedAssetData.metaInfo.secure_file_path;
-
-          // Only update if the image URL is different from the current one and not empty
-          if (currentCard?.imageUrl !== newImageUrl && newImageUrl !== '') {
-            const updatedData = [...currentData];
-            updatedData[carouselActiveTabIndex] = {
-              ...updatedData[carouselActiveTabIndex],
-              imageUrl: newImageUrl,
-            };
-            setCurrentCarouselData(updatedData);
-          }
-        }
-      }
-    }
-  }, [imageData, mediaType, activeTab, carouselActiveTabIndex, getCurrentCarouselData, setCurrentCarouselData, isReUploading]);
+  // Note: Carousel images use standard platform indices (0/1) and are handled 
+  // by the updateImageSrc callback with CAROUSEL mediaType for proper separation
 
   const renderImageComponent = useCallback(() => {
     let imageSource = '';
@@ -363,46 +380,40 @@ const MediaUploaders = ({
       }
     };
 
-    const updateCarouselCard = (index, fields) => {
-      const currentData = getCurrentCarouselData();
-      setCurrentCarouselData(currentData.map((card, i) => (
-        i === index ? { ...card, ...fields } : card
-      )));
-      // Don't clear assets for carousel cards since they store data in component state, not Redux
-      // Only clear assets for non-carousel media types
-    };
+    // updateCarouselCard moved to top level to be accessible by useEffect
 
-    const handleCarouselImageChange = (image) => {
-      updateCarouselCard(parseInt(carouselActiveTabIndex, 10), { imageUrl: image });
+    const handleCarouselImageChange = (image, cardIndex) => {
+      // Update the specific card that uploaded the image, not the active card
+      updateCarouselCard(cardIndex, { imageUrl: image });
     };
 
-    // Carousel-specific re-upload handler that clears both Redux and component state
-    const handleCarouselImageReUpload = () => {
+    // Carousel-specific re-upload handler that clears both Redux and component state for specific card
+    const handleCarouselImageReUpload = (cardIndex) => {
       // Set re-upload mode to prevent automatic restoration
       setIsReUploading(true);
 
       // Clear Redux state (same as updateOnMpushImageReUpload)
       updateOnMpushImageReUpload();
 
-      // Clear Redux uploadedAssetData to prevent automatic restoration
+      // Clear Redux uploadedAssetData to prevent automatic restoration using standard platform index
       const platformIndex = activeTab === ANDROID ? 0 : 1;
       mobilePushActions.clearAsset(platformIndex);
 
-      // Clear carousel component state for the current card
+      // Clear carousel component state for the specific card
       const currentData = getCurrentCarouselData();
-      if (currentData?.length > carouselActiveTabIndex) {
+      if (currentData?.length > cardIndex) {
         const updatedData = [...currentData];
-        updatedData[carouselActiveTabIndex] = {
-          ...updatedData[carouselActiveTabIndex],
+        updatedData[cardIndex] = {
+          ...updatedData[cardIndex],
           imageUrl: '',
         };
         setCurrentCarouselData(updatedData);
       }
 
-      // Reset re-upload mode after a longer delay to allow for upload completion
+      // Reset re-upload mode after a delay
       setTimeout(() => {
         setIsReUploading(false);
-      }, 3000); // Increased from 1000ms to 3000ms
+      }, 100);
     };
 
     // Action link handlers for carousel cards
@@ -467,6 +478,17 @@ const MediaUploaders = ({
       // Each carousel card maintains its own imageUrl
       const imageSource = card?.imageUrl || '';
 
+      // Custom upload function that tracks which card is uploading
+      const handleCarouselUpload = (file, assetType, fileParams, index) => {
+        // Generate unique upload ID to track this specific upload
+        uploadIdRef.current += 1;
+        const uploadId = uploadIdRef.current;
+        
+        setUploadingCardIndex(cardIndex);
+        setCurrentUploadId(uploadId);
+        return uploadMpushAsset(file, assetType, fileParams, index);
+      };
+
       return (
         <CapImageUpload
           style={{ paddingTop: "20px" }}
@@ -474,22 +496,27 @@ const MediaUploaders = ({
           imgSize={MPUSH_IMG_SIZE}
           imgWidth={MPUSH_IMG_MAX_WIDTH}
           imgHeight={MPUSH_IMG_MAX_HEIGHT}
-          uploadAsset={uploadMpushAsset}
+          uploadAsset={handleCarouselUpload}
           isFullMode={isFullMode}
           imageSrc={imageSource}
           updateImageSrc={(src) => {
-            // Update only this specific carousel card's image
-            handleCarouselImageChange(src);
+            // For gallery uploads (direct URL), update immediately  
+            if (src && (src.includes('http') || src.includes('https'))) {
+              handleCarouselImageChange(src, cardIndex);
+            }
+            
+            // Always call setUpdateMpushImageSrc for Redux state management
+            setUpdateMpushImageSrc(src, activeTab === ANDROID ? 0 : 1, CAROUSEL);
           }}
-          updateOnReUpload={handleCarouselImageReUpload}
+          updateOnReUpload={() => handleCarouselImageReUpload(cardIndex)}
           index={activeTab === ANDROID ? 0 : 1}
           className="cap-custom-image-upload"
           key={`carousel-image-${activeTab}-${cardIndex}`}
-          imageData={{}} // Empty object for carousel images since they're stored in component state
+          imageData={imageData}
           channel={MOBILE_PUSH_CHANNEL}
           showReUploadButton
           errorMessage={formatMessage(messages.imageErrorMessage)}
-          disableAutoRestore // Disable automatic restoration for carousel images
+          disableAutoRestore // Disable automatic restoration to prevent all cards from showing the same image
         />
       );
     };
@@ -572,15 +599,15 @@ const MediaUploaders = ({
                       options={(() => {
                         const options = [...(deepLink || [])];
                         // If the current value is not in the options, add it
-                        if (button.deepLinkValue && !options.find(opt => opt.value === button.deepLinkValue)) {
+                        if (button?.deepLinkValue && !options.find(opt => opt.value === button?.deepLinkValue)) {
                           options.push({
-                            value: button.deepLinkValue,
-                            label: button.deepLinkValue,
+                            value: button?.deepLinkValue,
+                            label: button?.deepLinkValue,
                           });
                         }
                         return options;
                       })()}
-                      value={button.deepLinkValue}
+                      value={button?.deepLinkValue}
                       onChange={(value) => handleCarouselDeepLinkChange(cardIndex, value)}
                       key={`mobile-push-deep-link-type-${activeTab}-${cardIndex}`}
                       placeholder={formatMessage(messages.selectDeepLink)}
@@ -616,12 +643,7 @@ const MediaUploaders = ({
               </CapRow>
             )}
             {button?.linkType === DEEP_LINK && button?.deepLinkValue && button?.actionOnClick && (() => {
-              // Try to find exact match first, then try match without query parameters
-              let selectedDeepLink = deepLink?.find((link) => link?.value === button?.deepLinkValue);
-              if (!selectedDeepLink && button?.deepLinkValue && button?.deepLinkValue.includes('?')) {
-                const baseDeepLinkValue = button?.deepLinkValue.split('?')[0];
-                selectedDeepLink = deepLink?.find((link) => link?.value === baseDeepLinkValue);
-              }
+              const selectedDeepLink = findSelectedDeepLink(deepLink, button?.deepLinkValue);
               const deepLinkKeysFromSelection = selectedDeepLink?.keys;
               let deepLinkKeysFromSelectionArray = [];
               if (Array.isArray(deepLinkKeysFromSelection)) {
@@ -638,12 +660,7 @@ const MediaUploaders = ({
                   </CapHeading>
                   <CapLabel type="label2" className="deep-link-keys-value">
                     {(() => {
-                      // Try to find exact match first, then try match without query parameters
-                      let selectedDeepLink = deepLink?.find((link) => link?.value === button?.deepLinkValue);
-                      if (!selectedDeepLink && button?.deepLinkValue && button?.deepLinkValue.includes('?')) {
-                        const baseDeepLinkValue = button?.deepLinkValue.split('?')[0];
-                        selectedDeepLink = deepLink?.find((link) => link?.value === baseDeepLinkValue);
-                      }
+                      const selectedDeepLink = findSelectedDeepLink(deepLink, button?.deepLinkValue);
                       const deepLinkKeysFromSelection = selectedDeepLink?.keys;
                       let deepLinkKeysArray = [];
                       if (Array.isArray(button?.deepLinkKeys)) {
@@ -671,12 +688,7 @@ const MediaUploaders = ({
                     onChange={(e) => handleCarouselDeepLinkKeysChange(cardIndex, e.target.value)}
                     placeholder={formatMessage(messages.deepLinkKeysPlaceholder, {
                       key: (() => {
-                        // Try to find exact match first, then try match without query parameters
-                        let selectedDeepLink = deepLink?.find((link) => link?.value === button?.deepLinkValue);
-                        if (!selectedDeepLink && button?.deepLinkValue && button?.deepLinkValue.includes('?')) {
-                          const baseDeepLinkValue = button?.deepLinkValue.split('?')[0];
-                          selectedDeepLink = deepLink?.find((link) => link?.value === baseDeepLinkValue);
-                        }
+                        const selectedDeepLink = findSelectedDeepLink(deepLink, button?.deepLinkValue);
                         const deepLinkKeysFromSelection = selectedDeepLink?.keys;
                         let deepLinkKeysFromSelectionArray = [];
                         if (Array.isArray(deepLinkKeysFromSelection)) {
@@ -807,21 +819,44 @@ const MediaUploaders = ({
     carouselActiveTabIndex,
     uploadMpushAsset,
     isFullMode,
-    setUpdateMpushImageSrc,
-    updateOnMpushImageReUpload,
     imageData,
     videoAssetList,
     setUpdateMpushVideoSrc,
     videoDataForVideo,
     formatMessage,
-    clearImageDataByMediaType,
     mobilePushActions,
     carouselLinkErrors,
     updateCarouselLinkError,
-    carouselActiveTabIndex,
     setCarouselActiveTabIndex,
+    deepLink,
   ]);
 
+  // Manually handle upload completion for carousel cards (since automatic restoration is disabled)
+  useEffect(() => {
+    if (mediaType === CAROUSEL && uploadingCardIndex !== null && currentUploadId && imageData) {
+      const platformIndex = activeTab === ANDROID ? 0 : 1;
+      const uploadedData = imageData[`uploadedAssetData${platformIndex}`];
+      
+      if (uploadedData && uploadedData.metaInfo && uploadedData.metaInfo.secure_file_path) {
+        // Check if this is new upload data (different from what we processed last time)
+        const currentDataKey = `${uploadedData.metaInfo.secure_file_path}_${uploadedData.metaInfo.file_name || ''}`;
+        const previousDataKey = previousUploadDataRef.current;
+        
+        if (currentDataKey !== previousDataKey) {
+          // Update the specific card that was uploading
+          updateCarouselCard(uploadingCardIndex, { imageUrl: uploadedData.metaInfo.secure_file_path });
+          
+          // Store this upload data as "processed" to avoid reprocessing
+          previousUploadDataRef.current = currentDataKey;
+          
+          // Clear the uploading state
+          setUploadingCardIndex(null);
+          setCurrentUploadId(null);
+        }
+      }
+    }
+  }, [mediaType, imageData, uploadingCardIndex, currentUploadId, activeTab, updateCarouselCard]);
+
   if (mediaType === IMAGE) return renderImageComponent();
   if (mediaType === VIDEO) return renderVideoComponent();
   if (mediaType === GIF) return renderGifComponent();

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -63,7 +63,7 @@ const PlatformContentFields = ({
   let selectedDeepLink = deepLink?.find((link) => link?.value === deepLinkValue);
 
   // If no exact match, try to find match without query parameters
-  if (!selectedDeepLink && deepLinkValue && deepLinkValue.includes('?')) {
+  if (!selectedDeepLink && deepLinkValue?.includes('?')) {
     const baseDeepLinkValue = deepLinkValue.split('?')[0];
     selectedDeepLink = deepLink?.find((link) => link?.value === baseDeepLinkValue);
   }