@capillarytech/creatives-library 7.14.38 → 7.14.41

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/index.js

@@ -95,7 +95,8 @@ import {
   TWILIO_CATEGORY_OPTIONS,
   KARIX_GUPSHUP_CATEGORY_OPTIONS,
   STATUS_OPTIONS,
-  CATEGORY as WHATSAPP_CATEGORY,
+  CATEGORY,
+  WHATSAPP_CATEGORIES,
   STATUS as WHATSAPP_STATUS,
   WHATSAPP_STATUSES,
   HOST_TWILIO,
@@ -786,19 +787,33 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     }
     return true;
   }
-
+  isCategoryMatching(category, selectedWhatsappCategory) {
+    const {utility, transactional, authentication, otp } = WHATSAPP_CATEGORIES;
+    if (selectedWhatsappCategory) {
+      switch (selectedWhatsappCategory) {
+        // older karix & gupshup category, supporting for older template filter in listing page
+        case utility: {
+          return [selectedWhatsappCategory, transactional].includes(category);
+        }
+        case authentication: {
+          return [selectedWhatsappCategory, otp].includes(category);
+        }
+        default:
+          return selectedWhatsappCategory === category;
+      }
+    } 
+    return true;
+  }
   filterWhatsappTemplates = (templates) => {
     const { selectedWhatsappStatus, selectedWhatsappCategory } = this.state;
     return templates.filter((template) => {
-      const { [WHATSAPP_CATEGORY]: category, [WHATSAPP_STATUS]: status } = template?.versions?.base?.content?.[WHATSAPP_LOWERCASE] || {};
+      const { [CATEGORY]: category, [WHATSAPP_STATUS]: status } = template?.versions?.base?.content?.[WHATSAPP_LOWERCASE] || {};
 
       // if status or category filter is applied, filter templates which match these filters
       return (
         this.isStatusMatching(status, selectedWhatsappStatus)
       ) && (
-        selectedWhatsappCategory
-        ? category === selectedWhatsappCategory
-        : true
+        this.isCategoryMatching(category, selectedWhatsappCategory)
       );
     });
   }
@@ -855,8 +870,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       />
     );
 
-  getTemplateDataForGrid = ({templates=[], handlers, filterContent, channel, isLoading, loadingTip}) => {
-  const currentChannel = channel.toUpperCase();
+  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip}) => {
+    const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
     let filteredTemplates = templates;
@@ -2358,7 +2373,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       case WHATSAPP_STATUS:
         this.setState({ selectedWhatsappStatus: null });
         break;
-      case WHATSAPP_CATEGORY:
+      case CATEGORY:
         this.setState({ selectedWhatsappCategory: null });
         break;
       default:
@@ -2384,7 +2399,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         }
         {
           selectedWhatsappCategory ? (
-            <CapTag closable onClose={() => this.removeWhatsappFilter(WHATSAPP_CATEGORY)}>
+            <CapTag closable onClose={() => this.removeWhatsappFilter(CATEGORY)}>
               {formatMessage(messages.category)}: {getWhatsappCategory(selectedWhatsappCategory, this.state.hostName)?.label || selectedWhatsappCategory}
             </CapTag>
           ) : null
@@ -2394,7 +2409,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             <CapLink
               onClick={() => {
                 this.removeWhatsappFilter(WHATSAPP_STATUS);
-                this.removeWhatsappFilter(WHATSAPP_CATEGORY);
+                this.removeWhatsappFilter(CATEGORY);
               }}
               title={this.props.intl.formatMessage(messages.clearAll)}
             />