diff --git a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.tsx b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.tsx
index fd6b0815..318bbfc3 100644
--- a/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.tsx
+++ b/app/javascript/legacy_react/src/components/common/LabeledFieldComponent.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import StandardFieldComponent from "./StandardFieldComponent";
 import {observer} from 'mobx-react';
-import {InjectedIntl, injectIntl} from 'react-intl';
 
 
 export interface LabeledFieldComponentProps
diff --git a/app/javascript/legacy_react/src/components/common/ProgressableButton.tsx b/app/javascript/legacy_react/src/components/common/ProgressableButton.tsx
index 44a29796..fae6a183 100644
--- a/app/javascript/legacy_react/src/components/common/ProgressableButton.tsx
+++ b/app/javascript/legacy_react/src/components/common/ProgressableButton.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import * as _ from 'lodash'
 import {observer} from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 
 export interface ProgressableButtonProps
 {
diff --git a/app/javascript/legacy_react/src/components/common/form/ReactInput.tsx b/app/javascript/legacy_react/src/components/common/form/ReactInput.tsx
index 3df05eae..c7211565 100644
--- a/app/javascript/legacy_react/src/components/common/form/ReactInput.tsx
+++ b/app/javascript/legacy_react/src/components/common/form/ReactInput.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import  * as React from 'react';
 import { observer, inject, Provider } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import {injectIntl} from 'react-intl';
 import {Field} from "mobx-react-form";
 import {observable, action, toJS, runInAction} from 'mobx';
 import {InputHTMLAttributes} from 'react';
diff --git a/app/javascript/legacy_react/src/components/common/form/ReactSelect.tsx b/app/javascript/legacy_react/src/components/common/form/ReactSelect.tsx
index c3e0bb42..897e1f01 100644
--- a/app/javascript/legacy_react/src/components/common/form/ReactSelect.tsx
+++ b/app/javascript/legacy_react/src/components/common/form/ReactSelect.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import {injectIntl} from 'react-intl';
 import {Field} from "../../../../../../../types/mobx-react-form";
 import {InputHTMLAttributes} from "react";
 import {action, observable} from "mobx";
diff --git a/app/javascript/legacy_react/src/components/common/form/ReactTextarea.tsx b/app/javascript/legacy_react/src/components/common/form/ReactTextarea.tsx
index 3e8a826a..dccc0335 100644
--- a/app/javascript/legacy_react/src/components/common/form/ReactTextarea.tsx
+++ b/app/javascript/legacy_react/src/components/common/form/ReactTextarea.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import {Field} from "../../../../../../../types/mobx-react-form";
 import {InputHTMLAttributes, ReactText, TextareaHTMLAttributes} from "react";
 import {action, observable} from "mobx";
diff --git a/app/javascript/legacy_react/src/components/common/wizard/WizardTab.spec.tsx b/app/javascript/legacy_react/src/components/common/wizard/WizardTab.spec.tsx
index affb89c2..2aa7b877 100644
--- a/app/javascript/legacy_react/src/components/common/wizard/WizardTab.spec.tsx
+++ b/app/javascript/legacy_react/src/components/common/wizard/WizardTab.spec.tsx
@@ -3,6 +3,7 @@ import * as React from 'react';
 import 'jest';
 import WizardTab from './WizardTab'
 import {shallowWithIntl} from "../../../lib/tests/helpers";
+import { shallow } from 'enzyme';
 
 describe('WizardTab', () => {
     function runTest(enabled:boolean, active:boolean, widthPercentage:number){
diff --git a/app/javascript/legacy_react/src/components/common/wizard/WizardTab.tsx b/app/javascript/legacy_react/src/components/common/wizard/WizardTab.tsx
index 59995416..63dcb308 100644
--- a/app/javascript/legacy_react/src/components/common/wizard/WizardTab.tsx
+++ b/app/javascript/legacy_react/src/components/common/wizard/WizardTab.tsx
@@ -1,6 +1,6 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import {FormattedMessage, injectIntl, InjectedIntlProps} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {observer} from 'mobx-react';
 import {WizardTabPanelState} from "./wizard_state";
 import {Tab} from "./RAT/Tab";
@@ -21,7 +21,7 @@ export interface WizardTabProps
 }
 
 
-class WizardTab extends React.Component<WizardTabProps & InjectedIntlProps, {}> {
+class WizardTab extends React.Component<WizardTabProps & WrappedComponentProps, {}> {
   render() {
     let percentageToString = this.props.widthPercentage.toString() + "%"
     let style=  {width: percentageToString}
diff --git a/app/javascript/legacy_react/src/components/common/wizard/__snapshots__/Wizard.spec.tsx.snap b/app/javascript/legacy_react/src/components/common/wizard/__snapshots__/Wizard.spec.tsx.snap
index 00195786..7c5041f0 100644
--- a/app/javascript/legacy_react/src/components/common/wizard/__snapshots__/Wizard.spec.tsx.snap
+++ b/app/javascript/legacy_react/src/components/common/wizard/__snapshots__/Wizard.spec.tsx.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Wizard Move back on disabled make first invalid so move back there 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -16,8 +16,8 @@ exports[`Wizard Move back on disabled make first invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label\\" style={{...}}>
@@ -25,8 +25,8 @@ exports[`Wizard Move back on disabled make first invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
@@ -34,7 +34,7 @@ exports[`Wizard Move back on disabled make first invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -70,14 +70,14 @@ exports[`Wizard Move back on disabled make first invalid so move back there 1`]
 `;
 
 exports[`Wizard Move back on disabled make first invalid so move back there 2`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -85,8 +85,8 @@ exports[`Wizard Move back on disabled make first invalid so move back there 2`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label\\" style={{...}}>
@@ -94,8 +94,8 @@ exports[`Wizard Move back on disabled make first invalid so move back there 2`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
@@ -103,7 +103,7 @@ exports[`Wizard Move back on disabled make first invalid so move back there 2`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -139,14 +139,14 @@ exports[`Wizard Move back on disabled make first invalid so move back there 2`]
 `;
 
 exports[`Wizard Move back on disabled make second invalid so move back there 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -154,8 +154,8 @@ exports[`Wizard Move back on disabled make second invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -163,8 +163,8 @@ exports[`Wizard Move back on disabled make second invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label\\" style={{...}}>
@@ -172,7 +172,7 @@ exports[`Wizard Move back on disabled make second invalid so move back there 1`]
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -208,14 +208,14 @@ exports[`Wizard Move back on disabled make second invalid so move back there 1`]
 `;
 
 exports[`Wizard first tab is active 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -223,8 +223,8 @@ exports[`Wizard first tab is active 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -232,8 +232,8 @@ exports[`Wizard first tab is active 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -241,7 +241,7 @@ exports[`Wizard first tab is active 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -277,14 +277,14 @@ exports[`Wizard first tab is active 1`] = `
 `;
 
 exports[`Wizard go to the second tab go to next via backend 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -292,8 +292,8 @@ exports[`Wizard go to the second tab go to next via backend 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -301,8 +301,8 @@ exports[`Wizard go to the second tab go to next via backend 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -310,7 +310,7 @@ exports[`Wizard go to the second tab go to next via backend 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -346,14 +346,14 @@ exports[`Wizard go to the second tab go to next via backend 1`] = `
 `;
 
 exports[`Wizard go to the second tab set via next click 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -361,8 +361,8 @@ exports[`Wizard go to the second tab set via next click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -370,8 +370,8 @@ exports[`Wizard go to the second tab set via next click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -379,7 +379,7 @@ exports[`Wizard go to the second tab set via next click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
@@ -415,14 +415,14 @@ exports[`Wizard go to the second tab set via next click 1`] = `
 `;
 
 exports[`Wizard go to the second tab set via tab click 1`] = `
-"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]} intl={{...}}>
+"<OuterWrapper state={{...}} disabledTabs={false} __childrenCreator={[Function (anonymous)]}>
   <Wizard wizardState={{...}} disableTabs={false}>
     <Wrapper manager={{...}} tag=\\"section\\" style={{...}} className=\\"wizard-steps\\">
       <section style={{...}} className=\\"wizard-steps\\">
         <WizardTabList wizardState={{...}} disableTabs={false}>
           <TabList tag=\\"div\\" className=\\"wizard-index\\">
             <div role=\\"tablist\\" className=\\"wizard-index\\">
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab1\\" role=\\"tab\\">
                     <span id=\\"tab1\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab1-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -430,8 +430,8 @@ exports[`Wizard go to the second tab set via tab click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={true} className=\\"wizard-index-label is-current is-accessible\\" style={{...}} id=\\"tab2\\" role=\\"tab\\">
                     <span id=\\"tab2\\" tabIndex={0} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={true} aria-controls=\\"tab2-panel\\" className=\\"wizard-index-label is-current is-accessible\\" style={{...}}>
@@ -439,8 +439,8 @@ exports[`Wizard go to the second tab set via tab click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
-              <InjectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
+              </injectIntl(WizardTab)>
+              <injectIntl(WizardTab) tab={{...}} widthPercentage={33.333333333333336} disableTabs={false}>
                 <WizardTab tab={{...}} widthPercentage={33.333333333333336} disableTabs={false} intl={{...}}>
                   <Tab tag=\\"span\\" active={false} className=\\"wizard-index-label is-accessible\\" style={{...}} id=\\"tab3\\" role=\\"tab\\">
                     <span id=\\"tab3\\" tabIndex={-1} onFocus={[Function: bound ]} role=\\"tab\\" aria-selected={false} aria-controls=\\"tab3-panel\\" className=\\"wizard-index-label is-accessible\\" style={{...}}>
@@ -448,7 +448,7 @@ exports[`Wizard go to the second tab set via tab click 1`] = `
                     </span>
                   </Tab>
                 </WizardTab>
-              </InjectIntl(WizardTab)>
+              </injectIntl(WizardTab)>
             </div>
           </TabList>
         </WizardTabList>
diff --git a/app/javascript/legacy_react/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx b/app/javascript/legacy_react/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
index 751bbbbd..dfb4009e 100644
--- a/app/javascript/legacy_react/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
+++ b/app/javascript/legacy_react/src/components/create_offsite_payment_pane/CreateOffsitePaymentPane.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import Modal from "../common/Modal";
 //import { FundraiserInfo} from "../edit_payment_pane/EditPaymentPane";
 import {HoudiniForm} from "../../lib/houdini_form";
@@ -48,7 +48,7 @@ class CreateOffsitePaymentPaneForm extends HoudiniForm {
 
 }
 
-class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPaneProps & InjectedIntlProps, {}> {
+class CreateNewOffsitePaymentPane extends React.Component<CreateOffsitePaymentPaneProps &  {}> {
 
   constructor(props: CreateOffsitePaymentPaneProps & InjectedIntlProps) {
     super(props);
diff --git a/app/javascript/legacy_react/src/components/edit_payment_pane/EditPaymentPane.tsx b/app/javascript/legacy_react/src/components/edit_payment_pane/EditPaymentPane.tsx
index ce9d0260..de9479bb 100644
--- a/app/javascript/legacy_react/src/components/edit_payment_pane/EditPaymentPane.tsx
+++ b/app/javascript/legacy_react/src/components/edit_payment_pane/EditPaymentPane.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import {observer} from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import {action, computed} from "mobx";
 import {FieldDefinition} from "mobx-react-form";
 import {HoudiniForm} from "../../lib/houdini_form";
@@ -88,7 +88,7 @@ class EditPaymentPaneForm extends HoudiniForm {
 
 
 @observer
-class EditPaymentPane extends React.Component<EditPaymentPaneProps & InjectedIntlProps, {}> {
+class EditPaymentPane extends React.Component<EditPaymentPaneProps &  {}> {
 
   constructor(props: EditPaymentPaneProps & InjectedIntlProps) {
     super(props);
diff --git a/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoForm.tsx b/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoForm.tsx
index 51dc4914..5049e32a 100644
--- a/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoForm.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoForm.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import {Field, FieldDefinition} from "../../../../../../types/mobx-react-form";
 import {BasicField} from "../common/fields";
 import {ThreeColumnFields, TwoColumnFields} from "../common/layout";
@@ -46,7 +46,7 @@ export const FieldDefinitions : Array<FieldDefinition> = [
   }
 ]
 
-class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps & InjectedIntlProps, {}> {
+class NonprofitInfoForm extends React.Component<NonprofitInfoFormProps &  {}> {
 
 
   render() {
diff --git a/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoPanel.tsx b/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoPanel.tsx
index 15e683f3..d4872537 100644
--- a/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoPanel.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/NonprofitInfoPanel.tsx
@@ -7,7 +7,7 @@ import { Field} from 'mobx-react-form'
 import { observer } from 'mobx-react';
 import { computed } from 'mobx';
 import { WizardTabPanelState} from "../common/wizard/wizard_state";
-import {InjectedIntlProps, injectIntl, InjectedIntl} from 'react-intl';
+import { injectIntl, InjectedIntl} from 'react-intl';
 import NonprofitInfoForm from "./NonprofitInfoForm";
 
 export interface NonprofitInfoPanelProps extends WizardTabPanelProps
@@ -15,7 +15,7 @@ export interface NonprofitInfoPanelProps extends WizardTabPanelProps
     buttonText:string
 }
 
-class NonprofitInfoPanel extends React.Component<NonprofitInfoPanelProps & InjectedIntlProps, {}>  {
+class NonprofitInfoPanel extends React.Component<NonprofitInfoPanelProps &  {}>  {
 
   @computed
   get wizardTab(): WizardTabPanelState {
diff --git a/app/javascript/legacy_react/src/components/registration_page/RegistrationPage.tsx b/app/javascript/legacy_react/src/components/registration_page/RegistrationPage.tsx
index c14d5ae6..51a44c4f 100644
--- a/app/javascript/legacy_react/src/components/registration_page/RegistrationPage.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/RegistrationPage.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import RegistrationWizard from "./RegistrationWizard";
 
 import {observer} from 'mobx-react';
-import {InjectedIntlProps, injectIntl, InjectedIntl, FormattedMessage} from 'react-intl';
+import { injectIntl, InjectedIntl, FormattedMessage} from 'react-intl';
 
 
 export interface RegistrationPageProps
@@ -11,7 +11,7 @@ export interface RegistrationPageProps
 
 }
 
-class RegistrationPage extends React.Component<RegistrationPageProps & InjectedIntlProps, {}> {
+class RegistrationPage extends React.Component<RegistrationPageProps &  {}> {
 
 
 
diff --git a/app/javascript/legacy_react/src/components/registration_page/RegistrationWizard.tsx b/app/javascript/legacy_react/src/components/registration_page/RegistrationWizard.tsx
index 2303da37..06187b43 100644
--- a/app/javascript/legacy_react/src/components/registration_page/RegistrationWizard.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/RegistrationWizard.tsx
@@ -122,7 +122,7 @@ class RegistrationWizardState extends WizardState {
 
 }
 
-export class InnerRegistrationWizard extends React.Component<RegistrationWizardProps & InjectedIntlProps, {}> {
+export class InnerRegistrationWizard extends React.Component<RegistrationWizardProps &  {}> {
 
   constructor(props: RegistrationWizardProps & InjectedIntlProps) {
     super(props)
diff --git a/app/javascript/legacy_react/src/components/registration_page/UserInfoForm.tsx b/app/javascript/legacy_react/src/components/registration_page/UserInfoForm.tsx
index f85961ac..cbdd4d47 100644
--- a/app/javascript/legacy_react/src/components/registration_page/UserInfoForm.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/UserInfoForm.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import {Validations} from "../../lib/vjf_rules";
 import {Field, FieldDefinition} from "mobx-react-form";
 import {TwoColumnFields} from "../common/layout";
@@ -40,7 +40,7 @@ export interface UserInfoFormProps
 
 
 
-class UserInfoForm extends React.Component<UserInfoFormProps & InjectedIntlProps, {}> {
+class UserInfoForm extends React.Component<UserInfoFormProps &  {}> {
   render() {
     return <fieldset>
       <TwoColumnFields>
diff --git a/app/javascript/legacy_react/src/components/registration_page/UserInfoPanel.tsx b/app/javascript/legacy_react/src/components/registration_page/UserInfoPanel.tsx
index 4c793fcb..34f1a3a9 100644
--- a/app/javascript/legacy_react/src/components/registration_page/UserInfoPanel.tsx
+++ b/app/javascript/legacy_react/src/components/registration_page/UserInfoPanel.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import {observer} from 'mobx-react';
-import {InjectedIntlProps, injectIntl} from 'react-intl';
+import { injectIntl} from 'react-intl';
 import {Field} from "mobx-react-form";
 import {computed} from 'mobx';
 import {WizardPanel, WizardTabPanelProps} from "../common/wizard/WizardPanel";
@@ -13,7 +13,7 @@ export interface UserInfoPanelProps extends WizardTabPanelProps {
   buttonTextOnProgress?:string
 }
 
-class UserInfoPanel extends React.Component<UserInfoPanelProps & InjectedIntlProps, {}> {
+class UserInfoPanel extends React.Component<UserInfoPanelProps &  {}> {
 
   @computed
   get wizardTab(): WizardTabPanelState {
diff --git a/app/javascript/legacy_react/src/components/session_login_page/SessionLoginForm.tsx b/app/javascript/legacy_react/src/components/session_login_page/SessionLoginForm.tsx
index d098a8ce..c05afe2d 100644
--- a/app/javascript/legacy_react/src/components/session_login_page/SessionLoginForm.tsx
+++ b/app/javascript/legacy_react/src/components/session_login_page/SessionLoginForm.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer, inject} from 'mobx-react';
-import {InjectedIntlProps, injectIntl, FormattedMessage} from 'react-intl';
+import { injectIntl, FormattedMessage} from 'react-intl';
 import {Field, FieldDefinition, Form, initializationDefinition} from "../../../../../../types/mobx-react-form";
 import {Validations} from "../../lib/vjf_rules";
 import {WebLoginModel, WebUserSignInOut} from "../../lib/api/sign_in";
@@ -80,7 +80,7 @@ export class SessionPageForm extends HoudiniForm {
 }
 
 
-class InnerSessionLoginForm extends React.Component<SessionLoginFormProps & InjectedIntlProps, {}> {
+class InnerSessionLoginForm extends React.Component<SessionLoginFormProps &  {}> {
   constructor(props: SessionLoginFormProps & InjectedIntlProps) {
     super(props)
     this.createForm();
diff --git a/app/javascript/legacy_react/src/components/session_login_page/SessionLoginPage.tsx b/app/javascript/legacy_react/src/components/session_login_page/SessionLoginPage.tsx
index b5e00df1..a0679748 100644
--- a/app/javascript/legacy_react/src/components/session_login_page/SessionLoginPage.tsx
+++ b/app/javascript/legacy_react/src/components/session_login_page/SessionLoginPage.tsx
@@ -1,7 +1,7 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
 import { observer } from 'mobx-react';
-import {InjectedIntlProps, injectIntl, InjectedIntl, FormattedMessage} from 'react-intl';
+import { injectIntl, InjectedIntl, FormattedMessage} from 'react-intl';
 import SessionLoginForm from "./SessionLoginForm";
 
 export interface SessionLoginPageProps
@@ -9,7 +9,7 @@ export interface SessionLoginPageProps
 
 }
 
-class SessionLoginPage extends React.Component<SessionLoginPageProps & InjectedIntlProps, {}> {
+class SessionLoginPage extends React.Component<SessionLoginPageProps &  {}> {
   render() {
      return <div className="tw-bs"><div className="container"><div className="row"><div className={'col-sm-6'}>
        <h1><FormattedMessage id="login.header"/></h1>
diff --git a/app/javascript/legacy_react/src/lib/tests/helpers.ts b/app/javascript/legacy_react/src/lib/tests/helpers.ts
index 42423388..5eafca5e 100644
--- a/app/javascript/legacy_react/src/lib/tests/helpers.ts
+++ b/app/javascript/legacy_react/src/lib/tests/helpers.ts
@@ -1,12 +1,13 @@
 // License: LGPL-3.0-or-later
 import * as React from 'react';
-import {IntlProvider, intlShape} from 'react-intl';
+import {IntlProvider, createIntl, createIntlCache} from 'react-intl';
 import {mount, MountRendererProps, shallow, ShallowRendererProps, ShallowWrapper} from 'enzyme';
 
 // Create the IntlProvider to retrieve context for wrapping around.
-const intlProvider = new IntlProvider({ locale: 'en'}, {});
-const { intl } = intlProvider.getChildContext();
 
+const cache = createIntlCache()
+
+const  intl  = createIntl({ locale: 'en', messages:{}})
 /**
  * When using React-Intl `injectIntl` on components, props.intl is required.
  */
@@ -14,41 +15,28 @@ function nodeWithIntlProp(node:any) {
   return React.cloneElement(node, { intl });
 }
 
-export function shallowWithIntl(node:any, options?:ShallowRendererProps) {
-  let context = {}
 
-  if (options ) {
-    context = options.context
+const defaultLocale = 'en';
+const locale = defaultLocale;
 
-  }
-  return shallow(
-    nodeWithIntlProp(node),
-    {
-      ...options,
-      context: (Object as any).assign({}, context, {intl})
-    }
-  ).dive();
+export function mountWithIntl(node: React.ReactElement) {
+  return mount(node, {
+    wrappingComponent: IntlProvider,
+    wrappingComponentProps: {
+      locale,
+      defaultLocale,
+    },
+  });
 }
 
-
-export function mountWithIntl(node:any, options?:MountRendererProps) {
-  let context = {}
-  let additionalOptions:Array<any> = []
-  let childContextTypes = {}
-
-  if (options) {
-    context = options.context
-    childContextTypes = options.childContextTypes
-  }
-  return mount(
-    nodeWithIntlProp(node),
-    {
-      ...options,
-      context:(Object as any).assign({},context, {intl}),
-      childContextTypes: (Object as any).assign({}, { intl: intlShape }, childContextTypes)
-
-    }
-  );
+export function shallowWithIntl(node: React.ReactElement) {
+  return shallow(node, {
+    wrappingComponent: IntlProvider,
+    wrappingComponentProps: {
+      locale,
+      defaultLocale,
+    },
+  }).dive().dive();
 }
 
 
diff --git a/package.json b/package.json
index 2fec4950..8003929c 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,6 @@
     "@types/prop-types": "^15.5.5",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
-    "@types/react-intl": "^2.3.7",
     "@types/react-test-renderer": "^16.0.1",
     "@types/react-text-mask": "^5.4.2",
     "@types/react-transition-group": "^2.9.0",
@@ -141,7 +140,7 @@
     "react": "^16.2.0",
     "react-aria-modal": "^3.0.1",
     "react-dom": "^16.3.1",
-    "react-intl": "^2.4.0",
+    "react-intl": "^4",
     "react-text-mask": "^5.3.0",
     "react-transition-group": "^2.9.0",
     "react_ujs": "^2.6.1",
diff --git a/yarn.lock b/yarn.lock
index 20385328..c13f79bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1789,6 +1789,56 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@formatjs/intl-datetimeformat@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-datetimeformat/-/intl-datetimeformat-1.3.2.tgz#97b2600137864e7d047b97b96183e9c9fcba7356"
+  integrity sha512-cf8xQ9ITnnGwiFvph6VTYK/b4rTBRMZvYfahBwBntmCxBFOsfELETDQAhNkUyPdQ9FlSvwlJK+GKoImb2VxUxQ==
+  dependencies:
+    "@formatjs/intl-getcanonicallocales" "1.2.6"
+    "@formatjs/intl-utils" "^3.4.1"
+
+"@formatjs/intl-displaynames@^2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-2.2.8.tgz#4903ecd5a6949b4cca2e5898a180c90349b4b1d0"
+  integrity sha512-9DbfyzylOpbf6XldkGD81U7JZdky9elxE67uPfUrQo/m3Q0/UMWAD1m04Ol7Pfd65pvGCdMKgATl7b9avKKNrQ==
+  dependencies:
+    "@formatjs/intl-utils" "^3.4.1"
+
+"@formatjs/intl-getcanonicallocales@1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.2.6.tgz#7aea999dc3130bd2a04b6eea490f3ec22759d04b"
+  integrity sha512-ZO38NUZoGHAeIn0B4ZXMdpcgdH5i2pZUIMvrf/l2XLAB339x8Yxx+P6WHTD66bQhyntuFpry5iN6zPBqnMubdA==
+  dependencies:
+    cldr-core "36.0.0"
+
+"@formatjs/intl-listformat@^2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-listformat/-/intl-listformat-2.2.8.tgz#9ef57a752f7cdfbe40977c223069956dd4c60809"
+  integrity sha512-qtbXw24Ns2h74Y7Ph5eeTXUd1FoKhEJzsZm7ajdCWORumAu4tz4eIbV1TOhvaYvY/D1zYxsQcHMI7GtkaWygIQ==
+  dependencies:
+    "@formatjs/intl-utils" "^3.4.1"
+
+"@formatjs/intl-numberformat@^4.2.10":
+  version "4.2.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-numberformat/-/intl-numberformat-4.2.10.tgz#2c05add2233bb87e58e992778f9eb39996703421"
+  integrity sha512-mdubK3/Ml16LB/sS9LGSqCsXZ2CAHd7B3CvFhLTiPYFZSwNE9YUxp7n0VK3P/g8H5C9oweegI05onILkRCp6XQ==
+  dependencies:
+    "@formatjs/intl-utils" "^3.4.1"
+
+"@formatjs/intl-relativetimeformat@^5.2.10":
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-5.2.10.tgz#abb29304d0f3a55e7d351a5fa07b3a18cbaf0638"
+  integrity sha512-ipNDOpczSdJEwNSIQfA7AT/5vF3VTOSMgBQWBG165lPp+hU3V9QbT1lWGeYfzyiUKTEqEtcY7HBy9GTDuITvjw==
+  dependencies:
+    "@formatjs/intl-utils" "^3.4.1"
+
+"@formatjs/intl-utils@^3.4.1":
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-3.4.1.tgz#705646e3be11e5851c33c44448dc3d828997ac41"
+  integrity sha512-4rdSTl+ki74ncP0GsdqoKczVWHZQKAemW9YRkhbvpcJrAFDLSEMIagQ+YPy+25plyLfgE/iOYManLdpdUF2IcA==
+  dependencies:
+    emojis-list "^3.0.0"
+
 "@jest/console@^24.7.1", "@jest/console@^24.9.0":
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
@@ -2704,6 +2754,11 @@
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
   integrity sha512-iYCgjm1dGPRuo12+BStjd1HiVQqhlRhWDOQigNxn023HcjnhsiFz9pc6CzJj4HwDCSQca9bxTL4PxJDbkdm3PA==
 
+"@types/invariant@^2.2.31":
+  version "2.2.33"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.33.tgz#ec5eec29c63bf5e4ca164e9feb3ef7337cdcbadb"
+  integrity sha512-/jUNmS8d4bCKdqslfxW6dg/9Gksfzxz67IYfqApHn+HvHlMVXwYv2zpTDnS/yaK9BB0i0GlBTaYci0EFE62Hmw==
+
 "@types/is-function@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
@@ -2815,11 +2870,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-intl@^2.3.7":
-  version "2.3.18"
-  resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.18.tgz#fd2d8b7f4d0a1dd05b5f1784ab0d7fe1786a690d"
-  integrity sha512-DVNJs49zUxKRZng8VuILE886Yihdsf3yLr5vHk9zJrmF8SyRSK3sxNSvikAKxNkv9hX55XBTJShz6CkJnbNjgg==
-
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -4793,6 +4843,11 @@ classnames@^2.2.5:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
+cldr-core@36.0.0:
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-36.0.0.tgz#1d2148ed6802411845baeeb21432d7bbfde7d4f7"
+  integrity sha512-QLnAjt20rZe38c8h8OJ9jPND+O4o5O8Nw0TK/P3KpNn1cmOhMu0rk6Kc3ap96c5OStQ9gAngs9+Be2sum26NOw==
+
 clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -8374,31 +8429,27 @@ interpret@^2.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-intl-format-cache@^2.0.5:
-  version "2.2.9"
-  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-2.2.9.tgz#fb560de20c549cda20b569cf1ffb6dc62b5b93b4"
-  integrity sha512-Zv/u8wRpekckv0cLkwpVdABYST4hZNTDaX7reFetrYTJwxExR2VyTqQm+l0WmL0Qo8Mjb9Tf33qnfj0T7pjxdQ==
+intl-format-cache@^4.2.42:
+  version "4.2.42"
+  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.2.42.tgz#8fc1de0fe72764d05b339a71b7ee0517c5ef0757"
+  integrity sha512-NJldCapugigFv1yAyqsY8jDdHFIJU427Ko47xf4yg2qLj4TtBA0d9lwqFnP5s9WOLJoNP/4ddu85B3ix0c5R7Q==
 
-intl-messageformat-parser@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-1.4.0.tgz#b43d45a97468cadbe44331d74bb1e8dea44fc075"
-  integrity sha1-tD1FqXRoytvkQzHXS7Ho3qRPwHU=
-
-intl-messageformat@^2.0.0, intl-messageformat@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-2.2.0.tgz#345bcd46de630b7683330c2e52177ff5eab484fc"
-  integrity sha1-NFvNRt5jC3aDMwwuUhd/9eq0hPw=
+intl-messageformat-parser@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-5.2.0.tgz#c9b0cb60dbd327c4ed93f24db7d1806cd45f4769"
+  integrity sha512-SNEyrrDkkSVUfnt+b+RCwn2rq5cMz7hZIJvn76ot0CcoRMIm8i9rU4Rpy6xUM8oayJyD1ayQYVjjeC1+Qea6Aw==
   dependencies:
-    intl-messageformat-parser "1.4.0"
+    "@formatjs/intl-numberformat" "^4.2.10"
 
-intl-relativeformat@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/intl-relativeformat/-/intl-relativeformat-2.2.0.tgz#6aca95d019ec8d30b6c5653b6629f9983ea5b6c5"
-  integrity sha512-4bV/7kSKaPEmu6ArxXf9xjv1ny74Zkwuey8Pm01NH4zggPP7JHwg2STk8Y3JdspCKRDriwIyLRfEXnj2ZLr4Bw==
+intl-messageformat@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-8.4.0.tgz#e41466135330b168b3df7cc1e8dd5c616d97faa3"
+  integrity sha512-1W1lLNuf11qCg8pRHwINvvCHu1sa8vS9ZbIKP0qv5E/wfx1NvIPx4e4FPa/LCfsT4cz/Ifh1MeMW6Sb3HJgOhg==
   dependencies:
-    intl-messageformat "^2.0.0"
+    intl-format-cache "^4.2.42"
+    intl-messageformat-parser "^5.2.0"
 
-invariant@^2.1.1, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -13022,16 +13073,24 @@ react-inspector@^4.0.0:
     is-dom "^1.0.9"
     prop-types "^15.6.1"
 
-react-intl@^2.4.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843"
-  integrity sha512-27jnDlb/d2A7mSJwrbOBnUgD+rPep+abmoJE511Tf8BnoONIAUehy/U1zZCHGO17mnOwMWxqN4qC0nW11cD6rA==
+react-intl@^4:
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-4.7.5.tgz#f8b70db030270289904d19c724668ef69a4641ed"
+  integrity sha512-JaLV4cPo4eo/oVNJI0cfeCGn15RLFjS6ImpnCr1MKWBXxFHJhCNs00OGikI9/M01u8oBEYebQkqE7PkN+1NjZg==
   dependencies:
-    hoist-non-react-statics "^3.3.0"
-    intl-format-cache "^2.0.5"
-    intl-messageformat "^2.1.0"
-    intl-relativeformat "^2.1.0"
-    invariant "^2.1.1"
+    "@formatjs/intl-datetimeformat" "^1.3.2"
+    "@formatjs/intl-displaynames" "^2.2.8"
+    "@formatjs/intl-listformat" "^2.2.8"
+    "@formatjs/intl-numberformat" "^4.2.10"
+    "@formatjs/intl-relativetimeformat" "^5.2.10"
+    "@formatjs/intl-utils" "^3.4.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/invariant" "^2.2.31"
+    hoist-non-react-statics "^3.3.2"
+    intl-format-cache "^4.2.42"
+    intl-messageformat "^8.4.0"
+    intl-messageformat-parser "^5.2.0"
+    shallow-equal "^1.2.1"
 
 react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
@@ -13982,7 +14041,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallow-equal@^1.1.0:
+shallow-equal@^1.1.0, shallow-equal@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==