@capillarytech/creatives-library 8.0.292-alpha.0 → 8.0.293

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

@@ -0,0 +1,33 @@
+/**
+ * DeliverySettings — summary row + edit icon for Test and Preview (SMS, Email, WhatsApp).
+ */
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.delivery-settings {
+  &__heading-row {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__summary-row {
+    margin-bottom: $CAP_SPACE_04;
+  }
+
+  &__summary-inner {
+    align-items: center;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__summary-entry {
+    margin-right: $CAP_SPACE_18;
+  }
+
+  &__summary-key {
+    line-height: $CAP_SPACE_16;
+  }
+
+  &__edit-icon {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+  }
+}

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js

@@ -0,0 +1,422 @@
+/**
+ * ModifyDeliverySettings — CapSlideBox content for Test and Preview delivery settings.
+ * Channel-specific dropdowns (SMS: domain + sender number; Email: domain + sender + reply-to; WhatsApp: account + sender number).
+ * Reference: cap-campaigns-v2 ModifyDeliverySettings + SenderDetails (field layout and options shape).
+ */
+
+import React, {
+  useState, useCallback, useMemo, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+  CapRow,
+  CapHeader,
+  CapSelect,
+  CapButton,
+  CapSpin,
+  CapLabel,
+} from '@capillarytech/cap-ui-library';
+import { FormattedMessage } from 'react-intl';
+import get from 'lodash/get';
+import find from 'lodash/find';
+import cloneDeep from 'lodash/cloneDeep';
+import messages from './messages';
+import {
+  CHANNELS,
+  DEFAULT_DELIVERY_SETTINGS_BY_CHANNEL,
+  NO_OPTIONS_LABEL,
+  HEADER_SIZE_LABEL,
+  BUTTON_TYPE_PRIMARY,
+  ROW_KEY_PREFIX,
+  DELIVERY_SETTING_KEY_DOMAIN_ID,
+  DELIVERY_SETTING_KEY_DOMAIN_GATEWAY_MAP_ID,
+  DELIVERY_SETTING_KEY_GSM_SENDER_ID,
+  DELIVERY_SETTING_KEY_CDMA_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,
+} from './constants';
+import './ModifyDeliverySettings.scss';
+
+const findDefault = (array) => find(array, { default: true }) || (array && array[0]) || {};
+
+const ModifyDeliverySettings = (props) => {
+  const {
+    channel,
+    deliverySettings: initialSettings = {},
+    senderDetailsOptions = [],
+    wecrmAccounts = [],
+    onSaveDeliverySettings,
+    onClose,
+    isLoading,
+    formatMessage,
+    smsTraiDltEnabled,
+    registeredSenderIds = [],
+    whatsappAccountFromForm,
+  } = props;
+
+  const defaultForChannel = DEFAULT_DELIVERY_SETTINGS_BY_CHANNEL[channel] || {};
+  const [localSettings, setLocalSettings] = useState(() => ({
+    ...defaultForChannel,
+    ...initialSettings,
+  }));
+
+  const isWhatsappAccountLocked = channel === CHANNELS.WHATSAPP && !!whatsappAccountFromForm?.accountName;
+
+  useEffect(() => {
+    if (!isWhatsappAccountLocked || !whatsappAccountFromForm?.accountName) return;
+    const accountByName = (wecrmAccounts || []).find(
+      (a) => (a.name || '') === whatsappAccountFromForm.accountName,
+    );
+    const sourceAccountId = accountByName?.sourceAccountIdentifier;
+    if (!sourceAccountId) return;
+    setLocalSettings((prev) => {
+      if (prev[DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER] === sourceAccountId) return prev;
+      const next = cloneDeep(prev);
+      next[DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER] = sourceAccountId;
+      const domain = (senderDetailsOptions || []).find(
+        (d) => d.sourceAccountIdentifier === sourceAccountId,
+      );
+      const first = domain?.gsmSenders?.[0];
+      if (first?.value != null) {
+        next[DELIVERY_SETTING_KEY_SENDER_MOB_NUM] = first.value;
+      }
+      return next;
+    });
+  }, [
+    isWhatsappAccountLocked,
+    whatsappAccountFromForm?.accountName,
+    wecrmAccounts,
+    senderDetailsOptions,
+  ]);
+
+  const noOptionsLabel = formatMessage
+    ? formatMessage(messages.noOptions)
+    : NO_OPTIONS_LABEL;
+
+  const allDomainOptions = useMemo(
+    () => (senderDetailsOptions || []).map((d) => ({
+      label: d.domainName || d.domainId,
+      value: d.domainId,
+      ...d,
+    })),
+    [senderDetailsOptions],
+  );
+
+  const domainOptions = useMemo(() => {
+    if (!(channel === CHANNELS.SMS && smsTraiDltEnabled)) {
+      return allDomainOptions;
+    }
+
+    return allDomainOptions.filter((domain) => (domain.gsmSenders || []).some(
+      (gsmId) => registeredSenderIds.includes(gsmId.value),
+    ));
+  }, [allDomainOptions, channel, registeredSenderIds, smsTraiDltEnabled]);
+
+  const selectedDomain = useMemo(
+    () => (senderDetailsOptions || []).find(
+      (d) => d.domainId === get(localSettings, DELIVERY_SETTING_KEY_DOMAIN_ID),
+    ) || {},
+    [senderDetailsOptions, localSettings.domainId],
+  );
+
+  const gsmOptions = useMemo(
+    () => {
+      const smsGsmSenders = channel === CHANNELS.SMS && smsTraiDltEnabled
+        ? (selectedDomain.gsmSenders || []).filter((gsmId) => registeredSenderIds.includes(gsmId.value))
+        : (selectedDomain.gsmSenders || []);
+
+      return smsGsmSenders.map((o) => ({
+        label: o.value || o.label,
+        value: o.value,
+      }));
+    },
+    [channel, registeredSenderIds, selectedDomain.gsmSenders, smsTraiDltEnabled],
+  );
+
+  const emailSenderOptions = useMemo(
+    () => (selectedDomain.emailSenders || []).map((o) => ({
+      label: o.value || o.label,
+      value: o.value,
+      senderLabel: o.label,
+    })),
+    [selectedDomain.emailSenders],
+  );
+
+  const emailSenderIdOptions = useMemo(
+    () => (selectedDomain.emailSenders || []).map((o) => ({
+      label: o.label || o.value,
+      value: o.label || o.value,
+      senderEmail: o.value,
+    })),
+    [selectedDomain.emailSenders],
+  );
+
+  const emailReplyToOptions = useMemo(
+    () => (selectedDomain.emailRepliers || []).map((o) => ({
+      label: o.value || o.label,
+      value: o.value,
+    })),
+    [selectedDomain.emailRepliers],
+  );
+
+  const wecrmAccountOptions = useMemo(
+    () => (wecrmAccounts || []).map((a) => ({
+      label: a.name || a.sourceAccountIdentifier,
+      value: a.sourceAccountIdentifier,
+      ...a,
+    })),
+    [wecrmAccounts],
+  );
+
+  const whatsappAccountOptionsForDisplay = useMemo(() => {
+    if (!isWhatsappAccountLocked || !whatsappAccountFromForm?.accountName) return wecrmAccountOptions;
+    const name = whatsappAccountFromForm.accountName;
+    const match = wecrmAccountOptions.find(
+      (a) => (a.label === name || a.name === name),
+    );
+    if (match) return [match];
+    return [{ label: name, value: name }];
+  }, [isWhatsappAccountLocked, whatsappAccountFromForm?.accountName, wecrmAccountOptions]);
+
+  const whatsappSenderOptions = useMemo(() => {
+    const selectedAccId = get(localSettings, DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER);
+    if (!selectedAccId) {
+      return (senderDetailsOptions || []).flatMap((d) => (d.gsmSenders || []).map((o) => ({
+        label: o.value,
+        value: o.value,
+      })));
+    }
+    const domainForAccount = (senderDetailsOptions || []).find(
+      (d) => d.sourceAccountIdentifier === selectedAccId,
+    );
+    return (domainForAccount?.gsmSenders || []).map((o) => ({
+      label: o.value,
+      value: o.value,
+    }));
+  }, [senderDetailsOptions, localSettings.sourceAccountIdentifier]);
+
+  const updateSetting = useCallback((key, value) => {
+    setLocalSettings((prev) => {
+      const next = cloneDeep(prev);
+      next[key] = value;
+      return next;
+    });
+  }, []);
+
+  const onDomainChange = useCallback(
+    (value) => {
+      const domain = domainOptions.find((d) => d.value === value);
+      updateSetting(DELIVERY_SETTING_KEY_DOMAIN_ID, value);
+      if (domain?.dgmId != null) updateSetting(DELIVERY_SETTING_KEY_DOMAIN_GATEWAY_MAP_ID, domain.dgmId);
+      if (channel === CHANNELS.SMS && domain) {
+        const smsGsmSenders = smsTraiDltEnabled
+          ? (domain.gsmSenders || []).filter((gsmId) => registeredSenderIds.includes(gsmId.value))
+          : domain.gsmSenders;
+        const def = findDefault(smsGsmSenders);
+        updateSetting(DELIVERY_SETTING_KEY_GSM_SENDER_ID, def?.value || '');
+        const defCdma = findDefault(domain.cdmaSenders);
+        updateSetting(DELIVERY_SETTING_KEY_CDMA_SENDER_ID, defCdma?.value || '');
+      }
+      if (channel === CHANNELS.EMAIL && domain) {
+        const defSender = findDefault(domain.emailSenders);
+        const defReply = findDefault(domain.emailRepliers);
+        updateSetting(DELIVERY_SETTING_KEY_SENDER_EMAIL, defSender?.value || '');
+        updateSetting(DELIVERY_SETTING_KEY_SENDER_LABEL, defSender?.label || '');
+        updateSetting(DELIVERY_SETTING_KEY_SENDER_REPLY_TO, defReply?.value || '');
+      }
+    },
+    [channel, domainOptions, registeredSenderIds, smsTraiDltEnabled, updateSetting],
+  );
+
+  const handleDone = useCallback(() => {
+    onSaveDeliverySettings(localSettings);
+    if (onClose) onClose();
+  }, [localSettings, onSaveDeliverySettings, onClose]);
+
+  const renderSelectRow = useCallback(
+    ({
+      titleMessage, options, value, onChange, rowKey, disabled,
+    }) => (
+      <CapRow className="modify-delivery-settings__field-row" key={rowKey}>
+        <CapHeader
+          size={HEADER_SIZE_LABEL}
+          title={<FormattedMessage {...titleMessage} />}
+          className="modify-delivery-settings__field-header"
+        />
+        <CapSelect
+          options={options}
+          value={value}
+          onChange={onChange}
+          placeholder={noOptionsLabel}
+          componentClassName={`modify-delivery-settings__select${disabled ? ' modify-delivery-settings__select--disabled' : ''}`}
+          disabled={disabled}
+        />
+        {disabled && <CapLabel type="label3">{formatMessage(messages.disabledMessage)}</CapLabel>}
+      </CapRow>
+    ),
+    [noOptionsLabel],
+  );
+
+  const getChannelFields = useCallback(() => {
+    const smsFields = [
+      {
+        titleMessage: messages.senderDomainLabel,
+        options: domainOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_DOMAIN_ID),
+        onChange: (val) => onDomainChange(val),
+      },
+      {
+        titleMessage: messages.senderIdLabel,
+        options: gsmOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_GSM_SENDER_ID),
+        onChange: (val) => updateSetting(DELIVERY_SETTING_KEY_GSM_SENDER_ID, val),
+      },
+    ];
+    const emailFields = [
+      {
+        titleMessage: messages.emailDomainLabel,
+        options: domainOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_DOMAIN_ID),
+        onChange: (val) => onDomainChange(val),
+      },
+      {
+        titleMessage: messages.senderIdLabel,
+        options: emailSenderOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_SENDER_EMAIL),
+        onChange: (val) => {
+          const sender = (selectedDomain.emailSenders || []).find(
+            (s) => s.value === val,
+          );
+          updateSetting(DELIVERY_SETTING_KEY_SENDER_EMAIL, val);
+          updateSetting(DELIVERY_SETTING_KEY_SENDER_LABEL, sender?.label || val);
+        },
+      },
+      {
+        titleMessage: messages.senderNameLabelEmail,
+        options: emailSenderIdOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_SENDER_LABEL) || '',
+        onChange: (val) => {
+          const sender = (selectedDomain.emailSenders || []).find(
+            (s) => (s.label || s.value) === val,
+          );
+          if (sender) {
+            updateSetting(DELIVERY_SETTING_KEY_SENDER_EMAIL, sender.value);
+            updateSetting(DELIVERY_SETTING_KEY_SENDER_LABEL, sender.label || sender.value);
+          } else {
+            updateSetting(DELIVERY_SETTING_KEY_SENDER_LABEL, val);
+          }
+        },
+      },
+      {
+        titleMessage: messages.replyToIdLabel,
+        options: emailReplyToOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_SENDER_REPLY_TO),
+        onChange: (val) => updateSetting(DELIVERY_SETTING_KEY_SENDER_REPLY_TO, val),
+      },
+    ];
+    const whatsappAccountValue = isWhatsappAccountLocked && whatsappAccountOptionsForDisplay.length > 0
+      ? whatsappAccountOptionsForDisplay[0].value
+      : get(localSettings, DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER);
+    const whatsappFields = [
+      {
+        titleMessage: messages.accountLabel,
+        options: whatsappAccountOptionsForDisplay,
+        value: whatsappAccountValue,
+        onChange: (val) => {
+          updateSetting(DELIVERY_SETTING_KEY_SOURCE_ACCOUNT_IDENTIFIER, val);
+          const domain = (senderDetailsOptions || []).find(
+            (d) => d.sourceAccountIdentifier === val,
+          );
+          const first = domain?.gsmSenders?.[0];
+          updateSetting(DELIVERY_SETTING_KEY_SENDER_MOB_NUM, first?.value || '');
+        },
+        disabled: isWhatsappAccountLocked,
+      },
+      {
+        titleMessage: messages.senderNumberLabel,
+        options: whatsappSenderOptions,
+        value: get(localSettings, DELIVERY_SETTING_KEY_SENDER_MOB_NUM),
+        onChange: (val) => updateSetting(DELIVERY_SETTING_KEY_SENDER_MOB_NUM, val),
+      },
+    ];
+    const byChannel = {
+      [CHANNELS.SMS]: smsFields,
+      [CHANNELS.EMAIL]: emailFields,
+      [CHANNELS.WHATSAPP]: whatsappFields,
+    };
+    return byChannel[channel] || [];
+  }, [
+    channel,
+    domainOptions,
+    gsmOptions,
+    emailSenderOptions,
+    emailSenderIdOptions,
+    emailReplyToOptions,
+    wecrmAccountOptions,
+    whatsappAccountOptionsForDisplay,
+    whatsappSenderOptions,
+    localSettings,
+    selectedDomain.emailSenders,
+    senderDetailsOptions,
+    onDomainChange,
+    updateSetting,
+    isWhatsappAccountLocked,
+    whatsappAccountFromForm,
+  ]);
+
+  if (isLoading) {
+    return (
+      <CapRow className="modify-delivery-settings__loading-row">
+        <CapSpin spinning />
+      </CapRow>
+    );
+  }
+
+  return (
+    <div className="modify-delivery-settings">
+      {getChannelFields().map((field, idx) => renderSelectRow({
+        ...field,
+        rowKey: field.titleMessage?.id || `${ROW_KEY_PREFIX}${idx}`,
+        disabled: field.disabled,
+      }))}
+      <CapRow className="modify-delivery-settings__actions">
+        <CapButton type={BUTTON_TYPE_PRIMARY} onClick={handleDone}>
+          <FormattedMessage {...messages.done} />
+        </CapButton>
+      </CapRow>
+    </div>
+  );
+};
+
+ModifyDeliverySettings.propTypes = {
+  channel: PropTypes.oneOf([CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP]).isRequired,
+  deliverySettings: PropTypes.object,
+  senderDetailsOptions: PropTypes.array,
+  wecrmAccounts: PropTypes.array,
+  onSaveDeliverySettings: PropTypes.func.isRequired,
+  onClose: PropTypes.func,
+  isLoading: PropTypes.bool,
+  formatMessage: PropTypes.func,
+  smsTraiDltEnabled: PropTypes.bool,
+  registeredSenderIds: PropTypes.array,
+  whatsappAccountFromForm: PropTypes.shape({
+    accountName: PropTypes.string,
+  }),
+};
+
+ModifyDeliverySettings.defaultProps = {
+  deliverySettings: {},
+  senderDetailsOptions: [],
+  wecrmAccounts: [],
+  onClose: undefined,
+  isLoading: false,
+  formatMessage: undefined,
+  smsTraiDltEnabled: false,
+  registeredSenderIds: [],
+  whatsappAccountFromForm: undefined,
+};
+
+export default ModifyDeliverySettings;

package/v2Components/CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.scss

@@ -0,0 +1,35 @@
+/**
+ * ModifyDeliverySettings — styles for delivery settings form (SMS, Email, WhatsApp).
+ * Field rows, select width, and actions row.
+ */
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.modify-delivery-settings {
+  &__field-row {
+    margin-bottom: $CAP_SPACE_24;
+  }
+
+  &__field-header {
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  &__select {
+    width: 22.85rem;
+
+    &--disabled {
+      background-color: #ebecf0;
+      pointer-events: none;
+    }
+  }
+
+  &__actions {
+    margin-top: $CAP_SPACE_24;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: $CAP_SPACE_16;
+  }
+
+  &__loading-row {
+    display: block;
+  }
+}