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

package/v2Components/CommonTestAndPreview/DeliverySettings/TECH_DETAILING_DELIVERY_SETTINGS.md

@@ -0,0 +1,725 @@
+# Technical Detailing: Delivery Settings & Sender ID Support in Test and Preview
+
+**Scope:** cap-creatives-ui — CommonTestAndPreview (SMS, Email, WhatsApp only)  
+**Reference:** cap-campaigns-v2 DeliverySettingsV2 & ModifyDeliverySettings (design/UX only; no cross-repo imports)  
+**Status:** Planning — Implementation not started
+
+---
+
+## 1. Overview
+
+### 1.1 Goal
+Replace dummy delivery settings in the Test and Preview flow with **selectable** delivery settings and sender IDs for **SMS**, **Email**, and **WhatsApp**, so that when a user sends a test message, the payload uses the chosen domain/account and sender (e.g. GSM sender, email sender, reply-to, WhatsApp sender number).
+
+### 1.2 Current vs Target
+| Aspect | Current | Target |
+|--------|--------|--------|
+| Delivery settings in payload | Hardcoded empty/default in `prepareTestMessagePayload` | Populated from user selection in Delivery Settings UI |
+| UI | No delivery settings block in Send Test Message | Summary line + edit (pencil) → **CapSlideBox** (cap-ui-library) with channel-specific fields |
+| APIs | Not used for test flow | `getSenderDetails(channel, orgUnitId)` and (for WhatsApp) `fetchWeCrmAccounts(sourceName)` — **called via Redux (actions + redux-saga)** using existing CommonTestAndPreview `actions.js`, `sagas.js`, `reducer.js`, `selectors.js` |
+
+### 1.3 Out of Scope
+- RCS, Viber, Zalo, InApp, MobilePush, etc. (only SMS, Email, WhatsApp).
+- Campaigns repo: no imports from cap-campaigns-v2; reference for UI/UX and field names only.
+
+---
+
+## 2. Architecture Decisions
+
+### 2.1 State Ownership (Redux + Local)
+- **API-derived data (sender details, WeCRM accounts) lives in Redux** — using the existing CommonTestAndPreview slice: `actions.js`, `sagas.js`, `reducer.js`, `selectors.js`. The two APIs **getSenderDetails** and **fetchWeCrmAccounts** are called via **Redux actions and redux-saga** (not directly from the component).
+- **User-selected delivery settings** (the values the user picks in the Delivery Settings **CapSlideBox**) live in **local component state** in CommonTestAndPreview (`index.js`), e.g. `testPreviewDeliverySettings`. This state feeds the Delivery Settings summary, the modal’s initial selection, and `prepareTestMessagePayload` when building the test message payload.
+- **Summary:** Redux holds sender-details options and WeCRM accounts (and loading/error); component holds only the current channel’s selected delivery settings and dispatches actions to fetch options.
+
+### 2.2 Redux Usage (Existing Files)
+- **Constants** (`CommonTestAndPreview/constants.js`): Add new action types for Get Sender Details and Get WeCRM Accounts (REQUESTED, SUCCESS, FAILURE each).
+- **Actions** (`CommonTestAndPreview/actions.js`): Add `getSenderDetailsRequested({ channel, orgUnitId })` and `getWeCrmAccountsRequested({ sourceName })`. These are dispatched by CommonTestAndPreview (e.g. in `useEffect` when Test & Preview opens for SMS/Email/WhatsApp).
+- **Sagas** (`CommonTestAndPreview/sagas.js`): Add saga workers that call `Api.getSenderDetails(channel, orgUnitId)` and `Api.fetchWeCrmAccounts(sourceName)`; parse response (using DeliverySettings parser utility); then `put` SUCCESS with normalized data or FAILURE with error. Register watchers and include them in `commonTestAndPreviewSaga()`.
+- **Reducer** (`CommonTestAndPreview/reducer.js`): Add initial state for `senderDetailsByChannel` (e.g. `{ SMS: [], EMAIL: [], WHATSAPP: [] }`), `wecrmAccounts: []`, `isLoadingSenderDetails: false`, `fetchSenderDetailsError: null`, `fetchWeCrmAccountsError: null`. Handle GET_SENDER_DETAILS_* and GET_WECRM_ACCOUNTS_* actions (store parsed data, set loading/error).
+- **Selectors** (`CommonTestAndPreview/selectors.js`): Add `makeSelectSenderDetailsForChannel(channel)`, `makeSelectWeCrmAccounts()`, `makeSelectIsLoadingSenderDetails()`, `makeSelectFetchSenderDetailsError()`, `makeSelectFetchWeCrmAccountsError()`. Export them.
+- **TestAndPreviewSlidebox** (wrapper): Already connects Redux to CommonTestAndPreview via `mapStateToProps` and `mapDispatchToProps`. Extend `mapStateToProps` to pass the new selectors’ values (e.g. `senderDetailsForChannel`, `wecrmAccounts`, `isLoadingSenderDetails`). Extend `mapDispatchToProps` so `actions` includes `getSenderDetailsRequested` and `getWeCrmAccountsRequested`. CommonTestAndPreview receives these as props and uses them instead of calling APIs directly.
+
+### 2.4 UI Library — cap-ui-library Only
+- **All implementation must use common components from `@capillarytech/cap-ui-library`.** No custom modal or generic HTML form elements for the delivery settings flow.
+- **Delivery settings panel (edit view):** Use **CapSlideBox** from cap-ui-library. When the user clicks the pencil icon, open a **CapSlideBox** (not CapModal) with header “Delivery settings”, close (X), channel-specific form content, and Done button. This matches the slidebox pattern used elsewhere in the app (e.g. Test and Preview itself).
+- **Other UI:** Use cap-ui-library components throughout — e.g. CapRow, CapColumn, CapHeader, CapLabel, CapSelect / CapCustomSelect, CapButton, CapIcon, CapSlideBox, etc. Reuse existing CommonTestAndPreview and creatives patterns that already rely on cap-ui-library.
+
+### 2.5 New Folder and Components
+- **New folder:** `app/v2Components/CommonTestAndPreview/DeliverySettings/`
+- **Components:**
+  - **DeliverySettings** (or **TestPreviewDeliverySettings**): Summary line + edit icon (CapIcon); on edit, opens **CapSlideBox** (from cap-ui-library).
+  - **ModifyDeliverySettings** (or **DeliverySettingsSlideBox**): **CapSlideBox** with header “Delivery settings”, X to close, channel-specific fields and Done. All form controls (dropdowns, buttons) from cap-ui-library.
+- **Data flow:** CommonTestAndPreview holds **local state** `testPreviewDeliverySettings` (user’s selection); **Redux** holds sender-details options and WeCRM accounts. Component dispatches `getSenderDetailsRequested` / `getWeCrmAccountsRequested` when Test & Preview opens; reads options from Redux via selectors (passed as props from TestAndPreviewSlidebox); passes options and callbacks to DeliverySettings → ModifyDeliverySettings.
+
+### 2.6 API Usage (Called from Saga Only)
+- **getSenderDetails(channel, orgUnitId)** — `app/services/api.js`  
+  - Called **per channel** (SMS, EMAIL, WHATSAPP) when Test & Preview opens for that channel.  
+  - `orgUnitId`: from parent prop where available (e.g. CreativesContainer → SlideBoxContent → TestAndPreviewSlidebox → CommonTestAndPreview); default `-1` if not passed.
+- **fetchWeCrmAccounts(sourceName)** — used for **WhatsApp** account list (e.g. `sourceName: 'WHATSAPP'`) so user can pick account; then sender numbers come from `getSenderDetails('WHATSAPP', orgUnitId)` for the selected account (or first account if single).
+- **Response shape:** Creatives API uses `getSenderDetails(channel, orgUnitId)` (single channel). Response must be normalized to the same structure as in campaigns (list of domains with `domainId`, `domainName`, `gsmSenders`, `emailSenders`, `emailRepliers`, etc.). If the backend returns a different shape for single-channel call, add a small **parser/normalizer** in creatives (no dependency on campaigns’ `parseSenderDetails`). The **saga** calls this parser before dispatching SUCCESS so the reducer stores normalized data.
+
+### 2.7 Payload Mapping (prepareTestMessagePayload)
+- **EMAIL:**  
+  `emailDeliverySettings.channelSettings`: `senderLabel`, `senderId` (value of selected sender email), `replyToId` (value of selected reply-to). Optionally `domainId` if backend expects it.
+- **SMS:**  
+  `smsDeliverySettings.channelSettings`: `gsmSenderId`, `domainId`.
+- **WHATSAPP:**  
+  `whatsappDeliverySettings.channelSettings`: `senderMobNum`, `domainId`.  
+  `whatsappMessageContent`: `accountId` / `sourceAccountIdentifier` / `accountName` from selected WhatsApp account where applicable.
+
+### 2.8 Default Delivery Setting on Open & Empty Values (Campaigns Compatibility)
+- **Always show one delivery setting row:** When the user opens the Test and Preview page (for SMS, Email, or WhatsApp), **always display one “Delivery settings” summary row** above the Send test message button. The user can then click the edit (pencil) button to change it. This matches the expectation that a delivery setting block is visible by default.
+- **Default when options are available (campaigns-style):** In **cap-campaigns-v2** `DeliverySettingsV2/index.js`, when sender details are loaded, they **auto-populate** the channel’s delivery setting from the **first domain** and the **default sender** (or first sender) using:
+  - `findDefault(array) => find(array, { default: true }) || {}` — prefer the option marked `default: true`, else use first item.
+  - **SMS:** First domain from `senderDetails.data.SMS[0]`; `gsmSenderId` = `findDefault(gsmSenders).value` or `gsmSenders?.[0]?.value`.
+  - **EMAIL:** First domain; `senderEmail`/`senderLabel` = `findDefault(emailSenders)`; `senderReplyTo` = `findDefault(emailRepliers).value`.
+  - **WHATSAPP:** Match by `sourceAccountIdentifier` (or use first entry); `senderMobNum` = `gsmSenders[0]?.value`.
+- **Creatives behaviour:** Once Redux has loaded `senderDetailsByChannel[channel]` (and for WhatsApp optionally WeCRM account list), if the current channel’s `testPreviewDeliverySettings` is still empty/initial, **set a default** from the first domain and default/first sender (same logic as campaigns: first domain, `findDefault(gsmSenders)` / `findDefault(emailSenders)` / `findDefault(emailRepliers)` / first WhatsApp sender). That way the summary row shows a **default delivery setting** (e.g. “Account: Cequens, Sender number: 8123456789”) as soon as options are available.
+- **When delivery setting is not present or options are empty:** If the API returns no domains/senders (empty list) or the user has not selected anything and no default could be set, **show empty values** in the summary row. Do **not** hide the row. Display placeholders such as:
+  - “Account: —”, “Sender number: —” (or “Sender domain: —”, “Sender ID: —” for Email), or
+  - A single “Not configured” / “No delivery setting” message (e.g. from `messages.notConfigured` like in campaigns).
+- **Summary:** (1) One delivery setting row is always visible above the Send test message button. (2) When options load, auto-set default from first domain + default/first sender so the row shows a default. (3) When no options or no selection, show empty values or “Not configured” in that same row. (4) User can edit at any time via the pencil button.
+
+---
+
+## 3. Implementation Steps (Phase-Wise)
+
+### Phase 1: Foundation (APIs, types, folder)
+1. **Ensure APIs in creatives-ui**
+   - Confirm `getSenderDetails(channel, orgUnitId)` and `fetchWeCrmAccounts(sourceName)` in `app/services/api.js` are used as-is (no changes if already correct).
+2. **Add parser for sender details**
+   - Create `app/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js` (or similar) to normalize `getSenderDetails` response per channel to a structure like: `{ domains: [{ domainId, domainName, gsmSenders, emailSenders, emailRepliers, ... }] }` so UI can consume it like campaigns.
+3. **Create folder and entry files**
+   - `CommonTestAndPreview/DeliverySettings/index.js` — re-export or main container.
+   - `DeliverySettings/constants.js` — channel keys, default values.
+   - `DeliverySettings/messages.js` — copy/adapt labels (Delivery settings, Account, Sender number, Sender domain, Sender ID, Reply-to ID, Done, **notConfigured** for empty-value display when no delivery setting is present, per campaigns `DeliverySettingsV2/messages`).
+
+### Phase 2a: Redux — Constants, actions, saga, reducer, selectors
+4. **Constants** (`CommonTestAndPreview/constants.js`)
+   - Add: `GET_SENDER_DETAILS_REQUESTED`, `GET_SENDER_DETAILS_SUCCESS`, `GET_SENDER_DETAILS_FAILURE`.
+   - Add: `GET_WECRM_ACCOUNTS_REQUESTED`, `GET_WECRM_ACCOUNTS_SUCCESS`, `GET_WECRM_ACCOUNTS_FAILURE`.
+5. **Actions** (`CommonTestAndPreview/actions.js`)
+   - Add `getSenderDetailsRequested({ channel, orgUnitId })` — payload: `{ channel, orgUnitId }`.
+   - Add `getWeCrmAccountsRequested({ sourceName })` — payload: `{ sourceName }` (e.g. `'WHATSAPP'`).
+6. **Sagas** (`CommonTestAndPreview/sagas.js`)
+   - Import `Api.getSenderDetails`, `Api.fetchWeCrmAccounts`, and the parser from `DeliverySettings/utils/parseSenderDetailsResponse`.
+   - Add `getSenderDetailsSaga(action)`: call `Api.getSenderDetails(channel, orgUnitId)`; on success parse with parser; `put(GET_SENDER_DETAILS_SUCCESS, { channel, domains })`; on failure `put(GET_SENDER_DETAILS_FAILURE, { channel, error })`.
+   - Add `getWeCrmAccountsSaga(action)`: call `Api.fetchWeCrmAccounts(sourceName)`; `put(GET_WECRM_ACCOUNTS_SUCCESS, { accounts })` or FAILURE.
+   - Add `watchGetSenderDetails`, `watchGetWeCrmAccounts` (takeLatest); register both in `commonTestAndPreviewSaga()`.
+7. **Reducer** (`CommonTestAndPreview/reducer.js`)
+   - Add to initial state (fromJS): `senderDetailsByChannel: { SMS: [], EMAIL: [], WHATSAPP: [] }`, `wecrmAccounts: []`, `isLoadingSenderDetails: false`, `fetchSenderDetailsError: null`, `fetchWeCrmAccountsError: null`.
+   - Handle REQUESTED: set loading true, clear error for that request.
+   - Handle SUCCESS: set `senderDetailsByChannel[channel]` from payload (or wecrmAccounts), set loading false, clear error.
+   - Handle FAILURE: set loading false, set error from payload.
+8. **Selectors** (`CommonTestAndPreview/selectors.js`)
+   - Add `makeSelectSenderDetailsForChannel(channel)` — returns `state.commonTestAndPreview.get('senderDetailsByChannel')?.get(channel)` (or toJS for plain array).
+   - Add `makeSelectWeCrmAccounts()` — returns wecrmAccounts from state (toJS if Immutable).
+   - Add `makeSelectIsLoadingSenderDetails()`, `makeSelectFetchSenderDetailsError()`, `makeSelectFetchWeCrmAccountsError()`.
+   - Export all new selectors.
+9. **TestAndPreviewSlidebox** (`TestAndPreviewSlidebox/index.js`)
+   - In `mapStateToProps`: add `senderDetailsForChannel: makeSelectSenderDetailsForChannel(state, props.channel)` (or pass channel to selector factory), `wecrmAccounts: makeSelectWeCrmAccounts()(state)`, `isLoadingSenderDetails: makeSelectIsLoadingSenderDetails()(state)`, and error selectors if needed.
+   - In `mapDispatchToProps`: ensure `actions` from `bindActionCreators(commonTestAndPreviewActions, dispatch)` includes the new action creators (they will be included once added to actions.js).
+
+### Phase 2b: State and data loading in CommonTestAndPreview
+10. **Local state in CommonTestAndPreview (`index.js`)**
+    - Add **local** state only for user selection: `testPreviewDeliverySettings` — one object per channel (SMS, EMAIL, WHATSAPP) with shape as in 12.2. Initialize with **empty values** (null/'' ) so that when no options have loaded, the summary row shows **empty values** (Section 2.7). Do **not** store API response in local state; that comes from Redux.
+10a. **Default delivery setting when options load**
+    - When Redux `senderDetailsByChannel[channel]` has at least one domain, **auto-set default** into `testPreviewDeliverySettings[channel]` (first domain + `findDefault(senders)` like campaigns DeliverySettingsV2). If API returns empty, leave empty so summary shows empty values. Only set default when current selection is still empty (do not overwrite user’s edit).
+11. **Dispatch Redux actions when Test & Preview opens**
+    - In `useEffect` (when `show && channel` is SMS/Email/WhatsApp), dispatch `actions.getSenderDetailsRequested({ channel, orgUnitId: orgUnitId ?? -1 })`. For WhatsApp only, also dispatch `actions.getWeCrmAccountsRequested({ sourceName: 'WHATSAPP' })`. Do not call APIs directly.
+12. **Read sender details and WeCRM accounts from props**
+    - Component receives `senderDetailsForChannel` (or per-channel from Redux), `wecrmAccounts`, `isLoadingSenderDetails` from mapStateToProps (via TestAndPreviewSlidebox). Use these when rendering DeliverySettings and when optionally auto-selecting first domain/sender.
+13. **Pass props to SendTestMessage**
+    - Pass `channel`, `deliverySettings` (from local state `testPreviewDeliverySettings[channel]`), `senderDetailsOptions` (from Redux prop, e.g. `senderDetailsForChannel`), `wecrmAccounts` (from Redux prop), `onSaveDeliverySettings` (callback that updates local state), `isLoadingSenderDetails` (from Redux prop).
+
+### Phase 3: UI — Summary and modal in SendTestMessage
+14. **SendTestMessage.js**
+   - Above the “Send test message” button (around lines 46–49), add:
+     - **One “Delivery settings” row** that is **always visible** when channel is SMS, EMAIL, or WHATSAPP (do not hide when no selection). Summary shows either: (a) default/selected values (e.g. “Account: X, Sender number: Y”), or (b) **empty values** (“Account: —”, “Sender number: —” or “Not configured”) when no delivery setting is present or options are empty.
+     - Pencil (edit) icon; on click open the Delivery Settings **CapSlideBox** (cap-ui-library).
+   - Render the DeliverySettings component (summary + CapSlideBox) for SMS, EMAIL, WHATSAPP only; the summary row is always shown for these channels (with default or empty values).
+15. **DeliverySettings component (summary + CapSlideBox trigger)**
+   - File: `DeliverySettings/index.js` (or `DeliverySettings/SummaryAndSlideBox.js`).
+   - **Always render the summary line** (one row) with either: selected/default values or empty placeholders / “Not configured” when `deliverySettings` has no values or options are empty. Show edit icon (CapIcon); on edit, set “slideBox open” and render **CapSlideBox** with content component (ModifyDeliverySettings). Use **cap-ui-library** components only (CapRow, CapHeader, CapIcon, etc.).
+16. **ModifyDeliverySettings (CapSlideBox content)**
+   - File: `DeliverySettings/ModifyDeliverySettings.js` (or `DeliverySettingsSlideBox.js`).
+   - **CapSlideBox** (from cap-ui-library) with header “Delivery settings”, close (X), and channel-specific fields:
+     - **SMS:** Account (domain) dropdown, Sender number (GSM sender) dropdown.
+     - **Email:** Email domain dropdown, Sender name (or Sender ID), Sender ID, Reply-to ID (as in screenshots).
+     - **WhatsApp:** Account dropdown (from WeCRM accounts), Sender number dropdown (from sender details for selected account).
+   - “Done” button (CapButton): call `onSaveDeliverySettings(selectedValues)` and close CapSlideBox.
+
+### Phase 4: Wire payload in prepareTestMessagePayload
+17. **Pass selected delivery settings into payload**
+    - In `CommonTestAndPreview`, when building the payload for send test (where `prepareTestMessagePayload` is called), pass the current channel’s `testPreviewDeliverySettings` (or a flat object) as an extra argument or via a closure so that:
+      - **EMAIL:** `emailDeliverySettings.channelSettings.senderLabel`, `senderId`, `replyToId` (and `domainId` if needed) come from state.
+      - **SMS:** `smsDeliverySettings.channelSettings.gsmSenderId`, `domainId` from state.
+      - **WHATSAPP:** `whatsappDeliverySettings.channelSettings.senderMobNum`, `domainId` and `whatsappMessageContent.accountId`/`sourceAccountIdentifier`/`accountName` from state.
+18. **Keep backward compatibility**
+    - If user never opens Delivery Settings, keep existing dummy/empty defaults in `prepareTestMessagePayload` so behavior remains as today when no selection is made.
+
+### Phase 5: orgUnitId and parent wiring
+19. **orgUnitId propagation**
+    - Ensure `orgUnitId` is passed from CreativesContainer (or wherever TestAndPreviewSlidebox is used) down to CommonTestAndPreview (e.g. via TestAndPreviewSlidebox). In SlideBoxContent / parent containers that render TestAndPreviewSlidebox, pass `orgUnitId` when available; default to `-1` in CommonTestAndPreview if undefined.
+20. **Styling and i18n**
+    - Use **cap-ui-library** only: **CapSlideBox** for the delivery settings panel, CapSelect/CapCustomSelect for dropdowns, CapButton for Done, CapRow/CapHeader/CapIcon for summary row. Add any new keys to `DeliverySettings/messages.js` and CommonTestAndPreview `messages.js` if needed.
+
+### Phase 6: Testing and cleanup
+21. **Unit tests**
+    - Update or add tests for: SendTestMessage (delivery settings summary + conditional render), DeliverySettings open/close and callback, `prepareTestMessagePayload` when delivery settings are provided (SMS, Email, WhatsApp), and **Redux**: saga tests for getSenderDetailsSaga and getWeCrmAccountsSaga (mock Api and parser), reducer tests for new action types, selector tests.
+22. **Manual verification**
+    - For SMS, Email, WhatsApp: open Test & Preview → set delivery settings → send test message and confirm payload and delivery use selected sender/domain/account.
+
+---
+
+## 4. Critical Files Checklist
+
+### New files (to create)
+| Path | Purpose |
+|------|--------|
+| `CommonTestAndPreview/DeliverySettings/index.js` | Export or main DeliverySettings wrapper (summary + CapSlideBox trigger) |
+| `CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js` | **CapSlideBox** (cap-ui-library) content with channel-specific fields and Done |
+| `CommonTestAndPreview/DeliverySettings/constants.js` | Channel keys, default structures |
+| `CommonTestAndPreview/DeliverySettings/messages.js` | Copy/adapt labels (Delivery settings, Account, Sender number, etc.) |
+| `CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js` | Normalize getSenderDetails response per channel |
+| Optional: `CommonTestAndPreview/DeliverySettings/DeliverySettingsSummary.js` | Summary line + edit icon only (if split from index) |
+
+### Files to modify
+| Path | Changes |
+|------|--------|
+| `CommonTestAndPreview/constants.js` | Add GET_SENDER_DETAILS_REQUESTED/SUCCESS/FAILURE, GET_WECRM_ACCOUNTS_REQUESTED/SUCCESS/FAILURE |
+| `CommonTestAndPreview/actions.js` | Add getSenderDetailsRequested({ channel, orgUnitId }), getWeCrmAccountsRequested({ sourceName }) |
+| `CommonTestAndPreview/sagas.js` | Add getSenderDetailsSaga (call Api.getSenderDetails, parse, put SUCCESS/FAILURE), getWeCrmAccountsSaga (call Api.fetchWeCrmAccounts, put SUCCESS/FAILURE); watchGetSenderDetails, watchGetWeCrmAccounts; register in commonTestAndPreviewSaga() |
+| `CommonTestAndPreview/reducer.js` | Add initial state: senderDetailsByChannel, wecrmAccounts, isLoadingSenderDetails, fetchSenderDetailsError, fetchWeCrmAccountsError; handle all six new action types |
+| `CommonTestAndPreview/selectors.js` | Add makeSelectSenderDetailsForChannel, makeSelectWeCrmAccounts, makeSelectIsLoadingSenderDetails, makeSelectFetchSenderDetailsError, makeSelectFetchWeCrmAccountsError; export them |
+| `TestAndPreviewSlidebox/index.js` | In mapStateToProps add senderDetailsForChannel, wecrmAccounts, isLoadingSenderDetails (using new selectors); actions already get new creators via bindActionCreators |
+| `CommonTestAndPreview/index.js` | Add **local** state only for testPreviewDeliverySettings (user selection); in useEffect dispatch actions.getSenderDetailsRequested and actions.getWeCrmAccountsRequested (no direct API calls); read senderDetailsForChannel, wecrmAccounts, isLoadingSenderDetails from props; pass props to SendTestMessage; pass delivery settings into prepareTestMessagePayload; accept orgUnitId prop |
+| `CommonTestAndPreview/SendTestMessage.js` | Add Delivery settings summary row + edit icon above Send button; render DeliverySettings component (only for SMS, EMAIL, WHATSAPP); pass channel, deliverySettings, senderDetailsOptions (from Redux), wecrmAccounts, onSaveDeliverySettings, isLoadingSenderDetails |
+| `CommonTestAndPreview/index.js` (prepareTestMessagePayload) | In EMAIL/SMS/WHATSAPP branches, override channelSettings (and WhatsApp account fields) from the selected delivery settings (local state) instead of empty strings/null |
+
+### Files referenced (no edits)
+| Path | Use |
+|------|-----|
+| `app/services/api.js` | getSenderDetails(channel, orgUnitId), fetchWeCrmAccounts(sourceName) |
+| cap-campaigns-v2 DeliverySettingsV2, ModifyDeliverySettings, SenderDetails | Reference only for UI layout and field names (Account, Sender number, Sender domain, Sender ID, Reply-to ID) |
+
+---
+
+## 5. UI Component Patterns to Follow
+
+- **Summary row (always visible):** **Always show one** “Delivery settings” summary row above the Send test message button when channel is SMS/Email/WhatsApp. Single line (or short block) of text: either (a) selected/default values (e.g. “Account: Cequens, Sender number: 8123456789”) or (b) **empty values** when no delivery setting is present — e.g. “Account: —”, “Sender number: —” or a single “Not configured” message (campaigns use `notConfigured` from messages). Pencil (edit) icon next to it; same line or next line as “Delivery settings” label (see screenshots).
+- **Delivery settings panel:** Use **CapSlideBox** from **cap-ui-library** (not CapModal). Title “Delivery settings”, X to close, then:
+  - **SMS:** Account (domain) dropdown, Sender number dropdown, Done.
+  - **Email:** Email domain, Sender name, Sender ID, Reply-to ID dropdowns, Done.
+  - **WhatsApp:** Account dropdown (WeCRM), Sender number dropdown, Done.
+- **All UI from cap-ui-library:** Use **CapSlideBox**, **CapSelect** / **CapCustomSelect**, **CapButton**, **CapRow**, **CapHeader**, **CapLabel**, **CapIcon**, etc. No custom modals or non-library form elements. Reuse existing CommonTestAndPreview styling (e.g. `_commonTestAndPreview.scss` or `_deliverySettings.scss` under DeliverySettings folder).
+
+---
+
+## 6. Validation Logic Summary
+
+- **Modal Done:**
+  - For SMS/Email: require at least domain and main sender selected (gsmSenderId / senderEmail) before enabling Done (or allow Done and validate on send).
+  - For WhatsApp: require account and sender number when list is non-empty.
+- **Send test message:**
+  - Keep existing validation (e.g. test entities selected). Optionally: if channel is SMS/Email/WhatsApp and delivery settings are still “empty” (user never opened the CapSlideBox), either block send with a message “Please configure delivery settings” or keep current behavior (send with defaults) per product decision. Recommendation: allow send with defaults for backward compatibility; show warning if desired.
+
+---
+
+## 7. Testing & Verification
+
+- **Unit:** SendTestMessage shows delivery summary and edit only for SMS/EMAIL/WHATSAPP; ModifyDeliverySettings receives options and calls onSave with selected values; prepareTestMessagePayload uses passed delivery settings for EMAIL/SMS/WHATSAPP branches.
+- **Integration:** Open Test & Preview for SMS, Email, WhatsApp; open Delivery settings → select domain/sender → Done; send test message; verify request payload contains selected gsmSenderId/domainId (SMS), senderId/replyToId/domainId (Email), senderMobNum/domainId and account info (WhatsApp).
+- **Regression:** Other channels (RCS, InApp, etc.) unchanged; no delivery settings block shown; send test still works with existing payload.
+
+---
+
+## 8. Backward Compatibility
+
+- **Channels other than SMS, Email, WhatsApp:** No UI change; no new state; prepareTestMessagePayload unchanged for those channels.
+- **No selection:** If user does not open Delivery Settings, keep existing default/empty values in payload (ouId: -1, empty sender IDs, etc.) so current behavior is preserved. When options have loaded, the **default** delivery setting (first domain + default sender) is shown in the summary; when options are empty, **empty values** are shown in the same row (Section 2.7).
+- **Empty delivery setting:** If no options or no selection, the **one** delivery setting row is still visible with empty values / “Not configured”; user can click edit to open the **CapSlideBox** (which may show empty dropdowns until options exist).
+- **orgUnitId:** Default to `-1` when not passed from parent; getSenderDetails and backend should tolerate -1 as “global” or default org.
+
+---
+
+## 9. Notes & Constraints
+
+- **UI library:** Use **cap-ui-library** (`@capillarytech/cap-ui-library`) for all delivery-settings UI. The edit panel must be **CapSlideBox** (not CapModal). Use CapRow, CapHeader, CapLabel, CapIcon, CapSelect/CapCustomSelect, CapButton, etc. from the same library. No custom modals or non-library form elements.
+- **No cross-repo imports:** Do not import from cap-campaigns-v2; only reference their UI/flow for design.
+- **Single channel per screen:** Test & Preview is always for one channel at a time; delivery settings state can be a single object for “current channel” or keyed by channel for simplicity.
+- **API response shape:** If creatives backend returns a different structure for `getSenderDetails(channel, orgUnitId)` (e.g. single object instead of array), the parser in DeliverySettings utils must normalize it to the expected shape (list of domains with senders).
+- **WhatsApp account:** If fetchWeCrmAccounts is used, map response to a dropdown; then use selected account’s identifier to filter or select sender numbers from getSenderDetails('WHATSAPP') if the API returns per-account data; otherwise use first domain / first sender as default.
+
+---
+
+## 10. Architecture Diagram
+
+```text
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                     CommonTestAndPreview (index.js)                          │
+│  • State: testPreviewDeliverySettings, senderDetailsOptions, loading        │
+│  • useEffect: getSenderDetails(channel, orgUnitId) [+ fetchWeCrmAccounts      │
+│               for WHATSAPP] when show && channel in [SMS,EMAIL,WHATSAPP]      │
+│  • prepareTestMessagePayload(..., deliverySettings) → uses state for         │
+│    emailDeliverySettings / smsDeliverySettings / whatsappDeliverySettings    │
+└─────────────────────────────────────────────────────────────────────────────┘
+                    │
+                    │ props: channel, deliverySettings, senderDetailsOptions,
+                    │        onOpenDeliverySettings, onSaveDeliverySettings, orgUnitId
+                    ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│                        SendTestMessage.js                                    │
+│  • Test customers TreeSelect                                                 │
+│  • [NEW] Delivery settings summary row + pencil icon (only SMS/EMAIL/WA)     │
+│  • [NEW] <DeliverySettings ... />  (renders summary + CapSlideBox)         │
+│  • Send test message button                                                  │
+└─────────────────────────────────────────────────────────────────────────────┘
+                    │
+                    │ when pencil clicked → open CapSlideBox
+                    ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│            DeliverySettings/ (new folder)                                    │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │ index.js (summary + CapSlideBox trigger)                             │   │
+│  │  • Summary line: "Account: X, Sender number: Y" / "Sender domain:    │   │
+│  │    X, Sender ID: Y" (cap-ui-library: CapRow, CapHeader, CapIcon)      │   │
+│  │  • Pencil icon → setState(slideBoxOpen true) → render CapSlideBox     │   │
+│  │    with ModifyDeliverySettings content                                │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  ┌─────────────────────────────────────────────────────────────────────┐   │
+│  │ ModifyDeliverySettings.js (CapSlideBox content, cap-ui-library)      │   │
+│  │  • SMS:   Account dropdown, Sender number dropdown                   │   │
+│  │  • Email: Email domain, Sender name, Sender ID, Reply-to ID          │   │
+│  │  • WhatsApp: Account dropdown (WeCRM), Sender number dropdown         │   │
+│  │  • Done → onSaveDeliverySettings(values) → parent updates state       │   │
+│  └─────────────────────────────────────────────────────────────────────┘   │
+│  utils/parseSenderDetailsResponse.js  →  normalize getSenderDetails response │
+│  constants.js, messages.js                                                  │
+└─────────────────────────────────────────────────────────────────────────────┘
+                    │
+                    │ onSaveDeliverySettings(selected)
+                    ▼
+┌─────────────────────────────────────────────────────────────────────────────┐
+│  CommonTestAndPreview: setState(testPreviewDeliverySettings)                 │
+│  → next prepareTestMessagePayload() uses updated state for payload           │
+└─────────────────────────────────────────────────────────────────────────────┘
+
+                    External APIs (app/services/api.js)
+                    ───────────────────────────────────
+                    getSenderDetails(channel, orgUnitId)
+                    fetchWeCrmAccounts(sourceName)  [WhatsApp account list]
+```
+
+---
+
+## 11. Architecture Diagram (Mermaid)
+
+```mermaid
+flowchart TB
+  subgraph Root["CommonTestAndPreview (index.js)"]
+    State["State: testPreviewDeliverySettings,\nsenderDetailsOptions, loading"]
+    Fetch["useEffect: getSenderDetails(channel, orgUnitId)\n+ fetchWeCrmAccounts for WHATSAPP"]
+    Payload["prepareTestMessagePayload(..., deliverySettings)"]
+    State --> Fetch
+    Fetch --> State
+    State --> Payload
+  end
+
+  subgraph SendTest["SendTestMessage.js"]
+    TreeSelect["Test customers TreeSelect"]
+    Summary["Delivery settings summary + pencil icon"]
+    DSComponent["<DeliverySettings />"]
+    Button["Send test message button"]
+    TreeSelect --> Summary
+    Summary --> DSComponent
+    DSComponent --> Button
+  end
+
+  subgraph DeliveryFolder["DeliverySettings/ (new folder, cap-ui-library)"]
+    SummarySlideBox["index.js: Summary line + open CapSlideBox"]
+    SlideBoxContent["ModifyDeliverySettings.js: CapSlideBox content"]
+    SMSFields["SMS: Account, Sender number"]
+    EmailFields["Email: Domain, Sender name, Sender ID, Reply-to"]
+    WAFields["WhatsApp: Account, Sender number"]
+    Done["Done → onSaveDeliverySettings"]
+    SummarySlideBox --> SlideBoxContent
+    SlideBoxContent --> SMSFields
+    SlideBoxContent --> EmailFields
+    SlideBoxContent --> WAFields
+    SMSFields --> Done
+    EmailFields --> Done
+    WAFields --> Done
+  end
+
+  subgraph API["app/services/api.js"]
+    getSender["getSenderDetails(channel, orgUnitId)"]
+    wecrm["fetchWeCrmAccounts(sourceName)"]
+  end
+
+  Root -->|channel, deliverySettings, callbacks| SendTest
+  SendTest -->|pencil click| DeliveryFolder
+  Done -->|update state| Root
+  Fetch --> getSender
+  Fetch --> wecrm
+```
+
+---
+
+## 12. HIGH-LEVEL DETAILED FULL PLAN (Line-by-Line)
+
+This section provides a broad, exhaustive breakdown of the entire implementation so that every step, data shape, and touchpoint is explicit. Use it as the single source of truth when implementing.
+
+---
+
+### 12.1 Business and User-Flow Context
+
+1. **User journey (high level)**  
+   User is in Creatives (e.g. SMS/Email/WhatsApp template create or edit) → clicks “Preview and Test” → Test and Preview slidebox opens → user sees left panel (customer, custom values, **Send test message** section).  
+   Today: under “Send test message” there is only “Test customers” and “Send test message” button.  
+   Target: above the button we add a **Delivery settings** row (summary text + pencil).  
+   User can leave it as-is (defaults) or click pencil → **Delivery settings** **CapSlideBox** (cap-ui-library) opens → user selects Account/Domain and Sender (number or email/reply-to per channel) → Done → CapSlideBox closes, summary updates.  
+   When user clicks “Send test message”, the payload sent to the backend must include the **selected** delivery settings (domain, sender IDs) for that channel, not dummy values.
+
+2. **Channels in scope**  
+   Only **SMS**, **Email**, **WhatsApp**. All other channels (RCS, Viber, Zalo, InApp, MobilePush, etc.) must show no delivery settings block and must retain current payload behaviour.
+
+3. **APIs involved**  
+   - **getSenderDetails(channel, orgUnitId)** in `app/services/api.js`: returns domain properties for one channel (list of domains with senders). Used for all three channels.  
+   - **fetchWeCrmAccounts(sourceName)** in `app/services/api.js`: returns WeCRM/Meta accounts; used for **WhatsApp** to show “Account” dropdown (e.g. sourceName `'WHATSAPP'`).  
+   - Both are existing; no new API creation. Only consumption and response normalization in creatives.
+
+4. **Where state lives**  
+   - **Redux (existing CommonTestAndPreview slice):** Sender-details options (per channel) and WeCRM accounts, plus loading/error flags. The two APIs **getSenderDetails** and **fetchWeCrmAccounts** are invoked only via **Redux actions and redux-saga** (see Section 2.2). Use existing files: `constants.js`, `actions.js`, `sagas.js`, `reducer.js`, `selectors.js`.  
+   - **Local state in CommonTestAndPreview (`index.js`):** Only the **user-selected** delivery settings (`testPreviewDeliverySettings` keyed by channel) used for the summary, CapSlideBox default selection, and `prepareTestMessagePayload`.  
+   - Child components (SendTestMessage → DeliverySettings → ModifyDeliverySettings) receive API-derived data from Redux (via props from TestAndPreviewSlidebox) and user selection + callbacks from CommonTestAndPreview.
+
+5. **Where payload is built**  
+   **prepareTestMessagePayload** inside `CommonTestAndPreview/index.js` (same file). Today it builds `emailDeliverySettings`, `smsDeliverySettings`, `whatsappDeliverySettings` with empty/default values. After implementation it must read from the component’s delivery-settings state and merge those values into the same payload structures.
+
+---
+
+### 12.2 Data Structures (Exact Shapes)
+
+6. **Normalized sender-details options (after parsing API response)**  
+   Stored in **Redux** as `senderDetailsByChannel` (reducer state). Structure keyed by channel:
+
+   - **SMS:**  
+     `senderDetailsOptions.SMS` = array of domain objects:  
+     `{ domainId, domainName, dgmId?, gsmSenders: [{ value, label, default? }], cdmaSenders?: [...] }`
+
+   - **EMAIL:**  
+     `senderDetailsOptions.EMAIL` = array of domain objects:  
+     `{ domainId, domainName, dgmId?, emailSenders: [{ value, label, default? }], emailRepliers: [{ value, label, default? }] }`
+
+   - **WHATSAPP:**  
+     `senderDetailsOptions.WHATSAPP` = array of domain/account objects:  
+     `{ domainId, domainName?, sourceAccountIdentifier?, gsmSenders: [{ value, label }], ... }`  
+     Plus optionally a separate list for WeCRM accounts:  
+     `wecrmAccounts` = `[{ id, name, sourceAccountIdentifier?, ... }]` for the Account dropdown.
+
+7. **Selected delivery settings (user’s choice)**  
+   Stored in **local component state** in CommonTestAndPreview as `testPreviewDeliverySettings` (keyed by channel). One object per channel; for the current screen only the current channel’s object is used. Suggested shape:
+
+   - **SMS:**  
+     `{ domainId: number | null, gsmSenderId: string, domainName?: string }`
+
+   - **EMAIL:**  
+     `{ domainId: number | null, senderId: string, senderLabel: string, replyToId: string, domainName?: string }`  
+     (senderId = selected sender email value; replyToId = selected reply-to value)
+
+   - **WHATSAPP:**  
+     `{ domainId: number | null, senderMobNum: string, accountId?: string, sourceAccountIdentifier?: string, accountName?: string, domainName?: string }`
+
+8. **Defaults when user never opens CapSlideBox**  
+   Keep existing behaviour: empty string for sender IDs, null for domainId. So initial state can be e.g.  
+   `testPreviewDeliverySettings = { SMS: { domainId: null, gsmSenderId: '' }, EMAIL: { ... }, WHATSAPP: { ... } }`  
+   or lazy-initialized when channel is first set.
+
+9. **Payload mapping (what goes into API request)**  
+   - **EMAIL:**  
+     `emailDeliverySettings.channelSettings.senderLabel` ← state.senderLabel  
+     `emailDeliverySettings.channelSettings.senderId` ← state.senderId  
+     `emailDeliverySettings.channelSettings.replyToId` ← state.replyToId  
+     `emailDeliverySettings.channelSettings.domainId` ← state.domainId (if API expects it)
+
+   - **SMS:**  
+     `smsDeliverySettings.channelSettings.gsmSenderId` ← state.gsmSenderId  
+     `smsDeliverySettings.channelSettings.domainId` ← state.domainId  
+
+   - **WHATSAPP:**  
+     `whatsappDeliverySettings.channelSettings.senderMobNum` ← state.senderMobNum  
+     `whatsappDeliverySettings.channelSettings.domainId` ← state.domainId  
+     `whatsappMessageContent.accountId` / `sourceAccountIdentifier` / `accountName` ← from state when available (so backend can associate test with correct WhatsApp account).
+
+---
+
+### 12.3 Phase 1 — Foundation (Detailed Steps)
+
+10. **Verify APIs**  
+    - Open `app/services/api.js`.  
+    - Confirm `getSenderDetails(channel, orgUnitId)` exists and signature is `(channel, orgUnitId)` (single channel).  
+    - Confirm `fetchWeCrmAccounts(sourceName)` exists and accepts e.g. `'WHATSAPP'`.  
+    - No code change if already correct; these will be called from **redux-saga** (getSenderDetailsSaga, getWeCrmAccountsSaga), not from the component. Responses will be parsed in the saga (using DeliverySettings parser) before dispatching SUCCESS.
+
+11. **Create parser utility**  
+    - **New file:** `app/v2Components/CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js`.  
+    - **Input:** Raw response from `getSenderDetails(channel, orgUnitId)`. Backend might return e.g. `{ entity: { SMS: [...] } }` or `{ entity: [ { id, domainProperties, ... } ] }` or a single-channel array.  
+    - **Output:** A normalized structure for that channel: `{ domains: [ { domainId, domainName, gsmSenders, emailSenders, emailRepliers, ... } ] }` so that UI can assume the same shape for SMS, EMAIL, WHATSAPP (with channel-specific sender arrays).  
+    - **Logic:** If response is array of domain-gateway objects (like campaigns), map each to domainId, domainName, and extract contactInfo into gsmSenders / emailSenders / emailRepliers using type keys (e.g. gsm_sender_id, sender_id, reply_to_id). If response is already a list of domains, map similarly. Export a single function e.g. `parseSenderDetailsResponse(channel, rawResponse)`.
+
+12. **Create DeliverySettings folder and constants**  
+    - **New file:** `CommonTestAndPreview/DeliverySettings/constants.js`.  
+    - Export: `CHANNELS_WITH_DELIVERY_SETTINGS = ['SMS', 'EMAIL', 'WHATSAPP']`.  
+    - Export default structures for each channel, e.g. `DEFAULT_SMS_DELIVERY_SETTINGS`, `DEFAULT_EMAIL_DELIVERY_SETTINGS`, `DEFAULT_WHATSAPP_DELIVERY_SETTINGS` (null/empty values).  
+    - Export any key names used in payload (e.g. gsmSenderId, senderId, replyToId) so both UI and payload builder use the same keys.
+
+13. **Create messages (i18n)**  
+    - **New file:** `CommonTestAndPreview/DeliverySettings/messages.js`.  
+    - Use `defineMessages` (react-intl). Add: deliverySettings (title), account, senderNumber, senderDomain, senderId, senderName, replyToId, done, notConfigured, reset (if needed).  
+    - Scope id e.g. `app.v2Components.CommonTestAndPreview.DeliverySettings.*`.  
+    - These will be used in both the summary line and the modal.
+
+14. **Create DeliverySettings index (shell)**  
+    - **New file:** `CommonTestAndPreview/DeliverySettings/index.js`.  
+    - Initially export a simple component that accepts props: `channel`, `deliverySettings`, `senderDetailsOptions`, `onSaveDeliverySettings`, `formatMessage` (or intl).  
+    - Component **always** renders: (1) **one** summary row (label “Delivery settings” + summary text + pencil icon; use **cap-ui-library** CapRow, CapHeader, CapIcon), (2) when pencil is clicked, state `isSlideBoxOpen = true` and render **CapSlideBox** (cap-ui-library) with content component (ModifyDeliverySettings).  
+    - Summary text: when values exist — for SMS/WhatsApp “Account: {domainName or accountName}, Sender number: {gsmSenderId or senderMobNum}”; for Email “Sender domain: {domainName}, Sender ID: {senderId}” (and optionally Reply-to). When **no delivery setting is present or values are empty**, show **empty values** (e.g. “Account: —”, “Sender number: —”) or a single “Not configured” message from messages (campaigns use `messages.notConfigured`). Do not hide the row when empty.
+
+---
+
+### 12.4 Phase 2a — Redux: Constants, Actions, Saga, Reducer, Selectors (Detailed Steps)
+
+15. **Constants** (`CommonTestAndPreview/constants.js`)  
+    - Add: `GET_SENDER_DETAILS_REQUESTED = 'app/CommonTestAndPreview/GET_SENDER_DETAILS_REQUESTED'`, `GET_SENDER_DETAILS_SUCCESS`, `GET_SENDER_DETAILS_FAILURE`.  
+    - Add: `GET_WECRM_ACCOUNTS_REQUESTED`, `GET_WECRM_ACCOUNTS_SUCCESS`, `GET_WECRM_ACCOUNTS_FAILURE`.  
+    - Follow existing naming pattern (e.g. same prefix as other action types in the file).
+
+16. **Actions** (`CommonTestAndPreview/actions.js`)  
+    - Import the new constants.  
+    - Add `getSenderDetailsRequested({ channel, orgUnitId })` returning `{ type: GET_SENDER_DETAILS_REQUESTED, payload: { channel, orgUnitId } }`.  
+    - Add `getWeCrmAccountsRequested({ sourceName })` returning `{ type: GET_WECRM_ACCOUNTS_REQUESTED, payload: { sourceName } }`.
+
+17. **Sagas** (`CommonTestAndPreview/sagas.js`)  
+    - Import `Api.getSenderDetails`, `Api.fetchWeCrmAccounts` from `../../services/api`.  
+    - Import parser: `parseSenderDetailsResponse` from `./DeliverySettings/utils/parseSenderDetailsResponse` (or relative path from sagas.js to the utils file).  
+    - **getSenderDetailsSaga(action):** From action.payload take `channel`, `orgUnitId`. `yield call(Api.getSenderDetails, channel, orgUnitId ?? -1)`. On success: `parsed = parseSenderDetailsResponse(channel, response)` (adapt to actual API response shape, e.g. response.entity). `yield put({ type: GET_SENDER_DETAILS_SUCCESS, payload: { channel, domains: parsed.domains } })`. On catch or API error: `yield put({ type: GET_SENDER_DETAILS_FAILURE, payload: { channel, error } })`.  
+    - **getWeCrmAccountsSaga(action):** Take `sourceName` from payload. `yield call(Api.fetchWeCrmAccounts, sourceName)`. On success map response to list of accounts and `yield put(GET_WECRM_ACCOUNTS_SUCCESS, { accounts })`; on failure `yield put(GET_WECRM_ACCOUNTS_FAILURE, { error })`.  
+    - Add **watchGetSenderDetails**: `yield takeLatest(GET_SENDER_DETAILS_REQUESTED, getSenderDetailsSaga)`.  
+    - Add **watchGetWeCrmAccounts**: `yield takeLatest(GET_WECRM_ACCOUNTS_REQUESTED, getWeCrmAccountsSaga)`.  
+    - In **commonTestAndPreviewSaga()**, add `watchGetSenderDetails()`, `watchGetWeCrmAccounts()` to the `all([...])` array.
+
+18. **Reducer** (`CommonTestAndPreview/reducer.js`)  
+    - Import the six new action type constants.  
+    - In **initialState** (fromJS): add `senderDetailsByChannel: fromJS({ SMS: [], EMAIL: [], WHATSAPP: [] })`, `wecrmAccounts: fromJS([])`, `isLoadingSenderDetails: false`, `fetchSenderDetailsError: null`, `fetchWeCrmAccountsError: null`.  
+    - **GET_SENDER_DETAILS_REQUESTED:** `return state.set('isLoadingSenderDetails', true).set('fetchSenderDetailsError', null)`.  
+    - **GET_SENDER_DETAILS_SUCCESS:** `return state.setIn(['senderDetailsByChannel', action.payload.channel], fromJS(action.payload.domains)).set('isLoadingSenderDetails', false).set('fetchSenderDetailsError', null)`.  
+    - **GET_SENDER_DETAILS_FAILURE:** `return state.set('isLoadingSenderDetails', false).set('fetchSenderDetailsError', action.payload.error)`.  
+    - **GET_WECRM_ACCOUNTS_REQUESTED:** set loading or a separate flag if desired; clear fetchWeCrmAccountsError.  
+    - **GET_WECRM_ACCOUNTS_SUCCESS:** `return state.set('wecrmAccounts', fromJS(action.payload.accounts)).set('fetchWeCrmAccountsError', null)`.  
+    - **GET_WECRM_ACCOUNTS_FAILURE:** set fetchWeCrmAccountsError. (If using a single loading flag for both APIs, clear it on both SUCCESS/FAILURE.)
+
+19. **Selectors** (`CommonTestAndPreview/selectors.js`)  
+    - **makeSelectSenderDetailsForChannel:** Factory that takes `channel` and returns a selector: `createSelector(selectCommonTestAndPreviewDomain, (substate) => substate?.get('senderDetailsByChannel')?.get(channel)?.toJS?.() ?? [])`.  
+    - **makeSelectWeCrmAccounts:** `createSelector(selectCommonTestAndPreviewDomain, (substate) => substate?.get('wecrmAccounts')?.toJS?.() ?? [])`.  
+    - **makeSelectIsLoadingSenderDetails:** `createSelector(selectCommonTestAndPreviewDomain, (substate) => substate?.get('isLoadingSenderDetails') ?? false)`.  
+    - **makeSelectFetchSenderDetailsError**, **makeSelectFetchWeCrmAccountsError** similarly.  
+    - Export all new selectors at the bottom of the file.
+
+20. **TestAndPreviewSlidebox** (`TestAndPreviewSlidebox/index.js`)  
+    - In **mapStateToProps:** Add `senderDetailsForChannel: makeSelectSenderDetailsForChannel(state, props?.channel)(state)` — note: if the selector is a factory that needs channel, pass current channel (from props) so the selected channel’s data is passed to CommonTestAndPreview. Alternatively use a selector that takes state and returns an object keyed by channel and let the component pick by channel. E.g. `senderDetailsByChannel: makeSelectSenderDetailsByChannel()(state)` and pass the whole object; then in CommonTestAndPreview use `senderDetailsByChannel[channel]`. Define **makeSelectSenderDetailsByChannel** to return the full senderDetailsByChannel map (toJS).  
+    - Add `wecrmAccounts: makeSelectWeCrmAccounts()(state)`, `isLoadingSenderDetails: makeSelectIsLoadingSenderDetails()(state)`.  
+    - Pass these as props to CommonTestAndPreview. The existing `bindActionCreators(commonTestAndPreviewActions, dispatch)` will automatically include the new action creators once they are added to actions.js.
+
+### 12.5 Phase 2b — Component: Local State, Dispatch, Pass Props (Detailed Steps)
+
+21. **Local state in CommonTestAndPreview**  
+    - Add only **local** state: `testPreviewDeliverySettings` — object keyed by channel (SMS, EMAIL, WHATSAPP), each value the shape in step 7. Initialize with **empty defaults** (null/'' for ids and sender values) so that when no options have loaded yet, the summary can show **empty values** (see Section 2.7). Do **not** add local state for senderDetailsOptions or wecrmAccounts; those come from Redux via props.
+
+21a. **Auto-set default delivery setting when options load (campaigns-style)**  
+    - When `senderDetailsByChannel[channel]` (from Redux) becomes available and has at least one domain, **set a default** into `testPreviewDeliverySettings[channel]` so the **one delivery setting row shows a default** above the Send test message button. Use the same logic as **campaigns** `DeliverySettingsV2/index.js`: take the **first domain**; for SMS use `findDefault(gsmSenders).value` or `gsmSenders?.[0]?.value`; for EMAIL use `findDefault(emailSenders)` and `findDefault(emailRepliers).value`; for WHATSAPP use first matching entry and `gsmSenders[0]?.value`. Helper: `findDefault(array) => find(array, { default: true }) || array?.[0]`. Run this in a `useEffect` that depends on `senderDetailsByChannel[channel]` and channel; only set default if current `testPreviewDeliverySettings[channel]` is still empty (so user’s edit is not overwritten). If the API returns **no domains** (empty array), do **not** set a default; leave empty so the summary shows **empty values** (Section 2.7).
+
+22. **Dispatch Redux actions on mount**  
+    - In a `useEffect` that depends on `show`, `channel`, `orgUnitId`:  
+      - If `!show` or channel not in `['SMS','EMAIL','WHATSAPP']`, do nothing.  
+      - Else: `actions.getSenderDetailsRequested({ channel, orgUnitId: orgUnitId ?? -1 })`.  
+      - If channel === 'WHATSAPP': `actions.getWeCrmAccountsRequested({ sourceName: 'WHATSAPP' })`.  
+    - Do not call Api.getSenderDetails or Api.fetchWeCrmAccounts directly; only dispatch actions.
+
+23. **Read from Redux via props**  
+    - Component receives `senderDetailsForChannel` (or `senderDetailsByChannel`), `wecrmAccounts`, `isLoadingSenderDetails` from TestAndPreviewSlidebox mapStateToProps. Use e.g. `senderDetailsOptions = senderDetailsByChannel?.[channel] ?? []` when passing to SendTestMessage.
+
+24. **Pass props from CommonTestAndPreview to SendTestMessage**  
+    - `deliverySettings={testPreviewDeliverySettings[channel] ?? defaultForChannel}` (local state).  
+    - `senderDetailsOptions={senderDetailsByChannel?.[channel] ?? []}` (from Redux prop).  
+    - `wecrmAccounts={wecrmAccounts}` (from Redux prop).  
+    - `onSaveDeliverySettings={(values) => setTestPreviewDeliverySettings(prev => ({ ...prev, [channel]: values }))}`.  
+    - `isLoadingSenderDetails={isLoadingSenderDetails}` (from Redux prop).  
+    - Only pass these when channel is SMS, EMAIL, or WHATSAPP.
+
+25. **PropTypes**  
+    - Update SendTestMessage PropTypes to include: deliverySettings (object), senderDetailsOptions (array), onSaveDeliverySettings (func), wecrmAccounts (array), isLoadingSenderDetails (bool). All optional so other channels remain valid.
+
+---
+
+### 12.6 Phase 3 — UI: Summary and Modal (Detailed Steps)
+
+20. **SendTestMessage.js layout change**  
+    - In the accordion content, order of elements: (1) Test customers label + TreeSelect, (2) **NEW:** Delivery settings row, (3) Send test message button.  
+    - Delivery settings row: only render when `channel` is one of SMS, EMAIL, WHATSAPP.  
+    - Render: `<DeliverySettings ... />` (from `../DeliverySettings` or `./DeliverySettings`) with all props passed from parent (channel, deliverySettings, senderDetailsOptions, onSaveDeliverySettings, wecrmAccounts, formatMessage, etc.).  
+    - Use **cap-ui-library** components (CapRow, CapIcon); place the pencil icon next to the summary text; on click, DeliverySettings opens the **CapSlideBox** internally.
+
+21. **DeliverySettings/index.js — summary line**  
+    - Display a label “Delivery settings” (from messages).  
+    - Next to it: summary string. Build from `deliverySettings`:  
+      - SMS: “Account: {domainName}, Sender number: {gsmSenderId}” or “Not configured”.  
+      - Email: “Sender domain: {domainName}, Sender ID: {senderId}, Reply-to: {replyToId}” or “Not configured”.  
+      - WhatsApp: “Account: {accountName or domainName}, Sender number: {senderMobNum}” or “Not configured”.  
+    - Use CapIcon type “edit” or “pencil” for the edit icon; onClick set local state `isModalOpen = true`.
+
+22. **DeliverySettings/index.js — CapSlideBox**  
+    - When `isSlideBoxOpen` is true, render **CapSlideBox** (from cap-ui-library) with:  
+      - header “Delivery settings”,  
+      - onClose: set `isSlideBoxOpen = false`,  
+      - content: channel-specific form (ModifyDeliverySettings; use CapSelect, CapButton, CapRow, etc. from cap-ui-library),  
+      - footer: “Done” button (CapButton) that calls `onSaveDeliverySettings(selectedValues)` and then set `isSlideBoxOpen = false`.  
+    - Pass into the slidebox content: `channel`, `deliverySettings` (current selection), `senderDetailsOptions`, `wecrmAccounts` (WhatsApp), `onSaveDeliverySettings`. **Use only cap-ui-library components** for all form elements.
+
+23. **ModifyDeliverySettings — SMS**  
+    - Two dropdowns: (1) Account (domain) — options from `senderDetailsOptions` mapped to `{ label: domainName, value: domainId }`; (2) Sender number — options from the selected domain’s `gsmSenders` (label and value).  
+    - When domain changes, reset sender to first/default of that domain’s gsmSenders.  
+    - Controlled: value for domain = `deliverySettings.domainId`, value for sender = `deliverySettings.gsmSenderId`.  
+    - On Done: call `onSaveDeliverySettings({ domainId, gsmSenderId, domainName })`.
+
+24. **ModifyDeliverySettings — Email**  
+    - Dropdowns: (1) Email domain, (2) Sender name / Sender ID (emailSenders), (3) Sender ID (if different from sender name per design), (4) Reply-to ID (emailRepliers).  
+    - Match campaigns UI: “Email domain”, “Sender name”, “Sender ID”, “Reply-to ID”. Options from selected domain’s emailSenders and emailRepliers.  
+    - On domain change, set default sender and reply-to from that domain.  
+    - On Done: call `onSaveDeliverySettings({ domainId, senderId, senderLabel, replyToId, domainName })`.
+
+25. **ModifyDeliverySettings — WhatsApp**  
+    - Dropdowns: (1) Account — from `wecrmAccounts` (label: account name, value: sourceAccountIdentifier or id); (2) Sender number — from `senderDetailsOptions.WHATSAPP` (filter by selected account if API returns per-account; else show all gsmSenders from first or matching domain).  
+    - On Done: call `onSaveDeliverySettings({ domainId, senderMobNum, accountId, sourceAccountIdentifier, accountName })`.
+
+26. **Styling and component library**  
+    - Use **CapSlideBox** from **cap-ui-library** for the delivery settings panel (no CapModal). Use **CapSelect** / **CapCustomSelect** for dropdowns, **CapButton** for Done, **CapRow**, **CapHeader**, **CapLabel**, **CapIcon** for layout and summary — all from cap-ui-library. Add minimal SCSS in `DeliverySettings/_deliverySettings.scss` if needed (margin, alignment with pencil icon). Import in DeliverySettings index.
+
+---
+
+### 12.7 Phase 4 — Payload Wiring (Detailed Steps)
+
+27. **Pass delivery settings into prepareTestMessagePayload**  
+    - Locate the call to `prepareTestMessagePayload` in CommonTestAndPreview (inside handleSendTestMessage or equivalent).  
+    - Add an argument, e.g. `deliverySettingsOverride`, and pass `testPreviewDeliverySettings[channel]` (or null when channel not in scope).  
+    - Signature change: `prepareTestMessagePayload(channelType, formDataObj, contentStr, customValuesObj, recipientDetails, previewDataObj, deliverySettingsOverride)`.
+
+28. **Inside prepareTestMessagePayload — EMAIL branch**  
+    - After building the initial `emailDeliverySettings` object with dummy values, if `deliverySettingsOverride` exists and has senderId/senderLabel/replyToId/domainId, override:  
+      `channelSettings.senderLabel = deliverySettingsOverride.senderLabel`,  
+      `channelSettings.senderId = deliverySettingsOverride.senderId`,  
+      `channelSettings.replyToId = deliverySettingsOverride.replyToId`,  
+      and optionally `channelSettings.domainId`.  
+    - If override is null or empty, leave existing dummy values (backward compatible).
+
+29. **Inside prepareTestMessagePayload — SMS branch**  
+    - Similarly, if `deliverySettingsOverride` present, set  
+      `smsDeliverySettings.channelSettings.gsmSenderId = deliverySettingsOverride.gsmSenderId`,  
+      `smsDeliverySettings.channelSettings.domainId = deliverySettingsOverride.domainId`.  
+    - Otherwise keep current defaults.
+
+30. **Inside prepareTestMessagePayload — WHATSAPP branch**  
+    - If `deliverySettingsOverride` present:  
+      - Set `whatsappDeliverySettings.channelSettings.senderMobNum`, `domainId` from override.  
+      - Set `whatsappMessageContent.accountId`, `sourceAccountIdentifier`, `accountName` from override when available.  
+    - Otherwise keep existing behaviour (e.g. from formData/additionalProps).
+
+---
+
+### 12.8 Phase 5 — orgUnitId and Parent Wiring (Detailed Steps)
+
+31. **CommonTestAndPreview props**  
+    - Add prop `orgUnitId` (number, optional). In defaultProps set `orgUnitId: -1`. Use it in the useEffect that calls getSenderDetails.
+
+32. **TestAndPreviewSlidebox**  
+    - Ensure it passes through `orgUnitId` from its props to CommonTestAndPreview. So wherever TestAndPreviewSlidebox is used, parents should pass `orgUnitId` when available (e.g. from CreativesContainer).
+
+33. **CreativesContainer / SlideBoxContent**  
+    - When rendering TestAndPreviewSlidebox (or the component that wraps CommonTestAndPreview), pass `orgUnitId={orgUnitId}` so that when user is in a specific org context, sender details are org-scoped.
+
+34. **Standalone containers (WhatsApp, Zalo, etc.)**  
+    - If they render TestAndPreviewSlidebox without orgUnitId, CommonTestAndPreview will use -1; document that -1 means global/default org for API.
+
+---
+
+### 12.9 Phase 6 — Testing and Verification (Detailed Steps)
+
+35. **Unit tests — SendTestMessage**  
+    - Test that when channel is SMS/EMAIL/WHATSAPP, a “Delivery settings” section is rendered and that it receives deliverySettings and callbacks.  
+    - Test that when channel is RCS or another channel, no delivery settings block is rendered.
+
+36. **Unit tests — DeliverySettings / ModifyDeliverySettings**  
+    - Test that summary text shows “Not configured” when deliverySettings are empty.  
+    - Test that when deliverySettings have values, summary shows correct labels.  
+    - Test that clicking Done calls onSaveDeliverySettings with the selected values (mock dropdowns or fire change events).
+
+37. **Unit tests — prepareTestMessagePayload**  
+    - For EMAIL, SMS, WHATSAPP: call prepareTestMessagePayload with a mock deliverySettingsOverride and assert that the returned payload’s channelSettings (and WhatsApp account fields) contain those values.  
+    - Call with null/undefined override and assert payload still has previous default structure (backward compatibility).
+
+38. **Integration / manual**  
+    - Open Test & Preview for SMS: open Delivery settings, select domain and sender, Done. Send test message; verify in network tab that request payload includes smsDeliverySettings.channelSettings.gsmSenderId and domainId.  
+    - Same for Email (senderId, replyToId) and WhatsApp (senderMobNum, domainId, account info).  
+    - Verify other channels (e.g. RCS) still work and show no delivery settings.
+
+39. **Regression**  
+    - Ensure existing tests for CommonTestAndPreview (e.g. test and preview flow, send test message) still pass; update mocks if new props are required.
+
+---
+
+### 12.10 File-Level Summary (Quick Reference)
+
+| Action | File path | What to do |
+|--------|-----------|------------|
+| **Redux (use existing CommonTestAndPreview slice)** |
+| MODIFY | `CommonTestAndPreview/constants.js` | Add GET_SENDER_DETAILS_* and GET_WECRM_ACCOUNTS_* (REQUESTED, SUCCESS, FAILURE). |
+| MODIFY | `CommonTestAndPreview/actions.js` | Add getSenderDetailsRequested({ channel, orgUnitId }), getWeCrmAccountsRequested({ sourceName }). |
+| MODIFY | `CommonTestAndPreview/sagas.js` | Add getSenderDetailsSaga (call Api.getSenderDetails, parse, put SUCCESS/FAILURE), getWeCrmAccountsSaga; watchGetSenderDetails, watchGetWeCrmAccounts; register in commonTestAndPreviewSaga(). |
+| MODIFY | `CommonTestAndPreview/reducer.js` | Add senderDetailsByChannel, wecrmAccounts, isLoadingSenderDetails, errors; handle all six new action types. |
+| MODIFY | `CommonTestAndPreview/selectors.js` | Add makeSelectSenderDetailsByChannel (or makeSelectSenderDetailsForChannel), makeSelectWeCrmAccounts, makeSelectIsLoadingSenderDetails, error selectors; export. |
+| MODIFY | `TestAndPreviewSlidebox/index.js` | mapStateToProps: add senderDetailsByChannel, wecrmAccounts, isLoadingSenderDetails (from new selectors). Pass orgUnitId through to CommonTestAndPreview. |
+| **DeliverySettings folder and component** |
+| CREATE | `CommonTestAndPreview/DeliverySettings/utils/parseSenderDetailsResponse.js` | Normalize getSenderDetails response to { domains: [...] } per channel; used in saga. |
+| CREATE | `CommonTestAndPreview/DeliverySettings/constants.js` | CHANNELS_WITH_DELIVERY_SETTINGS, default delivery-setting shapes. |
+| CREATE | `CommonTestAndPreview/DeliverySettings/messages.js` | defineMessages for delivery settings, account, sender number, domain, done, not configured. |
+| CREATE | `CommonTestAndPreview/DeliverySettings/index.js` | Summary row + pencil (cap-ui-library); state isSlideBoxOpen; render **CapSlideBox** with ModifyDeliverySettings content when open; pass props. |
+| CREATE | `CommonTestAndPreview/DeliverySettings/ModifyDeliverySettings.js` | **CapSlideBox** (cap-ui-library) content with channel-specific dropdowns (CapSelect) and Done (CapButton); call onSaveDeliverySettings. All from cap-ui-library. |
+| CREATE | `CommonTestAndPreview/DeliverySettings/_deliverySettings.scss` (optional) | Minor layout/spacing for summary and CapSlideBox. All UI components from cap-ui-library. |
+| **CommonTestAndPreview and SendTestMessage** |
+| MODIFY | `CommonTestAndPreview/index.js` | Add **local** state only: testPreviewDeliverySettings. In useEffect **dispatch** actions.getSenderDetailsRequested and actions.getWeCrmAccountsRequested (no direct API calls). Read senderDetailsByChannel, wecrmAccounts, isLoadingSenderDetails from **props** (Redux). Pass deliverySettings, senderDetailsOptions (from Redux prop), wecrmAccounts, onSaveDeliverySettings to SendTestMessage; pass deliverySettingsOverride into prepareTestMessagePayload; add orgUnitId prop. |
+| MODIFY | `CommonTestAndPreview/index.js` (prepareTestMessagePayload) | Add 7th parameter deliverySettingsOverride; in EMAIL/SMS/WHATSAPP branches merge override into channelSettings (and WhatsApp account fields). |
+| MODIFY | `CommonTestAndPreview/SendTestMessage.js` | Insert Delivery settings row above Send button; conditionally render <DeliverySettings /> for SMS/EMAIL/WHATSAPP; pass channel, deliverySettings, senderDetailsOptions (from Redux), wecrmAccounts, onSaveDeliverySettings, isLoadingSenderDetails, formatMessage. |
+| MODIFY | Parent(s) that render TestAndPreviewSlidebox (e.g. SlideBoxContent) | Pass orgUnitId when available. |
+| MODIFY | CommonTestAndPreview tests | Update defaultProps/mocks to include orgUnitId, deliverySettings, senderDetailsByChannel, wecrmAccounts, onSaveDeliverySettings, actions (with getSenderDetailsRequested, getWeCrmAccountsRequested); add tests for delivery settings visibility and prepareTestMessagePayload with override. Add saga/reducer/selector tests for new delivery-settings actions. |
+
+---
+
+### 12.11 Risk and Edge Cases
+
+40. **Empty options**  
+    - If getSenderDetails returns empty or fails, senderDetailsByChannel[channel] stays []. Do **not** auto-set a default; leave `testPreviewDeliverySettings[channel]` empty. The **one** delivery setting row remains visible; summary shows **empty values** (e.g. “Account: —”, “Sender number: —”) or “Not configured” (campaigns-style). **CapSlideBox** content should show empty dropdowns (CapSelect) or “No options”; Done (CapButton) can still be allowed (no selection) or disabled.
+
+41. **WhatsApp account vs sender details**  
+    - getSenderDetails('WHATSAPP') may return multiple entries (one per account/domain). Match by sourceAccountIdentifier when user selects an account from WeCRM so that sender number dropdown shows only numbers for that account.
+
+42. **orgUnitId -1**  
+    - Backend must accept orgUnitId -1 for getSenderDetails; document and test. If backend requires a valid org, parents must always pass orgUnitId when in org context.
+
+43. **No selection**  
+    - User opens CapSlideBox but does not select anything and clicks Done: either save empty selection (summary “Not configured”) or keep previous selection. Recommend: allow saving empty and show “Not configured”; on send test, payload still uses empty defaults (backward compatible).
+
+---
+
+**Document version:** 1.4  
+**Last updated:** Delivery settings panel must use **CapSlideBox** from **cap-ui-library** (not CapModal). All implementation must use **cap-ui-library** common components (CapSlideBox, CapSelect, CapButton, CapRow, CapHeader, CapIcon, etc.).  
+**Next step:** Proceed phase-by-phase; start with Phase 1 (APIs, parser, folder and constants/messages), then Phase 2 (state and data loading), then Phase 3 (UI), then Phase 4 (payload wiring), then Phase 5–6 (orgUnitId, tests, verification).