cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/Cap/tests/reducer.test.js

@@ -21,7 +21,6 @@ import {
   expectedStateGetSchemaForEntitySuccessTAG,
   expectedStateGetSchemaForEntitySuccess,
 } from '../mockData';
-import { TAG } from '../../Whatsapp/constants';
 import { loadItem } from '../../../services/localStorageApi';
 
 
@@ -118,104 +117,3 @@ describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
     expect(reducer(mockedInitialState, action).toJS())?.fetchingSchema?.toEqual(true);
   });
 });
-
-describe('GET_SCHEMA_FOR_ENTITY_SUCCESS handler', () => {
-  it.concurrent('should handle existing tagLookupMap correctly when metaEntities and tagLookupMap exist', () => {
-    const initialStateTest = fromJS({
-      token: loadItem('token') || '',
-      orgID: loadItem('orgID') || '',
-      messages: [],
-      metaEntities: {
-        tags: [{ id: 1, name: 'tag1' }],
-        layouts: ['layout1', 'layout2'],
-        tagLookupMap: {
-          existingTag: { definition: { value: 'existing' } },
-          anotherTag: { definition: { value: 'another' } },
-        },
-        standard: [],
-      },
-      liquidTags: [],
-      fetchingLiquidTags: false,
-      fetchingSchema: false,
-      fetchingSchemaError: '',
-    });
-
-    let action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: TAG,
-      data: {
-        metaEntities: {
-          standard: [],
-          custom: [],
-          extended: [],
-        },
-      },
-    };
-
-    let newState = reducer(initialStateTest, action);
-    let metaEntities = newState.get('metaEntities');
-
-    expect(metaEntities).toEqual(expect.objectContaining({
-      tagLookupMap: expect.objectContaining({
-        existingTag: expect.objectContaining({
-          definition: expect.objectContaining({
-            value: 'existing',
-          }),
-        }),
-      }),
-    }));
-
-    action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: 'LAYOUT',
-      data: {
-        metaEntities: {
-          layouts: ['layout1', 'layout2'],
-          standard: [],
-        },
-      },
-    };
-    newState = reducer(initialStateTest, action);
-    metaEntities = newState.get('metaEntities');
-    expect(metaEntities).toEqual(expect.objectContaining({
-      layouts: expect.objectContaining({
-        layouts: expect.arrayContaining(['layout1', 'layout2']),
-      }),
-    }));
-  });
-
-  it.concurrent('should handle non-existent tagLookupMap by returning empty object', () => {
-    const initialStateTest = fromJS({
-      token: loadItem('token') || '',
-      orgID: loadItem('orgID') || '',
-      messages: [],
-      metaEntities: {
-        tagLookupMap: {},
-      },
-      liquidTags: [],
-      fetchingLiquidTags: false,
-      fetchingSchema: false,
-      fetchingSchemaError: '',
-    });
-
-    const action = {
-      type: GET_SCHEMA_FOR_ENTITY_SUCCESS,
-      entityType: TAG,
-      data: {
-        metaEntities: {
-          standard: [],
-          custom: [],
-          extended: [],
-        },
-      },
-    };
-
-    const newState = reducer(initialStateTest, action);
-    const metaEntities = newState.get('metaEntities');
-
-    // Updated assertions to handle plain object
-    expect(metaEntities).toBeDefined();
-    expect(metaEntities.tagLookupMap).toBeDefined();
-    expect(metaEntities.tagLookupMap).toEqual({});
-  });
-});

package/app/v2Containers/CommunicationFlow/CommunicationFlow.js

