Splash page

.eslintrc.json

@@ -0,0 +1,73 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "globalReturn": false,
+      "impliedStrict": true,
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "globals": {
+    "__webpack_public_path__": true,
+    "bootstrap": true,
+    "describe": true,
+    "it": true,
+    "beforeEach": true,
+    "afterEach": true,
+    "before": true,
+    "after": true,
+    "test": true,
+    "expect": true
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "plugins": [
+    "prettier",
+    "react",
+    "import",
+    "json",
+    "cflint",
+    "compat",
+    "mocha"
+  ],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings"
+  ],
+  "rules": {
+    "mocha/no-exclusive-tests": 2,
+    "block-scoped-var": 2,
+    "default-case": 2,
+    "guard-for-in": 2,
+    "no-else-return": 2,
+    "no-floating-decimal": 2,
+    "no-self-compare": 2,
+    "no-void": 2,
+    "radix": 2,
+    "wrap-iife": ["error", "inside"],
+    "no-catch-shadow": 2,
+    "handle-callback-err": 2,
+    "camelcase": 0,
+    "no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
+    "no-undef": [2, {"typeof": false}],
+    "react/prop-types": [2, {"skipUndeclared": true}],
+    "import/no-absolute-path": 2,
+    "import/no-deprecated": 1,
+    "import/no-mutable-exports": 1,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-unresolved": 0,
+    "import/first": 1,
+    "prettier/prettier": [2, {"trailingComma": "none", "singleQuote": true}],
+    "compat/compat": 2
+  },
+  "settings": {
+    "import/resolver": "webpack"
+  }
+}

package.json

@@ -20,6 +20,9 @@
     ],
     "testMatch": [
       "**/test/**/*.js"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/|_helpers"
     ]
   },
   "repository": {
@@ -65,7 +68,13 @@
     "d3-format": "^1.0.2",
     "eslint": "^3.4.0",
     "eslint-loader": "^1.6.1",
+    "eslint-plugin-cflint": "^1.0.0",
+    "eslint-plugin-compat": "^1.0.3",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-json": "^1.2.0",
+    "eslint-plugin-mocha": "^4.10.1",
     "eslint-plugin-prettier": "^2.0.0",
+    "eslint-plugin-react": "^7.1.0",
     "history": "3.2.1",
     "intl": "^1.1.0",
     "jest": "^19.0.2",
@@ -83,10 +92,13 @@
     "react-test-renderer": "^15.4.2",
     "redux": "^3.0.4",
     "redux-logger": "^2.6.1",
+    "redux-mock-store": "^1.2.3",
     "redux-thunk": "^1.0.0",
-    "webpack": "^2.2.1"
+    "webpack": "^3.0.0"
   },
   "dependencies": {
+    "cf-component-box": "^2.2.1",
+    "cf-style-provider": "^1.5.0",
     "prop-types": "^15.5.8"
   }
 }

src/actions/config.js

