@capillarytech/creatives-library 6.12.12 → 6.12.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.12.12",
+  "version": "6.12.13",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "^1.2.8",
+    "@capillarytech/cap-ui-utils": "1.3.1",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/v2Containers/Cap/constants.js

@@ -31,3 +31,7 @@ export const CLEAR_TOPBAR_MENU_DATA = 'creatives/cap/CLEAR_TOPBAR_MENU_DATA';
 export const CAMPAIGN_SETTINGS_URL = '/creatives/settings/message';
 export const ORG_SETTINGS_URL = '/org/index';
 export const HELP_URL = 'https://support.capillarytech.com/en/support/solutions/4000007853';
+
+export const ORG_REFRESH_SEC = 10; 
+export const ORG_CHANGED = 'ORG_CHANGED'; 
+

package/v2Containers/Cap/index.js

@@ -2,15 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { connect } from 'react-redux';
-import {CapNotification} from '@capillarytech/cap-ui-library';
+import { CapNotification, CapModal, CapSnackBar } from '@capillarytech/cap-ui-library';
 import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 import { createStructuredSelector } from 'reselect';
 import _ from 'lodash';
 import moment from 'moment';
 // import 'moment/locale/zh-cn';
-import { GA } from '@capillarytech/cap-ui-utils';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { GA, multipleOrgSwitch, utilsSessionStorageApi } from '@capillarytech/cap-ui-utils';
+import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
 import messages from './messages';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
@@ -25,8 +25,24 @@ import {
   HELP_URL,
   ORG_SETTINGS_URL,
   CAMPAIGN_SETTINGS_URL,
+  ORG_REFRESH_SEC,
+  ORG_CHANGED
 } from './constants';
+import './_cap.scss';
+import { BugsnagClient } from '../../app';
+
 const gtm = window.dataLayer || [];
