@capillarytech/creatives-library 8.0.318 → 8.0.320

package/v2Containers/CommunicationFlow/Tests/CommunicationFlow.test.js

@@ -0,0 +1,255 @@
+import React from 'react';
+
+jest.mock('../../CreativesContainer', () => function MockCreativesContainer({
+  getCreativesData,
+  handleCloseCreatives,
+  creativesMode,
+  channel,
+}) {
+  return (
+    <div data-testid="creatives-mock" data-creatives-mode={creativesMode} data-creatives-channel={channel}>
+      <button
+        type="button"
+        data-testid="creatives-save"
+        onClick={() => getCreativesData({ smsBody: 'Saved' })}
+      >
+        Save creative
+      </button>
+      <button type="button" data-testid="creatives-close" onClick={handleCloseCreatives}>
+        Close creative
+      </button>
+    </div>
+  );
+});
+
+import { Provider } from 'react-redux';
+import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
+import {
+  render as rtlRender, screen, waitFor, within,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import history from '../../../utils/history';
+import { initialReducer } from '../../../initialReducer';
+import CommunicationFlow from '../CommunicationFlow';
+import { getEnabledSteps } from '../utils/getEnabledSteps';
+import {
+  CHANNELS,
+  CHANNEL_PRIORITY,
+  SINGLE_TEMPLATE,
+  STEPS,
+} from '../constants';
+
+let store;
+
+beforeAll(() => {
+  store = configureStore({}, initialReducer, history);
+});
+
+/** Shared option lists for feature config */
+const MESSAGE_OPTIONS = [
+  { value: 'promotional', label: 'Promotional' },
+  { value: 'transactional', label: 'Transactional' },
+];
+
+const STRATEGY_OPTIONS = [
+  { value: SINGLE_TEMPLATE, label: 'Single template', isMultiChannel: false },
+  { value: CHANNEL_PRIORITY, label: 'Channel priority', isMultiChannel: true },
+];
+
+const DYNAMIC_CONTROLS = [
+  { key: 'sendToControl', label: 'Send to control', description: 'Help text' },
+];
+
+/** Base config for all CommunicationFlow tests */
+const baseConfig = {
+  consumer: 'campaigns',
+  mode: 'create',
+  features: {},
+};
+
+const CAP_DATA = {};
+
+/** Reusable feature presets merged into config.features */
+const FEATURES = {
+  messageType: {
+    messageTypeData: {
+      required: true,
+      options: MESSAGE_OPTIONS,
+      defaultOption: { value: 'promotional', label: 'Promotional' },
+    },
+  },
+  strategyContent: {
+    communicationStrategyData: { required: true, options: STRATEGY_OPTIONS, disabled: false },
+    contentTemplateData: { required: true, channels: CHANNELS },
+  },
+  strategyContentDynamic: {
+    communicationStrategyData: { required: true, options: STRATEGY_OPTIONS, disabled: false },
+    contentTemplateData: { required: true, channels: CHANNELS },
+    dynamicControlsData: { required: true, controls: DYNAMIC_CONTROLS },
+  },
+};
+
+function renderFlow(ui) {
+  return rtlRender(
+    <Provider store={store}>
+      <IntlProvider locale="en" messages={{}} defaultLocale="en">
+        {ui}
+      </IntlProvider>
+    </Provider>,
+  );
+}
+
+/**
+ * Renders connected CommunicationFlow with shared defaults.
+ * @param {object} [options]
+ * @param {object} [options.features] — config.features (use FEATURES.* or custom)
+ * @param {object|null} [options.initialData]
+ * @param {object} [options.capData]
+ * @param {jest.Mock} [options.onSave] — defaults to jest.fn()
+ * @param {jest.Mock} [options.onCancel] — defaults to jest.fn()
+ * @param {jest.Mock} [options.onChange]
+ */
+function renderWithFlow({
+  features = {},
+  initialData = null,
+  capData = CAP_DATA,
+  onSave,
+  onCancel,
+  onChange,
+  ...rest
+} = {}) {
+  return renderFlow(
+    <CommunicationFlow
+      config={{ ...baseConfig, features }}
+      initialData={initialData}
+      onSave={onSave ?? jest.fn()}
+      onCancel={onCancel ?? jest.fn()}
+      onChange={onChange}
+      capData={capData}
+      {...rest}
+    />,
+  );
+}
+
+async function selectCommunicationStrategy(label) {
+  const combo = screen.getByRole('combobox');
+  await userEvent.click(combo);
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+  await userEvent.click(within(screen.getByRole('listbox')).getByText(label));
+}
+
+describe('getEnabledSteps', () => {
+  it('includes delivery settings when deliverySettingsData.required is true', () => {
+    const steps = getEnabledSteps({
+      ...baseConfig,
+      features: {
+        deliverySettingsData: { required: true },
+      },
+    });
+    expect(steps).toContain(STEPS.DELIVERY_SETTINGS);
+  });
+
+  it('omits delivery settings when deliverySettingsData.required is absent or false', () => {
+    expect(getEnabledSteps({ ...baseConfig, features: {} })).not.toContain(
+      STEPS.DELIVERY_SETTINGS,
+    );
+    expect(
+      getEnabledSteps({
+        ...baseConfig,
+        features: { deliverySettingsData: { required: false } },
+      }),
+    ).not.toContain(STEPS.DELIVERY_SETTINGS);
+  });
+});
+
+describe('CommunicationFlow', () => {
+  it('renders only steps whose features are required', () => {
+    renderWithFlow({ features: FEATURES.messageType });
+    expect(screen.getByText(/message type/i)).toBeInTheDocument();
+    expect(screen.queryByText(/communication strategy/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/content template/i)).not.toBeInTheDocument();
+  });
+
+  it('hides channel selection and dynamic controls until a communication strategy is set', async () => {
+    renderWithFlow({ features: FEATURES.strategyContentDynamic });
+
+    expect(screen.queryByText(/content template/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/other controls/i)).not.toBeInTheDocument();
+
+    await selectCommunicationStrategy('Single template');
+
+    await waitFor(() => {
+      expect(screen.getAllByText(/content template/i).length).toBeGreaterThan(0);
+    });
+    expect(screen.getByText(/other controls/i)).toBeInTheDocument();
+  });
+
+  it('calls onChange with aggregated data when step data updates', async () => {
+    const onChange = jest.fn();
+    renderWithFlow({ features: FEATURES.messageType, onChange });
+
+    onChange.mockClear();
+    await userEvent.click(screen.getByRole('radio', { name: /transactional/i }));
+
+    expect(onChange).toHaveBeenCalled();
+    const payload = onChange.mock.calls[onChange.mock.calls.length - 1][0];
+    expect(payload.messageType).toBe('transactional');
+    expect(payload.communicationStrategy).toBeNull();
+  });
+
+  it('passes single-channel aggregate to onSave', async () => {
+    const onSave = jest.fn();
+    renderWithFlow({ features: FEATURES.strategyContent, onSave });
+
+    await selectCommunicationStrategy('Single template');
+
+    await userEvent.click(screen.getByRole('button', { name: /content template/i }));
+    await waitFor(() => expect(screen.getByRole('menu')).toBeInTheDocument());
+    await userEvent.click(within(screen.getByRole('menu')).getByText('SMS'));
+
+    await waitFor(() => expect(screen.getByTestId('creatives-mock')).toBeInTheDocument());
+    await userEvent.click(screen.getByRole('button', { name: /save creative/i }));
+
+    await waitFor(() => expect(screen.queryByTestId('creatives-mock')).not.toBeInTheDocument());
+
+    await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
+
+    expect(onSave).toHaveBeenCalledTimes(1);
+    const saved = onSave.mock.calls[0][0];
+    expect(saved.communicationStrategy).toBe(SINGLE_TEMPLATE);
+    expect(saved.channel).toBe('SMS');
+    expect(saved.channels).toEqual([]);
+    expect(saved.contentItems.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it('clears channel and keeps channels list in aggregate for multi-channel strategy', async () => {
+    const onSave = jest.fn();
+    renderWithFlow({
+      features: FEATURES.strategyContent,
+      initialData: {
+        communicationStrategy: CHANNEL_PRIORITY,
+        channels: ['SMS', 'EMAIL'],
+      },
+      onSave,
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
+
+    const saved = onSave.mock.calls[0][0];
+    expect(saved.communicationStrategy).toBe(CHANNEL_PRIORITY);
+    expect(saved.channel).toBeNull();
+    expect(saved.channels).toEqual(['SMS', 'EMAIL']);
+  });
+
+  it('initializes message type from initialData when provided', () => {
+    renderWithFlow({
+      features: FEATURES.messageType,
+      initialData: { messageType: 'transactional' },
+    });
+    expect(screen.getByRole('radio', { name: /transactional/i })).toBeChecked();
+  });
+});

package/v2Containers/CommunicationFlow/constants.js

@@ -0,0 +1,200 @@
+/**
+ * CommunicationFlow Constants
+ */
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import messages from './messages';
+
+// Step identifiers
+export const STEPS = {
+  MESSAGE_TYPE: 'messageType',
+  COMMUNICATION_STRATEGY: 'communicationStrategy',
+  CHANNEL_SELECTION: 'channelSelection',
+  INCENTIVES: 'incentives',
+  DELIVERY_SETTINGS: 'deliverySettings',
+  DYNAMIC_CONTROLS: 'dynamicControls',
+};
+
+// Message Type values
+export const MESSAGE_TYPES_OPTIONS = [
+  { value: 'promotional', label: <FormattedMessage {...messages.promotional} />, disabled: false },
+  { value: 'transactional', label: <FormattedMessage {...messages.transactional} />, disabled: false },
+];
+
+// Communication Strategy values
+export const COMMUNICATION_STRATEGIES_OPTIONS = [
+  {
+    value: 'SINGLE_TEMPLATE', label: <FormattedMessage {...messages.singleTemplate} />, disabled: false, isMultiChannel: false,
+  },
+  {
+    value: 'CHANNEL_PRIORITY', label: <FormattedMessage {...messages.channelPriority} />, disabled: false, isMultiChannel: true,
+  },
+  {
+    value: 'AB_TEST', label: <FormattedMessage {...messages.abTest} />, disabled: false, isMultiChannel: true,
+  },
+];
+
+export const CHANNEL_PRIORITY = 'CHANNEL_PRIORITY';
+export const AB_TEST = 'AB_TEST';
+export const SINGLE_TEMPLATE = 'SINGLE_TEMPLATE';
+
+// Channel config - single source of truth for CreativesContainer and TemplatesV2
+// paneKey: TemplatesV2 defaultPanes object key (for channelsToHide)
+// channelProp: CreativesContainer channel prop (must match pane.key for tab to be active)
+export const CHANNELS = [
+  {
+    value: 'SMS',
+    label: <FormattedMessage {...messages.sms} />,
+    iconType: 'sms',
+    isActive: true,
+    paneKey: 'sms',
+    channelProp: 'sms',
+  },
+  {
+    value: 'EMAIL',
+    label: <FormattedMessage {...messages.email} />,
+    iconType: 'email',
+    isActive: true,
+    paneKey: 'email',
+    channelProp: 'email',
+  },
+  {
+    value: 'MOBILEPUSH',
+    label: <FormattedMessage {...messages.mobilePush} />,
+    iconType: 'mpush',
+    isActive: true,
+    paneKey: 'mPush',
+    channelProp: 'mobilepush',
+  },
+  {
+    value: 'INAPP',
+    label: <FormattedMessage {...messages.inApp} />,
+    iconType: 'mpush',
+    isActive: true,
+    paneKey: 'inApp',
+    channelProp: 'inapp',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WHATSAPP',
+    label: <FormattedMessage {...messages.whatsApp} />,
+    iconType: 'whatsapp',
+    isActive: true,
+    paneKey: 'whatsapp',
+    channelProp: 'whatsapp',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WECHAT',
+    label: <FormattedMessage {...messages.weChat} />,
+    iconType: 'wechat',
+    isActive: false,
+    paneKey: 'weChat',
+    channelProp: 'wechat',
+  },
+  {
+    value: 'LINE',
+    label: <FormattedMessage {...messages.line} />,
+    iconType: 'line',
+    isActive: true,
+    paneKey: 'line',
+    channelProp: 'line',
+  },
+  {
+    value: 'VIBER',
+    label: <FormattedMessage {...messages.viber} />,
+    iconType: 'viber',
+    isActive: true,
+    paneKey: 'viber',
+    channelProp: 'viber',
+  },
+  {
+    value: 'FACEBOOK',
+    label: <FormattedMessage {...messages.facebook} />,
+    iconType: 'facebook',
+    isActive: true,
+    paneKey: 'facebook',
+    channelProp: 'facebook',
+  },
+  {
+    value: 'RCS',
+    label: <FormattedMessage {...messages.rcs} />,
+    iconType: 'rcs',
+    isActive: true,
+    paneKey: 'rcs',
+    channelProp: 'rcs',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'ZALO',
+    label: <FormattedMessage {...messages.zalo} />,
+    iconType: 'zalo',
+    isActive: true,
+    paneKey: 'zalo',
+    channelProp: 'zalo',
+    requiresEnableNewChannels: true,
+  },
+  {
+    value: 'WEBPUSH',
+    label: <FormattedMessage {...messages.webPush} />,
+    iconType: 'webpush',
+    isActive: true,
+    paneKey: 'webpush',
+    channelProp: 'webpush',
+  },
+  {
+    value: 'CALLTASK',
+    label: <FormattedMessage {...messages.callTask} />,
+    iconType: 'call',
+    isActive: true,
+    paneKey: 'callTask',
+    channelProp: 'call_task', // Must match TemplatesV2 pane.key
+  },
+];
+
+// Delivery settings - channels that show/hide sender details
+export const CHANNELS_WITHOUT_DELIVERY = ['MPUSH', 'MOBILEPUSH', 'INAPP', 'WEBPUSH'];
+export const SENDER_ID_CHANNELS = ['SMS', 'EMAIL', 'VIBER', 'ZALO', 'LINE'];
+export const SENDER_NUMBER_CHANNELS = ['WHATSAPP', 'RCS'];
+
+// Dynamic Controls — default config for the Other Controls section.
+// label and description are resolved via FormattedMessage so consumers
+// get translated strings without needing to hardcode copy in their config.
+export const DYNAMIC_CONTROLS_CONFIG = [
+  {
+    key: 'sendToControlCustomers',
+    label: <FormattedMessage {...messages.sendToControlCustomers} />,
+  },
+  {
+    key: 'sendToBrandPocs',
+    label: <FormattedMessage {...messages.sendToBrandPocs} />,
+  },
+  {
+    key: 'useTinyUrl',
+    label: <FormattedMessage {...messages.useTinyUrl} />,
+  },
+  {
+    key: 'overrideDailyLimit',
+    label: <FormattedMessage {...messages.overrideDailyLimit} />,
+    description: <FormattedMessage {...messages.overrideDailyLimitDesc} />,
+  },
+];
+
+// Incentive types
+export const INCENTIVE_TYPES = [
+  {
+    value: 'coupons', label: <FormattedMessage {...messages.coupons} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'points', label: <FormattedMessage {...messages.points} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'promotions', label: <FormattedMessage {...messages.promotions} />, isActive: true, disabled: false,
+  },
+  {
+    value: 'giftVouchers', label: <FormattedMessage {...messages.giftVouchers} />, isActive: false, disabled: false,
+  },
+  {
+    value: 'badges', label: <FormattedMessage {...messages.badges} />, isActive: false, disabled: false,
+  },
+];

package/v2Containers/CommunicationFlow/index.js

@@ -0,0 +1,102 @@
+/**
+ * CommunicationFlow - Public Entry Point
+ *
+ * Single entry for consumers. Wires config + callbacks and renders
+ * the CommunicationFlow orchestrator component.
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import CommunicationFlow from './CommunicationFlow';
+import { hasSupportEngagementModule } from '../../utils/common';
+
+const CommunicationFlowContainer = ({
+  config,
+  initialData,
+  onSave,
+  onCancel,
+  onChange,
+  ...otherProps
+}) => {
+  if (!hasSupportEngagementModule()) {
+    return null;
+  }
+
+  return (
+    <CommunicationFlow
+      config={config}
+      initialData={initialData}
+      onSave={onSave}
+      onCancel={onCancel}
+      onChange={onChange}
+      {...otherProps}
+    />
+  );
+};
+
+CommunicationFlowContainer.propTypes = {
+  config: PropTypes.shape({
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    channel: PropTypes.string, // optional if channel step is skipped
+    mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
+    channelsToHide: PropTypes.arrayOf(PropTypes.string),
+    channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+    features: PropTypes.shape({
+      messageTypeData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        }),
+        required: PropTypes.bool,
+      }),
+      communicationStrategyData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+        }),
+        required: PropTypes.bool,
+        disabled: PropTypes.bool,
+      }),
+      contentTemplateData: PropTypes.shape({
+        required: PropTypes.bool,
+        channels: PropTypes.array,
+        channelsToHide: PropTypes.arrayOf(PropTypes.string),
+        channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+      }),
+      incentivesData: PropTypes.shape({
+        required: PropTypes.bool,
+        types: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.string.isRequired,
+          isActive: PropTypes.bool,
+        })),
+      }),
+      deliverySettingsData: PropTypes.object,
+      dynamicControlsData: PropTypes.shape({
+        required: PropTypes.bool,
+        controls: PropTypes.array,
+      }),
+    }),
+    context: PropTypes.object, // ouId, campaignId, programId, etc.
+  }).isRequired,
+  initialData: PropTypes.object, // for edit/preview mode
+  onSave: PropTypes.func.isRequired, // (data) => void - called when user saves
+  onCancel: PropTypes.func.isRequired, // () => void - called when user cancels
+  onChange: PropTypes.func, // (data) => void - optional, called on data changes
+};
+
+CommunicationFlowContainer.defaultProps = {
+  initialData: null,
+  onChange: null,
+};
+
+export default CommunicationFlowContainer;