@wenn/onb/init.js

onb-core

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import crypto from 'crypto';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import TagManager from 'react-gtm-module';
import 'color-term-console';
import GlobalStyle from '@bit/wenance.common-ui.web.globalstyle';
import configureStore from './redux/store';
import App from './App';
import {
  initializeCamunda,
  initializeWidth
} from './redux/actions/run.actions';
import HandleNotifications from './handleNotifications';
import { NonBrandLoading } from './NonBrandLoading';
import ErrorPage from './ErrorPage';
import ReactResizeDetector from 'react-resize-detector';

const Root = document.getElementById('root');
const {
  REACT_APP_BRAND: BRAND,
  REACT_APP_ENV: ENVIRONMENT,
  REACT_APP_BRAND_SERVICE_URL,
  NODE_ENV
} = process.env;
const store = configureStore();
const algorithm = 'aes-256-ctr';

function decrypt(text) {
  const decipher = crypto.createDecipher(algorithm, BRAND);
  let dec = decipher.update(text, 'hex', 'utf8');
  dec += decipher.final('utf8');
  return JSON.parse(dec);
}

const setGlobalWidth = width => store.dispatch(initializeWidth(width));

const index = ({
  routes,
  Desktop,
  fallbackWording = {},
  fallbackForm = {},
  ...props
}) => {
  ReactDOM.render(<NonBrandLoading />, Root);

  axios(REACT_APP_BRAND_SERVICE_URL)
    .then(res => {
      const brand = res.data.brand || res.data;
      return { ...decrypt(brand), product: res.data.product || {} };
    })
    .then(SETTINGS => {
      const tagManagerArgs = {
        gtmId: SETTINGS.config.GTM[ENVIRONMENT]
      };

      TagManager.initialize(tagManagerArgs);

      NODE_ENV === 'development' &&
        // eslint-disable-next-line no-console
        console.log(
          `BRAND: ${BRAND} | ENV: ${ENVIRONMENT} | SETTNGS:`,
          SETTINGS
        );

      store.dispatch(initializeCamunda(SETTINGS));

      SETTINGS.theme = {
        ...SETTINGS.theme,
        assetsPaths: SETTINGS.assets,
        palette: SETTINGS.palette
      };

      ReactDOM.render(
        <Provider store={store}>
          <ThemeProvider theme={SETTINGS.theme}>
            <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}>
              <div>
                <GlobalStyle SETTINGS={SETTINGS} />
                <HandleNotifications Desktop={Desktop}>
                  <ReactResizeDetector handleWidth onResize={setGlobalWidth}>
                    <App {...props} routes={routes} Desktop={Desktop} />
                  </ReactResizeDetector>
                </HandleNotifications>
              </div>
            </BrowserRouter>
          </ThemeProvider>
        </Provider>,
        Root
      );
    })
    .catch(e => {
      console.error(e, 'error');
      ReactDOM.render(
        <ErrorPage WORDING={fallbackWording} FORM={fallbackForm} />,
        Root
      );
    });
};

export default index;