@capillarytech/creatives-library 8.0.295 → 8.0.297

package/v2Components/CommonTestAndPreview/DeliverySettings/index.js

@@ -0,0 +1,239 @@
+/**
+ * DeliverySettings — summary row + CapSlideBox trigger for Test and Preview.
+ * Rendered only for SMS, Email, WhatsApp. Uses cap-ui-library only.
+ *
+ * Reference: cap-campaigns-v2 DeliverySettingsV2 (summary + modify panel).
+ */
+
+import React, { useState, useCallback } from "react";
+import PropTypes from "prop-types";
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapSlideBox from "@capillarytech/cap-ui-library/CapSlideBox";
+import { FormattedMessage } from "react-intl";
+import get from "lodash/get";
+import messages from "./messages";
+import ModifyDeliverySettings from "./ModifyDeliverySettings";
+import {
+  CHANNELS,
+  CHANNELS_WITH_DELIVERY_SETTINGS,
+  SUMMARY_EMPTY_PLACEHOLDER,
+  DELIVERY_SETTING_KEY_DOMAIN_ID,
+  DELIVERY_SETTING_KEY_GSM_SENDER_ID,
+  DELIVERY_SETTING_KEY_SENDER_EMAIL,
+  DELIVERY_SETTING_KEY_SENDER_LABEL,
+  DELIVERY_SETTING_KEY_SENDER_REPLY_TO,
+  DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER,
+  DELIVERY_SETTING_KEY_SENDER_MOB_NUM,
+  TEST_ID_DELIVERY_SETTINGS_EDIT,
+} from "./constants";
+import "./DeliverySettings.scss";
+
+const DeliverySettings = (props) => {
+  const {
+    channel,
+    deliverySettings = {},
+    senderDetailsOptions = [],
+    wecrmAccounts = [],
+    onSaveDeliverySettings,
+    isLoadingSenderDetails,
+    formatMessage,
+    smsTraiDltEnabled,
+    registeredSenderIds,
+    whatsappAccountFromForm,
+  } = props;
+
+  const [isSlideBoxOpen, setSlideBoxOpen] = useState(false);
+
+  const openSlideBox = useCallback(() => setSlideBoxOpen(true), []);
+  const closeSlideBox = useCallback(() => setSlideBoxOpen(false), []);
+
+  const handleSave = useCallback(
+    (values) => {
+      onSaveDeliverySettings(values);
+      closeSlideBox();
+    },
+    [onSaveDeliverySettings, closeSlideBox]
+  );
+
+  if (!CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel)) {
+    return null;
+  }
+
+  const notConfiguredLabel = formatMessage(messages.notConfigured);
+
+  const getSummaryText = () => {
+    const empty = SUMMARY_EMPTY_PLACEHOLDER;
+    if (channel === CHANNELS.SMS) {
+      const domain = (senderDetailsOptions || []).find(
+        (d) => d.domainId === get(deliverySettings, DELIVERY_SETTING_KEY_DOMAIN_ID),
+      );
+      const domainName = domain?.domainName || empty;
+      const senderId = get(deliverySettings, DELIVERY_SETTING_KEY_GSM_SENDER_ID) || empty;
+      return { senderDomain: domainName, senderId };
+    }
+    if (channel === CHANNELS.EMAIL) {
+      const domain = (senderDetailsOptions || []).find(
+        (d) => d.domainId === get(deliverySettings, DELIVERY_SETTING_KEY_DOMAIN_ID),
+      );
+      const emailDomain = domain?.domainName || empty;
+      const senderEmail = get(deliverySettings, DELIVERY_SETTING_KEY_SENDER_EMAIL) || empty;
+      const senderLabel = get(deliverySettings, DELIVERY_SETTING_KEY_SENDER_LABEL) || empty;
+      const replyToId = get(deliverySettings, DELIVERY_SETTING_KEY_SENDER_REPLY_TO) || empty;
+      return {
+        emailDomain,
+        senderEmail,
+        senderLabel,
+        replyToId,
+      };
+    }
+    if (channel === CHANNELS.WHATSAPP) {
+      const account = (wecrmAccounts || []).find(
+        (a) => a.sourceAccountIdentifier
+          === get(deliverySettings, DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER),
+      );
+      const accountName = account?.name || empty;
+      const senderNumber = get(deliverySettings, DELIVERY_SETTING_KEY_SENDER_MOB_NUM) || empty;
+      return { account: accountName, senderNumber };
+    }
+    return { account: empty, sender: empty };
+  };
+
+  const summary = getSummaryText();
+  let hasValues = false;
+  if (channel === CHANNELS.SMS) {
+    hasValues = summary.senderDomain !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.senderId !== SUMMARY_EMPTY_PLACEHOLDER;
+  } else if (channel === CHANNELS.EMAIL) {
+    hasValues = summary.emailDomain !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.senderEmail !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.senderLabel !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.replyToId !== SUMMARY_EMPTY_PLACEHOLDER;
+  } else if (channel === CHANNELS.WHATSAPP) {
+    hasValues = summary.account !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.senderNumber !== SUMMARY_EMPTY_PLACEHOLDER;
+  } else {
+    hasValues = summary.account !== SUMMARY_EMPTY_PLACEHOLDER
+      || summary.sender !== SUMMARY_EMPTY_PLACEHOLDER;
+  }
+
+  const getSummaryObject = () => {
+    if (!hasValues) return null;
+    const label = (msg) => formatMessage(msg);
+    if (channel === CHANNELS.SMS) {
+      return {
+        [label(messages.senderDomainSummary)]: summary.senderDomain,
+        [label(messages.senderId)]: summary.senderId,
+      };
+    }
+    if (channel === CHANNELS.EMAIL) {
+      return {
+        [label(messages.emailDomain)]: summary.emailDomain,
+        [label(messages.senderId)]: summary.senderEmail,
+        [label(messages.senderName)]: summary.senderLabel,
+        [label(messages.replyToId)]: summary.replyToId,
+      };
+    }
+    if (channel === CHANNELS.WHATSAPP) {
+      return {
+        [label(messages.account)]: summary.account,
+        [label(messages.senderNumber)]: summary.senderNumber,
+      };
+    }
+    return {
+      [label(messages.account)]: summary.account,
+      [label(messages.senderNumber)]: summary.sender,
+    };
+  };
+
+  const summaryObject = getSummaryObject();
+
+  return (
+    <CapRow className="delivery-settings">
+      <CapRow className="delivery-settings__heading-row">
+        <CapHeading type="h10">
+          <FormattedMessage {...messages.deliverySettings} />
+        </CapHeading>
+      </CapRow>
+      <CapRow type="flex" className="delivery-settings__summary-row">
+        <CapRow type="flex" className="delivery-settings__summary-inner">
+          {summaryObject == null ? (
+            <CapLabel type="label2">{notConfiguredLabel}</CapLabel>
+          ) : (
+            Object.entries(summaryObject).map(([key, value]) => (
+              <CapRow type="flex" key={key} className="delivery-settings__summary-entry">
+                <CapLabel type="label1" className="delivery-settings__summary-key">{key}</CapLabel>
+                <CapLabel type="label9">
+                  :
+                  {' '}
+                  {value}
+                </CapLabel>
+              </CapRow>
+            ))
+          )}
+        </CapRow>
+        <CapIcon
+          type="edit"
+          onClick={openSlideBox}
+          className="delivery-settings__edit-icon"
+          data-testid={TEST_ID_DELIVERY_SETTINGS_EDIT}
+          size="s"
+        />
+      </CapRow>
+
+      {isSlideBoxOpen && (
+        <CapSlideBox
+          show
+          size="size-l"
+          header={<FormattedMessage {...messages.deliverySettings} />}
+          handleClose={closeSlideBox}
+          content={(
+            <ModifyDeliverySettings
+              channel={channel}
+              deliverySettings={deliverySettings}
+              senderDetailsOptions={senderDetailsOptions}
+              wecrmAccounts={wecrmAccounts}
+              onSaveDeliverySettings={handleSave}
+              onClose={closeSlideBox}
+              isLoading={isLoadingSenderDetails}
+              formatMessage={formatMessage}
+              smsTraiDltEnabled={smsTraiDltEnabled}
+              registeredSenderIds={registeredSenderIds}
+              whatsappAccountFromForm={whatsappAccountFromForm}
+            />
+          )}
+        />
+      )}
+    </CapRow>
+  );
+};
+
+DeliverySettings.propTypes = {
+  channel: PropTypes.string.isRequired,
+  deliverySettings: PropTypes.object,
+  senderDetailsOptions: PropTypes.array,
+  wecrmAccounts: PropTypes.array,
+  onSaveDeliverySettings: PropTypes.func.isRequired,
+  isLoadingSenderDetails: PropTypes.bool,
+  formatMessage: PropTypes.func,
+  smsTraiDltEnabled: PropTypes.bool,
+  registeredSenderIds: PropTypes.array,
+  whatsappAccountFromForm: PropTypes.shape({
+    accountName: PropTypes.string,
+  }),
+};
+
+DeliverySettings.defaultProps = {
+  deliverySettings: {},
+  senderDetailsOptions: [],
+  wecrmAccounts: [],
+  isLoadingSenderDetails: false,
+  formatMessage: undefined,
+  smsTraiDltEnabled: false,
+  registeredSenderIds: [],
+  whatsappAccountFromForm: undefined,
+};
+
+export default DeliverySettings;

