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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.124",
+  "version": "8.0.125-alpha.0",
   "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);
@@ -705,7 +709,7 @@ const MobilePushNew = ({
           iosImageSrc = image || iosImage;
         } else if (style === BIG_TEXT) {
           iosMediaType = NONE;
-        } else if (style === 'MANUAL_CAROUSEL') {
+        } else if (style === MANUAL_CAROUSEL) {
           iosMediaType = CAROUSEL;
         }
 
@@ -880,7 +884,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 +1147,6 @@ const MobilePushNew = ({
     handleMessageChange,
     handleTagSelect,
     handleMediaTypeChange,
-    handleButtonChange,
     handleActionOnClickChange,
     handleLinkTypeChange,
   } = usePlatformSync({
@@ -1331,8 +1334,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) {
@@ -1442,8 +1445,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 +1475,7 @@ const MobilePushNew = ({
         setCarouselActiveTabIndex,
         carouselLinkErrors,
         updateCarouselLinkError,
+        linkProps: { deepLink },
       };
 
       const ctaButtonProps = {
@@ -1699,33 +1703,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 +1754,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 +1781,7 @@ const MobilePushNew = ({
                 }}
               />
 
-              {isFullMode && !isEditMode && (
+              {!isEditMode && (
                 <CapRow className="save-section">
                   <CapColumn span={24}>
                     <CapButton