@@ -0,0 +1,291 @@
+/**
+ * CommunicationFlow - Orchestrator Component
+ *
+ * Manages the step flow, validation, and data aggregation.
+ * Renders steps based on config and calls callbacks with aggregated data.
+ */
+
+import React, {
+  useState, useCallback, useMemo, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { createStructuredSelector } from 'reselect';
+// import { CouponsCapContainer } from '@capillarytech/cap-coupons'; // Commented - cap-coupons flows disabled
+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 injectSaga from '../../utils/injectSaga';   // cap-coupons flows disabled
+// import injectReducer from '../../utils/injectReducer';
+import { makeSelectAuthenticated } from '../Cap/selectors';
+import DynamicControlsStep from './steps/DynamicControlsStep';
+import MessageTypeStep from './steps/MessageTypeStep';
+import CommunicationStrategyStep from './steps/CommunicationStrategyStep';
+import ChannelSelectionStep from './steps/ChannelSelectionStep';
+import {
+  STEPS,
+  CHANNEL_PRIORITY,
+  AB_TEST,
+} from './constants';
+import { getEnabledSteps } from './utils/getEnabledSteps';
+import messages from './messages';
+import './CommunicationFlow.scss';
+
+// Inject couponsCap reducer and saga - commented out (cap-coupons flows disabled)
+// const withCouponsReducer = injectReducer({
+//   key: 'couponsCap',
+//   reducer: CouponsCapContainer.couponsCapReducer,
+// });
+// const withCouponsSaga = injectSaga({
+//   key: 'couponsCapSaga',
+//   saga: CouponsCapContainer.couponsCapSaga,
+// });
+
+const CommunicationFlow = ({
+  config,
+  initialData,
+  onSave,
+  onCancel, // eslint-disable-line
+  onChange,
+  intl,
+  capData, // From Redux - contains user/org info needed by CouponsWrapper
+}) => {
+  const { formatMessage } = intl || {};
+  const { messageTypeData = {}, communicationStrategyData = {}, contentTemplateData = {} } = config?.features || {};
+  // Initialize step data from initialData or defaults
+  const [stepData, setStepData] = useState(() => {
+    const defaultMessageType = messageTypeData.defaultOption?.value || null;
+    return {
+      messageType: initialData?.messageType || defaultMessageType,
+      communicationStrategy: initialData?.communicationStrategy || null,
+      channel: initialData?.channel || config.channel || null,
+      channels: initialData?.channels || [],
+      selectedOfferDetails: initialData?.selectedOfferDetails || [],
+      contentItems: initialData?.contentItems || [],
+      deliverySetting: initialData?.deliverySetting || {},
+      dynamicControls: initialData?.dynamicControls || {},
+    };
+  });
+  const [validationErrors, setValidationErrors] = useState({});
+
+  // Memoize enabled steps
+  const enabledSteps = useMemo(() => getEnabledSteps(config), [config]);
+
+  /**
+   * Get aggregated data from all steps
+   */
+  const getAggregatedData = useCallback(() => {
+    const { communicationStrategy } = stepData;
+    const isMultiChannel = [CHANNEL_PRIORITY, AB_TEST].includes(communicationStrategy);
+
+    return {
+      messageType: stepData.messageType,
+      communicationStrategy: stepData.communicationStrategy,
+      channel: isMultiChannel ? null : stepData.channel,
+      channels: isMultiChannel ? stepData.channels : [],
+      selectedOfferDetails: stepData.selectedOfferDetails,
+      contentItems: stepData.contentItems || [],
+      deliverySetting: stepData.deliverySetting,
+      dynamicControls: stepData.dynamicControls,
+    };
+  }, [stepData]);
+
+  /**
+   * Handle step data change
+   */
+  const handleStepChange = useCallback((step, data) => {
+    setStepData((prevStepData) => ({
+      ...prevStepData,
+      ...data,
+    }));
+    setValidationErrors((prevErrors) => ({
+      ...prevErrors,
+      [step]: null, // Clear validation error for this step
+    }));
+  }, []);
+
+  // Call onChange callback when stepData changes
+  useEffect(() => {
+    if (onChange) {
+      onChange(getAggregatedData());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stepData]);
+
+  /**
+   * Render all enabled steps
+   */
+  const renderSteps = useCallback(() => enabledSteps.map((step) => {
+    const commonProps = {
+      value: stepData,
+      onChange: (data) => handleStepChange(step, data),
+      error: validationErrors[step],
+    };
+
+    switch (step) {
+      case STEPS.MESSAGE_TYPE:
+        return (
+          <CapRow key={step}>
+            <MessageTypeStep
+              {...commonProps}
+              value={stepData.messageType}
+              options={messageTypeData.options}
+              defaultOption={messageTypeData.defaultOption}
+              onChange={(messageType) => handleStepChange(step, { messageType })}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      case STEPS.COMMUNICATION_STRATEGY:
+        return (
+          <CapRow key={step}>
+            <CommunicationStrategyStep
+              {...commonProps}
+              value={stepData.communicationStrategy}
+              // messageType={stepData.messageType}
+              options={communicationStrategyData.options}
+              disabled={communicationStrategyData.disabled}
+              onChange={(communicationStrategy) => handleStepChange(step, { communicationStrategy })}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      case STEPS.CHANNEL_SELECTION:
+        // Only show ChannelSelectionStep if communication strategy is selected
+        if (!stepData.communicationStrategy) {
+          return null;
+        }
+        return (
+          <CapRow key={step}>
+            <ChannelSelectionStep
+              {...commonProps}
+              value={stepData}
+              channels={contentTemplateData.channels}
+              onChange={(data) => handleStepChange(step, data)}
+              channelsToHide={contentTemplateData.channelsToHide}
+              channelsToDisable={contentTemplateData.channelsToDisable}
+              creativesMode={config.mode || 'create'}
+              selectedOfferDetails={stepData.selectedOfferDetails}
+              incentivesData={config.features?.incentivesData}
+              deliverySettingsData={config.features?.deliverySettingsData}
+              config={config}
+              capData={capData}
+            />
+            <CapDivider />
+          </CapRow>
+        );
+      // This will be added back in when coupons/points are integrated so keeping it commented out for now
+      // case STEPS.INCENTIVES:
+      //   return (
+      //     <IncentivesStep
+      //       key={step}
+      //       {...commonProps}
+      //       value={stepData.selectedOfferDetails}
+      //       onChange={(selectedOfferDetails) => handleStepChange(step, { selectedOfferDetails })}
+      //     />
+      //   );
+      case STEPS.DYNAMIC_CONTROLS:
+        // Only show DynamicControlsStep if communication strategy is selected
+        if (!stepData.communicationStrategy) {
+          return null;
+        }
+        return (
+          <DynamicControlsStep
+            key={step}
+            {...commonProps}
+            value={{ dynamicControls: stepData.dynamicControls }}
+            controls={config.features?.dynamicControlsData?.controls || []}
+            onChange={(data) => handleStepChange(step, { dynamicControls: data.dynamicControls })}
+          />
+        );
+      default:
+        return null;
+    }
+  }), [enabledSteps, stepData, validationErrors, config, handleStepChange, messageTypeData, communicationStrategyData, contentTemplateData]);
+
+  return (
+    <CapRow className="communication-flow-container">
+      {renderSteps()}
+      {onSave && (
+        <CapRow className="communication-flow-container__footer">
+          <CapButton type="primary" onClick={() => onSave(getAggregatedData())}>
+            {formatMessage(messages.save)}
+          </CapButton>
+        </CapRow>
+      )}
+    </CapRow>
+  );
+};
+
+CommunicationFlow.propTypes = {
+  config: PropTypes.shape({
+    consumer: PropTypes.oneOf(['campaigns', 'loyalty', 'adiona']).isRequired,
+    channel: PropTypes.string,
+    mode: PropTypes.oneOf(['create', 'edit', 'preview']).isRequired,
+    channelsToHide: PropTypes.arrayOf(PropTypes.string),
+    channelsToDisable: PropTypes.arrayOf(PropTypes.string),
+    features: PropTypes.shape({
+      enableMessageType: PropTypes.bool,
+      enableCommunicationStrategy: PropTypes.bool,
+      messageTypeData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        }),
+        required: PropTypes.bool,
+      }),
+      communicationStrategyData: PropTypes.shape({
+        options: PropTypes.arrayOf(PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        })),
+        defaultOption: PropTypes.shape({
+          value: PropTypes.string.isRequired,
+          label: PropTypes.node.isRequired,
+        }),
+        required: PropTypes.bool,
+        disabled: PropTypes.bool,
+      }),
+      contentTemplateData: PropTypes.shape({
+        required: PropTypes.bool,
+        channels: PropTypes.object,
+      }),
+      enableIncentives: PropTypes.bool,
+      enableDeliverySettings: PropTypes.bool,
+      enableOtherSettings: PropTypes.bool,
+      incentivesTypes: PropTypes.arrayOf(PropTypes.oneOf(['coupons', 'points', 'promotions', 'giftVouchers', 'badges'])),
+    }),
+    context: PropTypes.object,
+  }).isRequired,
+  initialData: PropTypes.object,
+  onSave: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onChange: PropTypes.func,
+  intl: PropTypes.object.isRequired,
+  capData: PropTypes.object,
+};
+
+CommunicationFlow.defaultProps = {
+  initialData: null,
+  onChange: null,
+  capData: {},
+};
+
+const mapStateToProps = createStructuredSelector({
+  capData: makeSelectAuthenticated(),
+});
+
+const withConnect = connect(mapStateToProps);
+
+export default compose(
+  // withCouponsReducer, // cap-coupons flows disabled
+  // withCouponsSaga,   // cap-coupons flows disabled
+  withConnect,
+  injectIntl,
+)(CommunicationFlow);

package/app/v2Containers/CommunicationFlow/CommunicationFlow.scss

@@ -0,0 +1,25 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+// .slidebox-content-container is a DOM ancestor of .communication-flow-container
+// (the outer CapSlideBox wraps this component), so it cannot be scoped as a
+// descendant selector — it must remain at root level to match correctly.
+.slidebox-content-container {
+  padding: 0 $CAP_SPACE_48 !important; // 48px left and right, 0 top and bottom
+  .slidebox-footer {
+    padding: 0 $CAP_SPACE_48 !important;
+  }
+}
+
+.communication-flow-container {
+  .step-divider {
+    margin: $CAP_SPACE_32 0;
+  }
+
+  .heading-style {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__footer {
+    padding: $CAP_SPACE_16 0 $CAP_SPACE_08;
+  }
+}

package/app/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();
+  });
+});