@capillarytech/creatives-library 8.0.318 → 8.0.320

package/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/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/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/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/v2Containers/CommunicationFlow/steps/DynamicControlsStep/index.js

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

package/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/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/v2Containers/CommunicationFlow/steps/MessageTypeStep/index.js

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

package/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/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;

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
+import pick from 'lodash/pick';
 import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
@@ -25,6 +26,7 @@ import Viber from '../Viber';
 import Whatsapp from '../Whatsapp';
 import InApp from '../InApp';
 import Rcs from '../Rcs';
+import { isRcsTextOnlyCardMediaType, resolveRcsCardPreviewStrings } from '../Rcs/utils';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
@@ -179,6 +181,8 @@ export function SlideBoxContent(props) {
       isTestAndPreviewMode,
       onHtmlEditorValidationStateChange,
     } = props;
+  const localTemplatesConfig = props.localTemplatesConfig || pick(props, constants.LOCAL_TEMPLATE_CONFIG_KEYS);
+  const useLocalTemplates = !!get(localTemplatesConfig, 'useLocalTemplates');
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
   const creativesLocationProps = {
@@ -398,12 +402,37 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        const { description = "", media: { mediaUrl = "" } = {}, title = "", suggestions = [] } = get(template, 'versions.base.content.RCS.rcsContent.cardContent[0]', {});
+        const cardPath = 'versions.base.content.RCS.rcsContent.cardContent[0]';
+        const card = get(template, cardPath, {}) || {};
+        const {
+          description = '',
+          media: { mediaUrl = '' } = {},
+          title = '',
+          mediaType: cardMediaType,
+          suggestions = [],
+          cardVarMapped: nestedCardVarMapped,
+        } = card;
+        const rootMirror = templateDataObject?.rcsCardVarMapped;
+        const nestedRecord =
+          nestedCardVarMapped != null && typeof nestedCardVarMapped === 'object'
+            ? nestedCardVarMapped
+            : {};
+        const rootRecord =
+          rootMirror != null && typeof rootMirror === 'object' ? rootMirror : {};
+        const mergedCardVarMapped = { ...rootRecord, ...nestedRecord };
+        const textOnlyCard = isRcsTextOnlyCardMediaType(cardMediaType);
+        const { rcsTitle, rcsDesc } = resolveRcsCardPreviewStrings(
+          title,
+          description,
+          mergedCardVarMapped,
+          !isFullMode,
+          textOnlyCard,
+        );
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,
-            rcsTitle: title,
-            rcsDesc: description,
+            rcsTitle,
+            rcsDesc,
             ...(suggestions.length > 0 && {
               buttonText: suggestions[0]?.text,
             }),
@@ -428,7 +457,7 @@ export function SlideBoxContent(props) {
 
   return (
     <CreativesWrapper>
-      {!isFullMode && slidBoxContent === 'templates' && (
+      {slidBoxContent === 'templates' && (!isFullMode || useLocalTemplates) && (
       <TemplatesV2
         isFullMode={isFullMode}
         onSelectTemplate={onSelectTemplate}
@@ -460,6 +489,7 @@ export function SlideBoxContent(props) {
         eventContextTags={eventContextTags}
         loyaltyMetaData={loyaltyMetaData}
         isLoyaltyModule={isLoyaltyModule}
+        localTemplatesConfig={localTemplatesConfig}
         />
       )}
       {isPreview && (
@@ -628,6 +658,7 @@ export function SlideBoxContent(props) {
         route={{ name: 'sms' }}
         isCreateSms={isCreateSms}
         isComponent
+        templateData={templateData}
         isGetFormData={isGetFormData}
         getFormSubscriptionData={getFormData}
         getLiquidTags={getLiquidTags}
@@ -1203,6 +1234,7 @@ export function SlideBoxContent(props) {
       )}
       {isCreateRcs && (<Rcs
         {...rcsCommonProps}
+        templateData={templateData}
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
         handleTestAndPreview={handleTestAndPreview}

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -48,6 +48,8 @@ function SlideBoxFooter(props) {
     isAnonymousType = false,
     templateData = {},
     hasPersonalizationTokenError: hasPersonalizationTokenErrorProp = false,
+    /** When set (e.g. SMS library create), overrides `creativesTemplatesSave` (“Done”) for the primary button */
+    primarySaveButtonMessage,
   } = props;
   // Calculate if buttons should be disabled
   // Only apply validation state checks for EMAIL channel in HTML Editor mode (not BEE/DragDrop)
@@ -186,7 +188,9 @@ function SlideBoxFooter(props) {
                 onClick={onSave}
                 disabled={isTemplateNameEmpty || fetchingCmsData || shouldDisableButtons || hasPersonalizationTokenError}
               >
-                {isFullMode ? (
+                {primarySaveButtonMessage ? (
+                  <FormattedMessage {...primarySaveButtonMessage} />
+                ) : isFullMode ? (
                   getFullModeSaveBtn(slidBoxContent, isCreatingTemplate)
                 ) : (
                   <FormattedMessage {...messages.creativesTemplatesSave} />
@@ -262,6 +266,10 @@ SlideBoxFooter.propTypes = {
   templateData: PropTypes.object,
   formData: PropTypes.array,
   hasPersonalizationTokenError: PropTypes.bool,
+  primarySaveButtonMessage: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
 };
 
 SlideBoxFooter.defaultProps = {
@@ -289,5 +297,6 @@ SlideBoxFooter.defaultProps = {
   selectedEmailCreateMode: '',
   formData: [],
   hasPersonalizationTokenError: false,
+  primarySaveButtonMessage: undefined,
 };
 export default SlideBoxFooter;