@capillarytech/creatives-library 6.12.10 → 6.12.12

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}>

package/v2Containers/Line/Create/_lineCreate.scss

@@ -0,0 +1,64 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.line-row{
+  margin-bottom: 16px;
+}
+.slidebox-content-container {
+  overflow-x: hidden;
+}
+.line-image {
+  position: relative;
+}
+.image-container {
+  display: flex;
+  & > div {
+    min-width: 516px;
+  }
+  border-radius: 5px;
+  .image-placeholder{
+    line-height: 150px;
+  }
+  img {
+    object-fit: cover;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto !important;
+    width: auto !important;
+  }
+}
+
+.pagination-container.gallery-upload {
+  height: calc(100vh - 60px);
+
+  .cap-custom-card-list-col {
+    max-width: 156px;
+    max-height: 156px;
+    display: inline-block;
+    margin-left: $CAP_SPACE_04;
+    margin-right: $CAP_SPACE_04;
+  }
+
+  .ant-card-body {
+    padding-top: 0;
+
+    .ant-card-meta-description img {
+      height: 80px;
+      width: auto;
+    }
+  }
+}
+
+.gallery-image {
+  height: 156px;
+  width: 156px;
+  border-radius: 4px;
+  margin: 3px;
+}
+
+.sms-text {
+  img {
+    display: block;
+    max-width: 100%;
+    object-fit: cover;
+  }
+}

package/v2Containers/Line/Create/actions.js

@@ -0,0 +1,94 @@
+/*
+ *
+ * Create actions
+ *
+ */
+
+import * as types from './constants';
+
+export function createTemplate(template, callback) {
+  console.log('action trigereed createtemplate');
+  return {
+    type: types.CREATE_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function clearCreateResponse() {
+  console.log('clearCreateResponse');
+  return {
+    type: types.CLEAR_CREATE_RESPONSE_REQUEST,
+  };
+}
+
+export function defaultAction() {
+  return {
+    type: types.DEFAULT_ACTION,
+  };
+}
+
+export function uploadAsset(file, assetType, fileParams) {
+  return {
+    type: types.UPLOAD_ASSET_REQUEST,
+    file,
+    assetType,
+    fileParams,
+  };
+}
+
+export function clearAsset() {
+  return {
+    type: types.CLEAR_ASSET,
+  };
+}
+
+
+// FOR EDIT
+
+
+export function editTemplate(template, callback) {
+  console.log('action trigereed editTemplate line @@@');
+  return {
+    type: types.EDIT_TEMPLATE_REQUEST,
+    template,
+    callback,
+  };
+}
+
+export function getTemplateDetails(id) {
+  console.log('getting template line @@@', id);
+  return {
+    type: types.GET_TEMPLATE_DETAILS_REQUEST,
+    id,
+    channel: 'LINE',
+  };
+}
+
+export function clearEditResponse() {
+  console.log('clearEditResponse');
+  return {
+    type: types.CLEAR_EDIT_RESPONSE_REQUEST,
+  };
+}
+
+export function clearData() {
+  return {
+    type: types.CLEAR_DATA,
+  };
+}
+
+export function getLineTemplatesList(channel, queryParams) {
+  return {
+    type: types.GET_LINE_TEMPLATES_LIST_REQUEST,
+    channel,
+    queryParams,
+  };
+}
+
+export function setSelectedTemplate(templateData) {
+  return {
+    type: types.SET_SELECTED_TEMPLATE,
+    data: templateData,
+  };
+}

package/v2Containers/Line/Create/constants.js

@@ -0,0 +1,43 @@
+/*
+ *
+ * Create constants
+ *
+ */
+
+export const DEFAULT_ACTION = 'app/Create/DEFAULT_ACTION';
+
+
+export const CREATE_TEMPLATE_REQUEST = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_REQUEST';
+export const CREATE_TEMPLATE_SUCCESS = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_SUCCESS';
+export const CREATE_TEMPLATE_FAILURE = 'app/v2Containers/Line/Create/CREATE_TEMPLATE_FAILURE';
+export const UPLOAD_ASSET_REQUEST = 'app/v2Containers/Line/Create/UPLOAD_ASSET_REQUEST';
+export const UPLOAD_ASSET_SUCCESS = 'app/v2Containers/Line/Create/UPLOAD_ASSET_SUCCESS';
+export const UPLOAD_ASSET_FAILURE = 'app/v2Containers/Line/Create/UPLOAD_ASSET_FAILURE';
+export const CLEAR_ASSET = 'app/v2Containers/Line/Create/CLEAR_ASSET';
+
+export const CLEAR_CREATE_RESPONSE_REQUEST = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_REQUEST';
+export const CLEAR_CREATE_RESPONSE_SUCCESS = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_SUCCESS';
+export const CLEAR_CREATE_RESPONSE_FAILURE = 'app/v2Containers/Line/Create/CLEAR_CREATE_RESPONSE_FAILURE';
+
+export const LINE_IMG_HEIGHT = 400;
+export const LINE_IMG_WIDTH = 300;
+export const LINE_IMG_SIZE = 30000000;
+
+
+// edit
+
+export const GET_TEMPLATE_DETAILS_REQUEST = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_REQUEST';
+export const GET_TEMPLATE_DETAILS_SUCCESS = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_SUCCESS';
+export const GET_TEMPLATE_DETAILS_FAILURE = 'app/v2Containers/line/Edit/GET_TEMPLATE_DETAILS_FAILURE';
+
+export const EDIT_TEMPLATE_REQUEST = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_REQUEST';
+export const EDIT_TEMPLATE_SUCCESS = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_SUCCESS';
+export const EDIT_TEMPLATE_FAILURE = 'app/v2Containers/line/Edit/EDIT_TEMPLATE_FAILURE';
+
+export const CLEAR_EDIT_RESPONSE_REQUEST = 'app/v2Containers/line/Edit/CLEAR_EDIT_RESPONSE_REQUEST';
+export const CLEAR_DATA = 'app/v2Containers/Line/Edit/CLEAR_DATA';
+export const SET_SELECTED_TEMPLATE = 'app/v2Containers/Line/Edit/SET_SELECTED_TEMPLATE';
+
+export const GET_LINE_TEMPLATES_LIST_REQUEST = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_REQUEST';
+export const GET_LINE_TEMPLATES_LIST_SUCCESS = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_SUCCESS';
+export const GET_LINE_TEMPLATES_LIST_FAILURE = 'app/v2Containers/Line/GET_LINE_TEMPLATES_LIST_FAILURE';