@capillarytech/creatives-library 8.0.293 → 8.0.295

package/v2Components/CommonTestAndPreview/DeliverySettings/DeliverySettings.scss

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,422 +0,0 @@
-/**
- * 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

@@ -1,35 +0,0 @@
-/**
- * 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;
-  }
-}