@capillarytech/creatives-library 6.12.11 → 6.12.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "6.12.11",
+  "version": "6.12.12",
   "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.3.1",
+    "@capillarytech/cap-ui-utils": "^1.2.8",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/v2Containers/Cap/constants.js

@@ -31,7 +31,3 @@ 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, CapModal, CapSnackBar } from '@capillarytech/cap-ui-library';
+import {CapNotification} 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, multipleOrgSwitch, utilsSessionStorageApi } from '@capillarytech/cap-ui-utils';
-import { injectIntl, FormattedMessage, intlShape, FormattedHTMLMessage } from 'react-intl';
+import { GA } from '@capillarytech/cap-ui-utils';
+import { injectIntl, FormattedMessage } from 'react-intl';
 import messages from './messages';
 import { makeSelectAuthenticated, makeSelectUser } from './selectors';
 import * as actions from './actions';
@@ -25,24 +25,8 @@ 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;
@@ -61,11 +45,6 @@ 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);
@@ -106,14 +85,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     //locale = 'zh';
     console.log('Setting final locale as', locale);
     moment.locale(locale);
-    window.addEventListener('storage', this.handleStorageChange, false);
-    document.addEventListener(
-      'visibilitychange',
-      this.handleVisibilityChange,
-      false,
-    );
-    window.addEventListener('pageshow', this.tabOnloadEventHandler, false);
-    window.addEventListener('pagehide', tabBeforeUnloadEventHandler, false);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -148,41 +119,10 @@ 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(
-      'pageshow',
-      this.tabOnloadEventHandler,
-      false,
-    );
-    window.removeEventListener(
-      'pagehide',
-      tabBeforeUnloadEventHandler,
-      false,
-    );
   }
-
-  tabOnloadEventHandler = () => {
-    logNewTab(BugsnagClient);
-  }
-  
   setDimensionData() {
     const userGtmData = this.getUserGtmData();
     Object.values(userGtmData).forEach((value, index) => {
@@ -218,7 +158,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     };
     return map[locale];
   }
-
   handleRemoveMessage(messageIndex) {
     this.props.actions.removeMessageFromQueue(messageIndex);
   }
@@ -233,157 +172,17 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
     this.props.actions.logout();
   }
   changeOrg(orgId) {
-    //display orgChangeModal if more than one tabs is open
-    if (isMultipleTabsOpen()) {
-      this.setState({
-        showOrgChangeModal: true,
-        selectedOrgId: orgId,
-      });
-    } else {
-      this.props.actions.changeOrg(orgId);
-    }
+    this.props.actions.changeOrg(orgId);
+    this.navigateToDashboard();
   }
 
-  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, showOrgChangeModal, showRefreshModal } = this.state;
+    const { isCreativesAccessible } = this.state;
     console.log('v2 locale loading', this.props.loader.localeLoading);
     return (
       <CapWrapper>
@@ -432,8 +231,6 @@ export class Cap extends React.Component { // eslint-disable-line react/prefer-s
           )
         }
          </> }
-        {showRefreshModal && this.renderOrgRefreshModal()}
-        {showOrgChangeModal && this.renderOrgChangeModal()}
       </CapWrapper>
     );
   }
@@ -447,7 +244,6 @@ Cap.propTypes = {
   appActions: PropTypes.object,
   locationActions: PropTypes.object,
   location: PropTypes.object,
-  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Cap/messages.js

@@ -72,45 +72,4 @@ 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}',
-  },
 });

package/v2Containers/Email/index.js

@@ -2666,8 +2666,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     if (this.props.location.query.type === 'embedded' && this.props.location.query.module === 'library' && !this.props.getDefaultTags) {
       tags = this.props.supportedTags;
     }
-    const { showImageSelectionBox = false } = this.state;
-    const showTestAndPreview = !showImageSelectionBox && getDefaultTags === 'outbound';
+    const showTestAndPreview = getDefaultTags === 'outbound';
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>