@capillarytech/creatives-library 9.0.50-alpha.0 → 9.0.50-alpha.1

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js

@@ -200,6 +200,370 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
+
+    it('should not render button when buttonText has only whitespace', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            messageContent: 'Message',
+            buttonText: '   ',
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-button-base')).toBeFalsy();
+    });
+  });
+
+  describe('Carousel Content', () => {
+    it('should render no content when carousel is selected but cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [
+                  { title: '', action: '' },
+                ],
+              },
+              {
+                text: '   ',
+                mediaUrl: '   ',
+                buttons: [
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
+
+    it('should render carousel cards when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: 'Button 1', action: 'https://example.com/1' },
+                ],
+              },
+              {
+                text: 'Card 2 text',
+                mediaUrl: 'https://image.url/card2.jpg',
+                buttons: [
+                  { title: 'Button 2', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Card 1 text')).toBeTruthy();
+      expect(screen.getByText('Card 2 text')).toBeTruthy();
+      expect(screen.getByText('Button 1')).toBeTruthy();
+      expect(screen.getByText('Button 2')).toBeTruthy();
+    });
+
+    it('should not render empty carousel button placeholder', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card 1 text',
+                mediaUrl: 'https://image.url/card1.jpg',
+                buttons: [
+                  { title: '', action: 'https://example.com/1' },
+                  { title: '   ', action: 'https://example.com/2' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview .button')).toBeNull();
+    });
+
+    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.queryByText('No content available')).toBeNull();
+      expect(container.querySelector('.viber-carousel-preview .scroll')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
+    });
+
+    it('should render carousel message text in message box when type is CAROUSEL', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            messageContent: 'Carousel intro copy',
+            cards: [
+              {
+                text: 'Card text',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [{ title: 'Go', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
+      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
+    });
+
+    it('should hide account icon when carousel is shown', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Carousel card line',
+                mediaUrl: '',
+                buttons: [{ title: 'Open link', action: 'https://x.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-account-icon')).toBeNull();
+    });
+
+    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Only text',
+                mediaUrl: '   ',
+                buttons: [{ title: 'Btn', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelector('.viber-carousel-preview .image-placeholder')).toBeTruthy();
+      expect(container.querySelector('.viber-carousel-preview .image')).toBeNull();
+    });
+
+    it('should render at most two carousel buttons per card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'One', action: 'https://a.com' },
+                  { title: 'Two', action: 'https://b.com' },
+                  { title: 'Three', action: 'https://c.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview .button')).toHaveLength(2);
+      expect(screen.getByText('One')).toBeTruthy();
+      expect(screen.getByText('Two')).toBeTruthy();
+      expect(screen.queryByText('Three')).toBeNull();
+    });
+
+    it('should apply secondary class to second carousel button', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: 'Card',
+                mediaUrl: 'https://image.url/c.jpg',
+                buttons: [
+                  { title: 'Primary', action: 'https://a.com' },
+                  { title: 'Secondary', action: 'https://b.com' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      const buttons = container.querySelectorAll('.viber-carousel-preview .button');
+      expect(buttons[0].className).toContain('button');
+      expect(buttons[0].className).not.toContain('button-secondary');
+      expect(buttons[1].className).toContain('button-secondary');
+    });
+
+    it('should show carousel when only a button title is present on a card', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [
+              {
+                text: '',
+                mediaUrl: '',
+                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
+              },
+            ],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('Tap me')).toBeTruthy();
+      expect(screen.queryByText('No content available')).toBeNull();
+    });
+
+    it('should show one placeholder card when editor preview and cards array is empty', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            showCarouselEditorPreview: true,
+            cards: [],
+          },
+        },
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(container.querySelectorAll('.viber-carousel-preview .card')).toHaveLength(1);
+    });
+
+    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
+      const props = {
+        ...defaultProps,
+        content: {
+          viberPreviewContent: {
+            type: 'CAROUSEL',
+            cards: [],
+          },
+        },
+      };
+
+      render(
+        <TestWrapper>
+          <ComponentToRender {...props} />
+        </TestWrapper>
+      );
+
+      expect(screen.getByText('No content available')).toBeTruthy();
+    });
   });
 
   describe('Account and Brand Name', () => {

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

@@ -6,6 +6,10 @@ import {
   mapRcsSuggestionForTestMeta,
   typeMatches,
   unwrapEntity,
+  getTrimmedText,
+  hasTrimmedText,
+  getCarouselButtonsWithTitles,
+  getCarouselButtonSlotCount,
 } from '../utils';
 
 describe('CommonTestAndPreview/utils', () => {
@@ -148,4 +152,49 @@ describe('CommonTestAndPreview/utils', () => {
       expect(unwrapEntity(response)).toBe(response);
     });
   });
+
+  describe('getTrimmedText / hasTrimmedText', () => {
+    it('trims string values', () => {
+      expect(getTrimmedText('  hello  ')).toBe('hello');
+    });
+
+    it('treats null/undefined as empty', () => {
+      expect(getTrimmedText(null)).toBe('');
+      expect(getTrimmedText(undefined)).toBe('');
+      expect(hasTrimmedText('   ')).toBe(false);
+      expect(hasTrimmedText('ok')).toBe(true);
+    });
+  });
+
+  describe('getCarouselButtonsWithTitles', () => {
+    it('returns up to 2 buttons with non-empty titles', () => {
+      expect(getCarouselButtonsWithTitles({
+        buttons: [
+          { title: ' A ' },
+          { title: '' },
+          { title: 'B' },
+          { title: 'C' },
+        ],
+      })).toEqual([{ title: ' A ' }, { title: 'B' }]);
+    });
+
+    it('returns empty array when card has no titled buttons', () => {
+      expect(getCarouselButtonsWithTitles({})).toEqual([]);
+      expect(getCarouselButtonsWithTitles(undefined)).toEqual([]);
+    });
+  });
+
+  describe('getCarouselButtonSlotCount', () => {
+    it('returns the max titled-button count across cards, capped at 2', () => {
+      expect(getCarouselButtonSlotCount([
+        { buttons: [{ title: 'A' }] },
+        { buttons: [{ title: 'A' }, { title: 'B' }, { title: 'C' }] },
+      ])).toBe(2);
+    });
+
+    it('returns 0 when no cards have titled buttons', () => {
+      expect(getCarouselButtonSlotCount([])).toBe(0);
+      expect(getCarouselButtonSlotCount([{ buttons: [{ title: '  ' }] }])).toBe(0);
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/utils.js

@@ -116,3 +116,23 @@ export const unwrapEntity = (response) => {
   if (response.entity === null) return null;
   return response;
 };
+
+/** Trim string-like values; null/undefined become ''. */
+export const getTrimmedText = (value = '') => (value ?? '').trim();
+
+/** True when trimmed text is non-empty. */
+export const hasTrimmedText = (value = '') => Boolean(getTrimmedText(value));
+
+/** First up to 2 carousel buttons that have a non-empty title. */
+export const getCarouselButtonsWithTitles = (card) => (
+  (card?.buttons ?? []).filter((button) => hasTrimmedText(button?.title)).slice(0, 2)
+);
+
+/**
+ * Max button slots to reserve across carousel cards (0–2), so cards align
+ * even when some cards have fewer titled buttons.
+ */
+export const getCarouselButtonSlotCount = (cards = []) => {
+  const buttonCounts = cards.map((card) => getCarouselButtonsWithTitles(card).length);
+  return Math.min(2, Math.max(0, ...buttonCounts, 0));
+};

package/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -17,11 +17,10 @@ import { createStructuredSelector } from 'reselect';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 // import injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
 // import injectReducer from '../../utils/injectReducer';
 import { makeSelectAuthenticated } from '../Cap/selectors';
-import { createCommDefinition } from '../../services/api';
+import { createCentralCommsMetaId, getCentralCommsMetaIds } from '../../services/api';
 import DynamicControlsStep from './steps/DynamicControlsStep';
 import MessageTypeStep from './steps/MessageTypeStep';
 import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
@@ -36,9 +35,9 @@ import {
   CHANNELS,
   INCENTIVE_TYPES,
   DYNAMIC_CONTROLS_CONFIG,
-  CCS_STRATEGY_TYPE_SINGLE,
-  CCS_CHANNEL_CONTENT_KEY_MAP,
-  CCS_CHANNEL_DELIVERY_KEY_MAP,
+  CHANNEL_CONTENT_KEY_MAP,
+  CHANNEL_DELIVERY_KEY_MAP,
+  CAMPAIGNS,
 } from './constants';
 import { getEnabledSteps } from './utils/getEnabledSteps';
 import messages from './messages';
@@ -65,25 +64,6 @@ const hasDeliverySettingForChannel = (channelSetting, channel) => {
   return !!settings && Object.values(settings).some((v) => v !== null && v !== '' && v !== undefined);
 };
 
-// createCommDefinition resolves (rather than rejects) with the CCS error envelope
-// for 4xx/5xx responses — see api.js's request()/checkStatus. A duplicate
-// referenceId within the org comes back as this specific 409.
-const isDuplicateReferenceIdError = (res) => res?.success === false && res?.status?.message === 'REFERENCE_ID_EXISTS';
-
-/**
- * CCS requires referenceId on create; the consumer-supplied Alert/comm name is
- * mandatory but referenceId is optional in every consumer's own form. Generate
- * a stable fallback from the name rather than failing the save.
- */
-const buildCcsReferenceId = (name) => {
-  const slug = (name || 'COMM')
-    .trim()
-    .toUpperCase()
-    .replace(/[^A-Z0-9]+/g, '_')
-    .replace(/^_+|_+$/g, '') || 'COMM';
-  return `${slug}_${Date.now()}`;
-};
-
 const CommunicationFlow = ({
   config,
   initialData,
@@ -111,7 +91,6 @@ const CommunicationFlow = ({
     };
   });
   const [validationErrors, setValidationErrors] = useState({});
-  const [saveError, setSaveError] = useState(null);
 
   // Memoize enabled steps
   const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
@@ -171,75 +150,74 @@ const CommunicationFlow = ({
   }, []);
 
   const handleSave = useCallback(async () => {
-    setSaveError(null);
     const aggregatedData = getAggregatedData();
     const shouldUseCCS = config?.useCCS !== false;
-    let ccsCommDefinition = null;
 
     if (shouldUseCCS) {
-      const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(aggregatedData.communicationStrategy);
-      const contentItem = (aggregatedData.contentItems || [])[0];
-      // Consumer-supplied name (e.g. CapNotify's Alert Name field) — CommunicationFlow
-      // has no name input of its own, so this is mandatory input from config.context.
-      const name = config?.context?.name;
+      const ouId = config?.context?.ouId || -1;
+      const module = config?.context?.module
+        || (config?.consumer ? config.consumer.toUpperCase() : CAMPAIGNS);
 
-      // CCS create is SINGLE-strategy only this phase (D1); CHANNEL_PRIORITY/AB_TEST
-      // carry multiple content items with no CCS equivalent yet.
-      if (!isMultiChannel && contentItem && name) {
-        const channel = (contentItem.channel || '').toUpperCase();
-        const contentKey = CCS_CHANNEL_CONTENT_KEY_MAP[channel];
-        const deliveryKey = CCS_CHANNEL_DELIVERY_KEY_MAP[channel];
-        const { dynamicControls = {} } = aggregatedData;
-        const channelSettings = aggregatedData.deliverySetting?.channelSetting?.[channel] || {};
-        const referenceId = config?.context?.referenceId || buildCcsReferenceId(name);
+      const channelContentKeyMap = CHANNEL_CONTENT_KEY_MAP;
+      const channelDeliveryKeyMap = CHANNEL_DELIVERY_KEY_MAP;
 
-        const payload = {
-          referenceId,
-          name,
-          description: config?.context?.description || undefined,
-          strategyType: CCS_STRATEGY_TYPE_SINGLE,
-          settings: {
-            additionalSettings: {
-              useTinyUrl: dynamicControls.useTinyUrl ?? false,
-              encryptUrl: dynamicControls.sendToControlCustomers ?? false,
-              linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
-              userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
-            },
-            executionParams: {},
-          },
-          singleChannelStrategy: {
-            channel,
-            ...(contentKey && { [contentKey]: contentItem.templateData }),
-            ...(deliveryKey && { [deliveryKey]: { channelSettings: { channel, ...channelSettings } } }),
-          },
-        };
+      const contentItems = aggregatedData.contentItems || [];
+      const { dynamicControls = {} } = aggregatedData;
 
+      const additionalSettings = {
+        useTinyUrl: dynamicControls.useTinyUrl ?? false,
+        encryptUrl: dynamicControls.sendToControlCustomers ?? false,
+        linkTrackingEnabled: dynamicControls.overrideDailyLimit ?? false,
+        userSubscriptionDisabled: dynamicControls.sendToBrandPocs ?? false,
+      };
+
+      if (contentItems.length > 0) {
         try {
-          const res = await createCommDefinition(payload);
-          if (isDuplicateReferenceIdError(res)) {
-            // Duplicate referenceId in this org — block the save so the user can
-            // change it, rather than silently proceeding without a CCS comm.
-            setSaveError(formatMessage(messages.duplicateReferenceIdError));
-            return;
-          }
-          const data = res?.response?.data;
-          if (data?.id) {
-            ccsCommDefinition = {
-              id: data.id,
-              referenceId: data.referenceId,
-              version: data.version?.version || 1,
-              status: data.status,
-            };
+          const responses = await Promise.all(
+            contentItems.map((item) => {
+              const channel = (item.channel || '').toUpperCase();
+              const contentKey = channelContentKeyMap[channel];
+              const deliveryKey = channelDeliveryKeyMap[channel];
+              const payload = {
+                centralCommsPayload: {
+                  ouId,
+                  channel,
+                  module,
+                  executionParams: {},
+                  clientName: 'EMF',
+                  ...(contentKey && {
+                    [contentKey]: { channel, ...item.templateData },
+                  }),
+                  ...(deliveryKey && {
+                    [deliveryKey]: {
+                      additionalSettings,
+                      channelSettings: {
+                        channel,
+                        ...(aggregatedData.deliverySetting?.channelSetting?.[channel] || {}),
+                      },
+                    },
+                  }),
+                },
+              };
+              return createCentralCommsMetaId(payload);
+            }),
+          );
+
+          const metaIds = responses
+            .map((res) => res?.response?.data?.id)
+            .filter(Boolean)
+            .join(',');
+
+          if (metaIds) {
+            const getResponse = await getCentralCommsMetaIds(metaIds);
           }
         } catch (error) {
-          console.error('[CommunicationFlow] CCS createCommDefinition error:', error);
+          console.error('[CommunicationFlow] CCS createCentralCommsMetaId error:', error);
         }
-      } else if (!name) {
-        console.warn('[CommunicationFlow] Skipping CCS createCommDefinition — config.context.name is required');
       }
     }
 
-    onSave(ccsCommDefinition ? { ...aggregatedData, ccsCommDefinition } : aggregatedData);
+    onSave(aggregatedData);
   }, [getAggregatedData, config, onSave]);
 
   // Call onChange callback when stepData changes
@@ -339,11 +317,6 @@ const CommunicationFlow = ({
       {renderSteps()}
       {onSave && (
         <CapRow useLegacy className="communication-flow-container__footer">
-          {saveError && (
-            <CapLabel type="label2" className="communication-flow-container__save-error">
-              {saveError}
-            </CapLabel>
-          )}
           <CapButton type="primary" onClick={handleSave} disabled={isSaveDisabled}>
             {formatMessage(messages.save)}
           </CapButton>