cap-creatives-ui 8.0.280 → 8.0.321

package/app/v2Containers/CommunicationFlow/steps/DeliverySettingsStep/index.js

@@ -0,0 +1,7 @@
+/**
+ * DeliverySettingsStep - Entry point
+ * Exports: DeliverySettingsSection (integrated in ChannelSelectionStep), SenderDetails
+ */
+
+export { default as SenderDetails, parseSenderDetailsFromEntity } from './SenderDetails';
+export { default as DeliverySettingsSection } from './DeliverySettingsSection';

package/app/v2Containers/CommunicationFlow/steps/DynamicControlsStep/DynamicControlsStep.js

@@ -0,0 +1,102 @@
+/**
+ * DynamicControlsStep Component
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapSwitch from '@capillarytech/cap-ui-library/CapSwitch';
+import messages from '../../messages';
+import './DynamicControlsStep.scss';
+
+const DynamicControlsStep = ({
+  value,
+  onChange,
+  controls,
+  error,
+  intl,
+}) => {
+  const { formatMessage } = intl || {};
+  // formatMessage used for section title only
+  const dynamicControls = value?.dynamicControls || {};
+
+  const handleToggle = (key, checked) => {
+    onChange({
+      ...value,
+      dynamicControls: { ...dynamicControls, [key]: checked },
+    });
+  };
+
+  if (!controls?.length) return null;
+
+  return (
+    <CapRow className="dynamic-controls-step">
+      <CapHeading type="h3" className="heading-style">
+        {formatMessage(messages.dynamicControlsTitle)}
+      </CapHeading>
+
+      {controls.map(({ key, label, description }) => {
+        const checked = !!dynamicControls[key];
+        const displayLabel = label || key;
+
+        return (
+          <CapRow
+            key={key}
+            type="flex"
+            align="top"
+            justify="space-between"
+            className="dynamic-controls-step__row"
+          >
+            <CapRow className="dynamic-controls-step__label-wrap">
+              <CapHeading type="h4" className="dynamic-controls-step__label">
+                {displayLabel}
+              </CapHeading>
+              {description && (
+                <CapHeading type="label4" className="dynamic-controls-step__desc">
+                  {description}
+                </CapHeading>
+              )}
+            </CapRow>
+            <CapSwitch
+              checked={checked}
+              onChange={(val) => handleToggle(key, val)}
+              className="dynamic-controls-step__switch"
+            />
+          </CapRow>
+        );
+      })}
+
+      {error && (
+        <CapRow className="validation-error dynamic-controls-step__error">
+          {error}
+        </CapRow>
+      )}
+    </CapRow>
+  );
+};
+
+DynamicControlsStep.propTypes = {
+  value: PropTypes.shape({
+    dynamicControls: PropTypes.object,
+  }),
+  onChange: PropTypes.func.isRequired,
+  controls: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+      description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    }),
+  ),
+  error: PropTypes.string,
+  intl: PropTypes.object.isRequired,
+};
+
+DynamicControlsStep.defaultProps = {
+  value: {},
+  controls: [],
+  error: null,
+};
+
+export default injectIntl(DynamicControlsStep);

package/app/v2Containers/CommunicationFlow/steps/DynamicControlsStep/DynamicControlsStep.scss

@@ -0,0 +1,36 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.dynamic-controls-step {
+  flex-direction: column;
+
+  &__row {
+    padding: $CAP_SPACE_16 0;
+    align-items: flex-start;
+  }
+
+  &__label-wrap {
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1;
+    padding-right: $CAP_SPACE_24;
+  }
+
+  &__label {
+    line-height: $CAP_SPACE_20;
+  }
+
+  &__desc {
+    margin-top: $CAP_SPACE_04;
+    color: $FONT_COLOR_03;
+  }
+
+  &__switch {
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+  }
+
+  &__error {
+    margin-top: $CAP_SPACE_08;
+    color: $CAP_RED;
+  }
+}

package/app/v2Containers/CommunicationFlow/steps/DynamicControlsStep/Tests/DynamicControlsStep.test.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import {
+  render, screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import DynamicControlsStep from '../DynamicControlsStep';
+
+const SAMPLE_CONTROLS = [
+  { key: 'alpha', label: 'Alpha', description: 'Alpha help' },
+  { key: 'beta', label: 'Beta', description: 'Beta help' },
+];
+
+function renderWithIntl(ui) {
+  return render(
+    <IntlProvider locale="en" messages={{}} defaultLocale="en">
+      {ui}
+    </IntlProvider>,
+  );
+}
+
+function DynamicControlsHarness({ initialDynamicControls = {} }) {
+  const [value, setValue] = useState({ dynamicControls: initialDynamicControls });
+  return (
+    <DynamicControlsStep
+      value={value}
+      onChange={setValue}
+      controls={SAMPLE_CONTROLS}
+    />
+  );
+}
+
+describe('DynamicControlsStep', () => {
+  it('renders nothing when there are no controls', () => {
+    const { container } = renderWithIntl(
+      <DynamicControlsStep
+        value={{}}
+        onChange={jest.fn()}
+        controls={[]}
+      />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('shows each switch on (true) or off (false) from dynamicControls for every field', () => {
+    renderWithIntl(
+      <DynamicControlsHarness initialDynamicControls={{ alpha: true, beta: false }} />,
+    );
+
+    expect(screen.getByText('Other controls')).toBeInTheDocument();
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+    expect(screen.getByText('Beta')).toBeInTheDocument();
+
+    const switches = screen.getAllByRole('switch');
+    expect(switches).toHaveLength(2);
+    expect(switches[0]).toBeChecked();
+    expect(switches[1]).not.toBeChecked();
+  });
+
+  it('toggles every control through false and true via onChange', async () => {
+    renderWithIntl(
+      <DynamicControlsHarness initialDynamicControls={{ alpha: true, beta: false }} />,
+    );
+    const switches = screen.getAllByRole('switch');
+
+    await userEvent.click(switches[0]);
+    expect(switches[0]).not.toBeChecked();
+
+    await userEvent.click(switches[1]);
+    expect(switches[1]).toBeChecked();
+
+    await userEvent.click(switches[0]);
+    expect(switches[0]).toBeChecked();
+
+    await userEvent.click(switches[1]);
+    expect(switches[1]).not.toBeChecked();
+  });
+
+  it('renders validation error when error is set', () => {
+    renderWithIntl(
+      <DynamicControlsStep
+        value={{ dynamicControls: { alpha: false } }}
+        onChange={jest.fn()}
+        controls={[SAMPLE_CONTROLS[0]]}
+        error="Dynamic controls validation failed"
+      />,
+    );
+    expect(screen.getByText('Dynamic controls validation failed')).toBeInTheDocument();
+  });
+});

package/app/v2Containers/CommunicationFlow/steps/DynamicControlsStep/index.js

@@ -0,0 +1,5 @@
+/**
+ * DynamicControlsStep - Entry point
+ */
+
+export { default } from './DynamicControlsStep';

