Fixed typescript build

app/config/webpack.config.js

@@ -633,6 +633,7 @@ module.exports = function (webpackEnv) {
           tsconfig: paths.appTsConfig,
           reportFiles: [
             '**',
+            './../components/**',
             '!**/__tests__/**',
             '!**/?(*.)(spec|test).*',
             '!**/src/setupProxy.*',

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elasticpath/ref-store",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
@@ -98,6 +98,7 @@
     ]
   },
   "devDependencies": {
+    "@types/react-router-dom": "^4.3.5",
     "@typescript-eslint/eslint-plugin": "^1.12.0",
     "@typescript-eslint/parser": "^1.12.0",
     "babel-jest": "^24.8.0",
@@ -107,6 +108,7 @@
     "eslint-plugin-header": "^3.0.0",
     "less": "^3.9.0",
     "puppeteer": "^1.18.1",
-    "typescript": "^3.5.2"
+    "tsconfig-paths-webpack-plugin": "^3.2.0",
+    "typescript": "^3.6.3"
   }
 }

app/src/containers/CartPage.tsx

@@ -20,7 +20,7 @@
  */
 
 import React from 'react';
-import intl from 'react-intl-universal';
+import * as intl from 'react-intl-universal';
 import { RouteComponentProps } from 'react-router-dom';
 import { CartMain, CheckoutSummaryList, AddPromotionContainer } from '@elasticpath/store-components';
 import Config from '../ep.config.json';
@@ -116,7 +116,7 @@ class CartPage extends React.Component<RouteComponentProps, CartPageState> {
     const { location, history } = this.props;
     this.setState({ isLoading: true });
     this.fetchCartData();
-    history.push(location.path);
+    history.push(window.location.pathname);
   }
 
   checkout() {

app/src/containers/HomePage.tsx

@@ -62,7 +62,7 @@ const HomePage: React.FunctionComponent = () => {
         {/* eslint-disable-next-line no-return-assign */}
         <div className="section section-3 container">
           <div className="sub-section">
-            <img className="small-image" alt="home-espot-2" src={Config.siteImagesUrl.replace('%fileName%', homeEspot2FileName)} onError={(e) => { e.target.src = homeEspot2; }} />
+            <img className="small-image" alt="home-espot-2" src={Config.siteImagesUrl.replace('%fileName%', homeEspot2FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container2-first-line')}
@@ -74,9 +74,9 @@ const HomePage: React.FunctionComponent = () => {
           </div>
         </div>
         <div className="section-parallax section-parallax-1 container" data-region="homeMainContentRegion">
-          <Parallax y={[-50, 10]} tag="figure">
+          <Parallax y={[-50, 10]} tagOuter="figure">
             <div className="parallax-image-container">
-              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax1FileName)} onError={(e) => { e.target.src = homeEspotParallax1; }} />
+              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax1FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
             </div>
           </Parallax>
           <div className="sub-section">
@@ -92,7 +92,7 @@ const HomePage: React.FunctionComponent = () => {
         </div>
         <div className="section section-4 container">
           <div className="sub-section">
-            <img className="small-image image-1" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e) => { e.target.src = homeEspot3; }} />
+            <img className="small-image image-1" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container3-first-line')}
@@ -101,12 +101,12 @@ const HomePage: React.FunctionComponent = () => {
                 {intl.get('home-sub-espot-container3-second-line')}
               </span>
             </div>
-            <img className="small-image image-2" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e) => { e.target.src = homeEspot3; }} />
+            <img className="small-image image-2" alt="home-espot-3" src={Config.siteImagesUrl.replace('%fileName%', homeEspot3FileName)} onError={(e: any) => { e.target.src = homeEspot3; }} />
           </div>
         </div>
         <div className="section section-5 container">
           <div className="sub-section">
-            <img className="small-image" alt="home-espot-4" src={Config.siteImagesUrl.replace('%fileName%', homeEspot4FileName)} onError={(e) => { e.target.src = homeEspot4; }} />
+            <img className="small-image" alt="home-espot-4" src={Config.siteImagesUrl.replace('%fileName%', homeEspot4FileName)} onError={(e: any) => { e.target.src = homeEspot4; }} />
             <div className="text-block">
               <span className="line line-1">
                 {intl.get('home-sub-espot-container4-first-line')}
@@ -118,9 +118,9 @@ const HomePage: React.FunctionComponent = () => {
           </div>
         </div>
         <div className="section-parallax section-parallax-2 container" data-region="homeMainContentRegion">
-          <Parallax y={[10, -30]} tag="figure">
+          <Parallax y={[10, -30]} tagOuter="figure">
             <div className="parallax-image-container">
-              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax2FileName)} onError={(e) => { e.target.src = homeEspotParallax2; }} />
+              <img className="parallax-image" alt="home-espot-1" src={Config.siteImagesUrl.replace('%fileName%', homeEspotParallax2FileName)} onError={(e: any) => { e.target.src = homeEspotParallax2; }} />
             </div>
           </Parallax>
           <div className="sub-section">

