@capillarytech/creatives-library 7.16.17 → 7.16.19

package/package.json

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

package/v2Components/NavigationBar/index.js

@@ -17,6 +17,7 @@ import { LOYALTY } from '../../v2Containers/App/constants';
 import {
   HELP_URL,
   LOYALTY_HELP_URL,
+  ENABLE_AI_SUGGESTIONS,
 } from '../../v2Containers/Cap/constants';
 const PRODUCT_MASTERS = 'masters';
 const EMBEDDED = 'embedded';
@@ -43,7 +44,7 @@ const ComponentWrapper = styled.div`
   padding: 24px 0;
 `;
 
-class NavigationBar extends React.Component {
+export class NavigationBar extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.initializeSelectedProduct();
@@ -153,9 +154,9 @@ class NavigationBar extends React.Component {
     return productsList;
   };
 
-  getTopbarIcons = () => {
+  getTopbarIcons = (showDocumentationBot = false) => {
     const {settingsIcon} = this.state;
-    return [
+    const ICONS = [
       {
         iconType: 'help',
         key: 'help',
@@ -163,7 +164,8 @@ class NavigationBar extends React.Component {
       },
       settingsIcon,
     ];
-  }
+    return showDocumentationBot ? ICONS.slice(1) : ICONS; // If showDocumentationBot is true, help icon will be replaced by Aira icon on UI
+  };
 
   getDropdownMenu = () => {
     const { formatMessage } = this.props.intl;
@@ -207,12 +209,14 @@ class NavigationBar extends React.Component {
       topbarMenuData,
       loggedIn,
       type,
+      userData,
     } = this.props;
+    const showDocumentationBot = userData?.currentOrgDetails?.accessibleFeatures?.includes(ENABLE_AI_SUGGESTIONS);
     const productsList = this.getProductsList();
     const proxyOrgList = this.getProxyOrgList();
     const selectedOrg = loadItem('orgID');
     const dropdownMenuProps = this.getDropdownMenu();
-    const topbarIcons = this.getTopbarIcons();
+    const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const { selectedProduct } = this.state;
     const customTopBarProps = {};
     return (
@@ -229,6 +233,7 @@ class NavigationBar extends React.Component {
             handleTopbarMenuChange={this.handleTopbarMenuChange}
             dropdownMenuProps={dropdownMenuProps}
             topbarIcons={topbarIcons}
+            showDocumentationBot={showDocumentationBot}
             {...customTopBarProps}
           />
         }

package/v2Components/NavigationBar/tests/index.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import cloneDeep from 'lodash/cloneDeep';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { render, screen } from '../../../utils/test-utils';
+
+import { NavigationBar } from '../index';
+import * as mockdata from './mockData';
+
+const { userData } = mockdata;
+
+const ComponentToRender = injectIntl(NavigationBar);
+
+const renderComponent = (props) => {
+  render(
+    <Router>
+      <ComponentToRender {...props} />
+    </Router>,
+  );
+};
+
+describe('NavigationBar', () => {
+  const props = {
+    topbarMenuData: [{}],
+    history: [{}],
+    userData,
+    loggedIn: true,
+    isCreativesAccessible: true,
+    campaignOrgV2Status: true,
+    location: {
+      pathname: "v2",
+      key: "g9d1jt",
+      basename: "/creatives/ui/",
+    },
+  };
+
+  it('Show aria documentation bot icon if showDocumentationBot is true', () => {
+    renderComponent(props);
+    const ariaBotIcon = screen.getByLabelText('aria bot icon');
+    expect(ariaBotIcon).toBeInTheDocument();
+  });
+
+  it('Should not show aria documentation bot icon if showDocumentationBot is false', () => {
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
+    renderComponent(updatedProps);
+    const ariaBotIcon = screen.queryByLabelText('aria bot icon');
+    expect(ariaBotIcon).toBeNull();
+  });
+});

package/v2Components/NavigationBar/tests/mockData.js

@@ -0,0 +1,36 @@
+export const userData = {
+  user: {
+    orgName: 'org1',
+    orgID: 1001,
+    proxyOrgList: [
+      {
+        orgName: 'org2',
+        orgID: 1002,
+      },
+      {
+        orgName: 'org3',
+        orgID: 1003,
+      },
+    ],
+  },
+  currentOrgDetails: {
+    module_details: [
+      {
+        code: 'code1',
+        name: 'name1',
+        url: 'url1',
+      },
+      {
+        code: 'code2',
+        name: 'name2',
+        url: 'url2',
+      },
+      {
+        code: 'code3',
+        name: 'name3',
+        url: 'url3',
+      },
+    ],
+    accessibleFeatures: ['ENABLE_AI_SUGGESTIONS'],
+  },
+};

package/v2Components/TopBar/index.js

@@ -19,6 +19,7 @@ const TopBar = (props) => {
     handleTopbarMenuChange,
     dropdownMenuProps,
     topbarIcons,
+    showDocumentationBot,
     intl,
     } = props;
   return (
@@ -54,6 +55,7 @@ const TopBar = (props) => {
       }}
       dropdownMenuProps={dropdownMenuProps}
       topbarIcons={topbarIcons}
+      showDocumentationBot={showDocumentationBot}
   />
   );
 };
@@ -69,6 +71,7 @@ TopBar.propTypes = {
   handleTopbarMenuChange: PropTypes.func,
   topbarIcons: PropTypes.array,
   dropdownMenuProps: PropTypes.array,
+  showDocumentationBot: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 export default injectIntl(TopBar);

package/v2Containers/Cap/constants.js

@@ -38,3 +38,5 @@ export const LOYALTY_HELP_URL = 'https://docs.capillarytech.com/docs/loyalty-ove
 export const ORG_REFRESH_SEC = 10;
 export const ORG_CHANGED = 'ORG_CHANGED';
 
+export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
+

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/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);
+  });
+});