@capillarytech/creatives-library 7.10.8 → 7.10.9

package/app.js

@@ -6,6 +6,7 @@ import createHistory from 'history/lib/createBrowserHistory';
 import { applyRouterMiddleware, Router, useRouterHistory } from 'react-router';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { useScroll } from 'react-router-scroll';
+import CapSomethingWentWrong from '@capillarytech/cap-ui-library/CapSomethingWentWrong';
 import Bugsnag from '@bugsnag/js';
 import BugsnagPluginReact from '@bugsnag/plugin-react';
 import CapV2 from 'v2Containers/Cap';
@@ -105,7 +106,8 @@ const rootRoute = {
     if (
       props.location.pathname === 'v2' ||
       props.location.pathname === 'v2/' ||
-      props.location.pathname === 'v2/loyalty'
+      props.location.pathname === 'v2/loyalty' ||
+      props.location.pathname === 'v2/somethingwentwrong'
     ) {
       return <CapV2 {...props} />;
     }
@@ -114,7 +116,7 @@ const rootRoute = {
   childRoutes: createRoutes(store),
 };
 
-const ErrorScreen = () => <React.Fragment />;
+const ErrorScreen = () => <CapSomethingWentWrong url={`${pathConfig.publicPath}v2`} />
 
 const render = (messages) => {
   ReactDOM.render(

package/package.json

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

package/routes.js

@@ -2,7 +2,9 @@
 // They are all wrapped in the App component, which should contain the navbar etc
 // See http://blog.mxstbr.com/2016/01/react-apps-with-pages for more information
 // about the code splitting business
+import React from 'react';
 import { getAsyncInjectors } from 'utils/asyncInjectors';
+import pathConfig from './config/path'
 import * as rootSaga from 'containers/Cap/sagas';
 import * as smsSagas from 'containers/Sms/Create/sagas';
 import * as smsEditSagas from 'containers/Sms/Edit/sagas';
@@ -22,6 +24,13 @@ const loadModule = (cb) => (componentModule) => {
   cb(null, componentModule.default);
 };
 
+const loadModuleWithProps = (cb) => (ComponentModule, props) => {
+  cb(
+    null, 
+    () => <ComponentModule.default {...props} />
+  );
+};
+
 export default function createRoutes(store) {
   // Create reusable async injectors using getAsyncInjectors factory
   updateCharCount("", false); // calling here to get unsubscribeurl from api.
@@ -598,6 +607,16 @@ export default function createRoutes(store) {
 
         importModules.catch(errorLoading);
       },
+    }, {
+      path: '/v2/somethingwentwrong',
+      name: 'somethingwentwrong',
+      getComponent(nextState, cb) {
+        import('@capillarytech/cap-ui-library/CapSomethingWentWrong')
+          .then((Component) => {
+            loadModuleWithProps(cb)(Component, { url: `${pathConfig.publicPath}v2` });
+          })
+          .catch(errorLoading);
+      },
     },
     {
       path: '/v2(/:channel)',

package/services/api.js

@@ -90,12 +90,18 @@ function checkStatus(response) {
   const isLoginPage = window.location.pathname.indexOf('/login') !== -1;
   if (!isLoginPage) redirectIfUnauthenticated(response);
 
-  const error = new Error(statusText);
+  const error = new Error({ statusText, status });
   error.response = response;
+  error.isError = true;
+  error.status = status;
   throw error;
 }
 
-function request(url, options) {
+function showSomethingwentWrong() {
+  window.history.pushState({}, '', `${pathConfig.publicPath}v2/somethingwentwrong`);
+}
+
+function request(url, options, handleUnauthorizedStatus) {
   try {
     requestCallerName = getCallerName();
   } catch (e) {
@@ -103,8 +109,14 @@ function request(url, options) {
   }
   const fetchUrl = url.indexOf('?') !== -1 ? `${url}&time=${Date.now()}` : `${url}?time=${Date.now()}`;
   return fetch(fetchUrl, options)
-    .then(checkStatus)
-    .then(parseJSON);
+    .then(response => {
+      if (response.status === 403 && handleUnauthorizedStatus) {
+        showSomethingwentWrong();
+      }
+      return checkStatus(response);
+    })
+    .then(parseJSON)
+    .catch(error => error);
 }
 
 function getAPICallObject(method, body, isFileUpload = false, loadCampaignHeaders = false) {
@@ -196,9 +208,10 @@ export const getSidebar = () => {
   return response;
 };
 
+// if 403, show SWR page
 export const getUserData = () => {
   const url = `${API_AUTH_ENDPOINT}/user?include_features=1`;
-  return request(url, getAPICallObject('GET'));
+  return request(url, getAPICallObject('GET'), true);
 };
 
 export const createTemplate = ({template}) => {

package/v2Containers/App/constants.js

@@ -106,3 +106,5 @@ export const FB_AD_CALL_TO_ACTION = {
 
 export const CREATIVES = 'creatives';
 export const LOYALTY = 'loyalty';
+
+export const FAILURE = 'FAILURE';

package/v2Containers/Cap/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import { CapNotification, CapModal, CapSnackBar } from '@capillarytech/cap-ui-library';
+import { CapNotification, CapModal, CapSnackBar, CapSomethingWentWrong } from '@capillarytech/cap-ui-library';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
@@ -18,8 +18,8 @@ import * as locationActions from '../LanguageProvider/actions';
 import * as appActions from '../App/actions';
 import config from '../../config/app';
 import NavigationBar from '../../v2Components/NavigationBar';
-import { engagePlusPublicPath } from '../../config/path';
-import { GTM_TRACKING_ID, CREATIVES_UI_VIEW } from '../App/constants';
+import { engagePlusPublicPath, publicPath } from '../../config/path';
+import { GTM_TRACKING_ID, CREATIVES_UI_VIEW, FAILURE } from '../App/constants';
 import { makeSelectLocale } from '../../v2Containers/LanguageProvider/selectors';
 import {
   ORG_SETTINGS_URL,
@@ -415,7 +415,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
 
   render() {
     const { Global, location } = this.props;
-    const { topbarMenuData, isLoggedIn, currentOrgDetails } = Global;
+    const { topbarMenuData, isLoggedIn, currentOrgDetails = {}, getUserDataStatus, getUserDataCode } = Global;
     const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
@@ -438,6 +438,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
               ]}
         />
             <div className="wrapper">
+              {
+                getUserDataStatus === FAILURE &&
+                  getUserDataCode !== 401 &&
+                    <CapSomethingWentWrong url={`${window.location.origin}${publicPath}v2`} />
+              }
               {isLoggedIn && type !== 'embedded' ?
                 <NavigationBar
                   userData={Global}

package/v2Containers/Cap/reducer.js

@@ -5,6 +5,7 @@ import { fromJS } from 'immutable';
 import _ from 'lodash';
 import * as types from './constants';
 import initialState from '../../initialState';
+import { FAILURE } from '../App/constants';
 
 function capReducer(state = fromJS(initialState.cap), action) {
   switch (action.type) {
@@ -73,7 +74,9 @@ function capReducer(state = fromJS(initialState.cap), action) {
     case types.GET_USER_DATA_FAILURE:
       return state
         .set('fetching_userdata', false)
-        .set('isLoggedIn', false);
+        .set('isLoggedIn', false)
+        .set('getUserDataStatus', FAILURE)
+        .set('getUserDataCode', action.status);
     case types.GET_SCHEMA_FOR_ENTITY_REQUEST:
       return state
         .set('fetchingSchema', true);

package/v2Containers/Cap/sagas.js

@@ -77,27 +77,38 @@ function* logoutFlow() {
 export function* fetchUserInfo(option) {
   try {
     const result = yield call(Api.getUserData);
-    const userData = result.user;
-    // const orgId = yield select(makeSelectOrgId());
-    // yield put({type: types.GET_ORG_DETAILS_REQUEST, orgId});
-    const currentOrgDetails = result.currentOrgDetails;
-    if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.base_language && (currentOrgDetails.basic_details.base_language !== "" || currentOrgDetails.basic_details.base_language === null))) {
-      currentOrgDetails.basic_details.base_language = 'en';
-    }
-    if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.supported_languages && currentOrgDetails.basic_details.supported_languages.length > 0)) {
-      currentOrgDetails.basic_details.supported_languages = [
-        {
-          lang_id: 69,
-          language: "English",
-          iso_code: "en",
-        },
-      ];
-    }
-    yield call(LocalStorage.saveItem, 'orgID', result.currentOrgId);
-    yield call(LocalStorage.saveItem, 'user', userData);
-    yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails});
-    if (option.callback) {
-      option.callback(userData);
+    if (result?.isError || result?.status === 401) {
+      yield call(LocalStorage.clearItem, 'user');
+      yield put({
+        type: types.GET_USER_DATA_FAILURE,
+        error: result,
+        status: result?.status,
+      });
+    } 
+
+    else {
+      const userData = result.user;
+      // const orgId = yield select(makeSelectOrgId());
+      // yield put({type: types.GET_ORG_DETAILS_REQUEST, orgId});
+      const currentOrgDetails = result.currentOrgDetails;
+      if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.base_language && (currentOrgDetails.basic_details.base_language !== "" || currentOrgDetails.basic_details.base_language === null))) {
+        currentOrgDetails.basic_details.base_language = 'en';
+      }
+      if (!(currentOrgDetails && currentOrgDetails.basic_details && currentOrgDetails.basic_details.supported_languages && currentOrgDetails.basic_details.supported_languages.length > 0)) {
+        currentOrgDetails.basic_details.supported_languages = [
+          {
+            lang_id: 69,
+            language: "English",
+            iso_code: "en",
+          },
+        ];
+      }
+      yield call(LocalStorage.saveItem, 'orgID', result.currentOrgId);
+      yield call(LocalStorage.saveItem, 'user', userData);
+      yield put({type: types.GET_USER_DATA_SUCCESS, userData, currentOrgId: result.currentOrgId, currentOrgDetails});
+      if (option.callback) {
+        option.callback(userData);
+      }
     }
   } catch (error) {
     yield call(LocalStorage.clearItem, 'user');