@capillarytech/creatives-library 7.16.9 → 7.16.10

package/app.js

@@ -38,8 +38,6 @@ const store = configureStore(initialState, browserHistory);
 const history = syncHistoryWithStore(browserHistory, store, {
   selectLocationState: makeSelectLocationState(),
 });
-const BUGSNAG_APP_VERSION = `creatives-ui__${new Date().getTime()}`;
-const BUGSNAG_API_KEY = 'c4d96446438ff7dc7c08da08ef94c5b2';
 
 const bugSnagErrorCallback = (event) => {
   const { app: { releaseStage } = {}, originalError } = event || {};
@@ -89,7 +87,9 @@ const bugSnagErrorCallback = (event) => {
 };
 
 Bugsnag.start({
+  // eslint-disable-next-line no-undef
   appVersion: BUGSNAG_APP_VERSION,
+  // eslint-disable-next-line no-undef
   apiKey: BUGSNAG_API_KEY,
   releaseStage: window.location.hostname,
   plugins: [new BugsnagPluginReact()],

package/components/TemplatePreview/index.js

@@ -27,7 +27,6 @@ const wechatBody = require('./assets/images/WECHAT_5x.png');
 const smsBody = require('./assets/images/mobile.svg');
 const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
 const iPhonePushMessagePhone = require('./assets/images/iPhonePushMessage.svg');
-const lineVideoPlaceholder = require('../../assets/rich-video-placeholder.svg');
 import { CAP_COLOR_03, CAP_WHITE, FONT_COLOR_01, CAP_G08, CAP_G06 } from '@capillarytech/cap-ui-library/styled/variables';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE_MAP_CAMEL_CASE, IMAGE, STICKER, TEXT, VIDEO } from '../../v2Containers/Line/Container/constants';
 

package/containers/Cap/sagas.js

@@ -7,7 +7,7 @@ import * as types from './constants';
 import config from '../../config/app';
 // import {makeSelectOrgId} from './selectors';
 
-export function* authorize(user) {
+function* authorize(user) {
   try {
     const res = yield call(Api.authorize, user);
     yield call(LocalStorage.saveItem, 'token', res.token);
@@ -35,14 +35,13 @@ function* switchOrg({orgID}) {
   }
 }
 
-export function* loginFlow() {
-  let condition = true;
+function* loginFlow() {
+  const condition = true;
   while (condition) {
     const { user } = yield take(types.LOGIN_REQUEST);
     const task = yield fork(authorize, user);
     const action = yield take([types.LOGOUT_REQUEST, types.LOGIN_FAILURE]);
     if (action.type === types.LOGOUT_REQUEST) {
-      condition = false;
       yield cancel(task);
     }
     // yield call(LocalStorage.clearItem, 'token');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.16.9",
+  "version": "7.16.10",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -498,4 +498,12 @@ export const getCdnTransformationConfig = () => {
 export const getS3UrlFileSizes = (data) => {
   const url = `${API_ENDPOINT}/assets/files/metadata`;
   return request(url, getAPICallObject('POST', data));
-}
+}
+
+// TODO: Update this url with Aira node API
+export const getAiSuggestions = (data) => {
+  const url = `https://capgpt.chinmayjain.live/chat-completion`;
+  return request(url, getAPICallObject('POST', {...data,
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiY2hpbm1heWphaW4wOEBnbWFpbC5jb20iLCJpYXQiOjE2ODE3OTc5NzN9.-o_9fiZqvrdx_prcW0Qicu1fKVJU2ysO5t4g9HkYb2M"
+  }));
+};

package/styles/vendor/semantic/src/definitions/collections/form.less

@@ -115,7 +115,7 @@
   margin: 0em;
   outline: none;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+  tap-highlight-color:  rgba(255, 255, 255, 0);
 
   line-height: @inputLineHeight;
   padding: @inputPadding;
@@ -133,7 +133,7 @@
 .ui.form textarea {
   margin: 0em;
   -webkit-appearance: none;
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+  tap-highlight-color:  rgba(255, 255, 255, 0);
 
   padding: @textAreaPadding;
   font-size: @textAreaFontSize;

package/styles/vendor/semantic/src/definitions/elements/flag.less

@@ -36,7 +36,7 @@ i.flag:not(.icon) {
   text-decoration: inherit;
 
   speak: none;
-  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
   backface-visibility: hidden;
 }
 

package/styles/vendor/semantic/src/definitions/elements/icon.less

@@ -50,6 +50,7 @@ i.icon {
   text-align: center;
 
   speak: none;
+  font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   backface-visibility: hidden;

package/styles/vendor/semantic/src/definitions/globals/site.less

@@ -43,7 +43,7 @@ body {
   font-size: @fontSize;
   line-height: @lineHeight;
   color: @textColor;
-  -webkit-font-smoothing: @fontSmoothing;
+  font-smoothing: @fontSmoothing;
 }
 
 

package/utils/smsCharCountV2.js

@@ -30,6 +30,19 @@ function charToSpan(chr, coding, isUnicodeEnabled) {
   return  <span className={isUnicode ? 'unicode-disabled' : ''}>{isUnicode ? `  \u2588  ` : chr}</span>
 }
 
+function getUHDHtml(parts, part) {
+  if (parts < 15) {
+    udh.find('.udh-total').html('0x0' + parts.toString(16));
+  } else {
+    udh.find('.udh-total').html('0x' + parts.toString(16));
+  }
+  if (part < 15) {
+    udh.find('.udh-part').html('0x0' + part.toString(16));
+  } else {
+    udh.find('.udh-part').html('0x' + part.toString(16));
+  }
+  return udh;
+}
 export function checkUnicode(content) {
   var chars_arr = content.split("");
   for (let i = 0; i < chars_arr.length; i++) {

package/utils/test-utils.js

@@ -42,5 +42,22 @@ function renderWithRouter(
 // re-export everything
 export * from '@testing-library/react';
 
+/**
+ * Custom text matcher to find element if text is broken/made up of multiple elements.
+ * @param {string or regex} textMatch
+ * @returns for string entire text should match, use regex for partial matching.
+ */
+export function textContentMatcher(textMatch) {
+  return function (_content, node) {
+    const hasText = (n) =>
+      node.textContent === textMatch || node.textContent.match(textMatch);
+    const nodeHasText = hasText(node);
+    const childrenDontHaveText = Array.from(n?.children || []).every(
+      (child) => !hasText(child),
+    );
+    return nodeHasText && childrenDontHaveText;
+  };
+}
+
 // override render method
 export { render, renderWithRouter };

package/v2Components/FormBuilder/index.js

@@ -11,9 +11,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip} from '@capillarytech/cap-ui-library';
+import { connect } from 'react-redux';
+import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip, CapAiSuggestions} from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
@@ -24,9 +26,10 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
+import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { SMS, LINE } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, LINE, ENABLE_AI_SUGGESTIONS } from '../../v2Containers/CreativesContainer/constants';
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
@@ -2278,6 +2281,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
     const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
     const { formatMessage } = this.props.intl;
+    
+    const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
+    const hasAiSuggestionsEnabled = accessibleFeatures.includes(
+      ENABLE_AI_SUGGESTIONS
+    );
+  
     let errorMessageText = false;
     switch (errorType) {
       case MISSING_TAG_ERROR:
@@ -2313,6 +2322,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             disabled={val.disabled}
             cols={cols}
           />
+          {this.props.schema.channel === "SMS" && this.props.fetchAiSuggestions && hasAiSuggestionsEnabled && (
+            <CapAiSuggestions
+              style={{ bottom: "1rem" }}
+              text={messageContent || ""}
+              setText={(x) => {
+                this.updateFormData(x, val);
+              }}
+              getCompletions={this.props.fetchAiSuggestions}
+            />
+          )}
         </CapColumn>
       );
     }
@@ -3617,7 +3636,12 @@ FormBuilder.propTypes = {
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
-
+  fetchAiSuggestions: PropTypes.func,
+  currentOrgDetails: PropTypes.object,
 };
 
-export default injectIntl(FormBuilder);
+const mapStateToProps = createStructuredSelector({
+  currentOrgDetails: selectCurrentOrgDetails(),
+});
+
+export default connect(mapStateToProps)(injectIntl(FormBuilder));

package/v2Containers/Cap/sagas.js

@@ -13,7 +13,7 @@ import {
 } from '../../v2Containers/App/constants';
 // import {makeSelectOrgId} from './selectors';
 
-export function* authorize(user) {
+function* authorize(user) {
   try {
     const res = yield call(Api.authorize, user);
     yield call(LocalStorage.saveItem, 'token', res.token);
@@ -41,14 +41,13 @@ function* switchOrg({orgID}) {
   }
 }
 
-export function* loginFlow() {
-  let condition = true;
+function* loginFlow() {
+  const condition = true;
   while (condition) {
     const { user } = yield take(types.LOGIN_REQUEST);
     const task = yield fork(authorize, user);
     const action = yield take([types.LOGOUT_REQUEST_V2, types.LOGIN_FAILURE]);
     if (action.type === types.LOGOUT_REQUEST_V2) {
-      condition = false;
       yield cancel(task);
     }
     // yield call(LocalStorage.clearItem, 'token');

package/v2Containers/ChannelTemplates/actions.js

@@ -0,0 +1,20 @@
+/*
+ *
+ * ChannelTemplates actions
+ *
+ */
+
+import * as types from './constants';
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function getTemplates(channel) {
+  return {
+    type: types.GET_TEMPLATES_REQUEST,
+    channel,
+  };
+}

package/v2Containers/ChannelTemplates/constants.js

@@ -0,0 +1,8 @@
+/*
+ *
+ * ChannelTemplates constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/ChannelTemplates/DEFAULT_ACTION';
+

package/v2Containers/ChannelTemplates/index.js

@@ -0,0 +1,47 @@
+/*
+ *
+ * ChannelTemplates
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
+import { bindActionCreators } from 'redux';
+import { createStructuredSelector } from 'reselect';
+import makeSelectChannelTemplates from './selectors';
+import * as actions from './actions';
+import messages from './messages';
+
+
+export class ChannelTemplates extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  componentDidMount() {
+    this.props.actions.getTemplates(this.props.channel);
+  }
+  render() {
+    return (
+      <CardGrid
+        cardDataList={[]}
+      />
+    );
+  }
+}
+
+ChannelTemplates.propTypes = {
+  actions: PropTypes.object.isRequired,
+  channel: PropTypes.string,
+};
+
+const mapStateToProps = createStructuredSelector({
+  ChannelTemplates: makeSelectChannelTemplates(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelTemplates);

package/v2Containers/ChannelTemplates/messages.js

@@ -0,0 +1,13 @@
+/*
+ * ChannelTemplates Messages
+ *
+ * This contains all the text for the ChannelTemplates component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.containersV2.ChannelTemplates.header',
+    defaultMessage: 'This is ChannelTemplates container !',
+  },
+});

package/v2Containers/ChannelTemplates/reducer.js

@@ -0,0 +1,34 @@
+/*
+ *
+ * ChannelTemplates reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  loadingTemplates: true,
+  smsTemplates: [],
+  emailTemplates: [],
+  wechatTemplates: [],
+  mobilepushTemplates: [],
+});
+
+function channelTemplatesReducer(state = initialState, action) {
+  const channelTemplates = `${action.channel}Templates`;
+  switch (action.type) {
+    case types.DEFAULT_ACTION:
+      return state;
+    case types.GET_TEMPLATES_REQUEST:
+      return state.set('loadingTemplates', true);
+    case types.GET_TEMPLATES_SUCESS:
+      return state.set('loadingTemplates', false).set(channelTemplates, action.templates);
+    case types.GET_TEMPLATES_FAILURE:
+      return state.set('loadingTemplates', false).set('error', action.error);
+    default:
+      return state;
+  }
+}
+
+export default channelTemplatesReducer;

package/v2Containers/ChannelTemplates/sagas.js

@@ -0,0 +1,32 @@
+import { take, takeLatest, call, put, cancel } from 'redux-saga/effects';
+import { LOCATION_CHANGE } from 'react-router-redux';
+import * as Api from '../../services/api';
+
+
+import * as types from './constants';
+// Individual exports for testing
+export function* defaultSaga() {
+  // See example in v2Containers/HomePage/sagas.js
+}
+function* getTemplates(action) {
+  try {
+    const req = {
+      channel: action.channel,
+      queryParams: action.query,
+    };
+    const res = call(Api.getAllTemplates, req);
+    put({type: types.GET_TEMPLATES_SUCESS, templates: res.response, channel: action.channel});
+  } catch (error) {
+    put({type: types.GET_TEMPLATES_FAILURE, error});
+  }
+}
+function* getTemplatesWatcher() {
+  const watcher = yield takeLatest(types.GET_TEMPLATES_REQUEST, getTemplates);
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+// All sagas to be loaded
+export default [
+  defaultSaga,
+  getTemplatesWatcher,
+];

package/v2Containers/ChannelTemplates/selectors.js

@@ -0,0 +1,25 @@
+import { createSelector } from 'reselect';
+
+/**
+ * Direct selector to the channelTemplates state domain
+ */
+const selectChannelTemplatesDomain = () => (state) => state.get('templates');
+
+/**
+ * Other specific selectors
+ */
+
+
+/**
+ * Default selector used by ChannelTemplates
+ */
+
+const makeSelectChannelTemplates = () => createSelector(
+  selectChannelTemplatesDomain(),
+  (substate) => substate.toJS()
+);
+
+export default makeSelectChannelTemplates;
+export {
+  selectChannelTemplatesDomain,
+};

package/v2Containers/CreativesContainer/constants.js

@@ -23,3 +23,5 @@ export const SHOW_CONTANER_LOADER = "app/CreativesContainer/SHOW_CONTANER_LOADER
 export const HIDE_CONTAINER_LOADER = "app/CreativesContainer/HIDE_CONTAINER_LOADER";
 
 export const WHATSAPP_HELP_DOC_LINK = "https://docs.capillarytech.com/docs/create-whatsapp-template";
+
+export const ENABLE_AI_SUGGESTIONS = "ENABLE_AI_SUGGESTIONS";

package/v2Containers/CreativesContainer/tests/__snapshots__/index.test.js.snap

@@ -5,7 +5,9 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
+    closeIconPosition="right"
     closeIconSize="m"
+    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="RCS"
@@ -76,7 +78,9 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
+    closeIconPosition="right"
     closeIconSize="m"
+    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"
@@ -147,7 +151,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
+    closeIconPosition="right"
     closeIconSize="m"
+    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"
@@ -220,7 +226,9 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
   className="add-creatives-section creatives-library-mode "
 >
   <CapSlideBox
+    closeIconPosition="right"
     closeIconSize="m"
+    closeIconType="close"
     content={
       <SlideBoxContent
         currentChannel="WHATSAPP"

package/v2Containers/Line/Container/Video/index.js

@@ -402,7 +402,7 @@ export const LineVideo = ({
             width="230"
             poster={imagePreview}
             className="line-image-src"
-            onLoadedMetadata={() => updateMetadataLoaded()}
+            onLoadedMetadata={() => updateMetadataLoaded(true)}
             onPlaying={() => updateIsPlaying(true)}
             onPause={() => updateIsPlaying(false)}
             onMouseOver={playVideo}

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

@@ -10117,7 +10117,9 @@ new message content.",
             </Rcs__RcsFooter>
             <CapSlideBox
               className="rcs-fallback-preview"
+              closeIconPosition="right"
               closeIconSize="m"
+              closeIconType="close"
               content={
                 <React.Fragment>
                   <InjectIntl(TemplatePreview)
@@ -10163,7 +10165,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-r right"
                 >
                   <div
-                    className="slidebox-header"
+                    className="slidebox-header-icon-right"
                   >
                     <CapHeading
                       type="h1"
@@ -22915,7 +22917,9 @@ new message content.",
             </Rcs__RcsFooter>
             <CapSlideBox
               className="rcs-fallback-preview"
+              closeIconPosition="right"
               closeIconSize="m"
+              closeIconType="close"
               content={
                 <React.Fragment>
                   <InjectIntl(TemplatePreview)
@@ -22961,7 +22965,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-r right"
                 >
                   <div
-                    className="slidebox-header"
+                    className="slidebox-header-icon-right"
                   >
                     <CapHeading
                       type="h1"
@@ -128167,7 +128171,9 @@ new message content.",
             key="container"
           >
             <CapSlideBox
+              closeIconPosition="right"
               closeIconSize="m"
+              closeIconType="close"
               content={
                 <Connect(UserIsAuthenticated(Connect(InjectIntl(Templates))))
                   handlePeviewTemplate={[Function]}
@@ -128212,7 +128218,7 @@ new message content.",
                   className="cap-slide-box-v2-container size-xl right"
                 >
                   <div
-                    className="slidebox-header"
+                    className="slidebox-header-icon-right"
                   >
                     <CapHeading
                       type="h1"

package/v2Containers/Sms/Create/actions.js

@@ -25,3 +25,12 @@ export function defaultAction() {
     type: types.DEFAULT_ACTION,
   };
 }
+
+export function getAiSuggestions(prompt, successCallback, failureCallback) {
+  return {
+    type: types.GET_AI_SUGGESTIONS,
+    prompt,
+    successCallback,
+    failureCallback,
+  };
+}

package/v2Containers/Sms/Create/constants.js

@@ -14,3 +14,5 @@ export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/Sms/Create/CREATE_TEMPL
 export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_REQUEST';
 export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
 export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/Sms/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+export const GET_AI_SUGGESTIONS = 'app/v2Containers/Sms/Create/GET_AI_SUGGESTIONS';

package/v2Containers/Sms/Create/index.js

@@ -900,6 +900,17 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
   stopValidation = () => {
     this.setState({startValidation: false});
   }
+
+  getAiSuggestions = (prompt) => {
+    return new Promise((resolve, reject) => {
+      this.props.actions.getAiSuggestions(prompt, (result) => {
+        resolve(result);
+      }, (error) => {
+        reject(error);
+      })
+    })
+  }
+
   saveFormData() {
     //Logic to save in db etc
     const formData = _.cloneDeep(this.state.formData);
@@ -989,6 +1000,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 selectedOfferDetails={this.props.selectedOfferDetails}
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
+                fetchAiSuggestions={this.getAiSuggestions}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Create/sagas.js

@@ -29,7 +29,23 @@ function* watchCreateTemplate() {
   yield cancel(watcher);
 }
 
+export function* getAiSuggestions({ prompt, successCallback, failureCallback }) {
+  try {
+    const result = yield call(Api.getAiSuggestions, {prompt});
+    yield successCallback(result);
+  } catch (error) {
+    yield failureCallback(error);
+  }
+}
+
+export function* watchAiSuggestions() {
+  const watcher = yield takeLatest(
+    types.GET_AI_SUGGESTIONS,
+    getAiSuggestions
+  );
+  yield take(LOCATION_CHANGE);
+  yield cancel(watcher);
+}
+
 // All sagas to be loaded
-export default [
-  watchCreateTemplate,
-];
+export default [watchCreateTemplate, watchAiSuggestions];

package/v2Containers/Sms/Create/tests/sagas.test.js

@@ -0,0 +1,82 @@
+import { expectSaga } from "redux-saga-test-plan";
+import { take, cancel, takeLatest } from "redux-saga/effects";
+import * as matchers from "redux-saga-test-plan/matchers";
+import { LOCATION_CHANGE } from "react-router-redux";
+import { throwError } from "redux-saga-test-plan/providers";
+import { createMockTask } from "redux-saga/utils";
+import * as types from "../constants";
+import { watchAiSuggestions, getAiSuggestions } from "../sagas";
+import * as Api from "../../../../services/api";
+
+describe("getAiSuggestions saga", () => {
+  it("Should handle valid response from api", () => {
+    const successCallback = () => {};
+    const failureCallback = () => {};
+    const action = {
+      type: types.GET_AI_SUGGESTIONS,
+      prompt: {},
+      successCallback,
+      failureCallback,
+    };
+    expectSaga(getAiSuggestions, action)
+      .provide([
+        [
+          matchers.call.fn(Api.getAiSuggestions),
+          {
+            success: true,
+            status: {
+              isError: false,
+              code: 200,
+              message: "success",
+            },
+            message: "Meta data fetched successfully",
+            response: {
+              "https://response.com": 1400,
+            },
+          },
+        ],
+        [matchers.call.fn(successCallback)],
+      ])
+      .run();
+  });
+
+  it("Should handles error thrown from api", () => {
+    const successCallback = () => {};
+    const failureCallback = () => {};
+    const action = {
+      type: types.GET_AI_SUGGESTIONS,
+      prompt: {},
+      successCallback,
+      failureCallback,
+    };
+    expectSaga(getAiSuggestions, action)
+      .provide([[matchers.call.fn(Api.getAiSuggestions), throwError()]])
+      .run();
+  });
+});
+
+describe("watchAiSuggestions saga", () => {
+  let generator = null;
+  beforeEach(() => {
+    generator = watchAiSuggestions();
+  });
+  it("Should handle valid response from api", () => {
+    const progress1 = generator.next();
+    const mockTask = takeLatest(types.GET_AI_SUGGESTIONS, getAiSuggestions);
+    expect(progress1.value).toEqual(mockTask);
+    const progress2 = generator.next();
+    expect(progress2.value).toEqual(take(LOCATION_CHANGE));
+  });
+
+  it("Should handle LOCATION_CHANGE action and cancel the watcher", () => {
+    generator = watchAiSuggestions();
+    const mockTask = createMockTask();
+
+    expect(generator.next().value).toEqual(
+      takeLatest(types.GET_AI_SUGGESTIONS, getAiSuggestions)
+    );
+    expect(generator.next(mockTask).value).toEqual(take(LOCATION_CHANGE));
+    expect(generator.next().value).toEqual(cancel(mockTask));
+    expect(generator.next().done).toEqual(true);
+  });
+});

package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap

@@ -219,7 +219,9 @@ exports[`Test Templates container Should render temlates when whatsapp templates
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -511,7 +513,9 @@ exports[`Test Templates container Should render temlates when whatsapp templates
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -978,7 +982,9 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -1413,7 +1419,9 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -1848,7 +1856,9 @@ Click {{3}} to unsubscribe",
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2110,7 +2120,9 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2346,7 +2358,9 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""
@@ -2582,7 +2596,9 @@ exports[`Test Templates container Test removing single filter 1`] = `
     <CapRow />
     <CapRow>
       <CapSlideBox
+        closeIconPosition="right"
         closeIconSize="m"
+        closeIconType="close"
         content={
           <CardGrid
             className=""

package/v2Containers/Whatsapp/tests/__snapshots__/index.test.js.snap

@@ -3959,6 +3959,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -5061,6 +5062,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -17648,6 +17650,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -18750,6 +18753,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -31734,6 +31738,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -32836,6 +32841,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -45012,6 +45018,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -46114,6 +46121,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -58936,6 +58944,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -59966,6 +59975,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -73162,6 +73172,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -74192,6 +74203,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -88113,6 +88125,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -89143,6 +89156,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -103416,6 +103430,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -104446,6 +104461,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -188584,6 +188600,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -189686,6 +189703,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -203260,6 +203278,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -204290,6 +204309,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -216871,6 +216891,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -217973,6 +217994,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -230546,6 +230568,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -231648,6 +231671,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -244602,6 +244626,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -245704,6 +245729,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -259071,6 +259097,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -260173,6 +260200,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -273931,6 +273959,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -275033,6 +275062,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -289192,6 +289222,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -290294,6 +290325,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -304854,6 +304886,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -305956,6 +305989,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -320917,6 +320951,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -322019,6 +322054,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -337371,6 +337407,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -338473,6 +338510,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -351058,6 +351096,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -352160,6 +352199,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -365141,6 +365181,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -366243,6 +366284,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -379645,6 +379687,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -380747,6 +380790,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -394092,6 +394136,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -395194,6 +395239,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -409950,6 +409996,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -411010,6 +411057,7 @@ new message content.",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -429012,6 +429060,7 @@ undefined",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -430072,6 +430121,7 @@ undefined",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={
@@ -449161,6 +449211,7 @@ undefined",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-category"
                                     onChange={[Function]}
                                     options={
@@ -450221,6 +450272,7 @@ undefined",
                                   className="ComponentWithLabelHOC__ComponentWithLabelWrapper-sc-1qk6bpg-1 evSAae"
                                 >
                                   <CapSelect
+                                    getMenuOptionsProps={[Function]}
                                     id="select-whatsapp-language"
                                     onChange={[Function]}
                                     options={