@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

package/v2Containers/InApp/index.scss

@@ -0,0 +1,50 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.cap-inapp-creatives {
+  .inapp-template-name-input {
+    width: 23.286rem;
+    margin-top: $CAP_SPACE_04;
+  }
+  .inapp-creative-layout {
+    margin-top: $CAP_SPACE_24;
+  }
+
+  .inapp-creative-layout-desc {
+    font-size: $CAP_SPACE_12;
+    color: $CAP_G04;
+  }
+
+  .inapp-layout-radio {
+    margin-top: $CAP_SPACE_16;
+    font-weight: 500;
+  }
+
+  .inapp-template-device-tab {
+    margin-top: $CAP_SPACE_24;
+  }
+}
+#inapp-template-name-input {
+  height: $CAP_SPACE_40;
+  width: 23.286rem;
+  margin-top: $CAP_SPACE_04;
+}
+#inapp-title-name-input {
+  height: $CAP_SPACE_40;
+}
+.inapp-media-radio .ant-radio-wrapper {
+  margin-right: $CAP_SPACE_24;
+}
+.inapp-footer {
+  background-color: $CAP_WHITE;
+  bottom: 0;
+  width: 100%;
+  padding: $CAP_SPACE_20 0;
+  z-index: 1;
+  margin-top: $CAP_SPACE_12;
+  .ant-btn {
+    margin-right: $CAP_SPACE_16;
+  }
+}
+.inapp-footer-lib {
+  position: fixed;
+}

package/v2Containers/InApp/messages.js

@@ -0,0 +1,114 @@
+import { defineMessages } from "react-intl";
+
+const prefix = "app.v2Container.InApp";
+
+export default defineMessages({
+  creativeName: {
+    id: `${prefix}.creativeName`,
+    defaultMessage: "Creative Name",
+  },
+  creativeLayout: {
+    id: `${prefix}.creativeLayout`,
+    defaultMessage: "Creative layout",
+  },
+  creativeLayoutDesc: {
+    id: `${prefix}.creativeLayoutDesc`,
+    defaultMessage: "Select how the creative will be displayed on the screen",
+  },
+  layoutModal: {
+    id: `${prefix}.layoutModal`,
+    defaultMessage: "Modal",
+  },
+  layoutTopBanner: {
+    id: `${prefix}.layoutTopBanner`,
+    defaultMessage: "Top banner",
+  },
+  layoutBottomBanner: {
+    id: `${prefix}.layoutBottomBanner`,
+    defaultMessage: "Bottom banner",
+  },
+  layoutFullScreen: {
+    id: `${prefix}.layoutFullScreen`,
+    defaultMessage: "Full screen",
+  },
+  Android: {
+    id: `${prefix}.Android`,
+    defaultMessage: 'Android',
+  },
+  Ios: {
+    id: `${prefix}.Ios`,
+    defaultMessage: 'IOS',
+  },
+  select: {
+    id: `${prefix}.select`,
+    defaultMessage: "Select",
+  },
+  inAppCreateNotification: {
+    id: `${prefix}.inAppCreateNotification`,
+    defaultMessage: "{name} template created successfully",
+  },
+  inAppEditNotification: {
+    id: `${prefix}.inAppCreateNotification`,
+    defaultMessage: "{name} template edited successfully",
+  },
+  templateNameMinCharacters: {
+    id: `${prefix}.templateNameMinCharacters`,
+    defaultMessage: 'Template name should contain atleast 3 characters',
+  },
+  btnDisabledTooltip: {
+    id: `${prefix}.btnDisabledTooltip`,
+    defaultMessage: 'Please add all mandatory fields to proceed further',
+  },
+  create: {
+    id: `${prefix}.create`,
+    defaultMessage: 'Create',
+  },
+  update: {
+    id: `${prefix}.update`,
+    defaultMessage: 'Update',
+  },
+  mediaText: {
+    id: `${prefix}.mediaText`,
+    defaultMessage: "Text",
+  },
+  mediaImage: {
+    id: `${prefix}.mediaImage`,
+    defaultMessage: "Image",
+  },
+  templateMessageLength: {
+    id: `${prefix}.templateMessageLength`,
+    defaultMessage: 'Characters count: {currentLength}/{maxLength}',
+  },
+  templateNameRegexErrorMessage: {
+    id: `${prefix}.templateNameRegexErrorMessage`,
+    defaultMessage: 'Template name can only contain lowercase alphanumeric characters and underscores',
+  },
+  btnTypeNone: {
+    id: `${prefix}.btnTypeNone`,
+    defaultMessage: "None",
+  },
+  btnTypeCTA: {
+    id: `${prefix}.btnTypeCTA`,
+    defaultMessage: "Call to action",
+  },
+  ctaDescription: {
+    id: `${prefix}.ctaDescription`,
+    defaultMessage:
+      "Create a button that lets customers take an action",
+  },
+  popup: {
+    id: `${prefix}.popup`,
+    defaultMessage:
+      "Pop-up",
+  },
+  header: {
+    id: `${prefix}.header`,
+    defaultMessage:
+      "Header",
+  },
+  footer: {
+    id: `${prefix}.footer`,
+    defaultMessage:
+      "Footer",
+  },
+});

