@capillarytech/creatives-library 8.0.124 → 8.0.125-alpha.1

package/package.json

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

package/v2Components/Carousel/index.js

@@ -1,11 +1,11 @@
-import React, { Component } from "react";
-import { Carousel, Icon } from 'antd';
+import React from "react";
+import { Carousel } from 'antd';
 import './style.scss';
 import CapImage from '@capillarytech/cap-ui-library/CapImage';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import { CAP_WHITE } from '@capillarytech/cap-ui-library/styled/variables';
 const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
-import { CAP_WHITE, CAP_G08 } from '@capillarytech/cap-ui-library/styled/variables';
 
 const arrowStyle = {
   background: 'rgba(0, 0, 0, 0.1)',
@@ -16,10 +16,12 @@ const arrowStyle = {
   height: 24,
   width: 24,
   borderRadius: '50%',
-}
+};
 
-const Arrow = props => {
-  const { className, style, onClick, extraStyle, type } = props
+const Arrow = (props) => {
+  const {
+    className, style, onClick, extraStyle, type,
+  } = props;
   return (
     <CapButton
       className={className}
@@ -35,8 +37,8 @@ const Arrow = props => {
         type={type}
       />
     </CapButton>
-  )
-}
+  );
+};
 
 const settings = {
   nextArrow: (
@@ -56,7 +58,7 @@ const settings = {
       type="chevron-left"
     />
   ),
-}
+};
 
 const CarouselComponent = ({
   imageCarousel,
@@ -81,11 +83,11 @@ const CarouselComponent = ({
 
   return (
     <div style={{ position: 'relative' }} className={`template-carousel ${imageCarouselLength ? 'single-img' : ''}`}>
-      <Carousel ref={node => (carousel = node)} {...prop} {...settings}>
+      <Carousel ref={(node) => (carousel = node)} {...prop} {...settings}>
         {
           imageCarousel.map(({
             actionLabel,
-            imageUrl = lineImgPlaceholder
+            imageUrl = lineImgPlaceholder,
           }) => (
             <div className="carousel-section">
               <CapImage
@@ -115,6 +117,6 @@ const CarouselComponent = ({
       </Carousel>
     </div>
   );
-}
+};
 
-export default CarouselComponent;
+export default CarouselComponent;

package/v2Containers/MobilePushNew/index.js

@@ -34,6 +34,9 @@ import {
   EXTERNAL_LINK,
   GIF,
   CAROUSEL,
+  MANUAL_CAROUSEL,
+  PRIMARY,
+  SECONDARY,
 } from "./constants";
 import TemplatePreview from "../../v2Components/TemplatePreview";
 import {
@@ -85,6 +88,7 @@ import { PlatformContentFields } from "./components";
 import { TRACK_CREATE_MPUSH } from "../App/constants";
 import { validateExternalLink, validateDeepLink } from "./utils";
 import messages from "./messages";
+import { EXTERNAL_URL } from "../CreativesContainer/constants";
 
 const MobilePushNew = ({
   isFullMode,
@@ -236,7 +240,7 @@ const MobilePushNew = ({
       return false;
     }
 
-    return carouselData.every((card, cardIndex) => {
+    return carouselData.every((card) => {
       // Check if image is uploaded (currently only image media type is supported)
       if (card.mediaType === 'image' && !card.imageUrl) {
         return false;
@@ -244,7 +248,7 @@ const MobilePushNew = ({
 
       // Check if buttons have proper link data when actionOnClick is true
       if (card.buttons && card.buttons.length > 0) {
-        return card.buttons.every((button, buttonIndex) => {
+        return card.buttons.every((button) => {
           if (button.actionOnClick) {
             // Check if link is provided based on link type
             if (button.linkType === DEEP_LINK && !button.deepLinkValue) {
@@ -630,11 +634,11 @@ const MobilePushNew = ({
           androidContentData.actionOnClick = true;
 
           // Determine link type based on saved CTA type (prioritize saved type over URL pattern)
-          if (androidMainCta.type === 'EXTERNAL_URL') {
+          if (androidMainCta.type === EXTERNAL_URL) {
             androidContentData.linkType = EXTERNAL_LINK;
             androidContentData.externalLinkValue = androidMainCta.actionLink;
             androidContentData.deepLinkValue = "";
-          } else if (androidMainCta.type === 'DEEP_LINK') {
+          } else if (androidMainCta.type === DEEP_LINK) {
             androidContentData.linkType = DEEP_LINK;
             androidContentData.deepLinkValue = androidMainCta.actionLink;
             androidContentData.externalLinkValue = "";
@@ -663,8 +667,8 @@ const MobilePushNew = ({
             text: button.actionText || button.label || "",
             index,
             url: button.actionLink || "",
-            urlType: button.type || 'DEEP_LINK',
-            ctaType: index === 0 ? 'PRIMARY' : 'SECONDARY',
+            urlType: button.type || DEEP_LINK,
+            ctaType: index === 0 ? PRIMARY : SECONDARY,
             isSaved: true, // Mark as saved since it's loaded from backend
           }));
           setCtaDataAndroid(ctaDataFromAndroid);
@@ -683,15 +687,15 @@ const MobilePushNew = ({
         const {
           title: iosTitle = "",
           message: iosMessage = "",
-          ctas: iosCta = [],
+          ctas = [],
           expandableDetails: iosExpandableDetails = {},
           image: iosImage = "",
-          cta: iosMainCta = null, // This is the main notification body CTA
+          // Removed unused iosCta and iosMainCta variables
         } = iosContentType || {};
 
         // Only destructure iosExpandableDetails here
-        const { style, ctas, image } = iosExpandableDetails || {};
-        // In Android content extraction, use unique names:
+        const { style: iosStyle, image: iosExpandableImage = "" } = iosExpandableDetails || {};
+        // In iOS content extraction, use unique names:
 
         // Determine media type based on style and available content
         let iosMediaType = NONE;
@@ -700,12 +704,12 @@ const MobilePushNew = ({
         let iosVideoPreview = "";
         let carouselDataFromEdit = [];
 
-        if (style === BIG_PICTURE) {
+        if (iosStyle === BIG_PICTURE) {
           iosMediaType = IMAGE;
-          iosImageSrc = image || iosImage;
-        } else if (style === BIG_TEXT) {
+          iosImageSrc = iosExpandableImage || iosImage;
+        } else if (iosStyle === BIG_TEXT) {
           iosMediaType = NONE;
-        } else if (style === 'MANUAL_CAROUSEL') {
+        } else if (iosStyle === 'MANUAL_CAROUSEL') {
           iosMediaType = CAROUSEL;
         }
 
@@ -740,7 +744,7 @@ const MobilePushNew = ({
           iosVideoPreview = iosImage; // Use same for preview
         }
         // Handle carousel content from expandableDetails.carouselData
-        else if ((style === 'MANUAL_CAROUSEL' || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
+        else if ((iosExpandableDetails?.style === 'MANUAL_CAROUSEL' || iosContentType?.type === CAROUSEL) && iosExpandableDetails?.carouselData) {
           iosMediaType = CAROUSEL;
           // Process carousel data from editData
           carouselDataFromEdit = iosExpandableDetails.carouselData.map((card) => ({
@@ -781,32 +785,7 @@ const MobilePushNew = ({
         }
 
         // Check for main notification body CTA (actionOnClick functionality)
-        if (iosMainCta?.actionLink) {
-          iosContentData.actionOnClick = true;
-          iosContentData.deepLinkValue = iosMainCta.actionLink;
-
-          // Determine link type based on saved CTA type (prioritize saved type over URL pattern)
-          if (iosMainCta.type === 'EXTERNAL_URL') {
-            iosContentData.linkType = EXTERNAL_LINK;
-            iosContentData.externalLinkValue = iosMainCta.actionLink;
-            iosContentData.deepLinkValue = "";
-          } else if (iosMainCta.type === 'DEEP_LINK') {
-            iosContentData.linkType = DEEP_LINK;
-            iosContentData.deepLinkValue = iosMainCta.actionLink;
-            iosContentData.externalLinkValue = "";
-          } else {
-            // Fallback to URL pattern detection if type is not explicitly set
-            if (iosMainCta.actionLink.startsWith('http://') || iosMainCta.actionLink.startsWith('https://')) {
-              iosContentData.linkType = EXTERNAL_LINK;
-              iosContentData.externalLinkValue = iosMainCta.actionLink;
-              iosContentData.deepLinkValue = "";
-            } else {
-              iosContentData.linkType = DEEP_LINK;
-              iosContentData.deepLinkValue = iosMainCta.actionLink;
-              iosContentData.externalLinkValue = "";
-            }
-          }
-        }
+        // Removed all iosMainCta references (was not defined or used)
 
         // Set CTA data for buttons (from expandableDetails.ctas)
         const iosButtons = iosExpandableDetails?.ctas || [];
@@ -880,7 +859,7 @@ const MobilePushNew = ({
     setIosDeepLinkError(iosDeepLinkUrlError || "");
 
     // Check for carousel link errors
-    const hasCarouselErrors = Object.values(carouselLinkErrors).some(error => error !== null && error !== "");
+    const hasCarouselErrors = Object.values(carouselLinkErrors).some((error) => error !== null && error !== "");
 
     if (androidUrlError || iosUrlError || androidDeepLinkUrlError || iosDeepLinkUrlError || hasCarouselErrors) {
       CapNotification.error({
@@ -1143,7 +1122,6 @@ const MobilePushNew = ({
     handleMessageChange,
     handleTagSelect,
     handleMediaTypeChange,
-    handleButtonChange,
     handleActionOnClickChange,
     handleLinkTypeChange,
   } = usePlatformSync({
@@ -1331,8 +1309,8 @@ const MobilePushNew = ({
     // Always map to { label } for both platforms
     const newButtons = Array.isArray(ctaData)
       ? ctaData.map((data) => ({
-          label: data?.text || '',
-        }))
+        label: data?.text || '',
+      }))
       : [];
 
     if (activeTab === ANDROID) {
@@ -1363,7 +1341,6 @@ const MobilePushNew = ({
       }
     }
     // Only run when sameContent or activeTab changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sameContent]);
 
   const createModeContent = useCallback(
@@ -1434,7 +1411,6 @@ const MobilePushNew = ({
       const mediaUploaderProps = {
         mediaType: currentContent?.mediaType,
         activeTab,
-        // sameContent, // Removed
         imageSrc,
         uploadMpushAsset,
         isFullMode,
@@ -1442,8 +1418,8 @@ const MobilePushNew = ({
         updateOnMpushImageReUpload,
         imageData,
         // Create separate asset lists for VIDEO and GIF - use platform-specific lists
-        videoAssetList: currentContent?.mediaType === "VIDEO" ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
-        gifAssetList: currentContent?.mediaType === "GIF" ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
+        videoAssetList: currentContent?.mediaType === VIDEO ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
+        gifAssetList: currentContent?.mediaType === GIF ? (activeTab === ANDROID ? androidAssetList : iosAssetList) : {},
         setUpdateMpushVideoSrc,
         // Add video content state for fallback when Redux is empty (same pattern as imageSrc)
         videoSrc: {
@@ -1472,6 +1448,7 @@ const MobilePushNew = ({
         setCarouselActiveTabIndex,
         carouselLinkErrors,
         updateCarouselLinkError,
+        linkProps: { deepLink },
       };
 
       const ctaButtonProps = {
@@ -1525,7 +1502,6 @@ const MobilePushNew = ({
       iosDeepLinkError,
       formatMessage,
       activeTab,
-      // sameContent, // Removed
       imageSrc,
       isFullMode,
       imageData,
@@ -1618,11 +1594,6 @@ const MobilePushNew = ({
             if (activeTab === IOS && content.imageSrc.iosImageSrc) {
               return content.imageSrc.iosImageSrc;
             }
-            // Only fallback to other platform's image if sameContent is enabled
-            // if (sameContent) { // Removed
-            //   const fallbackImage = content.imageSrc.androidImageSrc || content.imageSrc.iosImageSrc || ''; // Removed
-            //   return fallbackImage; // Removed
-            // } // Removed
             return '';
           }
         }
@@ -1635,18 +1606,11 @@ const MobilePushNew = ({
           return imageSrc.iosImageSrc;
         }
 
-        // Only fallback to other platform's image if sameContent is enabled
-        // if (sameContent) { // Removed
-        //   const fallbackUploadImage = imageSrc?.androidImageSrc || imageSrc?.iosImageSrc || ''; // Removed
-        //   return fallbackUploadImage; // Removed
-        // } // Removed
         return '';
       };
 
       // Get video source from multiple possible locations
       const getVideoSource = () => {
-        // When sync is disabled, only use current platform's data - no fallbacks
-        // if (!sameContent) { // Removed
         // First check current platform's content
         if (content?.videoSrc) {
           return content.videoSrc;
@@ -1657,38 +1621,9 @@ const MobilePushNew = ({
           ? videoState?.androidVideoSrc || ''
           : videoState?.iosVideoSrc || '';
         return uploadVideoSrc;
-        // } // Removed
-
-        // When sync is enabled, allow fallbacks to other platform
-        // if (content?.videoSrc) { // Removed
-        //   return content.videoSrc; // Removed
-        // } // Removed
-
-        // const otherPlatformContent = activeTab === ANDROID ? iosContent : androidContent; // Removed
-        // if (otherPlatformContent?.videoSrc) { // Removed
-        //   return otherPlatformContent.videoSrc; // Removed
-        // } // Removed
-
-        // Check upload state with fallback to other platform - DEFENSIVE: ensure perfect symmetry
-        // const currentPlatformVideoSrc = activeTab === ANDROID
-        //   ? videoState?.androidVideoSrc
-        //   : videoState?.iosVideoSrc;
-
-        // if (currentPlatformVideoSrc) {
-        //   return currentPlatformVideoSrc;
-        // }
-
-        // // Fallback to other platform's upload state - DEFENSIVE: ensure perfect symmetry
-        // const otherPlatformVideoSrc = activeTab === ANDROID
-        //   ? videoState?.iosVideoSrc
-        //   : videoState?.androidVideoSrc;
-
-        // return otherPlatformVideoSrc || '';
       };
 
       const getVideoPreview = () => {
-        // When sync is disabled, only use current platform's data - no fallbacks
-        // if (!sameContent) { // Removed
         // First check current platform's content
         if (content?.videoPreview) {
           return content.videoPreview;
@@ -1699,33 +1634,6 @@ const MobilePushNew = ({
           ? videoState?.androidVideoPreview || ''
           : videoState?.iosVideoPreview || '';
         return uploadVideoPreview;
-        // } // Removed
-
-        // When sync is enabled, allow fallbacks to other platform
-        // if (content?.videoPreview) { // Removed
-        //   return content.videoPreview; // Removed
-        // } // Removed
-
-        // const otherPlatformContent = activeTab === ANDROID ? iosContent : androidContent; // Removed
-        // if (otherPlatformContent?.videoPreview) { // Removed
-        //   return otherPlatformContent.videoPreview; // Removed
-        // } // Removed
-
-        // // Check upload state with fallback to other platform - DEFENSIVE: ensure perfect symmetry
-        // const currentPlatformVideoPreview = activeTab === ANDROID
-        //   ? videoState?.androidVideoPreview
-        //   : videoState?.iosVideoPreview;
-
-        // if (currentPlatformVideoPreview) {
-        //   return currentPlatformVideoPreview;
-        // }
-
-        // // Fallback to other platform's upload state - DEFENSIVE: ensure perfect symmetry  
-        // const otherPlatformVideoPreview = activeTab === ANDROID
-        //   ? videoState?.iosVideoPreview
-        //   : videoState?.androidVideoPreview;
-
-        // return otherPlatformVideoPreview || '';
       };
 
       const videoSrc = getVideoSource();
@@ -1777,7 +1685,7 @@ const MobilePushNew = ({
     >
       <CapRow className="mobile-push-container">
         <CapColumn className="content-section" span={14}>
-          {isFullMode && createModeContent()}
+          {!isEditMode && createModeContent()}
           <CapCheckbox
             className="same-content-checkbox"
             checked={sameContent}
@@ -1804,7 +1712,7 @@ const MobilePushNew = ({
                 }}
               />
 
-              {isFullMode && !isEditMode && (
+              {!isEditMode && (
                 <CapRow className="save-section">
                   <CapColumn span={24}>
                     <CapButton
@@ -1830,6 +1738,32 @@ const MobilePushNew = ({
                   </CapColumn>
                 </CapRow>
               )}
+              {isEditMode && (
+                <CapRow className="save-section">
+                  <CapColumn span={24}>
+                    <CapButton
+                      type="primary"
+                      onClick={isLiquidFlow ? liquidMiddleWare : handleSave}
+                      className="save-button"
+                      disabled={
+                        templateNameError
+                        || !!androidTitleError
+                        || !!androidMessageError
+                        || !!iosTitleError
+                        || !!iosMessageError
+                        || !!androidExternalLinkError
+                        || !!iosExternalLinkError
+                        || !!androidDeepLinkError
+                        || !!iosDeepLinkError
+                        || Object.values(carouselLinkErrors).some((error) => error !== null && error !== "")
+                        || !isCarouselDataValid()
+                      }
+                    >
+                      {formatMessage(messages.updateTemplate)}
+                    </CapButton>
+                  </CapColumn>
+                </CapRow>
+              )}
             </CapColumn>
           </CapRow>
         </CapColumn>