@capillarytech/creatives-library 8.0.295 → 8.0.297

package/v2Components/CommonTestAndPreview/index.js

@@ -65,6 +65,11 @@ import {
   IN_APP_CHANNEL_NAME,
   MOBILE_PUSH_CHANNEL_NAME,
   CHANNEL,
+  PHONE_NUMBER,
+  DYNAMIC_URL,
+  IMAGE,
+  VIDEO,
+  URL,
 } from './constants';
 
 // Import utilities
@@ -105,6 +110,10 @@ const CommonTestAndPreview = (props) => {
     updatePreviewErrors,
     fetchPrefilledValuesError,
     fetchPrefilledValuesErrors,
+    senderDetailsByChannel = {},
+    wecrmAccounts = [],
+    isLoadingSenderDetails = false,
+    orgUnitId = -1,
     // Email-specific props
     beeInstance,
     currentTab = 1,
@@ -146,6 +155,102 @@ 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];
+  const formDataForSendTest = formData ?? (content && typeof content === 'object' && !Array.isArray(content) ? content : formData);
+  const smsTemplateConfigs = formDataForSendTest?.templateConfigs || {};
+  const smsTraiDltEnabled = !!smsTemplateConfigs?.traiDltEnabled;
+  const registeredSenderIds = smsTemplateConfigs?.registeredSenderIds || [];
+
+  // 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 {
+      domainId = '', gsmSenderId = '', senderEmail = '', senderMobNum = '',
+    } = testPreviewDeliverySettings[channel] || {};
+    const isEmptySelection = !domainId && !gsmSenderId && !senderEmail && !senderMobNum;
+    if (!isEmptySelection) return;
+
+    const whatsappAccountFromForm = channel === CHANNELS.WHATSAPP ? formData?.accountName : undefined;
+    const matchedWhatsappAccount = whatsappAccountFromForm
+      ? (wecrmAccounts || []).find((account) => account?.name === whatsappAccountFromForm)
+      : null;
+    const smsDomains = channel === CHANNELS.SMS && smsTraiDltEnabled
+      ? domains.filter((domain) => (domain.gsmSenders || []).some((gsm) => registeredSenderIds.includes(gsm.value)))
+      : domains;
+    const [defaultDomain] = domains;
+    const [firstSmsDomain] = smsDomains;
+    let firstDomain = defaultDomain;
+    if (channel === CHANNELS.WHATSAPP && matchedWhatsappAccount?.sourceAccountIdentifier) {
+      firstDomain = domains.find((domain) => domain?.sourceAccountIdentifier === matchedWhatsappAccount.sourceAccountIdentifier) || defaultDomain;
+    } else if (channel === CHANNELS.SMS) {
+      firstDomain = firstSmsDomain;
+    }
+    if (!firstDomain) return;
+    setTestPreviewDeliverySettings((prev) => {
+      const next = { ...prev };
+      if (channel === CHANNELS.SMS) {
+        const smsGsmSenders = smsTraiDltEnabled
+          ? (firstDomain.gsmSenders || []).filter((gsm) => registeredSenderIds.includes(gsm.value))
+          : firstDomain.gsmSenders;
+        next[channel] = {
+          domainId: firstDomain.domainId,
+          domainGatewayMapId: firstDomain.dgmId,
+          gsmSenderId: findDefault(smsGsmSenders)?.value || smsGsmSenders?.[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, smsTraiDltEnabled, registeredSenderIds, wecrmAccounts]);
 
   // ============================================
   // MEMOIZED VALUES
@@ -442,7 +547,51 @@ 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 getCarouselMappedData = (carouselData = []) => carouselData.map((carousel) => {
+    const {
+      bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate,
+    } = carousel || {};
+    const buttonData = buttons.map((button, index) => {
+      const {
+        type, text, phone_number, urlType, url,
+      } = button || {};
+      const buttonObj = {
+        type,
+        text,
+        index,
+      };
+      if (type === PHONE_NUMBER) {
+        buttonObj.phoneNumber = phone_number;
+      }
+      if (type === URL) {
+        buttonObj.url = url;
+        if (urlType === DYNAMIC_URL) {
+          const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+          buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+        }
+      }
+      return buttonObj;
+    });
+    return {
+      body: bodyText,
+      cardVarMapped,
+      bodyTemplate,
+      media: {
+        ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+          url: imageUrl,
+        }),
+        ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+          url: videoUrl,
+          previewUrl: videoPreviewImg,
+        }),
+      },
+      buttons: buttonData,
+      mediaType: mediaType?.toUpperCase(),
+    };
+  });
+
+  const prepareTestMessagePayload = (channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride) => {
     // Base payload structure common to all channels
     const basePayload = {
       ouId: -1,
@@ -468,6 +617,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 +635,7 @@ const CommonTestAndPreview = (props) => {
               skipRateLimit: false,
               bypassControlUser: false,
             },
-            channelSettings: {
-              channel: CHANNELS.EMAIL,
-              senderLabel: '',
-              senderId: '',
-              replyToId: '',
-            },
+            channelSettings: emailChannelSettings,
           },
           emailMessageContent: {
             channel: CHANNELS.EMAIL,
@@ -520,8 +672,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,
@@ -653,20 +809,21 @@ const CommonTestAndPreview = (props) => {
 
         // Add carousel data if mediaType is CAROUSEL
         if (mediaType === MEDIA_TYPE_CAROUSEL && formDataObj?.carouselData) {
-          templateConfigs.cards = formDataObj.carouselData;
+          templateConfigs.cards = getCarouselMappedData(formDataObj.carouselData);
           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 +2527,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 +2538,8 @@ const CommonTestAndPreview = (props) => {
       getCurrentContent,
       customValues,
       uniqueUserIds,
-      previewData
+      previewData,
+      deliveryOverride
     );
 
     actions.createMessageMetaRequested(
@@ -2449,6 +2611,13 @@ const CommonTestAndPreview = (props) => {
     />
   );
 
+  const handleSaveDeliverySettings = (values) => {
+    setTestPreviewDeliverySettings((prev) => ({
+      ...prev,
+      [channel]: values,
+    }));
+  };
+
   const renderSendTestMessage = () => (
     <SendTestMessage
       isFetchingTestCustomers={isFetchingTestCustomers}
@@ -2457,11 +2626,18 @@ 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}
+      smsTraiDltEnabled={smsTraiDltEnabled}
+      registeredSenderIds={registeredSenderIds}
     />
   );
 
@@ -2562,6 +2738,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 +2777,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,16 @@ 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,
+  CHANNELS,
 } from './constants';
+import { parseSenderDetailsResponse } from './DeliverySettings/utils/parseSenderDetailsResponse';
 
 // Search Customers Saga
 export function* searchCustomersSaga(action) {
@@ -285,6 +293,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 || CHANNELS.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 +355,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,
 };