@capillarytech/creatives-library 8.0.290-alpha.4 → 8.0.290

package/v2Components/CommonTestAndPreview/index.js

@@ -105,6 +105,10 @@ const CommonTestAndPreview = (props) => {
     updatePreviewErrors,
     fetchPrefilledValuesError,
     fetchPrefilledValuesErrors,
+    senderDetailsByChannel = {},
+    wecrmAccounts = [],
+    isLoadingSenderDetails = false,
+    orgUnitId = -1,
     // Email-specific props
     beeInstance,
     currentTab = 1,
@@ -146,6 +150,84 @@ const CommonTestAndPreview = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately (EMAIL only)
   const previousBeeContentRef = useRef(''); // Track previous BEE content (EMAIL only)
+  // Delivery settings for Test and Preview (SMS, Email, WhatsApp) — user selection only
+  const [testPreviewDeliverySettings, setTestPreviewDeliverySettings] = useState({
+    [CHANNELS.SMS]: {
+      domainId: null, domainGatewayMapId: null, gsmSenderId: '', cdmaSenderId: '',
+    },
+    [CHANNELS.EMAIL]: {
+      domainId: null, domainGatewayMapId: null, senderEmail: '', senderLabel: '', senderReplyTo: '',
+    },
+    [CHANNELS.WHATSAPP]: {
+      domainId: null, senderMobNum: '', sourceAccountIdentifier: '',
+    },
+  });
+
+  const channelsWithDeliverySettings = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP];
+
+  // Fetch sender details and WeCRM accounts when Test & Preview opens for SMS/Email/WhatsApp
+  useEffect(() => {
+    if (!show || !channel) {
+      return;
+    }
+    if (channelsWithDeliverySettings.includes(channel)) {
+      if (actions.getSenderDetailsRequested) {
+        actions.getSenderDetailsRequested({ channel, orgUnitId: orgUnitId ?? -1 });
+      }
+      if (channel === CHANNELS.WHATSAPP && actions.getWeCrmAccountsRequested) {
+        actions.getWeCrmAccountsRequested({ sourceName: CHANNELS.WHATSAPP });
+      }
+    }
+  }, [show, channel, orgUnitId, actions]);
+
+  const findDefault = (arr) => (arr && arr.find((x) => x.default)) || (arr && arr[0]) || {};
+
+  // Auto-set default delivery setting when sender details load (campaigns-style: first domain + default/first sender)
+  useEffect(() => {
+    if (!channel || !channelsWithDeliverySettings.includes(channel)) return;
+    const domains = senderDetailsByChannel[channel];
+    if (!domains || domains.length === 0) return;
+    const current = testPreviewDeliverySettings[channel];
+    const isEmptySelection = !current?.domainId && !current?.gsmSenderId && !current?.senderEmail && !current?.senderMobNum;
+    if (!isEmptySelection) return;
+
+    const whatsappAccountFromForm = channel === CHANNELS.WHATSAPP ? formData?.accountName : undefined;
+    const matchedWhatsappAccount = whatsappAccountFromForm
+      ? (wecrmAccounts || []).find((account) => account?.name === whatsappAccountFromForm)
+      : null;
+    const firstDomain = channel === CHANNELS.WHATSAPP && matchedWhatsappAccount?.sourceAccountIdentifier
+      ? domains.find((domain) => domain?.sourceAccountIdentifier === matchedWhatsappAccount.sourceAccountIdentifier) || domains[0]
+      : domains[0];
+    setTestPreviewDeliverySettings((prev) => {
+      const next = { ...prev };
+      if (channel === CHANNELS.SMS) {
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          domainGatewayMapId: firstDomain.dgmId,
+          gsmSenderId: findDefault(firstDomain.gsmSenders)?.value || firstDomain.gsmSenders?.[0]?.value || '',
+          cdmaSenderId: findDefault(firstDomain.cdmaSenders)?.value || '',
+        };
+      } else if (channel === CHANNELS.EMAIL) {
+        const defSender = findDefault(firstDomain.emailSenders);
+        const defReply = findDefault(firstDomain.emailRepliers);
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          domainGatewayMapId: firstDomain.dgmId,
+          senderEmail: defSender?.value || '',
+          senderLabel: defSender?.label || '',
+          senderReplyTo: defReply?.value || '',
+        };
+      } else if (channel === CHANNELS.WHATSAPP) {
+        const accId = firstDomain.sourceAccountIdentifier;
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          senderMobNum: firstDomain.gsmSenders?.[0]?.value || '',
+          sourceAccountIdentifier: matchedWhatsappAccount?.sourceAccountIdentifier || accId || '',
+        };
+      }
+      return next;
+    });
+  }, [channel, formData?.accountName, senderDetailsByChannel, wecrmAccounts]);
 
   // ============================================
   // MEMOIZED VALUES