+const {
+  logNewTab,
+  getOrgNameFromId,
+  tabBeforeUnloadEventHandler,
+  utilsHandleStorageChange,
+  isMultipleTabsOpen,
+} = multipleOrgSwitch;
+const {
+  loadSessionItem,
+  saveSessionItem,
+} = utilsSessionStorageApi;
 
 const CapWrapper = styled.div`
   margin: 0 auto;
@@ -45,6 +61,11 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.state = {
       switchedOrg: false,
       isCreativesAccessible: true,
+      refreshSeconds: ORG_REFRESH_SEC,
+      selectedOrgId: null,
+      showRefreshModal: false,
+      showOrgChangeModal: false,
+      localStorageOrgInfo: { oldValue: null, newValue: null },
     };
     this.changeOrg = this.changeOrg.bind(this);
     this.logout = this.logout.bind(this);
@@ -85,6 +106,14 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     //locale = 'zh';
     console.log('Setting final locale as', locale);
     moment.locale(locale);
+    logNewTab(BugsnagClient);
+    window.addEventListener('storage', this.handleStorageChange, false);
+    document.addEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange,
+      false,
+    );
+    window.addEventListener('unload', tabBeforeUnloadEventHandler, false);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -119,10 +148,33 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     }
   }
 
+  componentDidUpdate(prevProps) {
+    if (
+      !(prevProps.Global.currentOrgDetails) &&
+      this.props.Global.currentOrgDetails &&
+      loadSessionItem(ORG_CHANGED)
+    ) {
+      this.showOrgChangeSnackBar();
+    }
+  }
+
   componentWillUnmount() {
     this.setState({ switchedOrg: false });
     this.props.actions.clearTopbarMenuData();
+    window.removeEventListener('storage', this.handleStorageChange, false);
+    document.removeEventListener(
+      'visibilitychange',
+      this.handleVisibilityChange,
+      false,
+    );
+
+    window.removeEventListener(
+      'unload',
+      this.tabBeforeUnloadEventHandler,
+      false,
+    );
   }
+
   setDimensionData() {
     const userGtmData = this.getUserGtmData();
     Object.values(userGtmData).forEach((value, index) => {
@@ -158,6 +210,7 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     };
     return map[locale];
   }
+
   handleRemoveMessage(messageIndex) {
     this.props.actions.removeMessageFromQueue(messageIndex);
   }
@@ -172,17 +225,157 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.props.actions.logout();
   }
   changeOrg(orgId) {
-    this.props.actions.changeOrg(orgId);
-    this.navigateToDashboard();
+    //display orgChangeModal if more than one tabs is open
+    if (isMultipleTabsOpen()) {
+      this.setState({
+        showOrgChangeModal: true,
+        selectedOrgId: orgId,
+      });
+    } else {
+      this.props.actions.changeOrg(orgId);
+    }
   }
 
+  showOrgChangeSnackBar = () => {
+    saveSessionItem(ORG_CHANGED, false);
+    const {
+      Global: {
+        currentOrgDetails: {
+          basic_details: { name: currentOrgName } = {},
+        } = {},
+      } = {},
+      intl: { formatMessage } = {},
+    } = this.props;
+    CapSnackBar.warning({
+      content: (
+        <div>
+          {formatMessage(messages.orgChangedText)}
+          <b>
+            {formatMessage(messages.newOrgName, {
+              newOrgName: currentOrgName,
+            })}
+          </b>
+        </div>
+      ),
+      showCloseIcon: true,
+    });
+  };
+
+  handleVisibilityChange = () => {
+    const activeDoc = document.hidden || false;
+    const { showRefreshModal, refreshSeconds } = this.state;
+    if (
+      activeDoc === false &&
+      showRefreshModal &&
+      refreshSeconds === ORG_REFRESH_SEC
+    ) {
+      const timer = setInterval(() => {
+        this.setState(prevState => ({
+          refreshSeconds: prevState.refreshSeconds - 1,
+        }));
+      }, 1000);
+      setTimeout(() => {
+        clearInterval(timer);
+        saveSessionItem(ORG_CHANGED, true);
+        this.navigateToDashboard();
+      }, refreshSeconds * 1000);
+    }
+  };
+
+  handleStorageChange = (e) => {
+    const { oldValue, newValue } = e;
+     if (utilsHandleStorageChange(e, 'orgID')) {
+      const localStorageOrgInfo = { oldValue, newValue };
+      this.setState({ showRefreshModal: true, localStorageOrgInfo });
+    }
+  };
+
+  renderOrgRefreshModal = () => {
+    const {
+      localStorageOrgInfo: { oldValue: oldOrgId, newValue: newOrgId } = {},
+      showRefreshModal,
+      refreshSeconds,
+    } = this.state;
+    const {
+      Global: { user: { proxyOrgList } = {} } = {},
+      intl: { formatMessage } = {},
+    } = this.props;
+    const oldOrgName = getOrgNameFromId(Number(oldOrgId), proxyOrgList);
+    const newOrgName = getOrgNameFromId(Number(newOrgId), proxyOrgList);
+    const modalData = (
+      <CapModal
+        title={formatMessage(messages.orgRefreshHeading)}
+        visible={showRefreshModal}
+        closable={false}
+        centered
+        maskClosable={false}
+        footer={null}
+      >
+        <div className="modal-body">
+          <span className="title">
+            <FormattedHTMLMessage
+              {...messages.refreshOrgText}
+              values={{ oldOrgName, newOrgName }}
+            />
+          </span>
+          <div className="content seconds-right">
+            {formatMessage(messages.refreshText, {
+              time: `${refreshSeconds}s`,
+            })}
+          </div>
+        </div>
+      </CapModal>
+    );
+    return modalData;
+  };
+
+  renderOrgChangeModal = () => {
+    const { selectedOrgId, showOrgChangeModal } = this.state;
+    const {
+      Global: { user: { proxyOrgList } = {},
+      currentOrgDetails: { basic_details: { name: oldOrgName } = {} } = {},
+      },
+      intl: { formatMessage } = {},
+    } = this.props; 
+    const newOrgName = getOrgNameFromId(selectedOrgId, proxyOrgList);
+    return (
+      <CapModal
+        className="change-org-confirm"
+        title={formatMessage(messages.areYouSureText)}
+        visible={showOrgChangeModal}
+        onOk={this.handleOrgChangeOk}
+        onCancel={this.handleOrgChangeCancel}
+        centered
+        okText={formatMessage(messages.changeOk)}
+        cancelText={formatMessage(messages.cancel)}
+      >
+        <FormattedHTMLMessage
+          {...messages.orgChangeText}
+          values={{ oldOrgName, newOrgName }}
+        />
+      </CapModal>
+    );
+  };
+
+  handleOrgChangeOk = () => {
+    const { selectedOrgId: orgId } = this.state;
+    if (orgId !== null) {
+      this.props.actions.changeOrg(orgId);
+      this.setState({ showOrgChangeModal: false });
+    }
+  };
+
+  handleOrgChangeCancel = () => {
+    this.setState({ showOrgChangeModal: false });
+  };
+
   render() {
     const { Global, location } = this.props;
     const { topbarMenuData, isLoggedIn, currentOrgDetails } = Global;
     const topbarMenuDataOptions = topbarMenuData && topbarMenuData.data ? topbarMenuData.data : [];
     const type = this.props.location.query.type;
     const toastMessages = this.props.Global.messages;
-    const { isCreativesAccessible } = this.state;
+    const { isCreativesAccessible, showOrgChangeModal, showRefreshModal } = this.state;
     console.log('v2 locale loading', this.props.loader.localeLoading);
     return (
       <CapWrapper>
@@ -231,6 +424,8 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           )
         }
          </> }
+        {showRefreshModal && this.renderOrgRefreshModal()}
+        {showOrgChangeModal && this.renderOrgChangeModal()}
       </CapWrapper>
     );
   }
@@ -244,6 +439,7 @@ Cap.propTypes = {
   appActions: PropTypes.object,
   locationActions: PropTypes.object,
   location: PropTypes.object,
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Cap/messages.js

@@ -72,4 +72,45 @@ export default defineMessages({
     id: 'creatives.containersV2.incentive',
     defaultMessage: 'Incentive',
   },
+
+    //refresh due to org change messages
+
+  "refreshOrgText": {
+    id: `creatives.containersV2.refreshOrgText`,
+    defaultMessage:
+      'Refreshing this page & changing the Org from <b>{oldOrgName}</b> to <b>{newOrgName}</b>. At a time only one Org can be selected on the browser.',
+  },
+  "refreshText": {
+    id: `creatives.containersV2.refreshText`,
+    defaultMessage: 'Refreshing in {time}...',
+  },
+  "areYouSureText": {
+    id: `creatives.containersV2.areYouSureText`,
+    defaultMessage: 'Are you sure?',
+  },
+  "changeOk": {
+    id: `creatives.containersV2.changeOk`,
+    defaultMessage: 'Ok, change',
+  },
+  "cancel": {
+    id: `creatives.containersV2.cancel`,
+    defaultMessage: 'Cancel',
+  },
+  "orgChangeText": {
+    id: `creatives.containersV2.orgChangeText`,
+    defaultMessage:
+      'Changing from <b>{oldOrgName}</b> to <b>{newOrgName}</b> will change the organisation for applications open in other tabs as well.<br/>Do you want to make the change to <b>{newOrgName}</b>?',
+  },
+  "orgChangedText": {
+    id: `creatives.containersV2.orgChangedText`,
+    defaultMessage: 'Organization changed to ',
+  },
+  "orgRefreshHeading": {
+    id: `creatives.containersV2.orgRefreshHeading`,
+    defaultMessage: 'Org refresh',
+  },
+  "newOrgName": {
+    id: `creatives.containersV2.newOrgName`,
+    defaultMessage: '{newOrgName}',
+  },
 });