package/v2Containers/InApp/reducer.js

@@ -0,0 +1,109 @@
+import { fromJS } from 'immutable';
+import {
+  INAPP_TEMPLATE_CREATE_REQUEST,
+  INAPP_TEMPLATE_CREATE_SUCCESS,
+  INAPP_TEMPLATE_CREATE_FAILURE,
+  CLEAR_CREATE_RESPONSE_REQUEST,
+  GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+  GET_INAPP_TEMPLATE_DETAILS_SUCCESS,
+  GET_INAPP_TEMPLATE_DETAILS_FAILURE,
+  RESET_EDIT_TEMPLATE,
+  UPLOAD_INAPP_ASSET_REQUEST,
+  UPLOAD_INAPP_ASSET_SUCCESS,
+  UPLOAD_INAPP_ASSET_FAILURE,
+  CLEAR_INAPP_ASSET,
+  INAPP_EDIT_TEMPLATE_REQUEST,
+  INAPP_EDIT_TEMPLATE_SUCCESS,
+  INAPP_EDIT_TEMPLATE_FAILURE,
+} from './constants';
+
+const initialState = fromJS({
+  uploadedAssetData: {},
+  createTemplateInProgress: false,
+  editTemplateInProgress: false,
+});
+
+function inAppReducer(state = initialState, action) {
+  switch (action.type) {
+    case INAPP_TEMPLATE_CREATE_REQUEST:
+      return state
+        .set('createTemplateInProgress', true)
+        .set('createTemplateError', false)
+        .set('createTemplateErrorMessage', fromJS(''));
+    case INAPP_TEMPLATE_CREATE_SUCCESS:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('response', action.data)
+        .set(
+          'createTemplateError',
+          action.statusCode !== undefined && action.statusCode > 300,
+        )
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    case INAPP_TEMPLATE_CREATE_FAILURE:
+      return state
+        .set('createTemplateInProgress', false)
+        .set('createTemplateError', true)
+        .set('createTemplateErrorMessage', fromJS(action.errorMsg));
+    // FOR EDIT
+    case INAPP_EDIT_TEMPLATE_REQUEST:
+      return state
+        .set('editTemplateInProgress', true)
+        .set('editTemplateError', false)
+        .set('editTemplateErrorMessage', fromJS(''));
+    case INAPP_EDIT_TEMPLATE_SUCCESS:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editResponse', action.data)
+        .set('editTemplateError', action.statusCode !== undefined && action.statusCode > 300)
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case INAPP_EDIT_TEMPLATE_FAILURE:
+      return state
+        .set('editTemplateInProgress', false)
+        .set('editTemplateError', true)
+        .set('editTemplateErrorMessage', fromJS(action.errorMsg));
+    case CLEAR_CREATE_RESPONSE_REQUEST:
+      return state.set('response', {});
+    // FOR EDIT
+    case GET_INAPP_TEMPLATE_DETAILS_REQUEST:
+      return state.set('getTemplateDetailsInProgress', true);
+    case GET_INAPP_TEMPLATE_DETAILS_SUCCESS:
+      return state
+        .set('getTemplateDetailsInProgress', false)
+        .set('templateDetails', action.data);
+    case GET_INAPP_TEMPLATE_DETAILS_FAILURE:
+      return state.set('getTemplateDetailsInProgress', false);
+    case RESET_EDIT_TEMPLATE:
+      return state.set('templateDetails', {});
+    case UPLOAD_INAPP_ASSET_REQUEST:
+      return state.set('uploadAssetSuccess', false).set('assetUploading', true);
+    case UPLOAD_INAPP_ASSET_SUCCESS:
+      return state
+        .set(
+          'uploadAssetSuccess',
+          action.statusCode !== undefined &&
+            action.statusCode !== '' &&
+            action.statusCode < 300,
+        )
+        .set('assetUploading', false)
+        .set(
+          action.templateType !== undefined
+            ? `uploadedAssetData${action.templateType}`
+            : 'uploadedAssetData',
+          action.data,
+        );
+    case UPLOAD_INAPP_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case CLEAR_INAPP_ASSET:
+      return state.delete(
+        action.templateType !== undefined
+          ? `uploadedAssetData${action.templateType}`
+          : 'uploadedAssetData',
+      );
+    default:
+      return state;
+  }
+}
+
+export default inAppReducer;