@@ -442,7 +524,7 @@ const CommonTestAndPreview = (props) => {
    * Prepare payload for test message sending based on channel
    * Updated to match API structure with ouId, sourceEntityId, module, deliverySettings, etc.
    */
-  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj) => {
+  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride) => {
     // Base payload structure common to all channels
     const basePayload = {
       ouId: -1,
@@ -468,6 +550,14 @@ const CommonTestAndPreview = (props) => {
           ? resolveTagsInText(subject, customValuesObj)
           : subject;
 
+        const emailChannelSettings = {
+          channel: CHANNELS.EMAIL,
+          senderLabel: deliverySettingsOverride?.senderLabel ?? '',
+          senderId: deliverySettingsOverride?.senderEmail ?? '',
+          replyToId: deliverySettingsOverride?.senderReplyTo ?? '',
+          domainGatewayMapId: deliverySettingsOverride?.domainGatewayMapId ?? '',
+          domainId: deliverySettingsOverride?.domainId ?? '',
+        };
         return {
           ...basePayload,
           emailDeliverySettings: {
@@ -478,12 +568,7 @@ const CommonTestAndPreview = (props) => {
               skipRateLimit: false,
               bypassControlUser: false,
             },
-            channelSettings: {
-              channel: CHANNELS.EMAIL,
-              senderLabel: '',
-              senderId: '',
-              replyToId: '',
-            },
+            channelSettings: emailChannelSettings,
           },
           emailMessageContent: {
             channel: CHANNELS.EMAIL,
@@ -520,8 +605,12 @@ const CommonTestAndPreview = (props) => {
           },
           smsDeliverySettings: {
             channelSettings: {
-              gsmSenderId: '',
-              domainId: null,
+              gsmSenderId: deliverySettingsOverride?.gsmSenderId ?? '',
+              domainId: deliverySettingsOverride?.domainId ?? null,
+              domainGatewayMapId: deliverySettingsOverride?.domainGatewayMapId ?? '',
+              targetNdnc: false,
+              cdmaSenderId: deliverySettingsOverride?.cdmaSenderId ?? '',
+              channel: CHANNELS.SMS,
             },
             additionalSettings: {
               useTinyUrl: false,
@@ -657,16 +746,17 @@ const CommonTestAndPreview = (props) => {
           templateConfigs.mediaType = formDataObj?.carouselMediaType?.toUpperCase() || MEDIA_TYPE_IMAGE;
         }
 
-        // Extract delivery settings
-        const senderMobNum = formDataObj?.senderMobNum || additionalProps?.senderMobNum || '';
-        const domainId = formDataObj?.domainId || additionalProps?.domainId || null;
+        // Extract delivery settings (override from Test & Preview delivery settings when present)
+        const senderMobNum = deliverySettingsOverride?.senderMobNum ?? formDataObj?.senderMobNum ?? additionalProps?.senderMobNum ?? '';
+        const domainId = deliverySettingsOverride?.domainId ?? formDataObj?.domainId ?? additionalProps?.domainId ?? null;
+        const sourceAccountIdentifier = deliverySettingsOverride?.sourceAccountIdentifier ?? formDataObj?.sourceAccountIdentifier ?? '';
 
         return {
           ...basePayload,
           whatsappMessageContent: {
             messageBody: templateEditorValue || '',
             accountId: formDataObj?.accountId || '',
-            sourceAccountIdentifier: formDataObj?.sourceAccountIdentifier || '',
+            sourceAccountIdentifier: sourceAccountIdentifier || formDataObj?.sourceAccountIdentifier || '',
             accountName: formDataObj?.accountName || '',
             templateConfigs,
             channel: CHANNELS.WHATSAPP,
@@ -2370,6 +2460,10 @@ const CommonTestAndPreview = (props) => {
     });
     const uniqueUserIds = [...new Set(allUserIds)];
 
+    const deliveryOverride = [CHANNELS.SMS, CHANNELS.EMAIL, CHANNELS.WHATSAPP].includes(channel)
+      ? testPreviewDeliverySettings[channel]
+      : null;
+
     // Create initial payload based on channel
     const initialPayload = prepareTestMessagePayload(
       channel,
@@ -2377,7 +2471,8 @@ const CommonTestAndPreview = (props) => {
       getCurrentContent,
       customValues,
       uniqueUserIds,
-      previewData
+      previewData,
+      deliveryOverride
     );
 
     actions.createMessageMetaRequested(
@@ -2449,6 +2544,16 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
+  const handleSaveDeliverySettings = (values) => {
+    setTestPreviewDeliverySettings((prev) => ({
+      ...prev,
+      [channel]: values,
+    }));
+  };
+
+  // Use formData when present; for WhatsApp (and others) parent may pass template via content only
+  const formDataForSendTest = formData ?? (content && typeof content === 'object' && !Array.isArray(content) ? content : formData);
+
   const renderSendTestMessage = () => (
     <SendTestMessage
       isFetchingTestCustomers={isFetchingTestCustomers}
@@ -2457,11 +2562,16 @@ const CommonTestAndPreview = (props) => {
       handleTestEntitiesChange={handleTestEntitiesChange}
       selectedTestEntities={selectedTestEntities}
       handleSendTestMessage={handleSendTestMessage}
-      formData={formData}
+      formData={formDataForSendTest}
       content={getCurrentContent}
       channel={channel}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
+      deliverySettings={testPreviewDeliverySettings[channel]}
+      senderDetailsOptions={senderDetailsByChannel[channel]}
+      wecrmAccounts={wecrmAccounts}
+      onSaveDeliverySettings={handleSaveDeliverySettings}
+      isLoadingSenderDetails={isLoadingSenderDetails}
     />
   );
 
@@ -2562,6 +2672,10 @@ CommonTestAndPreview.propTypes = {
   })),
   isSendingTestMessage: PropTypes.bool.isRequired,
   intl: PropTypes.object.isRequired,
+  senderDetailsByChannel: PropTypes.object,
+  wecrmAccounts: PropTypes.array,
+  isLoadingSenderDetails: PropTypes.bool,
+  orgUnitId: PropTypes.number,
 
   // Email-specific props
   beeInstance: PropTypes.object,
@@ -2597,6 +2711,10 @@ CommonTestAndPreview.defaultProps = {
   rcsOrientation: null,
   rcsIosPreview: false,
   templateLayoutType: null,
+  senderDetailsByChannel: {},
+  wecrmAccounts: [],
+  isLoadingSenderDetails: false,
+  orgUnitId: -1,
 };
 
 // ============================================

package/v2Components/CommonTestAndPreview/reducer.js

@@ -31,6 +31,13 @@ import {
   GET_PREFILLED_VALUES_FAILURE,
   CLEAR_PREFILLED_VALUES,
   CLEAR_PREVIEW_ERRORS,
+  GET_SENDER_DETAILS_REQUESTED,
+  GET_SENDER_DETAILS_SUCCESS,
+  GET_SENDER_DETAILS_FAILURE,
+  GET_WECRM_ACCOUNTS_REQUESTED,
+  GET_WECRM_ACCOUNTS_SUCCESS,
+  GET_WECRM_ACCOUNTS_FAILURE,
+  CHANNELS,
 } from './constants';
 
 const initialState = fromJS({
@@ -85,6 +92,16 @@ const initialState = fromJS({
   isFetchingPrefilledValues: false,
   fetchPrefilledValuesError: null,
   fetchPrefilledValuesErrors: [],
+
+  senderDetailsByChannel: fromJS({
+    [CHANNELS.SMS]: [],
+    [CHANNELS.EMAIL]: [],
+    [CHANNELS.WHATSAPP]: [],
+  }),
+  wecrmAccounts: fromJS([]),
+  isLoadingSenderDetails: false,
+  fetchSenderDetailsError: null,
+  fetchWeCrmAccountsError: null,
 });
 
 const previewAndTestReducer = (state = initialState, action) => {
@@ -250,6 +267,36 @@ const previewAndTestReducer = (state = initialState, action) => {
         .set('fetchPrefilledValuesError', null)
         .set('fetchPrefilledValuesErrors', fromJS([]));
 
+    case GET_SENDER_DETAILS_REQUESTED:
+      return state
+        .set('isLoadingSenderDetails', true)
+        .set('fetchSenderDetailsError', null);
+
+    case GET_SENDER_DETAILS_SUCCESS: {
+      const { channel, domains } = action.payload || {};
+      if (!channel) return state;
+      return state
+        .setIn(['senderDetailsByChannel', channel], fromJS(domains || []))
+        .set('isLoadingSenderDetails', false)
+        .set('fetchSenderDetailsError', null);
+    }
+
+    case GET_SENDER_DETAILS_FAILURE:
+      return state
+        .set('isLoadingSenderDetails', false)
+        .set('fetchSenderDetailsError', action.payload?.error ?? action.payload);
+
+    case GET_WECRM_ACCOUNTS_REQUESTED:
+      return state.set('fetchWeCrmAccountsError', null);
+
+    case GET_WECRM_ACCOUNTS_SUCCESS:
+      return state
+        .set('wecrmAccounts', fromJS(action.payload?.accounts || []))
+        .set('fetchWeCrmAccountsError', null);
+
+    case GET_WECRM_ACCOUNTS_FAILURE:
+      return state.set('fetchWeCrmAccountsError', action.payload?.error ?? action.payload);
+
     default:
       return state;
   }

package/v2Components/CommonTestAndPreview/sagas.js

@@ -35,8 +35,15 @@ import {
   GET_PREFILLED_VALUES_REQUESTED,
   GET_PREFILLED_VALUES_SUCCESS,
   GET_PREFILLED_VALUES_FAILURE,
+  GET_SENDER_DETAILS_REQUESTED,
+  GET_SENDER_DETAILS_SUCCESS,
+  GET_SENDER_DETAILS_FAILURE,
+  GET_WECRM_ACCOUNTS_REQUESTED,
+  GET_WECRM_ACCOUNTS_SUCCESS,
+  GET_WECRM_ACCOUNTS_FAILURE,
   ERROR_MESSAGES,
 } from './constants';
+import { parseSenderDetailsResponse } from './DeliverySettings/utils/parseSenderDetailsResponse';
 
 // Search Customers Saga
 export function* searchCustomersSaga(action) {
@@ -285,6 +292,57 @@ export function* watchGetPrefilledValues() {
   yield takeLatest(GET_PREFILLED_VALUES_REQUESTED, getPrefilledValuesSaga);
 }
 
+export function* getSenderDetailsSaga(action) {
+  const { channel, orgUnitId } = action.payload || {};
+  if (!channel) return;
+  try {
+    const response = yield call(Api.getSenderDetails, channel, orgUnitId ?? -1);
+    if (response?.errors?.length) {
+      yield put({
+        type: GET_SENDER_DETAILS_FAILURE,
+        payload: { channel, error: response.errors },
+      });
+      return;
+    }
+    const parsed = parseSenderDetailsResponse(channel, response);
+    yield put({
+      type: GET_SENDER_DETAILS_SUCCESS,
+      payload: { channel, domains: parsed.domains || [] },
+    });
+  } catch (error) {
+    yield put({
+      type: GET_SENDER_DETAILS_FAILURE,
+      payload: { channel, error: error.message || error },
+    });
+  }
+}
+
+export function* getWeCrmAccountsSaga(action) {
+  const { sourceName } = action.payload || {};
+  try {
+    const result = yield call(Api.fetchWeCrmAccounts, sourceName || 'WHATSAPP');
+    const accounts = get(result, 'response') || get(result, 'entity') || (result?.success ? result.response : null) || [];
+    const list = Array.isArray(accounts) ? accounts : (accounts && accounts.data) || [];
+    yield put({
+      type: GET_WECRM_ACCOUNTS_SUCCESS,
+      payload: { accounts: list },
+    });
+  } catch (error) {
+    yield put({
+      type: GET_WECRM_ACCOUNTS_FAILURE,
+      payload: { error: error.message || error },
+    });
+  }
+}
+
+export function* watchGetSenderDetails() {
+  yield takeLatest(GET_SENDER_DETAILS_REQUESTED, getSenderDetailsSaga);
+}
+
+export function* watchGetWeCrmAccounts() {
+  yield takeLatest(GET_WECRM_ACCOUNTS_REQUESTED, getWeCrmAccountsSaga);
+}
+
 // Root saga
 export function* commonTestAndPreviewSaga() {
   yield all([
@@ -296,5 +354,7 @@ export function* commonTestAndPreviewSaga() {
     watchFetchTestGroups(),
     watchCreateMessageMeta(),
     watchGetPrefilledValues(),
+    watchGetSenderDetails(),
+    watchGetWeCrmAccounts(),
   ]);
 }

package/v2Components/CommonTestAndPreview/selectors.js

@@ -144,6 +144,51 @@ const makeSelectFetchPrefilledValuesErrors = () => createSelector(
   (substate) => substate.get('fetchPrefilledValuesErrors')?.toJS() || [],
 );
 
+const makeSelectSenderDetailsForChannel = (channel) => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => {
+    if (!substate) return [];
+    const byChannel = substate.get('senderDetailsByChannel');
+    if (!byChannel) return [];
+    const list = byChannel.get(channel);
+    return list ? list.toJS() : [];
+  },
+);
+
+const makeSelectSenderDetailsByChannel = () => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => {
+    if (!substate) return {};
+    const byChannel = substate.get('senderDetailsByChannel');
+    if (!byChannel) return {};
+    return byChannel.toJS ? byChannel.toJS() : {};
+  },
+);
+
+const makeSelectWeCrmAccounts = () => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => {
+    if (!substate) return [];
+    const list = substate.get('wecrmAccounts');
+    return list ? list.toJS() : [];
+  },
+);
+
+const makeSelectIsLoadingSenderDetails = () => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => substate.get('isLoadingSenderDetails') || false,
+);
+
+const makeSelectFetchSenderDetailsError = () => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => substate.get('fetchSenderDetailsError'),
+);
+
+const makeSelectFetchWeCrmAccountsError = () => createSelector(
+  selectCommonTestAndPreviewDomain,
+  (substate) => substate.get('fetchWeCrmAccountsError'),
+);
+
 export {
   makeSelectCommonTestAndPreview,
   makeSelectCustomers,
@@ -171,4 +216,10 @@ export {
   makeSelectUpdatePreviewErrors,
   makeSelectFetchPrefilledValuesError,
   makeSelectFetchPrefilledValuesErrors,
+  makeSelectSenderDetailsForChannel,
+  makeSelectSenderDetailsByChannel,
+  makeSelectWeCrmAccounts,
+  makeSelectIsLoadingSenderDetails,
+  makeSelectFetchSenderDetailsError,
+  makeSelectFetchWeCrmAccountsError,
 };