@@ -27,20 +27,23 @@ export function configFetchError() {
 
 export function asyncConfigInit() {
   return dispatch => {
+<<<<<<< HEAD
     /*
      * 1. Fetch config.js
      * 2. Fetch userConfig.js (which may not exist)
      * 3. Fetch translations with the language from the config. 
      */
     dispatch(asyncConfigFetch());
-    if (typeof absoluteUrlBase !== 'undefined') {
+    if (typeof window.absoluteUrlBase !== 'undefined') {
       /*
        * Some integrations don't work with relative paths because the URL doesn't match
        * the actual file path, this function allows integrations to configure a base absolute
        * url path to be used in components/Image. absoluteBaseUrl should be defined globally
        * on the page where the SPA is loaded.
        */
-      dispatch(configUpdateByKey(ABSOLUTE_URL_BASE_KEY, absoluteUrlBase));
+      dispatch(
+        configUpdateByKey(ABSOLUTE_URL_BASE_KEY, window.absoluteUrlBase)
+      );
     }
     //log user in if their email is in local storage
     if (isLoggedIn()) {

src/components/AnalyticCard/AnalyticCard.js

@@ -131,7 +131,9 @@ AnalyticCard.propTypes = {
   description: PropTypes.string.isRequired,
   data: PropTypes.object.isRequired,
   dataType: PropTypes.string.isRequired,
-  helpTextId: PropTypes.string.isRequired
+  helpTextId: PropTypes.string.isRequired,
+  intl: PropTypes.object.isRequired,
+  formatMessage: PropTypes.func.isRequired
 };
 
 function mapStateToProps() {

src/components/AppNavigationLiNode/AppNavigationLiNode.js

@@ -31,5 +31,6 @@ export default class AppNavigationLiNode extends Component {
 
 AppNavigationLiNode.propTypes = {
   onClick: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node
 };

src/components/BenefitsFeature/BenefitsFeature.js

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+export default class BenefitsFeature extends Component {
+  render() {
+    /*
+     * These styles are stolen from the marketing site and aren't in our CSS
+     */
+    let divStyles = {
+      padding: '30px 15px 30px 15px'
+    };
+    let iconStyles = {
+      display: 'block',
+      width: '75px',
+      height: 'auto',
+      maxWidth: '100px',
+      margin: '0 auto'
+    };
+    let largeLinkStyles = {
+      padding: '20px 0 0 0',
+      textAlign: 'center',
+      fontSize: '16px',
+      color: '#333333',
+      width: '100%',
+      display: 'block'
+    };
+    let columnPStyles = {
+      padding: '10px 0 0 0',
+      fontSize: '12px',
+      textAlign: 'center',
+      color: '#9A9D9E'
+    };
+
+    return (
+      <div style={divStyles}>
+        <img src={this.props.imgSrc} style={iconStyles} />
+        <span style={largeLinkStyles} href="#">
+          {this.props.title}
+        </span>
+        <p style={columnPStyles}>
+          {this.props.description}
+        </p>
+      </div>
+    );
+  }
+}
+
+BenefitsFeature.propTypes = {
+  imgSrc: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired
+};

src/components/CustomCardControl/CustomCardControl.js

@@ -58,7 +58,12 @@ class CustomCardControl extends Component {
 
 CustomCardControl.propTypes = {
   name: PropTypes.string,
-  indentifier: PropTypes.string.isRequired
+  indentifier: PropTypes.string.isRequired,
+  integrationName: PropTypes.string,
+  activeZone: PropTypes.string,
+  currentPlan: PropTypes.string,
+  minimumPlan: PropTypes.string,
+  children: PropTypes.node
 };
 
 function mapStateToProps(state) {

src/components/FeatureManager/FeatureManager.js

@@ -14,5 +14,6 @@ export default class FeatureManager extends Component {
 
 FeatureManager.propTypes = {
   isEnabled: PropTypes.bool.isRequired,
-  error: PropTypes.string
+  error: PropTypes.string,
+  children: PropTypes.node
 };

src/components/FormattedMarkdown/FormattedMarkdown.js

@@ -17,7 +17,6 @@ import { getConfigValue } from '../../selectors/config.js';
 // <FormattedMarkdown text="mycomponent.myfeature" />
 class FormattedMarkdown extends Component {
   render() {
-    const { formatMessage } = this.props.intl;
     let { integrationName } = this.props;
 
     var formattedMessage = formatMessageForIntegration(
@@ -39,7 +38,10 @@ class FormattedMarkdown extends Component {
 }
 
 FormattedMarkdown.propTypes = {
-  text: PropTypes.string.isRequired
+  text: PropTypes.string.isRequired,
+  formattedMessage: PropTypes.func,
+  intl: PropTypes.object,
+  integrationName: PropTypes.string
 };
 
 function mapStateToProps(state) {

src/components/GradientBanner/GradientBanner.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { createComponent } from 'cf-style-container';
+
+const gradientStyles = () => ({
+  width: '100%',
+  height: '150px',
+  display: 'flex',
+  justifyContent: 'center',
+  background: 'linear-gradient(left, #8176B5, #76C4E2)',
+  backgroundRepeat: 'no-repeat',
+  backgroundSize: '100% 250px',
+  backgroundColor: '#e6e6e6'
+});
+
+const GradientBanner = ({ className, children }) => {
+  return React.createElement('div', { className }, children);
+};
+
+export default createComponent(gradientStyles, GradientBanner);