package/v2Containers/InApp/sagas.js

@@ -0,0 +1,151 @@
+import { take, cancel, call, put, takeLatest, all } from 'redux-saga/effects';
+import * as Api from '../../services/api';
+import {
+  INAPP_TEMPLATE_CREATE_REQUEST,
+  INAPP_TEMPLATE_CREATE_SUCCESS,
+  INAPP_TEMPLATE_CREATE_FAILURE,
+  UPLOAD_INAPP_ASSET_REQUEST,
+  UPLOAD_INAPP_ASSET_SUCCESS,
+  UPLOAD_INAPP_ASSET_FAILURE,
+  INAPP_EDIT_TEMPLATE_SUCCESS,
+  INAPP_EDIT_TEMPLATE_FAILURE,
+  INAPP_EDIT_TEMPLATE_REQUEST,
+  GET_INAPP_TEMPLATE_DETAILS_SUCCESS,
+  GET_INAPP_TEMPLATE_DETAILS_FAILURE,
+  GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+} from './constants';
+import { INAPP } from '../CreativesContainer/constants';
+
+export function* uploadInAppAsset(params) {
+  try {
+    const result = yield call(Api.uploadFile, params);
+    yield put({
+      type: UPLOAD_INAPP_ASSET_SUCCESS,
+      data: result?.response?.asset,
+      statusCode: result?.status?.code || '',
+      templateType: params.templateType,
+    });
+  } catch (error) {
+    yield put({ type: UPLOAD_INAPP_ASSET_FAILURE, error });
+  }
+}
+export function* watchUploadInAppAsset() {
+  yield takeLatest(
+    UPLOAD_INAPP_ASSET_REQUEST,
+    uploadInAppAsset,
+  );
+  
+  
+}
+
+export function* inAppTemplateCreate({ payload, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createChannelWiseTemplate, { channel: INAPP, template: payload });
+    if (result?.status?.code && result.status.code >= 400) {
+      errorMsg = result?.message || result.status.code;
+      throw errorMsg;
+    }
+    yield put({
+      type: INAPP_TEMPLATE_CREATE_SUCCESS,
+      data: result.response,
+      statusCode: result.status ? result.status.code : '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({
+      type: INAPP_TEMPLATE_CREATE_FAILURE,
+      error,
+      errorMsg,
+    });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+
+export function* watchCreateTemplate() {
+  yield takeLatest(
+    INAPP_TEMPLATE_CREATE_REQUEST,
+    inAppTemplateCreate,
+  );
+  
+  
+}
+
+// FOR EDIT
+export function* editTemplate({ payload, callback }) {
+  let errorMsg;
+  try {
+    const result = yield call(Api.createChannelWiseTemplate, { channel: INAPP, template: payload });
+    if (result.status.code >= 400) {
+      errorMsg = result.message || result.status.code;
+      throw errorMsg;
+    }
+    yield put({
+      type: INAPP_EDIT_TEMPLATE_SUCCESS,
+      data: result.response,
+      statusCode: result?.status?.code || '',
+      errorMsg,
+    });
+    if (callback) {
+      callback(result.response);
+    }
+  } catch (error) {
+    yield put({ type: INAPP_EDIT_TEMPLATE_FAILURE, error, errorMsg });
+    if (callback) {
+      callback(null, errorMsg);
+    }
+  }
+}
+export function* watchEditTemplate() {
+  yield takeLatest(INAPP_EDIT_TEMPLATE_REQUEST, editTemplate);
+  
+  
+}
+
+export function* getTemplateDetails({ id, callback }) {
+  try {
+    const result = yield call(Api.getTemplateDetails, {
+      id,
+      channel: INAPP,
+    });
+    yield put({
+      type: GET_INAPP_TEMPLATE_DETAILS_SUCCESS,
+      data: result.response,
+    });
+    if (callback) {
+      callback(false);
+    }
+  } catch (error) {
+    yield put({ type: GET_INAPP_TEMPLATE_DETAILS_FAILURE, error });
+  }
+}
+
+export function* watchGetTemplateDetails() {
+  yield takeLatest(
+    GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+    getTemplateDetails,
+  );
+  
+  
+}
+
+export default [
+  watchCreateTemplate,
+  watchGetTemplateDetails,
+  watchUploadInAppAsset,
+  watchEditTemplate,
+];
+
+export function* v2InAppSagas() {
+  yield all([
+    watchCreateTemplate(),
+    watchGetTemplateDetails(),
+    watchUploadInAppAsset(),
+    watchEditTemplate(),
+  ]);
+}

package/v2Containers/InApp/selectors.js

@@ -0,0 +1,12 @@
+import { createSelector } from 'reselect';
+
+const selectInAppDomain = () => (state) => state.get('inapp');
+const selectAccountDomain = () => (state) => state.get('templates');
+
+const makeSelectInApp = () =>
+  createSelector(selectInAppDomain(), (substate) => substate?.toJS());
+
+const makeSelectAccount = () =>
+  createSelector(selectAccountDomain(), (substate) => substate.toJS());
+
+export { makeSelectInApp, makeSelectAccount };

package/v2Containers/InApp/tests/action.test.js

@@ -0,0 +1,53 @@
+import * as types from "../constants";
+import * as actions from "../actions";
+
+describe("Test inapp actions", () => {
+  it("has a type of INAPP_TEMPLATE_CREATE_REQUEST action", () => {
+    const payload = {};
+    const expected = {
+      type: types.INAPP_TEMPLATE_CREATE_REQUEST,
+      payload,
+    };
+    expect(actions.createInAppTemplate(payload)).toEqual(expected);
+  });
+
+  it("has a type of CLEAR_CREATE_RESPONSE_REQUEST action", () => {
+    const expected = {
+      type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+    };
+    expect(actions.clearCreateResponse()).toEqual(expected);
+  });
+  it("has a type of INAPP_EDIT_TEMPLATE_REQUEST action", () => {
+    const expected = {
+      type: types.INAPP_EDIT_TEMPLATE_REQUEST,
+    };
+    expect(actions.editTemplate()).toEqual(expected);
+  });
+  it("has a type of RESET_EDIT_TEMPLATE action", () => {
+    const expected = {
+      type: types.RESET_EDIT_TEMPLATE,
+    };
+    expect(actions.resetEditTemplate()).toEqual(expected);
+  });
+  it("has a type of GET_INAPP_TEMPLATE_DETAILS_REQUEST action", () => {
+    const expected = {
+      type: types.GET_INAPP_TEMPLATE_DETAILS_REQUEST,
+      callback: undefined,
+      channel: "INAPP",
+      id: undefined,
+    };
+    expect(actions.getTemplateDetails()).toEqual(expected);
+  });
+  it("has a type of UPLOAD_INAPP_ASSET_REQUEST action", () => {
+    const expected = {
+      type: types.UPLOAD_INAPP_ASSET_REQUEST,
+    };
+    expect(actions.uploadInAppAsset()).toEqual(expected);
+  });
+  it("has a type of CLEAR_INAPP_ASSET action", () => {
+    const expected = {
+      type: types.CLEAR_INAPP_ASSET,
+    };
+    expect(actions.clearInAppAsset()).toEqual(expected);
+  });
+});

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { configureStore }  from '@capillarytech/vulcan-react-sdk/utils';
+import { createBrowserHistory } from 'history';
+import { initialReducer } from '../../../initialReducer';
+import { InApp } from '../index';
+import { render, screen, fireEvent, within } from '../../../utils/test-utils';
+import {
+  editData,
+  accountData,
+  location,
+  editData1,
+  location1,
+} from './mockData';
+import { metaEntities, getDefaultTags, injectedTags } from '../../Zalo/tests/mockData';
+import { getCtaObject } from '../utils';
+
+const mockActions = {
+  getTemplateInfoById: jest.fn(),
+  resetEditTemplate: jest.fn(),
+  getTemplateDetails: jest.fn(),
+  editTemplate: jest.fn(),
+};
+const mockGlobalActions = {
+  fetchSchemaForEntity: jest.fn(),
+};
+
+let store;
+let browserHistory = createBrowserHistory();
+beforeAll(() => {
+  store = configureStore({}, initialReducer, browserHistory);
+});
+
+const ComponentToRender = injectIntl(InApp);
+const renderComponent = (props) =>
+  render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+
+describe('Test activity inApp container', () => {
+  it('test case for inApp template update flow', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      location,
+      editData,
+      accountData,
+      isFullMode: true,
+      params: { id: 'test'},
+    });
+    const inputBox = await screen.findAllByPlaceholderText(
+      'Enter template name',
+    );
+    fireEvent.change(inputBox[0], { target: { value: 'Hello, welcome' } });
+    inputBox[0].focus();
+    const iosTab = screen.getByRole('tab', {
+      name: /ios/i,
+    });
+    fireEvent.click(within(iosTab).getByText(/ios/i));
+    const androidTab = screen.getByRole('tab', {
+      name: /android/i,
+    });
+    fireEvent.click(within(androidTab).getByText(/android/i));
+    const inputNameBox = await screen.findAllByPlaceholderText(
+      'Enter template name',
+    );
+    fireEvent.change(inputNameBox[0], { target: { value: 'Hello, welcome' } });
+    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
+    msgBox[0].focus();
+    fireEvent.change(msgBox[0], { target: { value: 'val' }});
+    const updateBtn = screen.getByRole('button', {
+      name: /update/i,
+    });
+    expect(updateBtn).toBeEnabled();
+    fireEvent.click(updateBtn);
+    expect(mockActions.editTemplate).toBeCalled();
+  });
+  it('test case for inApp template configuration', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      location: location1,
+      templateData: editData1?.templateDetails,
+      accountData,
+      isFullMode: false,
+      params: { id: 'test'},
+      getFormData: jest.fn(),
+    });
+    const iosTab = screen.getByRole('tab', {
+      name: /ios/i,
+    });
+    fireEvent.click(within(iosTab).getByText(/ios/i));
+    const androidTab = screen.getByRole('tab', {
+      name: /android/i,
+    });
+    fireEvent.click(within(androidTab).getByText(/android/i));
+    const msgBox = screen.getAllByPlaceholderText(/Please input in-app notification message content/i);
+    msgBox[0].focus();
+    fireEvent.change(msgBox[0], { target: { value: 'val' }});
+    const doneBtn = screen.getByRole('button', {
+      name: /done/i,
+    });
+    expect(doneBtn).toBeEnabled();
+  });
+  it('test case for inApp template copy content flow', async () => {
+    renderComponent({
+      actions: mockActions,
+      globalActions: mockGlobalActions,
+      location: {
+        pathname: '/inapp/edit',
+        query: {
+          type: false,
+          module: 'default',
+        },
+        search: '',
+      },
+      editData: editData1,
+      metaEntities,
+      getDefaultTags,
+      injectedTags,
+      accountData,
+      isFullMode: true,
+      params: { id: 'test'},
+    });
+    const layoutOption = screen.getByText(/top banner/i);
+    fireEvent.click(layoutOption);
+    const copyLink = screen.getByRole('link', {
+      name: /copy title and content from ios/i,
+    });
+    fireEvent.click(copyLink);
+    const iosTab = screen.getByRole('tab', {
+      name: /ios/i,
+    });
+    fireEvent.click(within(iosTab).getByText(/ios/i));
+    const copyLinkIos = screen.getByRole('link', {
+      name: /copy title and content from android/i,
+    });
+    fireEvent.click(copyLinkIos);
+    expect(copyLink).toBeInTheDocument();
+  });
+});
+describe('test for getCtaObject function', () => {
+  it('getCtaObject function', () => {
+    const response = getCtaObject([{ type: "DEEP_LINK", actionText: "btn", actionLink: "url" }]);
+    expect(response).toEqual([{
+      index: 0,
+      text: "btn",
+      url: "url",
+      urlType: "DEEP_LINK",
+      isSaved: true,
+    }]);
+    const responseDefault = getCtaObject([{}]);
+    expect(responseDefault).toEqual([{
+      index: 0,
+      text: "",
+      url: "",
+      urlType: "",
+      isSaved: true,
+    }]);
+  });
+});