@capillarytech/creatives-library 8.0.136-beta.4 → 8.0.136

package/package.json

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

package/utils/createMobilePushPayload.js

@@ -187,6 +187,7 @@ function buildPlatformContent(content, imageSrc, mpushVideoSrcAndPreview, platfo
       url: mpushVideoSrcAndPreview.mpushVideoSrc || (content?.mediaList?.[0]?.url || ''),
       text: content?.mediaList?.[0]?.text || '',
       type: VIDEO,
+      previewImg: mpushVideoSrcAndPreview.mpushVideoPreviewImg,
     }];
     templateType = VIDEO;
   } else if (style === GIF) { // Handle GIF media type

package/utils/transformerUtils.js

@@ -7,9 +7,6 @@ import {
   WHATSAPP,
   PUSH,
   ZALO,
-  RCS,
-  LINE,
-  VIBER,
   EMF,
   VENENO,
   TEXT,
@@ -57,12 +54,6 @@ export const transformChannelPayload = (data, options = {}) => {
       return transformWhatsappPayload(data, options);
     case ZALO:
       return transformZaloPayload(data, options);
-    case RCS:
-      return transformRcsPayload(data, options);
-    case LINE:
-      return transformLinePayload(data, options);
-    case VIBER:
-      return transformViberPayload(data, options);
     default:
       return data; // Return unchanged for unsupported channels
   }
@@ -240,87 +231,8 @@ const transformZaloPayload = (zaloData, options = {}) => {
   return payload;
 };
 
-/**
- * Transforms RCS data to the required payload format
- * @param {Object} rcsData - Current RCS data
- * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
- * @returns {Object} - Transformed RCS payload
- */
-// TODO: RCS is currently not supported by the CCS - BE. We need to make changes in future as per the BE changes.
-const transformRcsPayload = (rcsData, options = {}) => {
-  const { loyaltyMetaData = {} } = options;
-  const { transformedMessageDetails = {} } = loyaltyMetaData;
-  const { rcsDeliverySettings = {} } = transformedMessageDetails;
-
-  // Get base payload structure
-  const payload = createBasePayload(RCS, loyaltyMetaData);
-
-  // Add RCS-specific properties
-  payload.centralCommsPayload.rcsMessageContent = {
-    channel: RCS,
-    messageBody: "",
-    accountId: rcsData?.accountId || "",
-    accountName: rcsData?.accountName || "",
-    ...rcsData,
-    // Ensure templateConfigs is preserved (it might contain complex nested objects)
-    templateConfigs: rcsData?.templateConfigs || {},
-  };
-  payload.centralCommsPayload.rcsDeliverySettings = rcsDeliverySettings || {};
-
-  return payload;
-};
-
-/**
- * Transforms LINE data to the required payload format
- * @param {Object} lineData - Current LINE data
- * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
- * @returns {Object} - Transformed LINE payload
- */
-const transformLinePayload = (lineData, options = {}) => {
-  const { loyaltyMetaData = {} } = options;
-  const { transformedMessageDetails = {} } = loyaltyMetaData;
-  const { lineDeliverySettings = {} } = transformedMessageDetails;
-
-  // Get base payload structure
-  const payload = createBasePayload(LINE, loyaltyMetaData);
-  payload.centralCommsPayload.lineMessageContent = {
-    channel: LINE,
-    accountId: lineData?.accountId || 0,
-    accountDetails: lineData?.accountDetails || "",
-    messageBody: lineData?.messageBody || "",
-    ...lineData,
-  };
-  payload.centralCommsPayload.lineDeliverySettings = lineDeliverySettings || {};
-  return payload;
-};
-
-/**
- * Transforms VIBER data to the required payload format
- * @param {Object} viberData - Current VIBER data
- * @param {Object} options - Additional options (ouId, sourceEntityId, etc.)
- * @returns {Object} - Transformed VIBER payload
- */
-const transformViberPayload = (viberData, options = {}) => {
-  const { loyaltyMetaData = {} } = options;
-  const { transformedMessageDetails = {} } = loyaltyMetaData;
-  const { viberDeliverySettings = {} } = transformedMessageDetails;
-  // Get base payload structure
-  const payload = createBasePayload(VIBER, loyaltyMetaData);
-  payload.centralCommsPayload.viberMessageContent = {
-    channel: VIBER,
-    accountId: viberData?.accountId || 0,
-    accountDetails: viberData?.accountDetails || "",
-    messageBody: viberData?.messageBody || "",
-    ...viberData,
-  };
-  payload.centralCommsPayload.viberDeliverySettings = viberDeliverySettings || {};
-  return payload;
-};
-
 // Checks if the template has changed
 export const getTemplateDiffState = (channel, oldData, newData) => {
-  // Original switch implementation (commented out)
-  /*
   switch (channel.toUpperCase()) {
     case SMS:
       return checkSmsDiff(oldData, newData);
@@ -333,34 +245,9 @@ export const getTemplateDiffState = (channel, oldData, newData) => {
       return checkWhatsappDiff(oldData, newData);
     case ZALO:
       return checkZaloDiff(oldData, newData);
-    case LINE:
-      return checkLineDiff(oldData, newData);
-    case VIBER:
-      return checkViberDiff(oldData, newData);
-    // TODO: RCS is currently not supported by the CCS - BE. We need to make changes in future as per the BE changes.
-    // case RCS:
-    //   return checkRcsDiff(oldData, newData);
     default:
       return false;
   }
-  */
-
-  // Refactored implementation using object mapping
-  const diffHandlers = {
-    [SMS]: checkSmsDiff,
-    [EMAIL]: checkEmailDiff,
-    [MOBILE_PUSH]: checkPushDiff,
-    [PUSH]: checkPushDiff,
-    [WHATSAPP]: checkWhatsappDiff,
-    [ZALO]: checkZaloDiff,
-    [LINE]: checkLineDiff,
-    [VIBER]: checkViberDiff,
-    // TODO: RCS is currently not supported by the CCS - BE. We need to make changes in future as per the BE changes.
-    // [RCS]: checkRcsDiff,
-  };
-
-  const handler = diffHandlers[channel?.toUpperCase()];
-  return handler ? handler(oldData, newData) : false;
 };
 /**
  * Checks differences between old and new SMS data
@@ -531,97 +418,3 @@ const checkZaloDiff = (oldData, newData) => {
   // Use deep comparison for template configs
   return !isEqual(oldTemplateConfigs, newTemplateConfigs);
 };
-
-/**
- * Checks differences between old and new RCS data
- * @param {Object} oldData - Previous RCS template data
- * @param {Object} newData - Updated RCS template data
- * @returns {Boolean} - Whether the template has changed
- */
-// TODO: RCS is currently not supported by the CCS - BE. We need to make changes in future as per the BE changes.
-const checkRcsDiff = (oldData, newData) => {
-  // Extract old RCS content
-  const oldTemplateConfigs =
-    oldData?.transformedMessageDetails?.rcsMessageContent?.templateConfigs ||
-    {};
-  const oldAccountId =
-    oldData?.transformedMessageDetails?.rcsMessageContent?.accountId || "";
-  const oldAccountName =
-    oldData?.transformedMessageDetails?.rcsMessageContent?.accountName || "";
-
-  // Extract new RCS content
-  const newTemplateConfigs = newData?.templateConfigs || {};
-  const newAccountId = newData?.accountId || "";
-  const newAccountName = newData?.accountName || "";
-
-  // Compare simple properties for quick rejection
-  if (oldAccountId !== newAccountId) return true;
-  if (oldAccountName !== newAccountName) return true;
-
-  // If template configs have different structures, they've changed
-  if (
-    Object.keys(newTemplateConfigs).length !==
-    Object.keys(oldTemplateConfigs).length
-  ) {
-    return true;
-  }
-
-  // Use deep comparison for template configs
-  return !isEqual(oldTemplateConfigs, newTemplateConfigs);
-};
-
-/**
- * Checks differences between old and new LINE data
- * @param {Object} oldData - Previous LINE template data
- * @param {Object} newData - Updated LINE template data
- * @returns {Boolean} - Whether the template has changed
- */
-const checkLineDiff = (oldData, newData) => {
-  // Extract old LINE content
-  const oldMessageBody =
-    oldData?.transformedMessageDetails?.lineMessageContent?.messageBody || "";
-  const oldAccountId =
-    oldData?.transformedMessageDetails?.lineMessageContent?.accountId || "";
-  const oldAccountDetails =
-    oldData?.transformedMessageDetails?.lineMessageContent?.accountDetails || "";
-
-  // Extract new LINE content
-  const newMessageBody = newData?.messageBody || "";
-  const newAccountId = newData?.accountId || "";
-  const newAccountDetails = newData?.accountDetails || "";
-
-  // Compare simple properties for quick rejection
-  if (oldMessageBody !== newMessageBody) return true;
-  if (oldAccountId !== newAccountId) return true;
-  if (oldAccountDetails !== newAccountDetails) return true;
-
-  return false;
-};
-
-/**
- * Checks differences between old and new VIBER data
- * @param {Object} oldData - Previous VIBER template data
- * @param {Object} newData - Updated VIBER template data
- * @returns {Boolean} - Whether the template has changed
- */
-const checkViberDiff = (oldData, newData) => {
-  // Extract old VIBER content
-  const oldMessageBody =
-    oldData?.transformedMessageDetails?.viberMessageContent?.messageBody || "";
-  const oldAccountId =
-    oldData?.transformedMessageDetails?.viberMessageContent?.accountId || "";
-  const oldAccountDetails =
-    oldData?.transformedMessageDetails?.viberMessageContent?.accountDetails || "";
-
-  // Extract new VIBER content
-  const newMessageBody = newData?.messageBody || "";
-  const newAccountId = newData?.accountId || "";
-  const newAccountDetails = newData?.accountDetails || "";
-
-  // Compare simple properties for quick rejection
-  if (oldMessageBody !== newMessageBody) return true;
-  if (oldAccountId !== newAccountId) return true;
-  if (oldAccountDetails !== newAccountDetails) return true;
-
-  return false;
-};

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -625,6 +625,16 @@
           object-fit: contain;
           border-radius: 0.5rem 0.5rem 0 0; // 8px
         }
+
+        // // Override FormBuilder CSS for carousel images
+        // .image-container {
+        //   img {
+        //     object-fit: cover !important;
+        //     max-width: 18.75rem;
+        //     max-height: 9.5rem !important;
+        //     display: block !important;
+        //   }
+        // }
     
         .carousel-video-preview {
           width: 100%;
@@ -1085,7 +1095,6 @@
 
 .MOBILEPUSH {
   .ant-card-body {
-    padding: 0;
     background-color: $CAP_WHITE;
     border-top: 1px solid $CAP_COLOR_16;
     .ant-card-meta {

package/v2Containers/Line/Container/Image/index.js

@@ -330,10 +330,10 @@ export const LineImage = ({
                     className="dragger-button"
                     type="flat"
                     style={{
-                        top: isFullMode ? 60 : -8,
+                        top: isFullMode ? 105 : -8,
                         position: 'absolute',
-                        right: 0, color:
-                        FONT_COLOR_05
+                        right: 20,
+                        color: FONT_COLOR_05
                     }}
                     onClick={onReUpload}
                 >

package/v2Containers/Line/Container/Text/index.js

@@ -59,7 +59,7 @@ export const LineText = ({
     const [translationLang, updateTranslationLang] = useState('en');
 
     useEffect(() => {
-        const { messageTitle = '', messageContent = '', type, isInit } = content || {};
+        const { messageTitle = '', messageContent = '', type, isInit } = content;
         if (type === 'text') {
             if (messageContent) {
                 updateCreateNew(true);
@@ -104,11 +104,11 @@ export const LineText = ({
           layout: 'LINE',
           type: 'TAG',
           context:
-            location?.query?.type === 'embedded'
+            location.query.type === 'embedded'
               ? 'outbound'
               : 'default',
           embedded:
-            location?.query?.type === 'embedded'
+            location.query.type === 'embedded'
               ? location.query.type
               : 'full',
         };
@@ -125,7 +125,7 @@ export const LineText = ({
         context:
             (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
         embedded:
-            location?.query?.type === 'embedded'
+            location.query.type === 'embedded'
             ? location.query.type
             : 'full',
         };
@@ -266,7 +266,7 @@ export const LineText = ({
                 />
                 <TagList
                     key={`${id}_tags`}
-                    moduleFilterEnabled={location && location?.query && location?.query?.type !== 'embedded'}
+                    moduleFilterEnabled={location && location.query && location.query.type !== 'embedded'}
                     label={formatMessage(messages.addLabels)}
                     onTagSelect={onTagSelect}
                     onContextChange={handleOnTagsContextChange}

package/v2Containers/Line/Container/_lineCreate.scss

@@ -61,6 +61,8 @@
     max-height: 100%;
     height: 152px !important;
     width: auto !important;
+    // max-width: 300px;
+    // max-height: 150px;
   }
 }
 

package/v2Containers/MobilePushNew/components/MediaUploaders.js

@@ -569,7 +569,17 @@ const MediaUploaders = ({
                       {formatMessage(messages.deepLink)}
                     </CapHeading>
                     <CapSelect.CapCustomSelect
-                      options={deepLink || []}
+                      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)) {
+                          options.push({
+                            value: button.deepLinkValue,
+                            label: button.deepLinkValue,
+                          });
+                        }
+                        return options;
+                      })()}
                       value={button.deepLinkValue}
                       onChange={(value) => handleCarouselDeepLinkChange(cardIndex, value)}
                       key={`mobile-push-deep-link-type-${activeTab}-${cardIndex}`}
@@ -606,7 +616,12 @@ const MediaUploaders = ({
               </CapRow>
             )}
             {button?.linkType === DEEP_LINK && button?.deepLinkValue && button?.actionOnClick && (() => {
-              const selectedDeepLink = deepLink?.find((link) => link?.value === button?.deepLinkValue);
+              // 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 deepLinkKeysFromSelection = selectedDeepLink?.keys;
               let deepLinkKeysFromSelectionArray = [];
               if (Array.isArray(deepLinkKeysFromSelection)) {
@@ -623,7 +638,12 @@ const MediaUploaders = ({
                   </CapHeading>
                   <CapLabel type="label2" className="deep-link-keys-value">
                     {(() => {
-                      const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+                      // 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 deepLinkKeysFromSelection = selectedDeepLink?.keys;
                       let deepLinkKeysArray = [];
                       if (Array.isArray(button?.deepLinkKeys)) {
@@ -652,7 +672,12 @@ const MediaUploaders = ({
                     onChange={(e) => handleCarouselDeepLinkKeysChange(cardIndex, e.target.value)}
                     placeholder={formatMessage(messages.deepLinkKeysPlaceholder, {
                       key: (() => {
-                        const selectedDeepLink = deepLink?.find((link) => link?.value === button.deepLinkValue);
+                        // 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 deepLinkKeysFromSelection = selectedDeepLink?.keys;
                         let deepLinkKeysFromSelectionArray = [];
                         if (Array.isArray(deepLinkKeysFromSelection)) {

package/v2Containers/MobilePushNew/components/PlatformContentFields.js

@@ -59,7 +59,15 @@ const PlatformContentFields = ({
   } = linkProps;
 
   // Get the selected deep link object to extract keys
-  const selectedDeepLink = deepLink?.find((link) => link?.value === deepLinkValue);
+  // Try exact match first, then try match without query parameters
+  let selectedDeepLink = deepLink?.find((link) => link?.value === deepLinkValue);
+
+  // If no exact match, try to find match without query parameters
+  if (!selectedDeepLink && deepLinkValue && deepLinkValue.includes('?')) {
+    const baseDeepLinkValue = deepLinkValue.split('?')[0];
+    selectedDeepLink = deepLink?.find((link) => link?.value === baseDeepLinkValue);
+  }
+
   const deepLinkKeysFromSelection = selectedDeepLink?.keys;
 
   // Handle deep link keys value - could be array or string
@@ -252,7 +260,17 @@ const PlatformContentFields = ({
                         {formatMessage(messages.deepLink)}
                       </CapHeading>
                       <CapSelect.CapCustomSelect
-                        options={deepLink || []}
+                        options={(() => {
+                          const options = [...(deepLink || [])];
+                          // If the current value is not in the options, add it
+                          if (deepLinkValue && !options.find((opt) => opt.value === deepLinkValue)) {
+                            options.push({
+                              value: deepLinkValue,
+                              label: deepLinkValue,
+                            });
+                          }
+                          return options;
+                        })()}
                         value={deepLinkValue}
                         onChange={onDeepLinkChange}
                         key="mobile-push-deep-link-type"
@@ -285,7 +303,7 @@ const PlatformContentFields = ({
                   )}
                 </CapRow>
               )}
-              {content?.actionOnClick && content?.linkType === DEEP_LINK && deepLinkValue && deepLinkKeysFromSelectionArray?.length > 0 && (
+              {content?.actionOnClick && content?.linkType === DEEP_LINK && deepLinkValue && (deepLinkKeysFromSelectionArray?.length > 0 || deepLinkKeysArray?.length > 0) && (
                 <CapRow style={{ marginTop: "10px", left: "6%", width: '115%'}}>
                   <CapColumn span={14}>
                     <CapHeading type="h4" className="deep-link-keys-heading">

package/v2Containers/MobilePushNew/constants.js

@@ -44,7 +44,6 @@ export const MEDIA_TYPES_OPTIONS = [
   { label: "NONE", value: "NONE" },
   { label: "IMAGE", value: "IMAGE" },
   { label: "VIDEO", value: "VIDEO" },
-  { label: "GIF", value: "GIF" },
   { label: "CAROUSEL", value: "CAROUSEL" },
 ];