Update TS, React, TSLint, add Locale type checking

.prettierignore

@@ -29,3 +29,4 @@ node_modules
 dist
 .cache-loader
 build_utils
+.vscode

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "cSpell.words": [
+        "Unmount",
+        "Euroset",
+        "Alipay"
+    ],
+    "typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -51,8 +51,8 @@
     "ismobilejs": "~0.4.1",
     "libphonenumber-js": "1.1.4",
     "lodash-es": "~4.17.15",
-    "react": "~16.6.3",
-    "react-dom": "~16.6.3",
+    "react": "~16.12.0",
+    "react-dom": "~16.12.0",
     "react-redux": "~5.1.1",
     "react-transition-group": "1.2.1",
     "redux": "~3.7.2",
@@ -72,8 +72,8 @@
     "@types/jest": "~23.3.14",
     "@types/lodash-es": "~4.17.0",
     "@types/node": "^11.13.18",
-    "@types/react": "~16.7.6",
-    "@types/react-dom": "~16.0.9",
+    "@types/react": "~16.9.19",
+    "@types/react-dom": "~16.9.5",
     "@types/react-redux": "~5.0.21",
     "@types/react-test-renderer": "~16.0.1",
     "@types/react-transition-group": "1.1.5",
@@ -103,12 +103,12 @@
     "thread-loader": "~2.1.2",
     "ts-jest": "~23.10.5",
     "ts-loader": "~5.3.3",
-    "tslint": "~5.11.0",
+    "tslint": "~6.0.0",
     "tslint-config-prettier": "~1.18.0",
     "tslint-immutable": "~4.5.1",
     "tslint-loader": "~3.5.4",
     "tslint-react": "~3.6.0",
-    "typescript": "~3.5.3",
+    "typescript": "~3.7.5",
     "typescript-plugin-styled-components": "~1.0.0",
     "webpack": "~4.29.0",
     "webpack-bundle-analyzer": "~3.6.0",

src/app/components/app/app.tsx

@@ -15,7 +15,7 @@ import { AppWrapper } from 'checkout/components/app/app-wrapper';
 import { GlobalStyle } from 'checkout/components/app/global-style';
 
 class AppDef extends React.Component<AppProps> {
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         this.props.initApp(this.props.initConfig);
     }
 

src/app/components/app/modal-container/modal-content/modal-content.tsx

@@ -70,7 +70,7 @@ export interface ModalContentProps {
 }
 
 class ModalContentDef extends React.Component<ModalContentProps> {
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         window.addEventListener('message', (e) => {
             if (e.data === 'finish-interaction') {
                 this.props.finishInteraction();

src/app/components/app/modal-container/modal/form-container/card-form/card-form.tsx

@@ -52,7 +52,7 @@ class CardFormDef extends React.Component<Props> {
         this.submit = this.submit.bind(this);
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         const {
             cardFormInfo: { paymentStatus },
             formValues
@@ -68,7 +68,7 @@ class CardFormDef extends React.Component<Props> {
         }
     }
 
-    componentWillReceiveProps(props: Props) {
+    UNSAFE_componentWillReceiveProps(props: Props) {
         if (props.submitFailed) {
             props.setViewInfoError(true);
         }

src/app/components/app/modal-container/modal/form-container/help/help.tsx

@@ -9,7 +9,7 @@ import { NumerableList, ListItem } from 'checkout/components/app/modal-container
 import { Text } from '../text';
 
 interface HelpDefProps {
-    errorCode: string;
+    errorCode: keyof Locale['form.help.codes'];
     locale: Locale;
 }
 

src/app/components/app/modal-container/modal/form-container/payment-methods/payment-methods.tsx

@@ -41,7 +41,7 @@ const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
 class PaymentMethodsDef extends React.Component<PaymentMethodsProps, PaymentMethodsState> {
     private formElement: HTMLFormElement;
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         const { methods } = this.props;
         const visibilityThreshold = 3;
         const visibleMethods = methods.filter((_m, i) => i < visibilityThreshold);

src/app/components/app/modal-container/modal/form-container/result-form/action-block.tsx

@@ -38,8 +38,6 @@ const toReenterButtonText = (startedInfo: FormInfo, locale: Locale): string => {
             return locale['form.button.use.other.card.label'];
         case FormName.walletForm:
             return locale['form.button.use.other.wallet.label'];
-        case FormName.terminalForm:
-            return locale['form.button.use.other.terminal.label'];
     }
     throw new Error('Unsupported form type');
 };

src/app/components/app/modal-container/modal/form-container/result-form/make-content/get-failed-description.tsx

@@ -5,7 +5,7 @@ import { LogicError } from 'checkout/backend';
 import { Text } from './text';
 
 const getDescription = (l: Locale, e: LogicError): string => {
-    const result = l[e.code] ? l[e.code] : e.code;
+    const result: string = (l[e.code as keyof Locale] as string) || e.code;
     if (e.message) {
         return result ? result.concat(`.\n${e.message}`) : e.message;
     } else {

src/app/components/app/modal-container/modal/form-container/terminal-form/terminal-form.tsx

@@ -60,7 +60,7 @@ export class TerminalFormDef extends React.Component<Props> {
         });
     }
 
-    componentWillMount() {
+    UNSAFE_componentWillMount() {
         const {
             terminalFormInfo: { paymentStatus },
             formValues
@@ -76,7 +76,7 @@ export class TerminalFormDef extends React.Component<Props> {
         }
     }
 
-    componentWillReceiveProps(props: Props) {
+    UNSAFE_componentWillReceiveProps(props: Props) {
         if (props.submitFailed) {
             props.setViewInfoError(true);
         }