@capillarytech/creatives-library 8.0.236-beta.0 → 8.0.237

package/v2Containers/Rcs/tests/index.test.js

@@ -578,7 +578,12 @@ describe('RCS createPayload', () => {
     expect(doneBtn.exists()).toBe(true);
     await act(async () => {
       const onClick = doneBtn.prop('onClick');
-      if (typeof onClick === 'function') onClick();
+      if (typeof onClick === 'function') {
+        const result = onClick();
+        if (typeof result === 'function') {
+          await result();
+        }
+      }
       await Promise.resolve();
     });
     
@@ -594,7 +599,10 @@ describe('RCS createPayload', () => {
     expect(payloadArg.name).toBe('PromoCard');
     expect(payloadArg.type).toBe('RCS');
     expect(payloadArg.versions.base.content.RCS.rcsContent.contentType).toBe('rich_card');
-    expect(payloadArg.versions.base.content.RCS.rcsContent.isHostIcs).toBe(true);
+    expect(payloadArg.versions.base.content.RCS.rcsContent.accountId).toBe('rcs-account-123');
+    expect(payloadArg.versions.base.content.RCS.rcsContent.accessToken).toBe('secret-token');
+    expect(payloadArg.versions.base.content.RCS.rcsContent.hostName).toBe('rcs.host.example.com');
+    expect(payloadArg.versions.base.content.RCS.rcsContent.accountName).toBe('Brand RCS Account');
     expect(payloadArg.versions.base.content.RCS.rcsContent.cardSettings).toEqual(
       expect.objectContaining({ cardOrientation: 'HORIZONTAL', mediaAlignment: 'LEFT', cardWidth: 'SMALL' }),
     );
@@ -605,6 +613,135 @@ describe('RCS createPayload', () => {
     );
   });
 
+  it('should include empty account metadata when no account is selected', async () => {
+    const createRcsTemplate = jest.fn();
+    const getTemplateDetails = jest.fn();
+    const getFormData = jest.fn();
+    const { createPayloadFullMode } = mockData;
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            createRcsTemplate,
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails,
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          rcsData={createPayloadFullMode}
+          accountData={{}}
+          isFullMode
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled={false}
+          smsRegister={'DLT'}
+          getFormData={getFormData}
+        />
+      </Provider>,
+    );
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    const doneBtn = wrapper.find('CapButton.rcs-done-btn').at(0);
+    expect(doneBtn.exists()).toBe(true);
+    await act(async () => {
+      const onClick = doneBtn.prop('onClick');
+      if (typeof onClick === 'function') {
+        onClick();
+      }
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    const payloadArg =
+      createRcsTemplate.mock.calls[0]?.[0] ||
+      getFormData.mock.calls[0]?.[0]?.value;
+    expect(payloadArg).toBeDefined();
+    const rcsContent = payloadArg.versions.base.content.RCS.rcsContent;
+    expect(rcsContent.accountId).toBe('');
+    expect(rcsContent.accessToken).toBe('');
+    expect(rcsContent.hostName).toBe('');
+    expect(rcsContent.accountName).toBe('');
+  });
+
+  it('should attach DLT template configs when enabled', async () => {
+    const createRcsTemplate = jest.fn();
+    const getFormData = jest.fn();
+    const { createPayloadFullMode } = mockData;
+
+    const wrapper = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            createRcsTemplate,
+            clearCreateResponse: jest.fn(),
+            getTemplateDetails: jest.fn(),
+            uploadRcsAsset: jest.fn(),
+            clearRcsMediaAsset: jest.fn(),
+            editTemplate: jest.fn(),
+            clearEditResponse: jest.fn(),
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={{ pathname: '/rcs/create', query: { type: false, module: 'default' }, search: '' }}
+          params={params}
+          rcsData={createPayloadFullMode}
+          accountData={createPayloadFullMode.accountData}
+          isFullMode
+          isEditFlow={false}
+          loadingTags={false}
+          metaEntities={[]}
+          isDltEnabled
+          smsRegister={'DLT'}
+          getFormData={getFormData}
+        />
+      </Provider>,
+    );
+
+    await act(async () => Promise.resolve());
+    wrapper.update();
+
+    const doneBtn = wrapper.find('CapButton.rcs-done-btn').at(0);
+    await act(async () => {
+      const onClick = doneBtn.prop('onClick');
+      if (typeof onClick === 'function') {
+        onClick();
+      }
+      await Promise.resolve();
+    });
+    wrapper.update();
+
+    const payloadArg =
+      createRcsTemplate.mock.calls[0]?.[0] ||
+      getFormData.mock.calls[0]?.[0]?.value;
+    expect(payloadArg).toBeDefined();
+    expect(payloadArg.versions.base.content.RCS.smsFallBackContent).toEqual(
+      expect.objectContaining({
+        templateConfigs: expect.objectContaining({
+          templateId: '',
+          templateName: '',
+          template: '',
+          registeredSenderIds: [],
+        }),
+      }),
+    );
+  });
+
   it('should build expected payload in non-full mode (VIDEO, vertical medium)', () => {
     const getFormData = jest.fn();
     const { createPayloadNonFullMode } = mockData;

package/v2Containers/Rcs/tests/mockData.js

@@ -24,7 +24,6 @@ export const mockData = {
             },
             cardType: "STANDALONE",
             contentType: "text_message",
-            isHostIcs: true,
             smsFallBackContent: {
               message: "Fallback SMS for text",
             },
@@ -71,7 +70,6 @@ export const mockData = {
             },
             cardType: "STANDALONE",
             contentType: "rich_card",
-            isHostIcs: true,
             smsFallBackContent: {
               message: "Fallback SMS for image",
             },
@@ -106,7 +104,6 @@ export const mockData = {
             },
             cardType: "STANDALONE",
             contentType: "rich_card",
-            isHostIcs: true,
             smsFallBackContent: {
               message: "Fallback SMS for video",
             },
@@ -122,6 +119,10 @@ export const mockData = {
       name: 'PromoCard',
       versions: {
         base: {
+          template_id: 'TPL-001',
+          template_name: 'PromoTPL',
+          'sms-editor': '<p>SMS body</p>',
+          header: ['SENDER1'],
           content: {
             RCS: {
               rcsContent: {
@@ -149,6 +150,8 @@ export const mockData = {
       selectedRcsAccount: {
         sourceAccountIdentifier: 'rcs-account-123',
         configs: { accessToken: 'secret-token' },
+        hostName: 'rcs.host.example.com',
+        name: 'Brand RCS Account',
       },
     },
   },

package/v2Containers/Rcs/tests/saga.test.js

@@ -167,6 +167,50 @@ describe("rcs Sagas", () => {
         .run();
     });
 
+    it("handles failure picking status.message when message is absent", () => {
+      const template = {};
+      const apiResult = { status: { code: 500, message: "Nested Msg" } };
+      return expectSaga(createRCSTemplate, { template })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: CREATE_RCS_TEMPLATE_FAILURE, error: "Nested Msg", errorMsg: "Nested Msg" })
+        .run();
+    });
+
+    it("handles failure picking result.status.code when others are absent", () => {
+      const template = {};
+      const apiResult = { status: { code: 500 } };
+      return expectSaga(createRCSTemplate, { template })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: CREATE_RCS_TEMPLATE_FAILURE, error: "Error: 500", errorMsg: "Error: 500" })
+        .run();
+    });
+
+    it("handles callback with errorMsg", () => {
+      const template = {};
+      const callback = jest.fn();
+      const apiResult = { status: { code: 500, message: "Nested Msg" } };
+      return expectSaga(createRCSTemplate, { template, callback })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: CREATE_RCS_TEMPLATE_FAILURE, error: "Nested Msg", errorMsg: "Nested Msg" })
+        .run()
+        .then(() => {
+          expect(callback).toHaveBeenCalledWith(null, "Nested Msg");
+        });
+    });
+
+    it("handles callback with error object when errorMsg is undefined", () => {
+      const template = {};
+      const callback = jest.fn();
+      const apiError = new Error("Network Error");
+      return expectSaga(createRCSTemplate, { template, callback })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), Promise.reject(apiError)]])
+        .put({ type: CREATE_RCS_TEMPLATE_FAILURE, error: apiError, errorMsg: undefined })
+        .run()
+        .then(() => {
+          expect(callback).toHaveBeenCalledWith(null, apiError);
+        });
+    });
+
     it("handles status code exactly 400 (boundary condition)", () => {
       const template = {};
       const callback = jest.fn();
@@ -226,6 +270,50 @@ describe("rcs Sagas", () => {
         .run();
     });
 
+    it("handles failure picking status.message when message is absent", () => {
+      const template = {};
+      const apiResult = { status: { code: 500, message: "Nested Msg" } };
+      return expectSaga(editTemplate, { template })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: EDIT_RCS_TEMPLATE_FAILURE, error: "Nested Msg", errorMsg: "Nested Msg" })
+        .run();
+    });
+
+    it("handles failure picking result.status.code when others are absent", () => {
+      const template = {};
+      const apiResult = { status: { code: 500 } };
+      return expectSaga(editTemplate, { template })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: EDIT_RCS_TEMPLATE_FAILURE, error: "Error: 500", errorMsg: "Error: 500" })
+        .run();
+    });
+
+    it("handles callback with errorMsg", () => {
+      const template = {};
+      const callback = jest.fn();
+      const apiResult = { status: { code: 500, message: "Nested Msg" } };
+      return expectSaga(editTemplate, { template, callback })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), apiResult]])
+        .put({ type: EDIT_RCS_TEMPLATE_FAILURE, error: "Nested Msg", errorMsg: "Nested Msg" })
+        .run()
+        .then(() => {
+          expect(callback).toHaveBeenCalledWith(null, "Nested Msg");
+        });
+    });
+
+    it("handles callback with error object when errorMsg is undefined", () => {
+      const template = {};
+      const callback = jest.fn();
+      const apiError = new Error("Network Error");
+      return expectSaga(editTemplate, { template, callback })
+        .provide([[matchers.call.fn(Api.createRcsTemplate), Promise.reject(apiError)]])
+        .put({ type: EDIT_RCS_TEMPLATE_FAILURE, error: apiError, errorMsg: undefined })
+        .run()
+        .then(() => {
+          expect(callback).toHaveBeenCalledWith(null, apiError);
+        });
+    });
+
     it("handles status code exactly 400 (boundary condition)", () => {
       const template = {};
       const callback = jest.fn();

package/v2Containers/TagList/index.js

@@ -372,7 +372,6 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
           channel={this.props.channel}
           disabled={this.props.disabled}
           fetchingSchemaError={this?.state?.tagsError}
-          popoverPlacement={this.props.popoverPlacement}
         />
       </div>
     );
@@ -403,7 +402,6 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
-  popoverPlacement: PropTypes.string,
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
     locale: PropTypes.string,

package/v2Containers/Templates/actions.js

@@ -68,7 +68,9 @@ export function setChannelAccount(channel, account) {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
     [ZALO]: types.SET_ZALO_ACCOUNT,
+    [RCS]: types.SET_RCS_ACCOUNT,
   };
+  
   if (channelTypeMapping[channel]) {
     return {
       type: channelTypeMapping[channel],
@@ -84,12 +86,6 @@ export function setViberAccount(viberAccount) {
     viberAccount,
   };
 }
-export function setRcsAccount(rcsAccount) {
-  return {
-    type: types.SET_RCS_ACCOUNT,
-    rcsAccount,
-  };
-}
 
 export function setFacebookAccount(faceBookAccount) {
   return {

package/v2Containers/Templates/constants.js

@@ -80,6 +80,7 @@ export const GET_CDN_TRANSFORMATION_CONFIG_FAILURE = 'app/v2Containers/Templates
 export const ACCOUNT_MAPPING_ON_CHANNEL = {
   whatsapp: 'selectedWhatsappAccount',
   zalo: 'selectedZaloAccount',
+  rcs: 'selectedRcsAccount',
 };
 
 export const noFilteredWhatsappZaloTemplatesTitle= 'noFilteredWhatsappZaloTemplatesTitle';

package/v2Containers/Templates/index.js

@@ -292,7 +292,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       return '';
     }
 
-    const domainHostName = domainPropertiesData?.find(({ domainProperties }) => {
+    let domainHostName = domainPropertiesData?.find(({ domainProperties }) => {
       const {
         connectionProperties: { account_sid, wabaId, userid, sourceAccountIdentifier, oa_id } = {},
       } = domainProperties || {};
@@ -301,6 +301,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       return [account_sid, wabaId, userid, oa_id, sourceAccountIdentifier].includes(selectedSourceAccountIdentifier);
     })?.domainProperties?.hostName || '';
 
+    // Fallback for RCS: If no match found (empty connectionProperties) and there's exactly one domain property, use that hostName
+    if (!domainHostName && domainPropertiesData.length === 1) {
+      domainHostName = domainPropertiesData[0]?.domainProperties?.hostName || '';
+    }
+
     this.setState({ hostName: domainHostName });
     return domainHostName;
   }
@@ -410,7 +415,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     if (this.props.location.query.type === 'embedded') {
       this.props.actions.resetAccount();
     }
-    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes((this.state.channel || '').toLowerCase())) {
+    if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes((this.state.channel || '').toLowerCase())) {
       const queryParams = {
         // name: this.state.searchText,
         // sortBy: this.state.sortBy,
@@ -483,7 +488,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       }
 
       this.setState({ channel }, () => {
-        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill', RCS_LOWERCASE].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
+        if (['line', VIBER_CHANNEL, FACEBOOK_CHANNEL, 'sms', 'email', 'ebill'].includes(this.state.channel.toLowerCase()) || (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount))) {
           if (this.state.channel.toLowerCase() === 'wechat' && !isEmpty(nextProps.Templates.selectedWeChatAccount)) {
             params.wecrmId = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_app_id;
             params.wecrmToken = (nextProps.Templates.selectedWeChatAccount.configs || {}).wecrm_token;
@@ -521,22 +526,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         this.getAllTemplates({params});
       });
     }
-    if (selectedChannel === RCS_LOWERCASE && isEmpty(nextProps.Templates.selectedRcsAccount)) {
-      let selectedAccount = '';
-      if (isEmpty(nextProps.Templates.weCrmAccounts)) {
-        return;
-      }
-      selectedAccount = nextProps.Templates.weCrmAccounts[0];
-      const { configs = {}, name = "" } = selectedAccount;
-      const { wecrm_app_id = "", wecrm_token = "", sourceAccountIdentifier = "" } = configs;
-      this.setState({selectedAccount: name}, () => {
-        params.wecrmId = wecrm_app_id;
-        params.wecrmToken = wecrm_token;
-        params.originalId = sourceAccountIdentifier;
-        this.props.actions.setRcsAccount(nextProps.Templates.weCrmAccounts[0]);
-        this.getAllTemplates({params});
-      });
-    }
     if (selectedChannel === FACEBOOK_CHANNEL && isEmpty(nextProps.Templates.selectedFacebookAccount)) {
       if (isEmpty(nextProps.Templates.campaignSettings)) {
         return;
@@ -751,7 +740,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.setState({ previewTemplate: nextProps.Templates.templateDetails });
     }
     const { weCrmAccounts: weCrmAccountsList = [], senderDetails = {} } = get(nextProps, 'Templates', {});
-    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE];
+    const weCrmChannels = [WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE];
 
     // Keeping the wechat flow separate as it has different logic for setting the account. Currently we don't support wechat but still keeping the flow.
     if (weCrmAccountsList?.length === 1 && this.state?.defaultAccount && selectedChannel === WECHAT_LOWERCASE && !isEmpty(senderDetails?.hostName)) {
@@ -773,6 +762,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       this.getAllTemplates({params: paramsDefault}, true);
     }
 
+    // Auto-select single account for multi-account channels (WhatsApp, Zalo, RCS)
     if (weCrmAccountsList?.length && this.state?.defaultAccount && (weCrmChannels.includes(selectedChannel))) {
       const isSingleAccount = weCrmAccountsList?.length === 1;
       const selectedAccount = this.props.Templates[ACCOUNT_MAPPING_ON_CHANNEL[selectedChannel]] || {};
@@ -799,6 +789,11 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           paramsDefault.name = this.state.searchText;
           paramsDefault.sortBy = this.state.sortBy;
         }
+        if (selectedChannel === RCS_LOWERCASE) {
+          paramsDefault.accountId = sourceAccountIdentifier;
+          paramsDefault.accessToken = configs?.accessToken;
+          paramsDefault.host = hostName || this.props.Templates?.selectedRcsAccount?.hostName;
+        }
         this.setState({ defaultAccount: false });
         /**
          * Incase of multiple accounts, getAllTemplates is called on selecting the account. It's handled in onAccountSelect function.
@@ -834,7 +829,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         params.sortBy = this.state.sortBy;
       }
       const selectedChannel = this.state.channel.toLowerCase();
-      const isZaloOrWhatsapp = [ZALO_LOWERCASE, WHATSAPP_LOWERCASE].includes(selectedChannel);
+      const isZaloOrWhatsappOrRcs = [ZALO_LOWERCASE, WHATSAPP_LOWERCASE, RCS_LOWERCASE].includes(selectedChannel);
       if (selectedChannel === 'wechat') {
         params.wecrmId = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_app_id;
         params.wecrmToken = this.props.Templates.weCrmAccounts[findIndex(this.props.Templates.weCrmAccounts, { name: value})].configs.wecrm_token;
@@ -858,7 +853,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         const setAcc = this.props?.Templates?.weCrmAccounts?.find((item) => item?.name === this.state.selectedAccount);
         const { domainProperties = [] } = this.props?.Templates?.senderDetails || {};
         let hostName = '';
-        if (isZaloOrWhatsapp) {
+        if (isZaloOrWhatsappOrRcs) {
           hostName = this.getHostName(setAcc?.sourceAccountIdentifier, domainProperties);
           setAcc.hostName = hostName;
         }
@@ -881,11 +876,19 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           params.accountId = sourceAccountIdentifier;
           params.host = hostName;
         }
+        if (selectedChannel === RCS_LOWERCASE && hostName) {
+          const { configs: { accessToken = "" } = {} } = setAcc || {};
+          params.accountId = sourceAccountIdentifier;
+          params.host = hostName;
+          if (accessToken) {
+            params.accessToken = accessToken;
+          }
+        }
       }
 
       this.setState({ activeMode: TEMPLATES_MODE }, () => {
-        // Restrict getAllTemplates call only if selectedChannel is ZALO or WHATSAPP and hostName is empty
-        if (!(isZaloOrWhatsapp && !params?.host)) {
+        // Restrict getAllTemplates call only if selectedChannel is ZALO, WHATSAPP or RCS and hostName is empty
+        if (!(isZaloOrWhatsappOrRcs && !params?.host)) {
           this.getAllTemplates({ params, resetPage: true });
         }
       });
@@ -937,11 +940,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const zaloSelectedTemplateData = this.selectTemplate(parseInt(creativesParams._id, 10)) || {};
             const { name = '' } = zaloSelectedTemplateData;
             creativesParams.name = name
-          } else if (this.state.channel?.toLowerCase() === EMAIL_LOWERCASE) {
-            const emailSelectedTemplateData = this.selectTemplate(creativesParams._id) || {};
-            const activeTab = get(emailSelectedTemplateData, 'versions.base.activeTab', 'en');
-            const isDragDrop = get(emailSelectedTemplateData, `versions.base.${activeTab}.is_drag_drop`, false);
-            creativesParams.is_drag_drop = isDragDrop;
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();
@@ -1009,6 +1007,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
         this.setWhatsappQueryParams(queryParams, params);
       }
+      if (this.state?.channel?.toLowerCase() === RCS_LOWERCASE && !isEmpty(this.props.Templates?.selectedRcsAccount)) {
+        const { sourceAccountIdentifier = '', configs: { accessToken = '' } = {}, hostName = '' } = this.props.Templates.selectedRcsAccount;
+        if (sourceAccountIdentifier) {
+          queryParams.accountId = sourceAccountIdentifier;
+        }
+        if (accessToken) {
+          queryParams.accessToken = accessToken;
+        }
+        if (hostName) {
+          queryParams.host = hostName;
+        }
+      }
       this.props.actions.getAllTemplates(channel, queryParams,`${copyOf}`);
     } else if ((resetPage || (page === 1 && this.state.templatesCount === 0) || page <= (this.state.templatesCount / this.state.perPageLimit))) {
       if (getNextPage) {
@@ -1061,6 +1071,18 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       if (this.state?.channel?.toLowerCase() === WHATSAPP_LOWERCASE) {
         this.setWhatsappQueryParams(queryParams, params);
       }
+      if (this.state?.channel?.toLowerCase() === RCS_LOWERCASE && !isEmpty(this.props.Templates?.selectedRcsAccount)) {
+        const { sourceAccountIdentifier = '', configs: { accessToken = '' } = {}, hostName = '' } = this.props.Templates.selectedRcsAccount;
+        if (sourceAccountIdentifier) {
+          queryParams.accountId = sourceAccountIdentifier;
+        }
+        if (accessToken) {
+          queryParams.accessToken = accessToken;
+        }
+        if (hostName) {
+          queryParams.host = hostName;
+        }
+      }
       this.setState({ page, templatesCount }, () => {
         queryParams.page = page;
         queryParams.perPage = this.state.perPageLimit;
@@ -1760,9 +1782,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
 return (<div>
-      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
+      {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO,RCS].includes(currentChannel) && this.showAccountName()}
       {filterContent}
-      {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
+      {[WHATSAPP, ZALO,RCS].includes(currentChannel) && this.selectedFilters()}
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : this.isFullMode() ? "v2-pagination-container" : "v2-pagination-container-half"}>
@@ -2975,9 +2997,9 @@ return (<div>
     const isMobilePushChannel = channel === MOBILE_PUSH;
     const isInAppChannel = channel === INAPP;
     const isFacebookChannel = channel === FACEBOOK;
-    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
+    if ([WECHAT, MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel) && !isEmpty(weCrmAccounts) && !isFacebookChannel) {
       forEach(weCrmAccounts, (account) => {
-        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP].includes(channel)) {
+        if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || [MOBILE_PUSH, INAPP, LINE, ZALO, WHATSAPP, RCS].includes(channel)) {
           if (query.type === 'embedded' && (!query.module || (query.module && query.module !== 'library'))) {
             if (query.source_account_id && account.sourceAccountIdentifier === query.source_account_id) {
               accountOptions.push(
@@ -3056,12 +3078,17 @@ return (<div>
         noAccountHeader = messages.noAccountsPresentZalo;
         break;
       }
+      case RCS: {
+        accountHeader = formatMessage(messages.rcsAccount);
+        noAccountHeader = messages.noAccountsPresentRcs;
+        break;
+      }
       default:
         break;
     }
     let showNoAccountHeader = isEmpty(weCrmAccounts) && !fetchingWeCrmAccounts;
-    // Zalo and Whatsapp has dependencies on domainProperties to get the hostName. Show loader until the domainProperties are fetched.
-    const isDomainPropertiesLoading = [WHATSAPP, ZALO].includes(channel) && senderDetails?.status === "REQUEST";
+    // Zalo, Whatsapp and RCS have dependencies on domainProperties to get the hostName. Show loader until the domainProperties are fetched.
+    const isDomainPropertiesLoading = [WHATSAPP, ZALO, RCS].includes(channel) && senderDetails?.status === "REQUEST";
     if (channel === FACEBOOK && !isEmpty(campaignSettings) ) {
       const fbSetting = get(campaignSettings, 'accountSettings.socialAccountSettings.facebookAccountSettings', []);
       const { orgUnitFacebookPageSettingsMap } = fbSetting[0] || {};
@@ -3131,6 +3158,7 @@ return (<div>
       [WHATSAPP]: 'whatsappAccount',
       [INAPP]: 'inappAccount',
       [ZALO]: 'zaloAccount',
+      [RCS]: 'rcsAccount',
     };
     return formatMessage(messages[channelObj[channel?.toUpperCase()]]);
   }
@@ -3252,10 +3280,9 @@ return (<div>
       }
     }
 
-    const showForChannels = (![VIBER_CHANNEL, FACEBOOK_CHANNEL,RCS_LOWERCASE].includes(channel.toLowerCase()) ||
+    const showForChannels = (![VIBER_CHANNEL, FACEBOOK_CHANNEL].includes(channel.toLowerCase()) ||
       (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))) ||
-      (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)||
-      (channel.toLowerCase() === RCS_LOWERCASE && isEmpty(get(this.props, 'Templates.selectedRcsAccount', {}))) 
+      (channel.toLowerCase() === FACEBOOK_CHANNEL && showFbAds)
     );
 
 
@@ -3322,7 +3349,7 @@ return (<div>
     const isWhatsappCountExeeded = templatesCount >= MAX_WHATSAPP_TEMPLATES;
     const showWhatsappCountWarning = templatesCount >= WARNING_WHATSAPP_TEMPLATES;
     const whatsappCountExceedText = <FormattedMessage {...messages.whatsappMaxTemplates} values={{ maxCount: MAX_WHATSAPP_TEMPLATES }}/>;
-    if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
+    if (([WHATSAPP_LOWERCASE, ZALO_LOWERCASE, RCS_LOWERCASE].includes(this.state?.channel?.toLocaleLowerCase()) && isEmpty(this.state?.hostName))) {
       isfilterContentVisisble = false;
     }
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH, INAPP].includes(this.state.channel.toUpperCase())) && <div className="action-container">

package/v2Containers/Templates/messages.js

@@ -462,6 +462,10 @@ export default defineMessages({
     id: `${scope}.zaloAccount`,
     defaultMessage: 'Zalo account',
   },
+  "rcsAccount": {
+    id: `${scope}.rcsAccount`,
+    defaultMessage: 'RCS account',
+  },
   "all": {
     id: `${scope}.all`,
     defaultMessage: 'All',
@@ -494,6 +498,10 @@ export default defineMessages({
     id: `${scope}.noAccountsPresentZalo`,
     defaultMessage: "Zalo accounts are not setup for your brand",
   },
+  "noAccountsPresentRcs": {
+    id: `${scope}.noAccountsPresentRcs`,
+    defaultMessage: "RCS accounts are not setup for your brand",
+  },
   "promotional": {
     id: `${scope}.promotional`,
     defaultMessage: 'Promotional',

package/v2Containers/Templates/reducer.js

@@ -118,7 +118,7 @@ function templatesReducer(state = initialState, action) {
         .set('templates', []);
     case types.SET_RCS_ACCOUNT:
       return state
-        .set('selectedRcsAccount', fromJS(action.rcsAccount))
+        .set('selectedRcsAccount', fromJS(action.account))
         .set('templates', []);
     case types.SET_FACEBOOK_ACCOUNT:
       return state
@@ -212,9 +212,9 @@ function templatesReducer(state = initialState, action) {
       return state.set('senderDetails', { status: 'REQUEST' });
     case types.GET_SENDER_DETAILS_SUCCESS: {
       const { channel, domainProperties = {} } = action?.payload || {};
-      const isMultiAccountChannel = ['WHATSAPP', 'ZALO'].includes(channel);
+      const isMultiAccountChannel = ['WHATSAPP', 'ZALO', 'RCS'].includes(channel);
       const senderDetailsKey = isMultiAccountChannel ? 'domainProperties' : 'hostName';
-      // For Whatsapp and Zalo we need to store domainProperties instead of only hostName
+      // For Whatsapp, Zalo and RCS we need to store domainProperties instead of only hostName
       return state.set('senderDetails', {
         status: 'SUCCESS',
         [senderDetailsKey]: isMultiAccountChannel ? domainProperties : action?.payload,

package/v2Containers/Templates/sagas.js

@@ -180,7 +180,7 @@ export function* getSenderDetails({
     if (!apiResponse?.errors?.length) {
       yield put({
         type: types.GET_SENDER_DETAILS_SUCCESS,
-        payload: ['WHATSAPP', 'ZALO'].includes(channel) ?
+        payload: ['WHATSAPP', 'ZALO', 'RCS'].includes(channel) ?
         { channel,
           domainProperties: get(apiResponse, `entity.${channel}`, '')
         } :