@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/components/TemplatePreview/messages.js

@@ -0,0 +1,78 @@
+/*
+ * TemplatePreview Messages
+ *
+ * This contains all the text for the TemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  previewGenerationMessage: {
+    id: 'creatives.components.TemplatePreview.previewGenerationMessage',
+    defaultMessage: "Preview is being generated",
+  },
+  senderId: {
+    id: 'creatives.components.TemplatePreview.senderId',
+    defaultMessage: "Sender ID",
+  },
+  sms: {
+    id: 'creatives.components.TemplatePreview.sms',
+    defaultMessage: "SMS",
+  },
+  characters: {
+    id: 'creatives.components.TemplatePreview.characters',
+    defaultMessage: "characters",
+  },
+  charactersPerSms: {
+    id: 'creatives.components.TemplatePreview.charactersPerSms',
+    defaultMessage: "SMS chars",
+  },
+  charactersTotal: {
+    id: 'creatives.components.TemplatePreview.charactersTotal',
+    defaultMessage: "SMS char total",
+  },
+  smsFormatType: {
+    id: 'creatives.components.TemplatePreview.smsFormatType',
+    defaultMessage: 'Message has unicode characters',
+  },
+  includesOptoutTag: {
+    id: 'app.components.TemplatePreview.includesOptoutTag',
+    defaultMessage: 'Includes optout tag',
+  },
+  previewGenerated: {
+    id: 'creatives.components.TemplatePreview.previewGenerated',
+    defaultMessage: 'Preview is being generated',
+  },
+  close: {
+    id: 'creatives.components.TemplatePreview.close',
+    defaultMessage: 'close',
+  },
+  smsIcon: {
+    id: 'creatives.components.TemplatePreview.smsIcon',
+    defaultMessage: 'Sms Icon',
+  },
+  markAsRead: {
+    id: 'creatives.components.TemplatePreview.markAsRead',
+    defaultMessage: 'Mark as read',
+  },
+  reply: {
+    id: 'creatives.components.TemplatePreview.reply',
+    defaultMessage: 'Reply',
+  },
+  cancel: {
+    id: 'creatives.components.TemplatePreview.cancel',
+    defaultMessage: 'Cancel',
+  },
+  unicodeIconTooltip: {
+    id: `creatives.components.TemplatePreview.unicodeIconTooltip`,
+    defaultMessage:
+      'This message has unicode characters. This may affect the cost per message.',
+  },
+  playVideo: {
+    id: 'creatives.componentsV2.TemplatePreview.playVideo',
+    defaultMessage: 'Play',
+  },
+  showDetails: {
+    id: 'creatives.componentsV2.TemplatePreview.showDetails',
+    defaultMessage: 'Show details',
+  },
+});

package/components/Toastr/index.js

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import { messagePositionConfig } from '../../config/toastr';
+import ToastrMessage from '../ToastrMessage';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+
+const StyledMessageContainer = styled.div`
+  position: fixed;
+  width: 320px;
+  transition: all .2s ease-out;
+  font-family: open-sans,sans-serif;
+  margin-top: 64px;
+  margin-right: 32px;
+  z-index: 10005;
+`;
+
+class Toastr extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(prop) {
+    super(prop);
+    this.state = {
+      percentCompleted: 0,
+      percCompleted: {},
+    };
+    this.percCompleted = 0;
+    this.currentTime = 0;
+    this.closeMessagePopup = this.closeMessagePopup.bind(this);
+  }
+
+  closeMessagePopup(messageIndex) {
+    this.props.handleRemoveMessage(messageIndex);
+  }
+
+  render() {
+    return (
+      <StyledMessageContainer style={{ ...messagePositionConfig[this.props.position] }}>
+        {this.props.messagesList.map((message) => {
+          
+          return <ToastrMessage key={message.messageId} timeout={this.props.timeout} messageId={message.messageId} title={message.title} text={message.text} type={message.type} handleMessageClose={this.closeMessagePopup} hideProgressBar={message.hideProgressBar} />;
+        })}
+      </StyledMessageContainer>
+    );
+  }
+}
+
+Toastr.propTypes = {
+  messagesList: PropTypes.array.isRequired,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  position: PropTypes.string,
+  handleRemoveMessage: PropTypes.func,
+};
+
+Toastr.defaultProps = {
+  type: 'info',
+  timeout: '4',
+  position: 'bottom right',
+};
+export default Toastr;

package/components/Toastr/messages.js

@@ -0,0 +1,13 @@
+/*
+ * Toastr Messages
+ *
+ * This contains all the text for the Toastr component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.Toastr.header',
+    defaultMessage: 'This is the Toastr component !',
+  },
+});

package/components/ToastrMessage/index.js

@@ -0,0 +1,113 @@
+/**
+*
+* ToastrMessage
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { Progress } from 'semantic-ui-react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { messageTypeConfig } from '../../config/toastr';
+
+import messages from './messages';
+
+const StyledMessageWrapper = styled.div`
+  background: #f9f9fa;
+  transition: all .2s fade-out;
+  -webkit-box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  -moz-box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  border-radius: 5px;
+`;
+const StyleIcon = styled.i`
+  float: right;
+  cursor: pointer;
+  fontSize: 16px;
+`;
+const MessageContent = styled.div`
+  padding-left: 14px;
+`;
+
+const MessageHeader = styled.div`
+  padding-left: 14px;
+  font-weight: bold;
+  font-family: proxima-nova,sans-serif;
+`;
+
+const StyledMessageType = styled.div `
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+`;
+
+class ToastrMessage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(prop) {
+    super(prop);
+    this.state = { percent: 0 };
+    this.intervalId = null;
+    this.closeMessagePopup = this.closeMessagePopup.bind(this);
+  }
+
+  componentDidMount() {
+    const distance = 100 / ((this.props.timeout - 500) / 100);
+    if (this.props.timeout && this.props.timeout > 500) {
+      this.intervalId = setInterval(() => {
+        const percent = this.state.percent + distance;
+        this.setState({ percent: percent < 100 ? percent : 100 });
+      }, 100);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.state.percent >= 100 && this.intervalId) {
+      this.props.handleMessageClose(this.props.messageId);
+      clearTimeout(this.intervalId);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.intervalId) {
+      clearTimeout(this.intervalId);
+    }
+  }
+
+  closeMessagePopup(messageIndex) {
+    this.props.handleMessageClose(messageIndex);
+  }
+
+
+  render() {
+    return (
+      <StyledMessageWrapper key={this.props.messageId}>
+        <StyledMessageType style={{ ...messageTypeConfig[this.props.type] }} />
+        <div style={{ padding: `${16}px` }}>
+          <MessageHeader>
+            { this.props.title ? <span style={{ fontSize: `${20}px` }}>{this.props.title}</span> : '' }
+            <StyleIcon className="material-icons" onClick={() => this.closeMessagePopup(this.props.messageId)}><FormattedMessage {...messages.close} /></StyleIcon>
+          </MessageHeader>
+          <MessageContent>
+            {this.props.text}
+          </MessageContent>
+        </div>
+        {(this.props.timeout > 0 && !this.props.hideProgressBar) ? <Progress style={{ transition: `${0.4}s linear` }} percent={this.state.percent} attached="bottom" /> : ''}
+      </StyledMessageWrapper>
+    );
+  }
+}
+
+ToastrMessage.propTypes = {
+  messageId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  title: PropTypes.string,
+  text: PropTypes.string,
+  type: PropTypes.string,
+  handleMessageClose: PropTypes.func,
+  hideProgressBar: PropTypes.bool,
+};
+
+export default ToastrMessage;

package/components/ToastrMessage/messages.js

@@ -0,0 +1,17 @@
+/*
+ * ToastrMessage Messages
+ *
+ * This contains all the text for the ToastrMessage component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  header: {
+    id: 'creatives.components.ToastrMessage.header',
+    defaultMessage: 'This is the ToastrMessage component !',
+  },
+  close: {
+    id: 'creatives.components.ToastrMessage.close',
+    defaultMessage: 'close',
+  },
+});

package/components/TopBar/_topbar.scss

@@ -0,0 +1,46 @@
+.ui.navbar.menu {
+  height: 40px !important;
+}
+.ui.menu.navbar .item>img.logo{
+  height: 27px !important;
+  padding-left: 0!important;
+  margin: 0 auto;
+  max-width: 200px;
+}
+.ui.menu.navbar .ui.selection.dropdown{
+  height: 40px !important;
+}
+
+.ui.menu .ui.dropdown .menu>.selected.item {
+  background: #151821;
+}
+.org-list-drp-dwn .menu > .item{
+  height: 40px !important;
+}
+.ui.menu.navbar .ui.dropdown .menu>.item{
+  height: 40px !important;
+}
+
+.ui.search.selection.dropdown>input.search{
+  padding-left: 12px !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
+  padding-right: 4px;
+}
+
+.ui.menu .item {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+.ui.secondary.vertical.menu>.item {
+  margin-bottom: 0 !important;
+  padding: 8px 16px !important;
+}
+
+.ui.menu.navbar .item.dropdownItem {
+  padding: 0px !important;
+}

package/components/TopBar/index.js

@@ -0,0 +1,113 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+
+import { Menu, Image, Dropdown, Popup } from 'semantic-ui-react';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router';
+
+import { loadItem } from 'services/localStorageApi';
+import messages from './messages';
+import './_topbar.scss';
+
+const logo = require('./assets/images/capillary_logo.png');
+
+class TopBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeItem: '',
+      orgList: [],
+      selectedOrg: loadItem('orgID'),
+    };
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.logout = this.logout.bind(this);
+    this.handleOrgChange = this.handleOrgChange.bind(this);
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.orgID !== this.props.orgID) {
+      this.props.navigateToDashboard();
+    }
+  }
+
+  handleOrgChange(data) {
+    const orgId = data.value;
+    if (this.state.selectedOrg !== orgId) {
+      this.props.changeOrg(orgId);
+      this.setState({ selectedOrg: orgId });
+    }
+  }
+
+  handleItemClick(e) {
+    this.setState({ activeItem: e.target.id });
+  }
+
+  logout(e) {
+    e.preventDefault();
+    this.props.logout();
+  }
+
+  render() {
+    const proxyOrgList = this.props.proxyOrgList;
+    const defaultOrgName = this.props.orgName;
+    const selectedOrg = loadItem('orgID');
+    return (
+      <Menu className="navbar" key="navbar">
+
+        <Menu.Item key="logo" as={Link} to="/" name="logo" className="logo-container" onClick={this.handleItemClick}>
+          <Image className="logo" src={logo} alt="Capillary Technologies" />
+        </Menu.Item>
+
+        { proxyOrgList.length > 1 ?
+          <Menu.Item className="dropdownItem" key="orgSelection">
+            <FormattedMessage {...messages.dropdownMessage}>
+              {(message) => <Dropdown
+                placeholder={message}
+                className="org-list-drp-dwn"
+                defaultValue={selectedOrg}
+                search
+                options={proxyOrgList}
+                selection
+                onChange={(event, data) => this.handleOrgChange(data)}
+              />}
+            </FormattedMessage>
+          </Menu.Item> :
+          <Menu.Item key="default-org">
+            {defaultOrgName}
+          </Menu.Item>
+        }
+
+        <Menu.Menu position="right">
+          <Menu.Item key="first-name">
+            <FormattedMessage {...messages.hi} />&nbsp;{this.props.userName}!
+          </Menu.Item>
+          <Menu.Item key="user-details">
+            <Popup
+              trigger={<i className="material-icons">person</i>}
+              content={< div className="ui secondary vertical menu">
+                <a href="" className="item hide"><FormattedMessage {...messages.profile} /><i className="user icon" /></a>
+                <a href="" className="item hide"><FormattedMessage {...messages.settings} /> <i className="settings icon" /></a>
+                <a href="" className="item" onClick={this.logout}><FormattedMessage {...messages.logout} />
+                  <i className="sign out icon" /></a> </div >}
+              on="click" position="bottom right" offset={7}
+            />
+          </Menu.Item>
+        </Menu.Menu>
+      </Menu>
+
+    );
+  }
+}
+
+TopBar.propTypes = {
+  userName: PropTypes.string,
+  proxyOrgList: PropTypes.array,
+  orgName: PropTypes.string,
+  orgID: PropTypes.number,
+  navigateToDashboard: PropTypes.func,
+  changeOrg: PropTypes.func,
+  logout: PropTypes.func,
+};
+
+export default TopBar;

package/components/TopBar/messages.js

@@ -0,0 +1,29 @@
+/*
+ * TopBar Messages
+ *
+ * This contains all the text for the TopBar component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  profile: {
+    id: 'reon.components.TopBar.profile',
+    defaultMessage: 'Profile',
+  },
+  settings: {
+    id: 'reon.components.TopBar.settings',
+    defaultMessage: 'Settings',
+  },
+  logout: {
+    id: 'reon.components.TopBar.logout',
+    defaultMessage: 'Logout',
+  },
+  dropdownMessage: {
+    id: 'reon.components.TopBar.brand.dropdown',
+    defaultMessage: 'Select brand',
+  },
+  hi: {
+    id: 'creatives.components.TopBar.brand.dropdown',
+    defaultMessage: 'Hi',
+  },
+});

package/containers/App/actions.js

@@ -0,0 +1,7 @@
+import * as types from './constants';
+
+export function getSidebar() {
+  return {
+    type: types.GET_SIDEBAR_REQUEST,
+  };
+}

package/containers/App/constants.js

@@ -0,0 +1,114 @@
+export const GET_SIDEBAR_REQUEST = 'app/App/GET_SIDEBAR_REQUEST';
+export const GET_SIDEBAR_SUCCESS = 'app/App/GET_SIDEBAR_SUCCESS';
+export const GET_SIDEBAR_FAILURE = 'app/App/GET_SIDEBAR_FAILURE';
+
+export const STORE2DOOR_PLUS_ENABLED = 'STORE2DOOR_PLUS_ENABLED';
+export const TRAI_DLT = 'TRAI_DLT';
+export const CARD_BASED_SCOPE = 'CARD_BASED_SCOPE';
+export const HOSPITALITY_BASED_SCOPE = 'HOSPITALITY_BASED_SCOPE';
+export const REGISTRATION_CUSTOM_FIELD = 'Registration custom fields';
+export const GIFT_CARDS = 'GIFT_CARDS';
+export const PROMO_ENGINE = 'PROMO_ENGINE';
+export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
+export const CUSTOM_TAG = 'CustomTagMessage';
+export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
+export const EXTENDED_TAG = 'ExtendedTagMessage';
+export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
+export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
+export const ENABLE_WECHAT = 'ENABLE_WECHAT';
+export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
+export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = "EMAIL_UNSUBSCRIBE_TAG_MANDATORY";
+export const ENABLE_NEW_MPUSH = "ENABLE_NEW_MPUSH";
+
+export const CARD_RELATED_TAGS = [
+  'card_series',
+  'card_number',
+  'card_issue_date',
+  'card_status',
+  'card_series_name',
+  'card_name',
+];
+
+export const HOSPITALITY_RELATED_TAGS = [
+  "hospitality_series",
+  "tax_Code",
+  "roomTypeCode",
+  "bookingChannel",
+  "hotelReservationID_ResID_Type",
+  "lastModifyDateTime",
+  "guestCounts_IsPerRoom",
+  "ratePlan_RatePlanCode",
+  "resID_Value",
+  "numberOfUnits",
+  "rateTimeUnit",
+  "resStatus",
+  "timeSpan_End",
+  "roomStay_MarketCode",
+  "createDateTime",
+  "amount",
+  "timeSpan_Start",
+  "email",
+  "resID_Source",
+];
+export const GIFT_VOUCHER_RELATED_TAGS = [
+  "gift_voucher",
+  "gift_voucher_expiry_date.FORMAT_1",
+  "gift_voucher_expiry_date.FORMAT_2",
+  "gift_voucher_expiry_date.FORMAT_3",
+  "gift_voucher_expiry_date.FORMAT_4",
+  "gift_voucher_expiry_date.FORMAT_5",
+  "gift_voucher_expiry_date.FORMAT_6",
+  "gift_voucher_expiry_date.FORMAT_7",
+  "gift_voucher_expiry_date.FORMAT_8",
+  "gift_voucher_expiry_date",
+];
+export const PROMO_ENGINE_RELATED_TAGS = [
+  "promotion",
+  "promotion_expiry_date.FORMAT_1",
+  "promotion_expiry_date.FORMAT_2",
+  "promotion_expiry_date.FORMAT_3",
+  "promotion_expiry_date.FORMAT_4",
+  "promotion_expiry_date.FORMAT_5",
+  "promotion_expiry_date.FORMAT_6",
+  "promotion_expiry_date.FORMAT_7",
+  "promotion_expiry_date.FORMAT_8",
+  "promotion_expiry_date",
+];
+
+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",
+  "badge_expiry_mm_slash_dd_slash_yy",
+  "badge_expiry_dd_space_Mon_space_yyyy",
+  "badge_expiry_Day_comma_space_Mon_space_dd_comma_space_yy",
+  "badge_expiry_Dd_dot_mm_dot_yy",
+  "badge_expiry_dd_space_Mon",
+  "Days_until_expiry",
+  "badges_enroll_expiry_date.FORMAT_1",
+  "badges_enroll_expiry_date.FORMAT_2",
+  "badges_enroll_expiry_date.FORMAT_3",
+  "badges_enroll_expiry_date.FORMAT_4",
+  "badges_enroll_expiry_date.FORMAT_5",
+  "badges_enroll_expiry_date.FORMAT_6",
+  "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";
+export const ENTRY_TRIGGER_TAG_REGEX = /\bentryTrigger\.\w+(?:\.\w+)?(?:\(\w+\))?/g;

package/containers/App/index.js

@@ -0,0 +1,52 @@
+/**
+ *
+ * App.js
+ *
+ * This component is the skeleton around the actual pages, and should only
+ * contain code that should be seen on all pages. (e.g. navigation bar)
+ *
+ */
+
+import React, { useEffect } from 'react'; // eslint-disable-line no-unused-vars
+import { Switch } from 'react-router';
+import { ConnectedRouter } from 'connected-react-router/immutable';
+import history from 'utils/history';
+
+import Cap from '../Cap';
+import CapV2 from '../../v2Containers/Cap';
+import Login from '../Login';
+import NotFoundPage from '../NotFoundPage';
+
+import GlobalStyle from '../../global-styles';
+import config from '../../config/app';
+import withReactRouterV3Compatibility from '../../hoc/withReactRouterV3Compatibility';
+import RenderRoute from '../../v2Components/RenderRoute';
+import { updateCharCount } from '../../utils/smsCharCountV2';
+
+const loginUrl =
+  process.env.NODE_ENV === 'production'
+    ? `${config.production.login_url}`
+    : `${config.development.login_url}`;
+
+// const Protected = userIsAuthenticatedRedir(Cap);
+const v3CompatibleCap = withReactRouterV3Compatibility(Cap);
+const v3CompatibleCapV2 = withReactRouterV3Compatibility(CapV2);
+
+export default function App() {
+  useEffect(() => {
+    updateCharCount("", false);
+  });
+  return (
+    <div>
+      <ConnectedRouter history={history}>
+        <Switch>
+          <RenderRoute exact path={loginUrl} component={Login} />
+          <RenderRoute path="/v2" component={v3CompatibleCapV2} key="/v2" />
+          <RenderRoute path="/" component={v3CompatibleCap} key="/" />
+          <RenderRoute component={NotFoundPage} />
+        </Switch>
+      </ConnectedRouter>
+      <GlobalStyle />
+    </div>
+  );
+}

package/containers/App/reducer.js

@@ -0,0 +1,19 @@
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({});
+
+function appReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.GET_SIDEBAR_REQUEST:
+      return state;
+    case types.GET_SIDEBAR_SUCCESS:
+      return state;
+    case types.GET_SIDEBAR_FAILURE:
+      return state;
+    default:
+      return state;
+  }
+}
+
+export default appReducer;