package/app/v2Containers/CommunicationFlow/steps/MessageTypeStep/MessageTypeStep.js

@@ -0,0 +1,86 @@
+/**
+ * MessageTypeStep Component
+ *
+ * Radio group for selecting Message Type: Promotional | Transactional
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import { CAP_SPACE_24 } from '@capillarytech/cap-ui-library/styled/variables';
+import { MESSAGE_TYPES_OPTIONS } from '../../constants';
+import messages from '../../messages';
+import '../../CommunicationFlow.scss';
+
+const MessageTypeStep = ({
+  value,
+  defaultOption,
+  options: optionsProp,
+  onChange,
+  error,
+  intl,
+}) => {
+  const { formatMessage } = intl || {};
+  const options = optionsProp || MESSAGE_TYPES_OPTIONS;
+
+  // Use defaultOption value if value is null/undefined
+  const selectedValue = value || defaultOption?.value;
+
+  const handleChange = (messageType) => {
+    onChange(messageType);
+  };
+
+  return (
+    <CapRow className="message-type-step">
+      <CapHeading type="h3" className="heading-style">
+        {formatMessage(messages.messageTypeHeading)}
+      </CapHeading>
+
+      <CapRow align="middle" type="flex" gap={CAP_SPACE_24}>
+        {options?.map((option) => (
+          <CapRadio
+            key={option?.value}
+            checked={selectedValue === option?.value}
+            onChange={() => handleChange(option?.value)}
+            disabled={option?.disabled}
+          >
+            {option?.label}
+          </CapRadio>
+        ))}
+      </CapRow>
+
+      {error && (
+        <CapRow className="validation-error">
+          {error}
+        </CapRow>
+      )}
+    </CapRow>
+  );
+};
+
+MessageTypeStep.propTypes = {
+  value: PropTypes.oneOf(['promotional', 'transactional']),
+  defaultOption: PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+  }),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
+  })),
+  onChange: PropTypes.func.isRequired,
+  error: PropTypes.string,
+  intl: PropTypes.object.isRequired,
+};
+
+MessageTypeStep.defaultProps = {
+  value: null,
+  defaultOption: null,
+  options: null,
+  error: null,
+};
+
+export default injectIntl(MessageTypeStep);

package/app/v2Containers/CommunicationFlow/steps/MessageTypeStep/Tests/MessageTypeStep.test.js

@@ -0,0 +1,100 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { IntlProvider } from 'react-intl';
+import MessageTypeStep from '../MessageTypeStep';
+
+const OPTIONS = [
+  { value: 'promotional', label: 'Promotional', disabled: false },
+  { value: 'transactional', label: 'Transactional', disabled: false },
+];
+
+function renderWithIntl(ui) {
+  return render(
+    <IntlProvider locale="en" messages={{}} defaultLocale="en">
+      {ui}
+    </IntlProvider>,
+  );
+}
+
+describe('MessageTypeStep', () => {
+  it('shows the step heading and one radio per option', () => {
+    const onChange = jest.fn();
+    renderWithIntl(
+      <MessageTypeStep
+        value="promotional"
+        options={OPTIONS}
+        defaultOption={{ value: 'promotional', label: 'Promotional' }}
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByText(/message type/i)).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /promotional/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /transactional/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /promotional/i })).toBeChecked();
+  });
+
+  it('uses defaultOption when value is null so the default appears selected', () => {
+    const onChange = jest.fn();
+    renderWithIntl(
+      <MessageTypeStep
+        value={null}
+        options={OPTIONS}
+        defaultOption={{ value: 'transactional', label: 'Transactional' }}
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: /transactional/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /promotional/i })).not.toBeChecked();
+  });
+
+  it('calls onChange with the chosen message type when the user switches radios', async () => {
+    const onChange = jest.fn();
+    renderWithIntl(
+      <MessageTypeStep
+        value="promotional"
+        options={OPTIONS}
+        defaultOption={{ value: 'promotional', label: 'Promotional' }}
+        onChange={onChange}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('radio', { name: /transactional/i }));
+    expect(onChange).toHaveBeenCalledWith('transactional');
+  });
+
+  it('disables individual options when configured', () => {
+    const onChange = jest.fn();
+    const withDisabled = [
+      { value: 'promotional', label: 'Promotional', disabled: true },
+      { value: 'transactional', label: 'Transactional', disabled: false },
+    ];
+    renderWithIntl(
+      <MessageTypeStep
+        value="transactional"
+        options={withDisabled}
+        onChange={onChange}
+      />,
+    );
+
+    expect(screen.getByRole('radio', { name: /promotional/i })).toBeDisabled();
+    expect(screen.getByRole('radio', { name: /transactional/i })).not.toBeDisabled();
+  });
+
+  it('shows validation error text below the radios', () => {
+    const onChange = jest.fn();
+    renderWithIntl(
+      <MessageTypeStep
+        value="promotional"
+        options={OPTIONS}
+        onChange={onChange}
+        error="Please choose a message type"
+      />,
+    );
+
+    expect(screen.getByText('Please choose a message type')).toBeInTheDocument();
+  });
+});

package/app/v2Containers/CommunicationFlow/steps/MessageTypeStep/index.js

@@ -0,0 +1,5 @@
+/**
+ * MessageTypeStep - Entry point
+ */
+
+export { default } from './MessageTypeStep';

