@capillarytech/creatives-library 8.0.294 → 8.0.296

package/package.json

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

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js

@@ -75,7 +75,7 @@ const ModifyDeliverySettings = (props) => {
       const next = cloneDeep(prev);
       next[DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER] = sourceAccountId;
       const domain = (senderDetailsOptions || []).find(
-        (d) => d.sourceAccountIdentifier === sourceAccountId,
+        (senderDetails) => senderDetails.sourceAccountIdentifier === sourceAccountId,
       );
       const first = domain?.gsmSenders?.[0];
       if (first?.value != null) {
@@ -193,7 +193,7 @@ const ModifyDeliverySettings = (props) => {
       })));
     }
     const domainForAccount = (senderDetailsOptions || []).find(
-      (senderDetails) => senderDetails.sourceAccountIdentifier === selectedAccId,
+      (senderDetails) => senderDetails?.sourceAccountIdentifier === selectedAccId,
     );
     return (domainForAccount?.gsmSenders || []).map((gsmSender) => ({
       label: gsmSender.value,
@@ -379,7 +379,7 @@ const ModifyDeliverySettings = (props) => {
   }
 
   return (
-    <div className="modify-delivery-settings">
+    <CapRow className="modify-delivery-settings">
       {getChannelFields().map((field, idx) => renderSelectRow({
         ...field,
         rowKey: field.titleMessage?.id || `${ROW_KEY_PREFIX}${idx}`,
@@ -390,7 +390,7 @@ const ModifyDeliverySettings = (props) => {
           <FormattedMessage {...messages.done} />
         </CapButton>
       </CapRow>
-    </div>
+    </CapRow>
   );
 };
 

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.scss

@@ -5,6 +5,7 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .modify-delivery-settings {
+  height: 100%;
   &__field-row {
     margin-bottom: $CAP_SPACE_24;
   }
@@ -17,7 +18,7 @@
     width: 22.85rem;
 
     &--disabled {
-      background-color: #ebecf0;
+      background-color: $CAP_G08;
       pointer-events: none;
     }
   }

package/v2Components/CommonTestAndPreview/DeliverySettings/index.js

@@ -163,7 +163,7 @@ const DeliverySettings = (props) => {
   const summaryObject = getSummaryObject();
 
   return (
-    <div className="delivery-settings">
+    <CapRow className="delivery-settings">
       <CapRow className="delivery-settings__heading-row">
         <CapHeading type={HEADING_TYPE_H10}>
           <FormattedMessage {...messages.deliverySettings} />
@@ -218,7 +218,7 @@ const DeliverySettings = (props) => {
           )}
         />
       )}
-    </div>
+    </CapRow>
   );
 };
 

package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js

@@ -7,13 +7,13 @@
  * No cross-repo imports; logic aligned with campaigns domain structure.
  */
 
-import { get } from 'lodash';
+import get from 'lodash/get';
 import { CHANNELS } from '../../constants';
 
 const getSenderOptions = (contactInfo, key) =>
   (contactInfo || [])
-    .filter((c) => c.type === key && c.valid)
-    .sort((a) => (a.default ? -1 : 0));
+    .filter((contactInfoItem) => contactInfoItem.type === key && contactInfoItem.valid)
+    .sort((contact) => (contact.default ? -1 : 0));
 
 /**
  * Parse raw API response for one channel into { domains: [...] }

package/v2Components/CommonTestAndPreview/constants.js

@@ -179,6 +179,11 @@ export const UNSUBSCRIBE_TAG_NAME = 'unsubscribe';
 export const IN_APP_CHANNEL_NAME = 'in-app';
 export const MOBILE_PUSH_CHANNEL_NAME = 'mobile push';
 export const CHANNEL = 'channel';
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const DYNAMIC_URL = 'DYNAMIC_URL';
+export const IMAGE = 'IMAGE';
+export const VIDEO = 'VIDEO';
+export const URL = 'URL';
 
 // Initial Payload Template (for reference)
 export const INITIAL_PAYLOAD = {

package/v2Components/CommonTestAndPreview/index.js

@@ -65,6 +65,11 @@ import {
   IN_APP_CHANNEL_NAME,
   MOBILE_PUSH_CHANNEL_NAME,
   CHANNEL,
+  PHONE_NUMBER,
+  DYNAMIC_URL,
+  IMAGE,
+  VIDEO,
+  URL,
 } from './constants';
 
 // Import utilities
@@ -542,6 +547,50 @@ const CommonTestAndPreview = (props) => {
    * Prepare payload for test message sending based on channel
    * Updated to match API structure with ouId, sourceEntityId, module, deliverySettings, etc.
    */
+
+  const getCarouselMappedData = (carouselData = []) => carouselData.map((carousel) => {
+    const {
+      bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+    } = carousel || {};
+    const buttonData = buttons.map((button, index) => {
+      const {
+        type, text, phone_number, urlType, url,
+      } = button || {};
+      const buttonObj = {
+        type,
+        text,
+        index,
+      };
+      if (type === PHONE_NUMBER) {
+        buttonObj.phoneNumber = phone_number;
+      }
+      if (type === URL) {
+        buttonObj.url = url;
+        if (urlType === DYNAMIC_URL) {
+          const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+          buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+        }
+      }
+      return buttonObj;
+    });
+    return {
+      body: bodyText,
+      cardVarMapped,
+      bodyTemplate,
+      media: {
+        ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+          url: imageUrl,
+        }),
+        ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+          url: videoUrl,
+          previewUrl: videoPreviewImg,
+        }),
+      },
+      buttons: buttonData,
+      mediaType: mediaType?.toUpperCase(),
+    };
+  });
+
   const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride) => {
     // Base payload structure common to all channels
     const basePayload = {
@@ -760,7 +809,7 @@ const CommonTestAndPreview = (props) => {
 
         // Add carousel data if mediaType is CAROUSEL
         if (mediaType === MEDIA_TYPE_CAROUSEL && formDataObj?.carouselData) {
-          templateConfigs.cards = formDataObj.carouselData;
+          templateConfigs.cards = getCarouselMappedData(formDataObj.carouselData);
           templateConfigs.mediaType = formDataObj?.carouselMediaType?.toUpperCase() || MEDIA_TYPE_IMAGE;
         }
 

package/v2Components/CommonTestAndPreview/tests/index.test.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import CommonTestAndPreview from '../index';
-import { CHANNELS } from '../constants';
+import { CHANNELS, MEDIA_TYPE_CAROUSEL } from '../constants';
 
 // Mock html-to-text
 jest.mock('html-to-text', () => ({
@@ -524,6 +524,446 @@ describe('CommonTestAndPreview', () => {
     });
   });
 
+  describe('Carousel payload (getCarouselMappedData) - handleSendTestMessage', () => {
+    it('should map empty carouselData to empty cards when mediaType is CAROUSEL', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+        expect(typeof lastSendTestMessageProps.handleSendTestMessage).toBe('function');
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      expect(mockActions.createMessageMetaRequested).toHaveBeenCalled();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.cards).toEqual([]);
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+
+    it('should map carousel with IMAGE media and bodyText to cards with media.url', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'IMAGE',
+          carouselData: [
+            {
+              bodyText: 'Card body',
+              imageUrl: 'https://image.example.com/1.jpg',
+              mediaType: 'image',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(1);
+      expect(cards[0].body).toBe('Card body');
+      expect(cards[0].media).toEqual({ url: 'https://image.example.com/1.jpg' });
+      expect(cards[0].mediaType).toBe('IMAGE');
+      expect(cards[0].buttons).toEqual([]);
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+
+    it('should map carousel with VIDEO media to cards with url and previewUrl', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'VIDEO',
+          carouselData: [
+            {
+              bodyText: 'Video card',
+              videoUrl: 'https://video.example.com/1.mp4',
+              videoPreviewImg: 'https://preview.example.com/1.jpg',
+              mediaType: 'video',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(1);
+      expect(cards[0].body).toBe('Video card');
+      expect(cards[0].media).toEqual({
+        url: 'https://video.example.com/1.mp4',
+        previewUrl: 'https://preview.example.com/1.jpg',
+      });
+      expect(cards[0].mediaType).toBe('VIDEO');
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('VIDEO');
+    });
+
+    it('should map button type PHONE_NUMBER to buttonObj with phoneNumber', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'PHONE_NUMBER', text: 'Call', phone_number: '+1234567890' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons).toHaveLength(1);
+      expect(buttons[0].type).toBe('PHONE_NUMBER');
+      expect(buttons[0].text).toBe('Call');
+      expect(buttons[0].index).toBe(0);
+      expect(buttons[0].phoneNumber).toBe('+1234567890');
+    });
+
+    it('should map button type URL without DYNAMIC_URL to buttonObj with url only', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'STATIC', url: 'https://example.com' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].type).toBe('URL');
+      expect(buttons[0].url).toBe('https://example.com');
+      expect(buttons[0].dynamicUrlPayload).toBeUndefined();
+    });
+
+    it('should set dynamicUrlPayload when button type URL and urlType DYNAMIC_URL with single template', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: 'https://example.com/{{id}}' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].url).toBe('https://example.com/{{id}}');
+      expect(buttons[0].dynamicUrlPayload).toBe('{{id}}');
+    });
+
+    it('should set dynamicUrlPayload to empty when urlType DYNAMIC_URL but multiple or zero matches', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: 'https://example.com/{{a}}{{b}}' },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].dynamicUrlPayload).toBe('');
+    });
+
+    it('should set dynamicUrlPayload to empty when urlType DYNAMIC_URL and url is null/undefined', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [
+                { type: 'URL', text: 'Open', urlType: 'DYNAMIC_URL', url: null },
+              ],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const buttons = payload.whatsappMessageContent.templateConfigs.cards[0].buttons;
+      expect(buttons[0].dynamicUrlPayload).toBe('');
+    });
+
+    it('should pass through cardVarMapped and bodyTemplate on each card', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Body',
+              cardVarMapped: { foo: 'bar' },
+              bodyTemplate: 'Body {{foo}}',
+              mediaType: 'image',
+              imageUrl: 'https://img.url',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const card = payload.whatsappMessageContent.templateConfigs.cards[0];
+      expect(card.cardVarMapped).toEqual({ foo: 'bar' });
+      expect(card.bodyTemplate).toBe('Body {{foo}}');
+    });
+
+    it('should not add media url when mediaType is neither image nor video', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'Card',
+              mediaType: 'DOCUMENT',
+              imageUrl: 'https://img.url',
+              videoUrl: 'https://video.url',
+              buttons: [],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const card = payload.whatsappMessageContent.templateConfigs.cards[0];
+      expect(card.media).toEqual({});
+      expect(card.mediaType).toBe('DOCUMENT');
+    });
+
+    it('should handle multiple carousel cards with mixed button types', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            {
+              bodyText: 'First',
+              mediaType: 'image',
+              imageUrl: 'https://first.jpg',
+              buttons: [{ type: 'PHONE_NUMBER', text: 'Call', phone_number: '+111' }],
+            },
+            {
+              bodyText: 'Second',
+              mediaType: 'video',
+              videoUrl: 'https://second.mp4',
+              videoPreviewImg: 'https://second-prev.jpg',
+              buttons: [{ type: 'URL', text: 'Link', urlType: 'DYNAMIC_URL', url: 'https://x/{{only}}' }],
+            },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      const cards = payload.whatsappMessageContent.templateConfigs.cards;
+      expect(cards).toHaveLength(2);
+      expect(cards[0].body).toBe('First');
+      expect(cards[0].media.url).toBe('https://first.jpg');
+      expect(cards[0].buttons[0].phoneNumber).toBe('+111');
+      expect(cards[1].body).toBe('Second');
+      expect(cards[1].media.url).toBe('https://second.mp4');
+      expect(cards[1].media.previewUrl).toBe('https://second-prev.jpg');
+      expect(cards[1].buttons[0].dynamicUrlPayload).toBe('{{only}}');
+    });
+
+    it('should use carouselMediaType for templateConfigs.mediaType when provided', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselMediaType: 'VIDEO',
+          carouselData: [
+            { bodyText: 'Card', mediaType: 'image', imageUrl: 'https://img.url', buttons: [] },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('VIDEO');
+    });
+
+    it('should default templateConfigs.mediaType to IMAGE when carouselMediaType is missing', async () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WHATSAPP,
+        formData: {
+          templateMsg: 'Message',
+          mediaType: MEDIA_TYPE_CAROUSEL,
+          carouselData: [
+            { bodyText: 'Card', mediaType: 'image', imageUrl: 'https://img.url', buttons: [] },
+          ],
+        },
+      };
+      render(
+        <TestWrapper>
+          <CommonTestAndPreview {...props} />
+        </TestWrapper>
+      );
+      await waitFor(() => {
+        expect(lastSendTestMessageProps).toBeDefined();
+      });
+      lastSendTestMessageProps.handleSendTestMessage();
+      const [payload] = mockActions.createMessageMetaRequested.mock.calls[0];
+      expect(payload.whatsappMessageContent.templateConfigs.mediaType).toBe('IMAGE');
+    });
+  });
+
   describe('Component Rendering', () => {
     it('should render when show is true', async () => {
       render(