package/v2Components/CommonTestAndPreview/DeliverySettings/messages.js

@@ -0,0 +1,111 @@
+/**
+ * DeliverySettings messages for Test and Preview.
+ * Aligned with cap-campaigns-v2 DeliverySettingsV2 and ModifyDeliverySettings messages.
+ */
+
+import { defineMessages } from 'react-intl';
+
+const prefix = 'creatives.CommonTestAndPreview.DeliverySettings';
+
+export default defineMessages({
+  deliverySettings: {
+    id: `${prefix}.deliverySettings`,
+    defaultMessage: 'Delivery settings',
+  },
+  notConfigured: {
+    id: `${prefix}.notConfigured`,
+    defaultMessage: 'Not configured',
+  },
+  account: {
+    id: `${prefix}.account`,
+    defaultMessage: 'Account',
+  },
+  senderNumber: {
+    id: `${prefix}.senderNumber`,
+    defaultMessage: 'Sender number',
+  },
+  senderDomain: {
+    id: `${prefix}.senderDomain`,
+    defaultMessage: 'Sender domain',
+  },
+  senderId: {
+    id: `${prefix}.senderId`,
+    defaultMessage: 'Sender ID',
+  },
+  senderName: {
+    id: `${prefix}.senderName`,
+    defaultMessage: 'Sender name',
+  },
+  replyToId: {
+    id: `${prefix}.replyToId`,
+    defaultMessage: 'Reply-to ID',
+  },
+  done: {
+    id: `${prefix}.done`,
+    defaultMessage: 'Done',
+  },
+  smsDomain: {
+    id: `${prefix}.smsDomain`,
+    defaultMessage: 'SMS Domain',
+  },
+  /** SMS summary & form: "Sender Domain" (capital D) for summary line */
+  senderDomainSummary: {
+    id: `${prefix}.senderDomainSummary`,
+    defaultMessage: 'Sender Domain',
+  },
+  /** SMS form label with colon: "Sender domain:" */
+  senderDomainLabel: {
+    id: `${prefix}.senderDomainLabel`,
+    defaultMessage: 'Sender domain:',
+  },
+  /** SMS form label with colon: "Sender ID:" */
+  senderIdLabel: {
+    id: `${prefix}.senderIdLabel`,
+    defaultMessage: 'Sender ID:',
+  },
+  emailDomain: {
+    id: `${prefix}.emailDomain`,
+    defaultMessage: 'Email Domain',
+  },
+  /** Email form/summary: "Email domain:" (with colon) */
+  emailDomainLabel: {
+    id: `${prefix}.emailDomainLabel`,
+    defaultMessage: 'Email domain:',
+  },
+  /** Email form: "Sender ID:" (with colon) */
+  senderNameLabelEmail: {
+    id: `${prefix}.senderIdLabelEmail`,
+    defaultMessage: 'Sender Name:',
+  },
+  /** Email form/summary: "Reply-to ID:" (with colon) */
+  replyToIdLabel: {
+    id: `${prefix}.replyToIdLabel`,
+    defaultMessage: 'Reply-to ID:',
+  },
+  whatsappBusinessAcc: {
+    id: `${prefix}.whatsappBusinessAcc`,
+    defaultMessage: 'WhatsApp business account',
+  },
+  whatsappSenderNum: {
+    id: `${prefix}.whatsappSenderNum`,
+    defaultMessage: 'WhatsApp sender number',
+  },
+  /** WhatsApp form/summary: "Account:" (with colon) */
+  accountLabel: {
+    id: `${prefix}.accountLabel`,
+    defaultMessage: 'Account:',
+  },
+  /** WhatsApp form/summary: "Sender number:" (with colon) */
+  senderNumberLabel: {
+    id: `${prefix}.senderNumberLabel`,
+    defaultMessage: 'Sender number:',
+  },
+  noOptions: {
+    id: `${prefix}.noOptions`,
+    defaultMessage: 'No options',
+  },
+  disabledMessage: {
+    id: `${prefix}.disabledMessage`,
+    defaultMessage: 'Message template selected belongs to this account',
+  },
+});

