@capillarytech/creatives-library 8.0.129 → 8.0.131

package/v2Components/CapMpushCTA/index.js

@@ -20,6 +20,7 @@ import {
     isUrl,
     isValidText,
 } from "../../v2Containers/Line/Container/Wrapper/utils";
+import { isDeepLink } from "../../v2Containers/MobilePushNew/utils";
 import {
     BTN_MAX_LENGTH,
     DEEP_LINK,
@@ -28,6 +29,7 @@ import {
     URL_MAX_LENGTH,
 } from "./constants";
 import { PRIMARY } from "../../v2Containers/MobilePushNew/constants";
+import { URL } from "../../v2Containers/Whatsapp/constants";
 
 export const CapMpushCTA = (props) => {
     const {
@@ -87,7 +89,7 @@ export const CapMpushCTA = (props) => {
             [type]: value,
         };
         
-        if (type === 'url') {
+        if (type === URL.toLowerCase()) {
             setLocalUrlValues(prev => ({
                 ...prev,
                 [index]: value
@@ -146,7 +148,7 @@ export const CapMpushCTA = (props) => {
         const index = parseInt(dataset.index, 10);
         
         // If user is typing a new URL, remove from cleared set
-        if (value && value.trim() !== '') {
+        if (value && value?.trim() !== '') {
             clearedUrlsRef.current.delete(index);
         }
         
@@ -168,7 +170,7 @@ export const CapMpushCTA = (props) => {
     const onDeepLinkSelect = (value, index) => {
         setCtaDeepLinkValue(value);
         let errorMessage = false;
-        if (!isUrl(value)) {
+        if (!isDeepLink(value)) {
             errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
         }
         setUrlError(errorMessage);
@@ -179,7 +181,7 @@ export const CapMpushCTA = (props) => {
         const { value, dataset } = target;
         const index = parseInt(dataset.index, 10);
         // Parse comma-separated values into array
-        const keysArray = value.split(',').map((key) => key.trim()).filter((key) => key.length > 0);
+        const keysArray = value?.split(',')?.map((key) => key?.trim())?.filter((key) => key?.length > 0);
         setCtaDeepLinkKeysValue(keysArray);
         setDeepLinkKeysError(keysArray.length === 0);
         updateHelper('deepLinkKeys', keysArray, index);
@@ -191,7 +193,7 @@ export const CapMpushCTA = (props) => {
             return true;
         } else if (urlType === DEEP_LINK && (ctaDeepLinkValue === "" || urlError)) {
             return true;
-        } else if (urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (!Array.isArray(ctaDeepLinkKeysValue) || ctaDeepLinkKeysValue.length === 0 || deepLinkKeysError)) {
+        } else if (urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray?.length > 0 && (!Array.isArray(ctaDeepLinkKeysValue) || ctaDeepLinkKeysValue?.length === 0 || deepLinkKeysError)) {
             return true;
         } else if (urlType === EXTERNAL_URL && (url === "" || urlError)) {
             return true;
@@ -206,14 +208,14 @@ export const CapMpushCTA = (props) => {
         const renderArray = [];
         const filteredCtaData = ctaData?.filter((cta) => {
             if (buttonType === PRIMARY) {
-                return cta.index === 0;
+                return cta?.index === 0;
             } else {
-                return cta.index === 1;
+                return cta?.index === 1;
             }
         });
         
         filteredCtaData?.forEach((cta) => {
-            const { index, text, url, urlType, isSaved } = cta || {};
+            const { index, text, urlType, isSaved } = cta || {};
             if (isSaved) {
                 renderArray.push(
                     <CapRow
@@ -240,10 +242,10 @@ export const CapMpushCTA = (props) => {
                             {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
                         </CapColumn>
                         <CapColumn>
-                            {urlType === DEEP_LINK && deepLinkKeysFromSelectionArray.length > 0 && (ctaData[index]?.deepLinkKeys || selectedDeepLink?.keys) ? (
+                            {urlType === DEEP_LINK && deepLinkKeysFromSelectionArray?.length > 0 && (ctaData[index]?.deepLinkKeys || selectedDeepLink?.keys) ? (
                                 <CapLabel type="label2" className="inapp-saved-cta-deep-link-keys">
                                     {(() => {
-                                        const keys = selectedDeepLink?.keys || ctaData[index].deepLinkKeys;
+                                        const keys = selectedDeepLink?.keys || ctaData[index]?.deepLinkKeys;
                                         if (Array.isArray(keys)) {
                                             return keys.join(', ');
                                         }
@@ -347,14 +349,13 @@ export const CapMpushCTA = (props) => {
                                             if (deepLinkKeysArray.length > 0) {
                                                 return deepLinkKeysArray.join(', ');
                                             }
-                                            return "No value set";
                                         })()}
                                     </CapLabel>
                                                                     <CapInput
                                         id="inapp-deep-link-keys"
                                         className="inapp-deep-link-keys"
                                         onChange={onDeepLinkKeysChange}
-                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') || 'deep link keys' })}
+                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ')})}
                                         value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
                                         size="large"
                                         data-index={index}

package/v2Components/CapTagList/index.js

@@ -39,7 +39,7 @@ import {
   TAG_TRANSLATION_DOC,
   STRING,
 } from "../../containers/TagList/constants";
-import { EMAIL, JP_LOCALE_HIDE_FEATURE } from '../../v2Containers/App/constants';
+import { EMAIL, JP_LOCALE_HIDE_FEATURE, LOYALTY } from '../../v2Containers/App/constants';
 import { hidingDateTagsForJpLocale } from '../../v2Containers/TagList/utils';
 
 
@@ -168,7 +168,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         isLoadingContextChange: true,
         selectedContext: data,
         // Keep loyalty-specific loading for backward compatibility
-        isLoadingLoyaltyTags: data === 'Loyalty',
+        isLoadingLoyaltyTags: data === LOYALTY,
       });
 
       // Call the parent's context change handler
@@ -390,7 +390,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     } = this.state;
 
     // Show loading spinner if general loading OR if specifically loading loyalty tags OR if context change is in progress
-    const shouldShowLoading = this.props.loading || (selectedContext === 'Loyalty' && isLoadingLoyaltyTags) || isLoadingContextChange;
+    const shouldShowLoading = this.props.loading || (selectedContext === LOYALTY && isLoadingLoyaltyTags) || isLoadingContextChange;
 
     const options = [
       {
@@ -405,7 +405,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
       },
     ];
     const contentSection = (
-      <div>
+      <CapRow>
         <CapSpin tip={formatMessage(messages.gettingTags)} spinning={shouldShowLoading}>
           <Search
             style={{ marginBottom: 8, width: '250px'}}
@@ -455,7 +455,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           )}
 
         </CapSpin>
-      </div>
+      </CapRow>
     );
     return (
       <>

package/v2Components/CapVideoUpload/index.js

@@ -46,6 +46,8 @@ function CapVideoUpload(props) {
     formClassName = 'video-form',
     showReUploadButton = true,
     mediaType = VIDEO.toLowerCase(),
+    assetUploading = false, // Add assetUploading prop
+    videoSrc: propVideoSrc = '', // Add videoSrc prop for fallback
   } = props;
   const [isVideoError, updateVideoErrorMessage] = useState(false);
   const [isVideo, updateVideoStatus] = useState(false);
@@ -56,7 +58,7 @@ function CapVideoUpload(props) {
 
   const videoEl = useRef(null);
   const {
-    videoSrc = '',
+    videoSrc: uploadedVideoSrc = '',
     videoName,
     previewUrl,
     videoHeight,
@@ -65,6 +67,10 @@ function CapVideoUpload(props) {
     fileHandle = '',
   } = uploadedAssetList;
 
+  // Use uploadedAssetList.videoSrc first, then fall back to prop videoSrc
+  // Only use propVideoSrc if uploadedVideoSrc is empty to avoid conflicts with upload logic
+  const videoSrc = uploadedVideoSrc || (uploadedVideoSrc === '' ? propVideoSrc : '');
+
   const [isTemplateDrawerRequired, updateTemplateDrawerRequirement] = useState(false);
 
   const uploadVideo = useCallback((e, { files }) => {
@@ -123,11 +129,9 @@ function CapVideoUpload(props) {
   }, [videoData, index, videoSrc, onVideoUploadUpdateAssestList]);
 
   useEffect(() => {
-    if (videoData[`assetUploadingVideo_${index}`] && videoData.assetUploading !== false) {
-      const isSpinner = get(videoData, `assetUploadingVideo_${index}`, false);
-      setSpinning(isSpinner);
-    }
-  }, [videoData[`assetUploadingVideo_${index}`]]);
+    // Use the assetUploading prop directly for loading state
+    setSpinning(assetUploading);
+  }, [assetUploading]);
 
 
   useEffect(() => {
@@ -205,9 +209,13 @@ function CapVideoUpload(props) {
         fileHandle: "",
       }
     );
+    
+    // Reset file input value to allow re-upload of same file
     setTimeout(() => {
       const fileInput = document.getElementById("videoFileName");
       if (fileInput) {
+        // eslint-disable-next-line no-param-reassign
+        fileInput.value = '';
         fileInput.click();
       }
     }, 100);
@@ -340,7 +348,7 @@ function CapVideoUpload(props) {
       <div style={style} className="cap-custom-video-upload">
         <form encType="multipart/form-data" id="form" className={formClassName}>
           <input
-            key="videoFile"
+            key={`videoFile-${index}-${isVideo ? 'uploaded' : 'empty'}`}
             style={{ display: 'none' }}
             id="videoFileName"
             type="file"
@@ -423,6 +431,8 @@ CapVideoUpload.propTypes = {
   formClassName: PropTypes.string,
   showReUploadButton: PropTypes.bool,
   mediaType: PropTypes.string,
+  assetUploading: PropTypes.bool,
+  videoSrc: PropTypes.string,
 };
 
 export default injectIntl(CapVideoUpload);

package/v2Components/MobilePushPreviewV2/index.js

@@ -8,14 +8,14 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 import { CapTab, CapIcon } from '@capillarytech/cap-ui-library';
-import { get, map, isEmpty} from 'lodash';
+import { get, isEmpty} from 'lodash';
 import TemplatePreview from '../TemplatePreview';
 import '../PreviewSideBar/_previewsidebar.scss';
 import { MOBILE_PUSH } from '../../v2Containers/CreativesContainer/constants';
 import { INAPP } from '../../v2Containers/App/constants';
 import { ANDROID, IOS } from '../../v2Containers/InApp/constants';
 import { getCtaObject } from '../../v2Containers/InApp/utils';
-import { VIDEO } from '../../v2Containers/MobilePushNew/constants';
+import { CAROUSEL, VIDEO } from '../../v2Containers/MobilePushNew/constants';
 
 class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
@@ -66,23 +66,28 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
       const iosContent = get(templateData, 'versions.base.IOS') || get(templateData, 'iosContent');
 
       const data = device?.toLowerCase() === "android" ? androidContent : iosContent;
-      const { title = '', message = '', expandableDetails: { ctas = [], image = '', media = [], carouselData = [] } = {}} = data || {};
+      const {
+        title = '', message = '', type = '', expandableDetails: {
+          ctas = [], image = '', media = [], carouselData = [],
+        } = {},
+      } = data || {};
 
       // Handle video/GIF content from expandableDetails.media array (new format)
       let bodyVideo = {};
       let bodyGif = '';
       let bodyImage = image;
 
-      if (media && Array.isArray(media) && media.length > 0) {
+      if (media?.length > 0) {
         const mediaItem = media[0];
-        if (mediaItem.type === VIDEO) {
+        const { type, url } = mediaItem;
+        if (type === VIDEO) {
           // Distinguish between actual video and GIF based on URL extension
-          if (mediaItem.url && mediaItem.url.toLowerCase().includes('.gif')) {
-            bodyGif = mediaItem.url;
+          if (url && url?.toLowerCase()?.includes('.gif')) {
+            bodyGif = url;
           } else {
             bodyVideo = {
-              videoSrc: mediaItem.url,
-              videoPreview: mediaItem.url,
+              videoSrc: url,
+              videoPreview: url,
             };
           }
           // Clear bodyImage when we have video/GIF content
@@ -100,12 +105,20 @@ class MobilePushPreviewV2 extends React.Component { // eslint-disable-line react
         appName: templateData?.appName,
         carouselData,
       };
-      if (ctas && ctas?.length) {
-        if (device === "android" ) {
-          content.actions = map(ctas, (cta) => ({label: cta?.actionText}));
-        } else {
-          content.actions = [{label: ctas[0]?.actionLabel}, {label: ctas[0]?.actionLabel2}];
-        }
+
+      // Map CTAs consistently for both Android and iOS
+      if (ctas.length > 0 && type !== CAROUSEL) {
+        content.actions = ctas.map((cta) => {
+          const {
+            actionText, type: Type, actionLink, deepLinkKeys,
+          } = cta || {};
+          return {
+            label: actionText || '',
+            type: Type || '',
+            url: actionLink || '',
+            deepLinkKeys: deepLinkKeys || [],
+          };
+        });
       }
     }
     return content;

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -601,60 +601,60 @@
         img{
           max-width: 100%;
           max-height: 90px;
-          margin: auto;
+          margin-left: 1.571rem;
           display: block;
         }
       }
     }
     .mobile-push-carousel-card {
         position: relative;
-        min-width: 258px;
-        margin-right: 12px;
-        background: #fff;
-        color: #091e42;
-        border-radius: 8px;
+        min-width: 16.125rem; // 258px
+        margin-right: 0.75rem; // 12px
+        background: $CAP_WHITE;
+        color: $CAP_G01; // #091e42
+        border-radius: 0.5rem; // 8px
         display: flex;
         flex-direction: column;
         align-items: flex-start;
         padding: 0;
-        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.08);
+        box-shadow: 0 0 0.625rem 0 rgba(0,0,0,0.08); // 10px
     
         .carousel-image {
           width: 100%;
-          height: 180px;
+          height: 11.25rem; // 180px
           object-fit: contain;
-          border-radius: 8px 8px 0 0;
+          border-radius: 0.5rem 0.5rem 0 0; // 8px
         }
     
         .carousel-video-preview {
           width: 100%;
-          height: 180px;
+          height: 11.25rem; // 180px
           object-fit: contain;
-          border-radius: 8px 8px 0 0;
+          border-radius: 0.5rem 0.5rem 0 0; // 8px
           opacity: 0.7;
         }
     
         .carousel-content {
-          padding: 10px 12px;
+          padding: 0.625rem 0.75rem; // 10px 12px
           width: 100%;
     
           .carousel-title {
-            font-weight: 600;
-            font-size: 14px;
-            margin-bottom: 4px;
+            font-weight: $FONT_WEIGHT_MEDIUM;
+            font-size: $FONT_SIZE_M; // 14px
+            margin-bottom: 0.25rem; // 4px
           }
     
           .carousel-message {
-            font-size: 13px;
-            color: #555;
+            font-size: $FONT_SIZE_S; // 13px is not in variables, using 12px
+            color: $CAP_G04; // #5e6c84 is closest to #555
           }
     
           .carousel-link {
-            margin-top: 8px;
+            margin-top: 0.5rem; // 8px
     
             a {
-              color: #2466ea;
-              font-size: 12px;
+              color: $CAP_SECONDARY_base; // #2466ea
+              font-size: $FONT_SIZE_S; // 12px
               text-decoration: underline;
             }
           }
@@ -671,8 +671,8 @@
       font-weight: 600;
       padding: $CAP_SPACE_04 $CAP_SPACE_08 $CAP_SPACE_04 $CAP_SPACE_08;
       display: flex;
-      align-items: center;
-      justify-content: space-between;
+      // align-items: center;
+      // justify-content: space-between;
       .app-icon{
         width: $CAP_SPACE_12;
         height: $CAP_SPACE_12;
@@ -718,18 +718,21 @@
     .actions{
       background-color: #ffffff;
       height: auto;
-      padding: $CAP_SPACE_08;
-      text-align: center;
+      padding: 0.571rem;
+      padding-left: 1.571rem;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+      flex-direction: row;
       gap: $CAP_SPACE_08;
       .action{
         font-size: $FONT_SIZE_S;
         font-weight: 600;
         color: #1970DA;
         height: 1.25rem;
+        text-transform: uppercase;
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
       }
     }
   }
@@ -806,8 +809,8 @@
   }
   // Mobile Push Carousel Styles
   .mobile-push-carousel-container {
-    background-color: #fff;
-    padding-left: 22px;
+    background-color: $CAP_WHITE;
+    padding-left: 1.375rem; // 22px
   }
 }
 
@@ -1078,4 +1081,103 @@
 }
 .line-image-preview{
   max-width: 8.57rem;;
+}
+
+.MOBILEPUSH {
+  .ant-card-body {
+    padding: 0;
+    background-color: $CAP_WHITE;
+    border-top: 1px solid $CAP_COLOR_16;
+    .ant-card-meta {
+      background-color: $CAP_G09;
+      .ant-card-meta-description {
+        .mobilepush-container {
+          background-color: $CAP_WHITE;
+          padding: $CAP_SPACE_12;
+          .app-header {
+            color: $CAP_G04; // #5D5D5D is closest to CAP_G04
+            font-weight: $FONT_WEIGHT_SEMIBOLD; // 600 maps to SEMIBOLD
+            padding: 0.285rem 0.571rem 0.285rem 0.571rem;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .app-header-left {
+              display: flex;
+              align-items: center;
+              div {
+                word-break: break-word;
+              }
+              .app-icon {
+                width: 0.857rem;
+                height: 0.857rem;
+                border-radius: 50%;
+                background-color: $CAP_G04; // #737070 is closest to CAP_G04
+              }
+            }
+          }
+          .mobilepush-message {
+            padding-left: 1.65rem;
+          }
+          .mobilepush-image {
+            width: 100%;
+            height: 7.5rem; // 120px to rem
+            margin-top: 0.625rem; // 10px to rem
+          }
+          .mobilepush-image-padding {
+            padding-left: 1.65rem;
+          }
+          .scroll-container {
+            overflow-x: auto;
+            display: flex;
+            padding-top: $CAP_SPACE_06;
+            padding-right: $CAP_SPACE_06;
+            white-space: nowrap;
+            scrollbar-width: none; // Hide scrollbar in Firefox
+            &::-webkit-scrollbar {
+              display: none; // Hide scrollbar in Chrome/Safari/Opera
+            }
+            overflow: hidden;
+            height: 100%;
+            width: 100%;
+            margin-left: 1.65rem;
+            .whatsapp-carousel-container {
+              padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+              border-radius: $CAP_SPACE_06;
+              background-color: $CAP_WHITE;
+              width: 80%;
+              flex-shrink: 0;
+              white-space: pre-wrap;
+              word-break: break-word;
+              overflow: auto;
+              text-align: left;
+              margin: 0;
+              .whatsapp-carousel-card {
+                margin: $CAP_SPACE_02 $CAP_SPACE_02 $CAP_SPACE_01 $CAP_SPACE_02;
+                .whatsapp-carousel-body {
+                  margin-bottom: $CAP_SPACE_08;
+                }
+              }
+            }
+          }
+          .actions {
+            background-color: $CAP_WHITE;
+            height: auto;
+            padding: $CAP_SPACE_08;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: $CAP_SPACE_08;
+            .action {
+              font-size: $FONT_SIZE_S;
+              font-weight: $FONT_WEIGHT_SEMIBOLD; // 600 maps to SEMIBOLD
+              color: $CAP_COLOR_03; // #1970DA maps to CAP_COLOR_03 (primary brand color)
+              height: 1.25rem;
+            }
+          }
+        }
+      }
+    }
+  }
 }