@capillarytech/creatives-library 7.17.90 → 7.17.91

package/containers/App/constants.js

@@ -73,6 +73,7 @@ export const PROMO_ENGINE_RELATED_TAGS = [
 
 export const BADGES_RELATED_TAGS = [
   "Badge_expiry_date",
+  "badges_issue_expiry_date",
   "badge_expiry_mm_slash_dd_slash_yyyy",
   "badge_expiry_dd_slash_mm_slash_yyyy",
   "badge_expiry_yyyy_hyphen_mm_hyphen_dd",
@@ -91,8 +92,18 @@ export const BADGES_RELATED_TAGS = [
   "badges_enroll_expiry_date.FORMAT_7",
   "badges_enroll_expiry_date.FORMAT_8",
   "badges_enroll_expiring_in_days",
+  "badges_issue_expiry_date.FORMAT_1",
+  "badges_issue_expiry_date.FORMAT_2",
+  "badges_issue_expiry_date.FORMAT_3",
+  "badges_issue_expiry_date.FORMAT_4",
+  "badges_issue_expiry_date.FORMAT_5",
+  "badges_issue_expiry_date.FORMAT_6",
+  "badges_issue_expiry_date.FORMAT_7",
+  "badges_issue_expiry_date.FORMAT_8",
+  "badges_issue_expiring_in_days",
 ];
 export const BADGES_ENROLL = 'BADGES_ENROLL';
+export const BADGES_ISSUE = 'BADGES_ISSUE';
 
 export const CUSTOMER_BARCODE_TAG = "customer_barcode";
 export const COPY_OF = "Copy of";

package/package.json

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

package/services/api.js

@@ -509,3 +509,8 @@ export const getMetaTags = ({previewUrl}) => {
   const url = `${API_ENDPOINT}/common/getMetaTags?url=${previewUrl}`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getSupportVideosConfig = () => {
+  const url = `${ARYA_ENDPOINT}/support_videos/?product=Creatives`;
+  return request(url, getAPICallObject('GET'));
+};

package/services/tests/api.test.js

@@ -4,6 +4,7 @@ import {
   getCdnTransformationConfig,
   createWhatsappTemplate,
   getMetaTags,
+  getSupportVideosConfig,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -52,3 +53,8 @@ describe('getMetaTags -- Test with valid responses', () => {
       getMetaTags({previewUrl: 'https://capillarytech.com'}),
     ).toEqual(Promise.resolve()));
 });
+
+describe('getSupportVideosConfig -- Test with valid responses', () => {
+  it('Should return correct response', () =>
+    expect(getSupportVideosConfig()).toEqual(Promise.resolve()));
+});

package/utils/common.js

@@ -17,6 +17,7 @@ import {
   ENABLE_CUSTOMER_BARCODE_TAG,
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
+  BADGES_ISSUE,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -177,7 +178,7 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
   });
   let combinedTags = result;
   if (offerDetails?.length) {
-    if (offerDetails?.[0]?.type === BADGES_ENROLL) {
+    if ([BADGES_ENROLL, BADGES_ISSUE].includes(offerDetails?.[0]?.type)) {
       combinedTags = transformBadgeTags(offerDetails, result);
     } else {
       combinedTags = transformCouponTags(offerDetails, result);

package/utils/tests/common.mockdata.js

@@ -115,8 +115,10 @@ export const badgesTags = [
       "value": "Badge",
       "subtags": [
         "Badge_expiry_date",
+        "badges_issue_expiry_date",
         "Days_until_expiry",
         "badges_enroll_expiring_in_days",
+        "badges_issue_expiring_in_days",
       ],
       "tag-header": true,
       "supportedModules": [
@@ -234,6 +236,15 @@ export const badgesTags = [
         "badges_enroll_expiry_date.FORMAT_6",
         "badges_enroll_expiry_date.FORMAT_7",
         "badges_enroll_expiry_date.FORMAT_8",
+        "badges_issue_expiry_date.FORMAT_1",
+        "badges_issue_expiry_date.FORMAT_2",
+        "badges_issue_expiry_date.FORMAT_3",
+        "badges_issue_expiry_date.FORMAT_4",
+        "badges_issue_expiry_date.FORMAT_5",
+        "badges_issue_expiry_date.FORMAT_6",
+        "badges_issue_expiry_date.FORMAT_7",
+        "badges_issue_expiry_date.FORMAT_8",
+        "badges_issue_expiring_in_days",
       ],
       "tag-header": true,
       "supportedModules": [

package/v2Containers/Cap/actions.js

@@ -73,3 +73,7 @@ export function clearTopbarMenuData() {
     type: types.CLEAR_TOPBAR_MENU_DATA,
   };
 }
+
+export const getSupportVideosConfig = () => ({
+  type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+});

package/v2Containers/Cap/constants.js

@@ -40,3 +40,17 @@ export const ORG_CHANGED = 'ORG_CHANGED';
 
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
 export const ERROR_IN_FETCHING_TAGS = 'Error in fetching tags';
+
+export const GET_SUPPORT_VIDEOS_CONFIG_REQUEST =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_REQUEST';
+export const GET_SUPPORT_VIDEOS_CONFIG_SUCCESS =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_SUCCESS';
+export const GET_SUPPORT_VIDEOS_CONFIG_FAILURE =
+  'cap/GET_SUPPORT_VIDEOS_CONFIG_FAILURE';
+
+export const REQUEST = 'REQUEST';
+export const SUCCESS = 'SUCCESS';
+export const FAILURE = 'FAILURE';
+
+export const ENABLE_PRODUCT_SUPPORT_VIDEOS = 'ENABLE_PRODUCT_SUPPORT_VIDEOS';
+export const DEFAULT = 'default';

package/v2Containers/Cap/index.js

@@ -12,7 +12,7 @@ import moment from 'moment';
 import { GA, multipleOrgSwitch, utilsSessionStorageApi, Auth } from '@capillarytech/cap-ui-utils';
 import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
 import messages from './messages';
-import { makeSelectAuthenticated, makeSelectUser } from './selectors';
+import { makeSelectAuthenticated, makeSelectUser, makeSelectDemoVideoAndLink } from './selectors';
 import * as actions from './actions';
 import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
@@ -21,11 +21,16 @@ import NavigationBar from '../../v2Components/NavigationBar';
 import { engagePlusPublicPath, publicPath } from '../../config/path';
 import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
+import CapSupportVideosWrapper from '@capillarytech/cap-ui-library/CapSupportVideosWrapper';
+import { replaceDynamicAndCompare } from '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils';
 import {
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
   ORG_REFRESH_SEC,
   ORG_CHANGED,
+  REQUEST,
+  DEFAULT,
+  ENABLE_PRODUCT_SUPPORT_VIDEOS,
 } from './constants';
 import './_cap.scss';
 const gtm = window.dataLayer || [];
@@ -109,7 +114,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
     locale = this.getMappedLocale(locale);
     //locale = 'zh';
-
+    this.props.actions.getSupportVideosConfig();
     moment.locale(locale);
     window.addEventListener('storage', this.handleStorageChange, false);
     document.addEventListener(
@@ -413,6 +418,46 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.setState({ showOrgChangeModal: false });
   };
 
+  renderNavigationComponent(component) {
+    const { demoVideoAndLinkJSONData: {
+        demoVideoAndLinkJSON = {},
+        demoVideoAndLinkJSONStatus,
+      } = {},
+      Global,
+    } = this.props;
+    const { currentOrgDetails = {}, user = {} } =
+    Global || {};
+    const { lang: userLocale = '' } = user;
+    let wrapperComponent = <>{component}</>;
+    const {
+      basicDetails: { base_language: orgLocale = '' } = {},
+      accessibleFeatures = [],
+    } = currentOrgDetails || {};
+    if (
+      accessibleFeatures.includes(
+        ENABLE_PRODUCT_SUPPORT_VIDEOS
+      ) &&
+      demoVideoAndLinkJSON?.is_active &&
+      demoVideoAndLinkJSONStatus !== REQUEST
+    ) {
+      const demoLocale = userLocale || orgLocale || DEFAULT;
+      const JSONInContext = demoVideoAndLinkJSON?.json_config;
+      const currentPathJSON = JSONInContext?.find((routeEle) =>
+        replaceDynamicAndCompare(location?.pathname, routeEle?.route),
+      );
+      const targetElements = currentPathJSON?.target_elements || {};
+      wrapperComponent = (
+        <CapSupportVideosWrapper
+          targetElements={targetElements}
+          locale={demoLocale}
+        >
+          {component}
+        </CapSupportVideosWrapper>
+      );
+    }
+    return wrapperComponent;
+  }
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
@@ -444,6 +489,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                     <CapSomethingWentWrong url={`${window.location.origin}${publicPath}v2`} />
               }
               {isLoggedIn && type !== 'embedded' ?
+              this.renderNavigationComponent(
                 <NavigationBar
                   userData={Global}
                   changeOrg={this.changeOrg}
@@ -455,7 +501,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
                   topbarMenuData={topbarMenuDataOptions}
                   location={location}
                   campaignOrgV2Status={currentOrgDetails.org_campaign_v2_status}
-            /> : ''}
+                />) : ''}
               <div className="main" style={{minHeight: 'calc(100vh - 74px', position: 'relative', top: '74px'}}>
 
                 <div className="main-content">
@@ -488,12 +534,14 @@ Cap.propTypes = {
   locationActions: PropTypes.object,
   location: PropTypes.object,
   intl: intlShape.isRequired,
+  demoVideoAndLinkJSONData: PropTypes.object,
 };
 
 const mapStateToProps = createStructuredSelector({
   Global: makeSelectAuthenticated(),
   User: makeSelectUser(),
   loader: makeSelectLocale(),
+  demoVideoAndLinkJSONData: makeSelectDemoVideoAndLink(),
 });
 
 function mapDispatchToProps(dispatch) {

package/v2Containers/Cap/reducer.js

@@ -127,6 +127,18 @@ function capReducer(state = fromJS(initialState.cap), action) {
         .set('tagsToDisable', action.tagsToDisable)
         .set('parentTagsToDisable', action.parentTagsToDisable);
     }
+    case types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.REQUEST)
+        .set('demoVideoAndLinkJSON', {});
+    case types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.SUCCESS)
+        .set('demoVideoAndLinkJSON', action?.result);
+    case types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE:
+      return state
+        .set('demoVideoAndLinkJSONStatus', types.FAILURE)
+        .set('demoVideoAndLinkJSONError', action?.error);
     default:
       return state;
   }

package/v2Containers/Cap/sagas.js

@@ -171,6 +171,25 @@ function* getTopbarMenuData(params) {
   }
 }
 
+export function* getSupportVideosConfig({ callback }) {
+  try {
+    const response = yield call(Api.getSupportVideosConfig);
+    if (response?.success) {
+      yield put({
+        type: types.GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+        result: response?.data || {},
+      });
+    } else {
+      yield put({
+        type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+        error: response?.message,
+      });
+    }
+    if (callback) callback(response);
+  } catch (error) {
+    yield put({ type: types.GET_SUPPORT_VIDEOS_CONFIG_FAILURE, error });
+  }
+}
 
 function* watchFetchSchemaForEntity() {
   const watcher = yield takeLatest(types.GET_SCHEMA_FOR_ENTITY_REQUEST, fetchSchemaForEntity);
@@ -195,6 +214,13 @@ function* watchGetTopbarMenuData() {
   yield takeLatest(types.GET_TOPBAR_MENU_DATA_REQUEST, getTopbarMenuData);
 }
 
+export function* watchForGetVideosConfig() {
+  yield takeLatest(
+    types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    getSupportVideosConfig,
+  );
+}
+
 export default [
   loginFlow,
   watchForOrgChange,
@@ -202,5 +228,6 @@ export default [
   watchForFetchUserInfo,
   watchFetchSchemaForEntity,
   watchGetTopbarMenuData,
+  watchForGetVideosConfig,
 ];
 

package/v2Containers/Cap/selectors.js

@@ -87,6 +87,13 @@ const makeSelectLoyaltyPromotionDisplay = () => createSelector(
   }),
 );
 
+const makeSelectDemoVideoAndLink = () =>
+  createSelector(selectCapDomain, (substate) => ({
+    demoVideoAndLinkJSON: substate.get('demoVideoAndLinkJSON'),
+    demoVideoAndLinkJSONStatus: substate.get('demoVideoAndLinkJSONStatus'),
+    demoVideoAndLinkJSONError: substate.get('demoVideoAndLinkJSONError'),
+  }));
+
 export {
   makeSelectLocationState,
   makeSelectAuthenticated,
@@ -100,4 +107,5 @@ export {
   setInjectedTags,
   makeSelectLoyaltyPromotionDisplay,
   makeSelectFetchingSchemaError,
+  makeSelectDemoVideoAndLink,
 };

package/v2Containers/Cap/tests/Cap.test.js

@@ -0,0 +1,161 @@
+// This test in written using React Testing library. Written during setting up this library to make sure tests are working.
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import { screen } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import cloneDeep from 'lodash/cloneDeep';
+import configureStore from '../../../store';
+import { render } from '../../../utils/test-utils';
+import { Cap } from '../index';
+import mockData from '../../mockdata';
+const {
+  demoVideoAndLinkJSONData,
+  history,
+  location,
+  match,
+  Global,
+} = mockData;
+
+const ComponentToRender = injectIntl(Cap);
+
+const renderComponent = (props) => {
+  const store = configureStore({}, null);
+  render(
+    <Provider store={store}>
+      <ComponentToRender {...props} />
+    </Provider>,
+  );
+};
+
+jest.setTimeout(15000);
+jest.mock('@capillarytech/cap-ui-utils', () => ({
+  ...jest.requireActual('@capillarytech/cap-ui-utils'),
+  GA: {
+    initialize: jest.fn(),
+    timeTracker: {
+      stopTimer: jest.fn(),
+      startTimer: jest.fn(),
+    },
+    setCustomDimension: jest.fn(),
+    getCallerName: jest.fn(),
+  },
+  Auth: {
+    hasAccess: () => jest.fn(() => true),
+    hasFeatureAccess: () => jest.fn(() => true),
+    authHoc: jest.fn(),
+    initialize: jest.fn(),
+  },
+  multipleOrgSwitch: {
+    logNewTab: jest.fn(),
+    utilsGetOrgNameFromId: () => 'org2',
+    tabBeforeUnloadEventHandler: jest.fn(),
+    utilsHandleStorageChange: () => jest.fn(() => true),
+    isMultipleTabsOpen: () => jest.fn(() => true),
+  },
+  utilsSessionStorageApi: {
+    loadSessionItem: () => true,
+    saveSessionItem: jest.fn(),
+  },
+}));
+
+// jest.mock('../../../components/NavigationBar');
+
+jest.mock('@capillarytech/cap-ui-library/CapSupportVideosWrapper', () => {
+  const ChildComponent = (props) => {
+    const { targetElements } = props;
+    const DEMO_LABEL =
+      targetElements[Object.keys(targetElements)[1]]?.support_video?.target_url
+        ?.default?.label;
+    return <h4>{DEMO_LABEL}</h4>;
+  };
+  return ChildComponent;
+});
+
+describe('Cap', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const actions = {
+    authenticate: jest.fn(),
+    addMessageToQueue: jest.fn(),
+    changeOrg: jest.fn(),
+    changeOu: jest.fn(),
+    changeOuFailure: jest.fn(),
+    changeOuSuccess: jest.fn(),
+    fetchMenuSearchResults: jest.fn(),
+    clearTopbarMenuData: jest.fn(),
+    getAllUsers: jest.fn(),
+    getStartOfWeekForOrg: jest.fn(),
+    getTopbarMenuData: jest.fn(),
+    getUserData: jest.fn(),
+    loginSuccess: jest.fn(),
+    logout: jest.fn(),
+    removeMessageFromQueue: jest.fn(),
+    setActiveReportStatus: jest.fn(),
+    getSupportedLocales: jest.fn(),
+    getSupportVideosConfig: jest.fn(),
+  };
+
+  // Assign the mock window object to the global object
+  const originalLocation = window.location;
+  delete window.location;
+  window.location = { ...originalLocation, pathname: '/creatives/ui/v2' };
+
+  const props = {
+    demoVideoAndLinkJSONData,
+    history,
+    location: { ...location, query: { type: '' }},
+    match,
+    Global,
+    actions,
+    appActions: {
+      getSidebar: jest.fn(),
+    },
+    loader: { localeLoading: false },
+    intl: { formatMessage: jest.fn() },
+  };
+
+  const mockReplaceDynamicAndCompare = () => {
+    // Mocking replaceDynamicAndCompare function to get the currentPathJSON
+    jest.mock(
+      '@capillarytech/cap-ui-library/CapSupportVideosWrapper/utils',
+      () => ({
+        replaceDynamicAndCompare: jest.fn((pathname, route) => {
+          if (pathname === '/creatives/ui/v2') {
+            return {
+              target_elements: { element1: 'video1', element2: 'video2' },
+            };
+          }
+          return null;
+        }),
+      }),
+    );
+  };
+
+  const { findByText, queryByText } = screen;
+
+  it('Should show Demo text for video support', async () => {
+    mockReplaceDynamicAndCompare();
+    renderComponent(props);
+    expect(await findByText(/Demo/i)).toBeInTheDocument();
+  });
+
+  it('Should show Demo text for video support with orgLocale if userLocal is not present', async () => {
+    mockReplaceDynamicAndCompare();
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.Global.user.lang;
+    renderComponent(updatedProps);
+    expect(await findByText(/Demo/i)).toBeInTheDocument();
+  });
+
+  it('Should not show Demo text for video support if targetELements not found', async () => {
+    mockReplaceDynamicAndCompare();
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.demoVideoAndLinkJSONData.demoVideoAndLinkJSON
+      .json_config?.[0]?.target_elements;
+    renderComponent(updatedProps);
+    expect(queryByText(/Demo/i)).toBeNull();
+  });
+});

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

@@ -41,6 +41,7 @@ exports[`<Cap /> should render correct component 1`] = `
       "clearMetaEntities": [Function],
       "clearTopbarMenuData": [Function],
       "fetchSchemaForEntity": [Function],
+      "getSupportVideosConfig": [Function],
       "getTopbarMenuData": [Function],
       "getUserData": [Function],
       "logout": [Function],

package/v2Containers/Cap/tests/actions.test.js

@@ -0,0 +1,11 @@
+import * as types from '../constants';
+import * as actions from '../actions';
+
+describe('Test CAP actions', () => {
+  it('has a type of GET_SUPPORT_VIDEOS_CONFIG_REQUEST action', () => {
+    const expected = {
+      type: types.GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    };
+    expect(actions.getSupportVideosConfig()).toEqual(expected);
+  });
+});

package/v2Containers/Cap/tests/reducer.test.js

@@ -0,0 +1,59 @@
+import { fromJS } from 'immutable';
+import {
+    GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+    GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+    REQUEST,
+    SUCCESS,
+    FAILURE,
+} from '../constants';
+import reducer from '../reducer';
+import initialState from '../../../initialState';
+
+const mockedInitialState = fromJS(initialState.cap);
+
+describe('should handle GET_SUPPORT_VIDEOS_CONFIG', () => {
+  it('should handle GET_SUPPORT_VIDEOS_CONFIG_REQUEST', () => {
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_REQUEST,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSON: {},
+      demoVideoAndLinkJSONStatus: REQUEST,
+    });
+  });
+
+  it('it handles the GET_SUPPORT_VIDEOS_CONFIG_SUCCESS action', () => {
+    const result = {
+      is_active: true,
+      _id: "12345",
+      json_config: [
+              { data: 'Test data' },
+      ],
+    };
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+      result,
+      GET_SUPPORT_VIDEOS_CONFIG_SUCCESS,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSON: result,
+      demoVideoAndLinkJSONStatus: SUCCESS,
+    });
+  });
+
+  it('should handle GET_SUPPORT_VIDEOS_CONFIG_FAILURE', () => {
+    const error = 'Error';
+    const action = {
+      type: GET_SUPPORT_VIDEOS_CONFIG_FAILURE,
+      error,
+    };
+    expect(reducer(mockedInitialState, action).toJS()).toEqual({
+      ...mockedInitialState.toJS(),
+      demoVideoAndLinkJSONError: error,
+      demoVideoAndLinkJSONStatus: FAILURE,
+    });
+  });
+});