Merge pull request deriv-com#8 from oskar-binary/unsaved_changes

Unsaved changes

packages/trader/src/Modules/Account/Components/icon-message-content.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
-const IconMessageContent = ({ children, icon, message }) => (
+const IconMessageContent = ({ children, icon, message, text }) => (
     <div className='account-management__message-content'>
         <div className='account-management__message-icon'>
             {icon}
         </div>
         <div className='account-management__message'>
             {message}
         </div>
+        <div className='account-management__text'>
+            {text}
+        </div>
         {children}
     </div>
 );

packages/trader/src/Modules/Account/Components/leave-confirm.jsx

@@ -0,0 +1,74 @@
+import React                  from 'react';
+import { withRouter }         from 'react-router-dom';
+import { FormikConsumer }     from 'formik';
+import { Button }             from 'deriv-components';
+import { localize }           from 'App/i18n';
+import IconUnsavedChanges     from 'Assets/AccountManagement/icon-unsaved-changes.svg';
+import IconMessageContent     from '../Components/icon-message-content';
+
+/**
+ * Blocks routing if Formik form is dirty
+ * Has to be a child of <Formik> for FormikConsumer to work
+ */
+class TransitionBlocker extends React.Component {
+    state = { show: false }
+
+    componentDidMount() { 
+        this.unblock = this.props.history.block(next_location => {
+            if (this.props.dirty) {
+                this.props.onDirty(false);
+                this.setState({
+                    show: true,
+                    next_location,
+                });
+            }
+            return !this.props.dirty;
+        });
+
+    }
+
+    leave = () => {
+        const { pathname } = this.state.next_location;
+        this.unblock();
+        this.props.history.push(pathname);
+    }
+
+    back = () => {
+        this.setState({ nextLocation: null, show: false });
+        this.props.onDirty(true);
+    }
+
+    componentWillUnmount() {
+        this.unblock();
+    }
+
+    render() {
+        const { show } = this.state;
+
+        return (
+            <>
+                {show &&
+                    <>
+                        <IconMessageContent
+                            message={localize('You have unsaved changes')}
+                            text={localize('Are you sure you want to discard changes and leave this page?')}
+                            icon={<IconUnsavedChanges />}
+                        >
+                            <div className='account-management-flex-wrapper'>
+                                <Button type='button' onClick={this.back}>{localize('Cancel')}</Button>
+                                <Button type='button' onClick={this.leave}>{localize('Leave')}</Button>
+                            </div>
+                        </IconMessageContent>
+                    </>
+                }
+            </>
+        )
+    }
+}
+const TransitionBlockerWithRouter = withRouter(TransitionBlocker);
+
+export const LeaveConfirm = ({ onDirty }) => (
+    <FormikConsumer>
+        {formik => <TransitionBlockerWithRouter onDirty={onDirty} dirty={formik.dirty && formik.submitCount === 0}/>}
+    </FormikConsumer>
+);