app/src/containers/MaintenancePage.tsx

@@ -56,7 +56,7 @@ function MaintenancePage() {
                 </div>
                 <div className="static-container dog-container" style={{ display: 'block' }}>
                   <div className="container" style={{ display: 'block' }}>
-                    <img alt="dog-espot-1" className="dog-espot-1" src={Config.siteImagesUrl.replace('%fileName%', dogeFileName)} onError={(e) => { e.target.src = doge; }} />
+                    <img alt="dog-espot-1" className="dog-espot-1" src={Config.siteImagesUrl.replace('%fileName%', dogeFileName)} onError={(e: any) => { e.target.src = doge; }} />
                   </div>
                   <h2 className="static-dog-name">
                     {intl.get('name-moki')}

app/src/containers/ProductDetailPage.tsx

@@ -23,7 +23,11 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { ProductDisplayItemMain } from '@elasticpath/store-components';
 
-function ProductDetailPage(props: RouteComponentProps) {
+interface ProductDetailRouterProps {
+  url: string;
+}
+
+function ProductDetailPage(props: RouteComponentProps<ProductDetailRouterProps>) {
   const { history } = props;
 
   function handleAddToCart() {

app/src/containers/RegistrationPage.tsx

@@ -26,7 +26,7 @@ import { RegistrationFormMain } from '@elasticpath/store-components';
 function RegistrationPage(props: RouteComponentProps) {
   function handleRegisterSuccess() {
     const { location, history } = props;
-    if (location.state && location.returnPage) {
+    if (location.state && location.state.returnPage) {
       history.push(location.state.returnPage);
     } else {
       history.push('/');

app/src/containers/b2b/AccountList.tsx

@@ -43,7 +43,7 @@ interface AccountMainState {
   showAccountsMobileMenu: boolean,
 }
 
-export default class AccountList extends React.Component<AccountMainState, AccountMainProps> {
+export default class AccountList extends React.Component<AccountMainProps, AccountMainState> {
     static defaultProps = {
       getSubAccountData: () => {
       },

app/src/containers/b2b/AccountMain.tsx

@@ -112,7 +112,11 @@ interface AccountMainState {
   subAccounts: any,
 }
 
-export default class AccountMain extends React.Component<RouteComponentProps, AccountMainState> {
+interface AccountMainRouterProps {
+  url: string;
+}
+
+export default class AccountMain extends React.Component<RouteComponentProps<AccountMainRouterProps>, AccountMainState> {
   constructor(props: any) {
     super(props);
     this.state = {
@@ -128,6 +132,7 @@ export default class AccountMain extends React.Component<RouteComponentProps, Ac
       externalId: '',
       registrationNumber: '',
       selfSignUpCode: '',
+      uri: '',
       selector: '',
       associates: {},
       userEmail: '',
@@ -156,7 +161,7 @@ export default class AccountMain extends React.Component<RouteComponentProps, Ac
 
   getAccountData() {
     const { match } = this.props;
-    const accountUri = match.params.uri;
+    const accountUri = match.params.url;
     this.setState({ isLoading: true });
     login().then(() => {
       const profilePromice = adminFetch('/?zoom=myprofile:primaryemail', {
@@ -317,7 +322,6 @@ export default class AccountMain extends React.Component<RouteComponentProps, Ac
               </div>
             </div>
             <div className="account-component">
-              <AccountList getAccountData={this.getAccountData} accountListData={accountListData} getSubAccountData={this.subAccountData} handleAddSubAccountClicked={this.handleAddSubAccountClicked} accountName={accountName} registrationNumber={registrationNumber} />
               <div className="associates-container">
                 <div className="add-associate-container">
                   <button type="button" className="ep-btn primary small add-associate-button" onClick={() => this.handleAddAssociateClicked()}>

app/src/containers/b2b/AddSubAccount.tsx

@@ -101,7 +101,7 @@ export default class AddSubAccount extends React.Component<AddSubAccountProps, A
     const { name } = event.target;
     const { value } = event.target;
 
-    this.setState({ [name]: value });
+    this.setState({ name: value });
   }
 
   render() {

app/src/containers/b2b/Dashboard.tsx

@@ -244,7 +244,6 @@ export default class Dashboard extends React.Component<{}, DashboardState> {
 
 
   render() {
-    const { history } = this.props;
     const {
       admins,
       defaultBillingAddress,
@@ -400,7 +399,7 @@ export default class Dashboard extends React.Component<{}, DashboardState> {
                     </thead>
                     <tbody>
                       {accounts.map(account => (
-                        <tr key={account.externalId} onClick={() => { history.push(`/b2b/account/${account.uri}`); }} className="account-list-rows">
+                        <tr key={account.externalId} onClick={() => { window.location.href = `/b2b/account/${account.uri}`; }} className="account-list-rows">
                           <td className="name">{account.name}</td>
                           <td className="external-id">{account.externalId}</td>
                           <td className="status">

app/src/containers/b2b/SubAccountListItem.tsx

@@ -101,6 +101,7 @@ export default class SubAccountListItem extends React.Component<SubAccountListPr
       subAccountData: {},
       isLoading: false,
       subAccountOpened: false,
+      accountName: '',
       highlight: false,
     };
 

app/src/ep.config.json

@@ -84,6 +84,7 @@
     "brandAmbassador": {
       "title": "",
       "description": "",
+      "submit_button_text": "",
       "submit_button_url": "",
       "thumbnail_url": "",
       "return_url": ""

app/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "noImplicitAny": false,
+    "outDir": "./dist",
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "jsx": "preserve",
@@ -14,25 +14,10 @@
       "es6"
     ],
     "strict": false,
-    "noEmit": true,
     "skipLibCheck": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
     "isolatedModules": true
-  },
-  "files": [
-    "custom_typings/image-loader.d.ts",
-    "custom_typings/json-loader.d.ts"
-  ],
-  "exclude": [
-    "config-overrides.js",
-    "node_modules",
-    "build",
-    "scripts",
-    "acceptance-tests",
-    "webpack",
-    "config",
-    "src/tests"
-  ]
+  }
 }

components/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@elasticpath/store-components",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "main": "build/cjs/index",
   "main:src": "src/index",
-  "types": "build/types/src/index.d.ts",
+  "types": "src/index",
   "files": [
     "build/*"
   ],

components/src/AppFooterMain/appfooter.main.tsx

@@ -80,7 +80,7 @@ function AppFooterMain(props: AppFooterMainProps) {
               <span className="share-icon twitter" />
               {intl.get('twitter')}
             </Link>
-            <Link to={linkTo.shareInstagram} alt="share instagram">
+            <Link to={linkTo.shareInstagram} aria-label="share instagram">
               <span className="share-icon instagram" />
               {intl.get('instagram')}
             </Link>

components/src/IndiRecommendations/indirecommendations.main.tsx

@@ -33,7 +33,10 @@ interface IndiRecommendationsDisplayMainProps {
     keywords?: string,
 }
 
-class IndiRecommendationsDisplayMain extends React.Component<IndiRecommendationsDisplayMainProps> {
+interface IndiRecommendationsDisplayMainState {
+}
+
+class IndiRecommendationsDisplayMain extends React.Component<IndiRecommendationsDisplayMainProps, IndiRecommendationsDisplayMainState> {
   static defaultProps = {
     keywords: '',
   }
@@ -93,4 +96,5 @@ class IndiRecommendationsDisplayMain extends React.Component<IndiRecommendations
   }
 }
 
-export default withRouter(IndiRecommendationsDisplayMain);
+// export default withRouter(IndiRecommendationsDisplayMain);
+export default IndiRecommendationsDisplayMain;

components/src/PaymentForm/paymentform.main.tsx

@@ -56,6 +56,8 @@ class PaymentFormMain extends React.Component<PaymentFormMainProps, PaymentFormM
     fetchData: () => {},
   }
 
+  formRef: React.RefObject<HTMLFormElement>;
+
   constructor(props) {
     super(props);
     const epConfig = getConfig();
@@ -85,6 +87,7 @@ class PaymentFormMain extends React.Component<PaymentFormMainProps, PaymentFormM
     this.submitPayment = this.submitPayment.bind(this);
     this.cancel = this.cancel.bind(this);
     this.fetchCybersourceForm = this.fetchCybersourceForm.bind(this);
+    this.formRef = React.createRef<HTMLFormElement>();
   }
 
   componentDidMount() {
@@ -97,7 +100,7 @@ class PaymentFormMain extends React.Component<PaymentFormMainProps, PaymentFormM
     const formExists = document.getElementById('payment_confirmation');
 
     if (formExists && formCardNumberExists && formBillEmailExists) {
-      document.getElementById('payment_confirmation').submit();
+      this.formRef.current.submit();
     }
   }
 
@@ -283,7 +286,7 @@ class PaymentFormMain extends React.Component<PaymentFormMainProps, PaymentFormM
   // eslint-disable-next-line class-methods-use-this
   fetchCybersourceForm(cybersourceBodyRequest) {
     return (
-      <form id="payment_confirmation" className="payment_confirmation col-md-12" action={cybersourceBodyRequest.cs_endpoint_url} method="post">
+      <form ref={this.formRef} id="payment_confirmation" className="payment_confirmation col-md-12" action={cybersourceBodyRequest.cs_endpoint_url} method="post">
         <input type="text" id="transaction_type" name="transaction_type" value={cybersourceBodyRequest.transaction_type} />
         <input type="text" id="amount" name="amount" value={cybersourceBodyRequest.amount} />
         <input type="text" id="transaction_uuid" name="transaction_uuid" value={cybersourceBodyRequest.transaction_uuid} />

components/tsconfig.json

@@ -25,10 +25,6 @@
     "esModuleInterop":true,
     "declarationMap": true
   },
-  "files": [
-    "custom_typings/image-loader.d.ts",
-    "custom_typings/json-loader.d.ts"
-  ],
   "include": [
     "src"
   ],

components/webpack.config.base.js

@@ -101,11 +101,11 @@ module.exports = {
       window: 'ReactRouterDOM',
     },
     'react-router': {
-        commonjs: 'react-router',
-        commonjs2: 'react-router',
-        amd: 'react-router',
-        var: 'react-router',
-        window: 'ReactRouter',
-      },
+      commonjs: 'react-router',
+      commonjs2: 'react-router',
+      amd: 'react-router',
+      var: 'react-router',
+      window: 'ReactRouter',
+    },
   },
 };

cortexjs/package.json

@@ -9,6 +9,6 @@
     "build": "tsc"
   },
   "devDependencies": {
-    "typescript": "^3.5.2"
+    "typescript": "^3.6.3"
   }
 }

storybook/package.json

@@ -31,6 +31,6 @@
     "awesome-typescript-loader": "^5.2.1",
     "babel-core": "^6.26.3",
     "babel-preset-react": "^6.24.1",
-    "typescript": "^3.5.2"
+    "typescript": "^3.6.3"
   }
 }