Importing config in components (#668)

Author: dusanradovanovic

src/App.tsx

@@ -147,12 +147,12 @@ const VersionContainer = (props) => {
   );
 };
 
-const Root = (props) => {
-  const { componentsData } = props;
+const Root = () => {
   const { error } = React.useContext(ErrorContext);
   const locationPathName = window.location.origin;
+
   return [
-    <VersionContainer key="version-container" componentsVersion={componentsData.version} appVersion={packageJson.version} />,
+    <VersionContainer key="version-container" appVersion={packageJson.version} />,
     <FacebookChat key="facebook-chat" config={Config.facebook} handleFbAsyncInit={handleFbAsyncInit} />,
     <AppHeaderMain
       key="app-header"

src/components/src/AddPromotionContainer/add.promotion.container.tsx

@@ -23,11 +23,10 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import { login } from '../utils/AuthService';
 import { cortexFetch } from '../utils/Cortex';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import Config from '../../../ep.config.json';
 
 import './add.promotion.container.less';
 
-let Config: IEpConfig | any = {};
 
 interface AddPromotionContainerProps {
   /** An array of orders for the shopper, where `string` is the URL to the cart data for an order. */
@@ -48,14 +47,14 @@ interface AddPromotionContainerState {
 class AddPromotionContainer extends Component<AddPromotionContainerProps, AddPromotionContainerState> {
   constructor(props) {
     super(props);
-    const epConfig = getConfig();
-    Config = epConfig.config;
+
     this.state = {
       isPromotionFormOpen: false,
       failedPromotion: false,
       promotionCode: '',
       couponFormLink: '',
     };
+
     this.setPromotionCode = this.setPromotionCode.bind(this);
     this.submitPromotionCode = this.submitPromotionCode.bind(this);
   }

src/components/src/AddressForm/addressform.main.tsx

@@ -23,11 +23,10 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import { login } from '../utils/AuthService';
 import { cortexFetch } from '../utils/Cortex';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import Config from '../../../ep.config.json';
 
 import './addressform.main.less';
 
-let Config: IEpConfig | any = {};
 
 interface AddressFormMainProps {
   /** An array of addresses for the shopper, where `string` is a URL to the address data. */
@@ -74,9 +73,6 @@ class AddressFormMain extends Component<AddressFormMainProps, AddressFormMainSta
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       geoData: undefined,
       firstName: '',

src/components/src/AppHeader/appheader.main.tsx

@@ -27,22 +27,20 @@ import BloomreachAppHeaderSearchMain from '../Bloomreach/bloomreach.appheadersea
 import AppHeaderLoginMain from '../AppHeaderLogin/appheaderlogin.main';
 import AppHeaderLocaleMain from '../AppHeaderLocale/appheaderlocale.main';
 import AppHeaderNavigationMain from '../AppHeaderNavigation/appheadernavigation.main';
-import AppHeaderTop from '../AppHeaderTop/appheadertop.main';
 import BulkOrderMain from '../BulkOrder/bulkorder.main';
 import CountInfoPopUp from '../CountInfoPopUp/countinfopopup';
-import headerLogo from '../../../images/site-images/Company-Logo-v3.svg';
-import { ReactComponent as CartIcon } from '../../../images/header-icons/cart-icon.svg';
-import { ReactComponent as BulkCart } from '../../../images/header-icons/bulk-cart.svg';
 import { useCountState } from '../cart-count-context';
-
 import { cortexFetch } from '../utils/Cortex';
 import { login } from '../utils/AuthService';
+import ImageContainer from '../ImageContainer/image.container';
+import Config from '../../../ep.config.json';
 
 import './appheader.main.less';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
-import ImageContainer from '../ImageContainer/image.container';
 
-let Config: IEpConfig | any = {};
+import { ReactComponent as CartIcon } from '../../../images/header-icons/cart-icon.svg';
+import { ReactComponent as BulkCart } from '../../../images/header-icons/bulk-cart.svg';
+import headerLogo from '../../../images/site-images/Company-Logo-v3.svg';
+
 
 const zoomArray = [
   'defaultcart',
@@ -133,9 +131,6 @@ class AppHeaderMain extends Component<AppHeaderMainProps, AppHeaderMainState> {
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       totalQuantity: 0,
       cartData: undefined,

src/components/src/AppHeaderLocale/appheaderlocale.main.tsx

@@ -22,14 +22,13 @@
 import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import * as UserPrefs from '../utils/UserPrefs';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 import currencyLogoCad from '../../../images/header-icons/ca.svg';
 import currencyLogoEur from '../../../images/header-icons/eu.svg';
 import headerLogo from '../../../images/site-images/Company-Logo-v1.png';
+import Config from '../../../ep.config.json';
 
 import './appheaderlocale.main.less';
 
-let Config: IEpConfig | any = {};
 
 interface AppHeaderLocaleMainProps {
   /** is mobile view  */
@@ -55,9 +54,6 @@ class AppHeaderLocaleMain extends Component<AppHeaderLocaleMainProps, AppHeaderL
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       selectedLocaleValue: UserPrefs.getSelectedLocaleValue(),
       selectedCurrencyValue: UserPrefs.getSelectedCurrencyValue(),

src/components/src/AppHeaderLogin/appheaderlogin.main.tsx

@@ -24,7 +24,6 @@ import intl from 'react-intl-universal';
 import uuidv4 from 'uuid/v4';
 import { Link } from 'react-router-dom';
 import queryString from 'query-string';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 import AppModalLoginMain from '../AppModalLogin/appmodallogin.main';
 import CountInfoPopUp from '../CountInfoPopUp/countinfopopup';
 import AppModalCartSelectMain from '../AppModalCartSelect/appmodalcartselect.main';
@@ -34,12 +33,12 @@ import {
 } from '../utils/AuthService';
 import { cortexFetch, adminFetch } from '../utils/Cortex';
 import { ReactComponent as AccountIcon } from '../../../images/header-icons/account-icon.svg';
+import Config from '../../../ep.config.json';
 
 import './appheaderlogin.main.less';
 
-const oidcDiscoveryEndpoint = '/.well-known/openid-configuration';
 
-let Config: IEpConfig | any = {};
+const oidcDiscoveryEndpoint = '/.well-known/openid-configuration';
 
 interface AppHeaderLoginMainProps {
   /** is mobile view */
@@ -75,6 +74,7 @@ interface AppHeaderLoginMainProps {
   /** disable login */
   disableLogin?: boolean,
 }
+
 interface AppHeaderLoginMainState {
   openModal: boolean,
   openCartModal: boolean,
@@ -114,9 +114,6 @@ class AppHeaderLoginMain extends Component<AppHeaderLoginMainProps, AppHeaderLog
     constructor(props) {
       super(props);
 
-      const epConfig = getConfig();
-      Config = epConfig.config;
-
       this.state = {
         openModal: false,
         openCartModal: false,

src/components/src/AppHeaderNavigation/appheadernavigation.main.tsx

@@ -25,11 +25,10 @@ import { Link } from 'react-router-dom';
 import _ from 'lodash';
 import { login } from '../utils/AuthService';
 import { cortexFetch } from '../utils/Cortex';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import Config from '../../../ep.config.json';
 
 import './appheadernavigation.main.less';
 
-let Config: IEpConfig | any = {};
 
 const zoomArray = [
   'navigations:element',
@@ -78,9 +77,6 @@ class AppHeaderNavigationMain extends Component<AppHeaderNavigationMainProps, Ap
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       navigations: {},
       /* eslint-disable react/no-unused-state */

src/components/src/AppHeaderTop/appheadertop.main.tsx

@@ -23,11 +23,10 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import { Link } from 'react-router-dom';
 import AppHeaderLocaleMain from '../AppHeaderLocale/appheaderlocale.main';
+import Config from '../../../ep.config.json';
 
 import './appheadertop.main.less';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 
-let Config: IEpConfig | any = {};
 
 interface AppHeaderTopProps {
   /** is mobile view */
@@ -49,13 +48,6 @@ class AppHeaderTop extends Component<AppHeaderTopProps> {
     onCurrencyChange: () => { },
   };
 
-  constructor(props) {
-    super(props);
-
-    const epConfig = getConfig();
-    Config = epConfig.config;
-  }
-
   render() {
     const {
       isMobileView,

src/components/src/AppModalBundleConfiguration/appmodalbundleconfiguration.main.tsx

@@ -22,13 +22,15 @@
 import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import Modal from 'react-responsive-modal';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
+import Config from '../../../ep.config.json';
 /* eslint-disable-next-line import/no-cycle */
 import CartLineItem from '../CartLineItem/cart.lineitem';
 import { login } from '../utils/AuthService';
 import { cortexFetch } from '../utils/Cortex';
+
 import './appmodalbundleconfiguration.main.less';
 
+
 const zoomArray = [
   'dependentoptions',
   'dependentoptions:element',
@@ -53,8 +55,6 @@ const zoomArray = [
   'dependentlineitems:element:dependentlineitems:element:item:definition',
 ];
 
-let Config: IEpConfig | any = {};
-
 interface AppModalBundleConfigurationMainProps {
   /** bundle configuration items */
   bundleConfigurationItems: {
@@ -90,9 +90,6 @@ class AppModalBundleConfigurationMain extends Component<AppModalBundleConfigurat
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       dependantItemData: undefined,
       isLoading: false,

src/components/src/AppModalCartSelect/appmodalcartselect.main.tsx

@@ -23,10 +23,10 @@ import React, { Component } from 'react';
 import intl from 'react-intl-universal';
 import Modal from 'react-responsive-modal';
 import { adminFetch } from '../utils/Cortex';
+import Config from '../../../ep.config.json';
+
 import './appmodalcartselect.main.less';
-import { getConfig, IEpConfig } from '../utils/ConfigProvider';
 
-let Config: IEpConfig | any = {};
 
 const zoomArray = [
   'authorizationcontexts',
@@ -43,6 +43,7 @@ interface AppModalCartSelectMainProps {
   /** handle continue cart */
   onContinueCart?: (...args: any[]) => any,
 }
+
 interface AppModalCartSelectMainState {
   orgAuthServiceData: any,
   selectedCart: string,
@@ -57,9 +58,6 @@ class AppModalCartSelectMain extends Component<AppModalCartSelectMainProps, AppM
   constructor(props) {
     super(props);
 
-    const epConfig = getConfig();
-    Config = epConfig.config;
-
     this.state = {
       orgAuthServiceData: undefined,
       selectedCart: '0',