@capillarytech/creatives-library 7.12.15 → 7.12.16

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

@@ -0,0 +1,226 @@
+import React from 'react';
+import { browserHistory } from 'react-router';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store';
+import { mountWithIntl } from '../../../../app/helpers/intl-enzym-test-helpers';
+import { Rcs } from '../index';
+import { mockData } from './mockData';
+
+let store;
+beforeAll(() => {
+  store = configureStore({}, browserHistory);
+});
+
+jest.mock('../../CreativesContainer', () => ({
+  __esModule: true,
+  default: (props) => (
+    <div className="creatives-container-mock" {...props}>
+      CreativesContainer
+    </div>
+  ),
+}));
+
+describe('Creatives rcs test/>', () => {
+  let renderedComponent;
+  const uploadRcsAsset = jest.fn();
+  const clearRcsAsset = jest.fn();
+  const createTemplate = jest.fn();
+  const clearCreateResponse = jest.fn();
+  const getTemplateDetails = jest.fn();
+  const editTemplate = jest.fn();
+  const clearEditResponse = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
+  const onCreateComplete = jest.fn();
+  const handleClose = jest.fn();
+  const formatMessage = jest.fn();
+  const params = {
+    id: mockData.rcsData1.templateDetails._id,
+  };
+  const rcsData1 = mockData.rcsData1;
+  const rcsData2 = mockData.rcsData2;
+  const rcsData3 = mockData.rcsData3;
+
+  const renderHelper = (args) => {
+    renderedComponent = mountWithIntl(
+      <Provider store={store}>
+        <Rcs
+          actions={{
+            uploadRcsAsset,
+            clearRcsAsset,
+            createTemplate,
+            clearCreateResponse,
+            getTemplateDetails,
+            editTemplate,
+            clearEditResponse,
+          }}
+          globalActions={{ fetchSchemaForEntity }}
+          onCreateComplete={onCreateComplete}
+          handleClose={handleClose}
+          intl={{ formatMessage }}
+          location={args.isEditFlow ? mockData.location2 : mockData.location1}
+          params={args.params}
+          rcsData={args.rcsData}
+          isFullMode={args.isFullMode || true}
+          isEditFlow={args.isEditFlow || false}
+          loadingTags={false}
+          metaEntities={[]}
+          getDefaultTags={true}
+          isDltEnabled={args.isDltEnabled || false}
+          smsRegister={'DLT'}
+        />
+      </Provider>,
+    );
+  };
+
+  it('should render create mode', () => {
+    renderHelper({});
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template name change', () => {
+    renderHelper({});
+    const templateNameRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('#rcs_template_name_input')
+        .last()
+        .simulate('change', event);
+    };
+    templateNameRenderHelper('test_name');
+    expect(renderedComponent).toMatchSnapshot();
+    templateNameRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template media change', () => {
+    renderHelper({});
+    const event = { target: { value: 'IMAGE' } };
+    expect(renderedComponent.find('CapRadioGroup').props().value).toBe('NONE');
+    expect(renderedComponent).toMatchSnapshot();
+    renderedComponent.find('CapRadioGroup').props().onChange(event);
+    renderedComponent.update();
+    expect(renderedComponent.find('CapRadioGroup').props().value).toBe('IMAGE');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template title change', () => {
+    renderHelper({});
+    const templateTitleRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('#rcs-template-title-input')
+        .last()
+        .simulate('change', event);
+    };
+    templateTitleRenderHelper('test_title');
+    expect(renderedComponent).toMatchSnapshot();
+    templateTitleRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('template desc change', () => {
+    renderHelper({});
+    const templateDescRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('#rcs_template_message_textarea')
+        .last()
+        .simulate('change', event);
+    };
+    templateDescRenderHelper('test_desc');
+    expect(renderedComponent).toMatchSnapshot();
+    templateDescRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('non dlt fallback msg', () => {
+    renderHelper({});
+    const templateDescRenderHelper = (val) => {
+      let event = { target: { value: val } };
+      renderedComponent
+        .find('#rcs_fallback_message_textarea')
+        .last()
+        .simulate('change', event);
+    };
+    templateDescRenderHelper('test_nondlt_fallback');
+    expect(renderedComponent).toMatchSnapshot();
+    templateDescRenderHelper('');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('create with all data, non dlt org', () => {
+    renderHelper({});
+    createTemplate.mockImplementation((obj, callback) => {
+      callback();
+    });
+    expect(
+      renderedComponent.find('CapButton.rcs-done-btn').first().props().disabled,
+    ).toBe(true);
+    renderedComponent
+      .find('#rcs_template_name_input')
+      .last()
+      .simulate('change', { target: { value: 'final_name' } });
+    renderedComponent
+      .find('#rcs-template-title-input')
+      .last()
+      .simulate('change', { target: { value: 'final_title' } });
+    renderedComponent
+      .find('#rcs_template_message_textarea')
+      .last()
+      .simulate('change', { target: { value: 'final_desc' } });
+    expect(
+      renderedComponent.find('CapButton.fallback-preview-btn').first().props()
+        .disabled,
+    ).toBe(true);
+    renderedComponent
+      .find('#rcs_fallback_message_textarea')
+      .last()
+      .simulate('change', { target: { value: 'final_fallback' } });
+    expect(
+      renderedComponent.find('CapButton.fallback-preview-btn').first().props()
+        .disabled,
+    ).toBe(false);
+    renderedComponent.find('CapButton.fallback-preview-btn').simulate('click');
+    expect(renderedComponent).toMatchSnapshot();
+    expect(
+      renderedComponent.find('CapButton.rcs-done-btn').first().props().disabled,
+    ).toBe(false);
+    renderedComponent.find('CapButton.rcs-done-btn').simulate('click');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('should render edit mode in various cases', () => {
+    //non dlt fallback
+    renderHelper({
+      params,
+      rcsData: rcsData1,
+      isEditFlow: true,
+    });
+    expect(renderedComponent).toMatchSnapshot();
+    //dlt enabled but no fallback
+    renderHelper({
+      params,
+      rcsData: rcsData2,
+      isEditFlow: true,
+      isDltEnabled: true,
+    });
+    renderedComponent.find('CapButton.add-dlt-btn').simulate('click');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+
+  it('rcs edit with dlt fallback and save', () => {
+    editTemplate.mockImplementation((obj, callback) => {
+      callback();
+    });
+    //dlt fallback
+    renderHelper({
+      params,
+      rcsData: rcsData3,
+      isEditFlow: true,
+      isDltEnabled: true,
+    });
+    expect(renderedComponent).toMatchSnapshot();
+    renderedComponent.find('CapButton.rcs-done-btn').simulate('click');
+    expect(renderedComponent).toMatchSnapshot();
+  });
+});

package/v2Containers/Rcs/tests/mockData.js

@@ -0,0 +1,166 @@
+export const mockData = {
+  rcsData1: {
+    templateDetails: {
+      _id: '623acf4df971231e66c85882',
+      name: 'RCS_TEST1',
+      type: 'RCS',
+      versions: {
+        history: [],
+        base: {
+          content: {
+            RCS: {
+              cardContent: [
+                {
+                  title: 'This is RCS title',
+                  description: 'This is RCS description ',
+                  mediaType: 'IMAGE',
+                  media: {
+                    mediaUrl:
+                      'https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/62f8c77c-f132-44d8-a822-0e90f57c.jpg',
+                    height: 'MEDIUM',
+                  },
+                },
+              ],
+              cardSettings: {
+                cardOrientation: 'VERTICAL',
+              },
+              cardType: 'STANDALONE',
+              contentType: 'RICHCARD',
+              smsFallBackContent: {
+                message: 'This is fallback msg ',
+              },
+            },
+          },
+        },
+      },
+      isActive: true,
+      orgId: 50146,
+      createdBy: '15000449',
+      updatedBy: '15000449',
+      createdAt: '2022-03-23T07:42:05.226Z',
+      updatedAt: '2022-03-30T03:25:24.084Z',
+    },
+  },
+  rcsData2: {
+    templateDetails: {
+      _id: '62419c0a70387f3eb2f8fdcd',
+      name: 'RCS_TEST2',
+      type: 'RCS',
+      versions: {
+        history: [],
+        base: {
+          content: {
+            RCS: {
+              cardContent: [
+                {
+                  title: 'Rcs title',
+                  description: 'Rcs desc',
+                  mediaType: 'NONE',
+                  media: {
+                    mediaUrl: '',
+                    height: 'MEDIUM',
+                  },
+                },
+              ],
+              cardSettings: {
+                cardOrientation: 'VERTICAL',
+              },
+              cardType: 'STANDALONE',
+              contentType: 'RICHCARD',
+              smsFallBackContent: {
+                message: '',
+                templateConfigs: {},
+              },
+            },
+          },
+        },
+      },
+      isActive: true,
+      orgId: 1604,
+      createdBy: '15000449',
+      updatedBy: '15000449',
+      createdAt: '2022-03-28T11:29:15.072Z',
+      updatedAt: '2022-03-30T03:30:21.273Z',
+    },
+  },
+  rcsData3: {
+    templateDetails: {
+      _id: '62419c0a70387f3eb2f8fdcd',
+      name: 'RCS_TEST3',
+      type: 'RCS',
+      versions: {
+        history: [],
+        base: {
+          content: {
+            RCS: {
+              cardContent: [
+                {
+                  title: 'Rcs title',
+                  description: 'Rcs desc',
+                  mediaType: 'IMAGE',
+                  media: {
+                    mediaUrl:
+                      'https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/8fcb2fdce8f92e4a48d4.png',
+                    height: 'MEDIUM',
+                  },
+                },
+              ],
+              cardSettings: {
+                cardOrientation: 'VERTICAL',
+              },
+              cardType: 'STANDALONE',
+              contentType: 'RICHCARD',
+              smsFallBackContent: {
+                message:
+                  'Dear Linen Club Rewards member, your Coupon code for Rs test is test. Kindly show it to the cashier before billing. Conditions Apply. test',
+                templateConfigs: {
+                  templateId: '1007983204882734091',
+                  templateName: 'Coupon Resend',
+                  template:
+                    'Dear Linen Club Rewards member, your Coupon code for Rs {#var#} is {#var#}. Kindly show it to the cashier before billing. Conditions Apply. {#var#}',
+                  registeredSenderIds: ['LINNCL', 'LINNCB'],
+                  templateVariableMapping: {
+                    '{#var#}_5': {
+                      count: 1,
+                      data: 'test',
+                    },
+                    '{#var#}_3': {
+                      count: 1,
+                      data: 'test',
+                    },
+                    '{#var#}_1': {
+                      count: 1,
+                      data: 'test',
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+      isActive: true,
+      orgId: 1604,
+      createdBy: '15000449',
+      updatedBy: '15000449',
+      createdAt: '2022-03-28T11:29:15.072Z',
+      updatedAt: '2022-03-30T03:29:30.271Z',
+    },
+  },
+  location1: {
+    pathname: '/rcs/create',
+    query: {
+      type: false,
+      module: 'default',
+    },
+    search: '',
+  },
+  location2: {
+    pathname: '/rcs/edit',
+    query: {
+      type: false,
+      module: 'default',
+    },
+    search: '',
+  },
+};

package/v2Containers/Rcs/utils.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import { RCS } from '../CreativesContainer/constants';
+import './index.scss';
+export const getRCSContent = (template) => {
+  const {
+    versions: {
+      base: {
+        content: {
+          [RCS]: {
+            cardContent = [{}],
+          } = {},
+        } = {},
+      } = {},
+    } = {},
+  } = template;
+  const { media = {}, description, title } = cardContent[0];
+  const { mediaUrl } = media;
+  return (
+    <div className="cap-rcs-creatives">
+      {mediaUrl && (
+        <CapImage
+          src={mediaUrl}
+          className="rcs-listing-image"
+        />
+      )}
+      <CapLabel
+        type="label19"
+        className="rcs-listing-content title"
+        fontWeight="bold"
+      >
+        {title}
+      </CapLabel>
+      <CapLabel type="label19" className="rcs-listing-content desc">
+        {description}
+      </CapLabel>
+    </div>
+  );
+};

package/v2Containers/SmsTrai/Edit/index.js

@@ -70,6 +70,7 @@ export const SmsTraiEdit = (props) => {
     isFullMode,
     getFormSubscriptionData,
     templateData = {},
+    selectedOfferDetails,
   } = props || {};
   const { formatMessage } = intl;
   const [loading, updateLoading] = useState(true);
@@ -565,6 +566,7 @@ export const SmsTraiEdit = (props) => {
                     onContextChange={handleOnTagsContextChange}
                     injectedTags={injectedTags || {}}
                     hidePopover={disablehandler()}
+                    selectedOfferDetails={selectedOfferDetails}
                   />
                 }
               />

package/v2Containers/SmsTrai/Edit/tests/__snapshots__/index.test.js.snap

@@ -6071,7 +6071,7 @@ FREE GIFTS-
                                                 />
                                               </CapImage>
                                               <div
-                                                className="msgContainer sms"
+                                                className="msg-container sms"
                                               >
                                                 <div
                                                   className="message-pop sms"
@@ -12754,7 +12754,7 @@ FREE GIFTS-
                                                 />
                                               </CapImage>
                                               <div
-                                                className="msgContainer sms"
+                                                className="msg-container sms"
                                               >
                                                 <div
                                                   className="message-pop sms"
@@ -19857,7 +19857,7 @@ FREE GIFTS-
                                                 />
                                               </CapImage>
                                               <div
-                                                className="msgContainer sms"
+                                                className="msg-container sms"
                                               >
                                                 <div
                                                   className="message-pop sms"
@@ -27069,7 +27069,7 @@ FREE GIFTS-
                                                 />
                                               </CapImage>
                                               <div
-                                                className="msgContainer sms"
+                                                className="msg-container sms"
                                               >
                                                 <div
                                                   className="message-pop sms"

package/v2Containers/Templates/_templates.scss

@@ -574,9 +574,17 @@
   }
 }
 
-.whatsapp-illustration-desc {
+.illustration-desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.87);
   margin: 8px 0;
   white-space: pre-wrap;
 }
+.rcs-illustration{
+  width: 25%;
+  text-align: center;
+}
+.channel-specific-illustration-text{
+  text-align: center;
+  margin-top: $CAP_SPACE_44;
+}

package/v2Containers/Templates/actions.js

@@ -5,7 +5,7 @@
  */
 
 import * as types from './constants';
-import { LINE, WHATSAPP } from '../CreativesContainer/constants';
+import { LINE, WHATSAPP, RCS } from '../CreativesContainer/constants';
 
 export function getAllTemplates(channel, queryParams) {
   return {
@@ -59,6 +59,7 @@ export function setChannelAccount(channel, account) {
   const channelTypeMapping = {
     [LINE]: types.SET_LINE_ACCOUNT,
     [WHATSAPP]: types.SET_WHATSAPP_ACCOUNT,
+    [RCS]: types.SET_RCS_ACCOUNT,
   };
   if (channelTypeMapping[channel]) {
     return {

package/v2Containers/Templates/constants.js

@@ -46,6 +46,7 @@ export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
 export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
 export const SET_FACEBOOK_ACCOUNT = "app/v2Containers/Templates/SET_FACEBOOK_ACCOUNT";
 export const SET_WHATSAPP_ACCOUNT = "app/v2Containers/Templates/SET_WHATSAPP_ACCOUNT";
+export const SET_RCS_ACCOUNT = "app/v2Containers/Templates/SET_RCS_ACCOUNT";
 
 export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
 export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';