package/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js

@@ -0,0 +1,88 @@
+/**
+ * Normalize getSenderDetails(channel, orgUnitId) API response for a single channel.
+ * Output shape matches cap-campaigns-v2 parseSenderDetails so UI can consume
+ * domains with domainId, domainName, gsmSenders, emailSenders, emailRepliers, etc.
+ *
+ * Reference: cap-campaigns-v2 app/utils/parseSenderDetails.js
+ * No cross-repo imports; logic aligned with campaigns domain structure.
+ */
+
+import get from 'lodash/get';
+import { CHANNELS } from '../../constants';
+
+const getSenderOptions = (contactInfo, key) =>
+  (contactInfo || [])
+    .filter((contactInfoItem) => contactInfoItem.type === key && contactInfoItem.valid)
+    .sort((contact) => (contact.default ? -1 : 0));
+
+/**
+ * Parse raw API response for one channel into { domains: [...] }
+ * @param {string} channel - SMS | EMAIL | WHATSAPP
+ * @param {Object} response - API response (e.g. { entity: { SMS: [...] } } or { entity: [...] })
+ * @returns {{ domains: Array }} - domains array compatible with campaigns DeliverySettingsV2
+ */
+export function parseSenderDetailsResponse(channel, response) {
+  const entity = get(response, 'entity', response);
+  if (!entity) {
+    return { domains: [] };
+  }
+
+  // Single-channel API: entity may be { [channel]: [...] } or direct array
+  let channelSenderDetails = get(entity, channel, null);
+  if (channelSenderDetails == null && Array.isArray(entity)) {
+    channelSenderDetails = entity;
+  }
+  if (!Array.isArray(channelSenderDetails)) {
+    return { domains: [] };
+  }
+
+  const domains = [];
+
+  channelSenderDetails.forEach((element) => {
+    const { id: dgmId, priority, domainProperties = {} } = element;
+    const {
+      domainName,
+      id = -1,
+      contactInfo,
+      connectionProperties: {
+        sourceAccountIdentifier = '',
+        wabaId = '',
+        userid = '',
+      } = {},
+    } = domainProperties;
+
+    const domain = {
+      dgmId,
+      domainName,
+      domainId: id,
+      priority: priority != null ? priority : 0,
+    };
+
+    if ([CHANNELS.SMS, CHANNELS.WHATSAPP].includes(channel)) {
+      domain.cdmaSenders = getSenderOptions(contactInfo, 'cdma_sender_id');
+      domain.gsmSenders = getSenderOptions(contactInfo, 'gsm_sender_id');
+      domain.sourceAccountIdentifier =
+        sourceAccountIdentifier || wabaId || userid || '';
+    }
+
+    if (channel === CHANNELS.EMAIL) {
+      domain.emailSenders = getSenderOptions(contactInfo, 'sender_id');
+      domain.emailRepliers = getSenderOptions(contactInfo, 'reply_to_id');
+    }
+
+    domains.push(domain);
+  });
+
+  // Sort by priority and dedupe by domainName (match campaigns behaviour)
+  domains.sort((a, b) => (a.priority || 0) - (b.priority || 0));
+  const deduped = domains.reduce((acc, domain) => {
+    if (!acc.find((d) => d.domainName === domain.domainName)) {
+      acc.push(domain);
+    }
+    return acc;
+  }, []);
+
+  return { domains: deduped };
+}
+
+export default parseSenderDetailsResponse;