package/app/v2Containers/CommunicationFlow/utils/getEnabledSteps.js

@@ -0,0 +1,30 @@
+import { STEPS } from '../constants';
+
+/**
+ * Enabled steps in order from config.features.*.required flags.
+ * Channel selection, incentives, delivery, and dynamic controls are toggled independently.
+ */
+export const getEnabledSteps = (config) => {
+  const { features = {} } = config;
+  const steps = [];
+
+  if (features.messageTypeData?.required) {
+    steps.push(STEPS.MESSAGE_TYPE);
+  }
+  if (features.communicationStrategyData?.required) {
+    steps.push(STEPS.COMMUNICATION_STRATEGY);
+  }
+  if (features.contentTemplateData?.required) {
+    steps.push(STEPS.CHANNEL_SELECTION);
+  }
+  if (features.incentivesData?.required) {
+    steps.push(STEPS.INCENTIVES);
+  }
+  if (features.deliverySettingsData?.required) {
+    steps.push(STEPS.DELIVERY_SETTINGS);
+  }
+  if (features.dynamicControlsData?.required) {
+    steps.push(STEPS.DYNAMIC_CONTROLS);
+  }
+  return steps;
+};

package/app/v2Containers/CreativesContainer/CreativesSlideBoxWrapper.js

@@ -0,0 +1,43 @@
+/**
+ * Styled wrapper for CapSlideBox used by CreativesContainer and RCS SMS fallback
+ * so header/content/footer margins match.
+ */
+import styled from 'styled-components';
+import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
+
+const CreativesSlideBoxWrapper = styled.div`
+  .cap-slide-box-v2-container {
+    /*
+     * Liquid-error spacing must stay *inside* the content column. margin-bottom on
+     * .slidebox-content-container added to the in-flow height past 100vh, so the outer
+     * .cap-slide-box-v2-container (overflow-y: auto in cap-ui) gained a second scrollbar.
+     */
+    .slidebox-header {
+      margin-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
+      padding: 0 rem;
+      &.has-footer {
+        overflow-x: hidden;
+      }
+    }
+    .slidebox-content-container {
+      margin-bottom: 0;
+      padding: 0 rem;
+      padding-bottom: ${({ slideBoxWrapperMargin }) => `${slideBoxWrapperMargin}`};
+      box-sizing: border-box;
+      &.has-footer {
+        overflow-x: hidden;
+      }
+    }
+    .slidebox-footer {
+      /* Only apply margin-bottom to footer when ErrorInfoNote is shown in footer (BEE editor) */
+      /* For HTML Editor, errors are shown in ValidationErrorDisplay (inside content area), so no footer margin needed */
+      margin-bottom: ${({ shouldApplyFooterMargin }) => (shouldApplyFooterMargin ? `${CAP_SPACE_16}` : '0')};
+      padding: 0 rem;
+      &.has-footer {
+        overflow-x: hidden;
+      }
+    }
+  }
+`;
+
+export default CreativesSlideBoxWrapper;