package/v2Components/CommonTestAndPreview/SendTestMessage.js

@@ -8,6 +8,10 @@ import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
 import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
 import isEmpty from 'lodash/isEmpty';
 import messages from './messages';
+import DeliverySettings from './DeliverySettings';
+import { CHANNELS } from './constants';
+
+const CHANNELS_WITH_DELIVERY_SETTINGS = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];
 
 const SendTestMessage = ({
   isFetchingTestCustomers,
@@ -17,8 +21,16 @@ const SendTestMessage = ({
   selectedTestEntities,
   handleSendTestMessage,
   formData,
+  channel,
   isSendingTestMessage,
   formatMessage,
+  deliverySettings,
+  senderDetailsOptions,
+  wecrmAccounts,
+  onSaveDeliverySettings,
+  isLoadingSenderDetails,
+  smsTraiDltEnabled,
+  registeredSenderIds,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -43,6 +55,24 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
+            {CHANNELS_WITH_DELIVERY_SETTINGS.includes(channel) && (
+              <DeliverySettings
+                channel={channel}
+                deliverySettings={deliverySettings || {}}
+                senderDetailsOptions={senderDetailsOptions || []}
+                wecrmAccounts={wecrmAccounts || []}
+                onSaveDeliverySettings={onSaveDeliverySettings}
+                isLoadingSenderDetails={isLoadingSenderDetails}
+                formatMessage={formatMessage}
+                smsTraiDltEnabled={smsTraiDltEnabled}
+                registeredSenderIds={registeredSenderIds}
+                whatsappAccountFromForm={
+                  channel === CHANNELS.WHATSAPP && formData?.accountName
+                    ? { accountName: formData.accountName }
+                    : undefined
+                }
+              />
+            )}
             <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
@@ -60,9 +90,29 @@ SendTestMessage.propTypes = {
   handleTestEntitiesChange: PropTypes.func.isRequired,
   selectedTestEntities: PropTypes.array.isRequired,
   handleSendTestMessage: PropTypes.func.isRequired,
-  formData: PropTypes.object.isRequired,
+  formData: PropTypes.object,
+  channel: PropTypes.string,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
+  deliverySettings: PropTypes.object,
+  senderDetailsOptions: PropTypes.array,
+  wecrmAccounts: PropTypes.array,
+  onSaveDeliverySettings: PropTypes.func,
+  isLoadingSenderDetails: PropTypes.bool,
+  smsTraiDltEnabled: PropTypes.bool,
+  registeredSenderIds: PropTypes.array,
+};
+
+SendTestMessage.defaultProps = {
+  formData: undefined,
+  channel: undefined,
+  deliverySettings: {},
+  senderDetailsOptions: [],
+  wecrmAccounts: [],
+  onSaveDeliverySettings: undefined,
+  isLoadingSenderDetails: false,
+  smsTraiDltEnabled: false,
+  registeredSenderIds: [],
 };
 
 export default SendTestMessage;

package/v2Components/CommonTestAndPreview/actions.js

@@ -18,6 +18,8 @@ import {
   GET_PREFILLED_VALUES_REQUESTED,
   CLEAR_PREFILLED_VALUES,
   CLEAR_PREVIEW_ERRORS,
+  GET_SENDER_DETAILS_REQUESTED,
+  GET_WECRM_ACCOUNTS_REQUESTED,
 } from './constants';
 
 // ============================================
@@ -125,3 +127,21 @@ export const clearPrefilledValues = () => ({
 export const clearPreviewErrors = () => ({
   type: CLEAR_PREVIEW_ERRORS,
 });
+
+/**
+ * Request sender details for a channel (SMS, EMAIL, WHATSAPP) for delivery settings
+ * @param {Object} payload - { channel, orgUnitId }
+ */
+export const getSenderDetailsRequested = (payload) => ({
+  type: GET_SENDER_DETAILS_REQUESTED,
+  payload,
+});
+
+/**
+ * Request WeCRM accounts (e.g. for WhatsApp account dropdown)
+ * @param {Object} payload - { sourceName } e.g. { sourceName: 'WHATSAPP' }
+ */
+export const getWeCrmAccountsRequested = (payload) => ({
+  type: GET_WECRM_ACCOUNTS_REQUESTED,
+  payload,
+});

package/v2Components/CommonTestAndPreview/constants.js

@@ -55,6 +55,16 @@ export const CLEAR_SEARCH_RESULTS = 'app/CommonTestAndPreview/CLEAR_SEARCH_RESUL
 export const CLEAR_PREFILLED_VALUES = 'app/CommonTestAndPreview/CLEAR_PREFILLED_VALUES';
 export const CLEAR_PREVIEW_ERRORS = 'app/CommonTestAndPreview/CLEAR_PREVIEW_ERRORS';
 
+// Get Sender Details (delivery settings for Test and Preview)
+export const GET_SENDER_DETAILS_REQUESTED = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED';
+export const GET_SENDER_DETAILS_SUCCESS = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_SUCCESS';
+export const GET_SENDER_DETAILS_FAILURE = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_FAILURE';
+
+// Get WeCRM Accounts (WhatsApp account list)
+export const GET_WECRM_ACCOUNTS_REQUESTED = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_REQUESTED';
+export const GET_WECRM_ACCOUNTS_SUCCESS = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_SUCCESS';
+export const GET_WECRM_ACCOUNTS_FAILURE = 'app/CommonTestAndPreview/GET_WECRM_ACCOUNTS_FAILURE';
+
 // ============================================
 // CHANNEL CONSTANTS
 // ============================================
@@ -169,6 +179,11 @@ export const UNSUBSCRIBE_TAG_NAME = 'unsubscribe';
 export const IN_APP_CHANNEL_NAME = 'in-app';
 export const MOBILE_PUSH_CHANNEL_NAME = 'mobile push';
 export const CHANNEL = 'channel';
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const DYNAMIC_URL = 'DYNAMIC_URL';
+export const IMAGE = 'IMAGE';
+export const VIDEO = 'VIDEO';
+export const URL = 'URL';
 
 // Initial Payload Template (for reference)
 export const INITIAL_PAYLOAD = {