WA-238 Fix onClick reset fn hook in Stepper component after tx is finished

src/components/Stepper/Controls/index.jsx

@@ -1,34 +1,6 @@
 // @flow
 import * as React from 'react'
 import Button from '~/components/layout/Button'
-import Link from '~/components/layout/Link'
-
-type NextButtonProps = {
-  text: string,
-  disabled: boolean,
-}
-
-const NextButton = ({ text, disabled }: NextButtonProps) => (
-  <Button
-    variant="raised"
-    color="primary"
-    type="submit"
-    disabled={disabled}
-  >
-    {text}
-  </Button>
-)
-
-type GoProps = {
-  title: string,
-  to: string,
-}
-
-const GoButton = ({ title, to }: GoProps) => (
-  <Link to={to}>
-    <NextButton text={title} disabled={false} />
-  </Link>
-)
 
 type ControlProps = {
   next: string,
@@ -48,34 +20,37 @@ const ControlButtons = ({
     >
       Back
     </Button>
-    <NextButton text={next} disabled={submitting} />
+    <Button
+      variant="raised"
+      color="primary"
+      type="submit"
+      disabled={submitting}
+    >
+      {next}
+    </Button>
   </React.Fragment>
 )
 
 type Props = {
   finishedTx: boolean,
+  finishedButton: React$Node,
   onPrevious: () => void,
   firstPage: boolean,
   lastPage: boolean,
   submitting: boolean,
-  goTitle: string,
-  goPath: string,
 }
 
 const Controls = ({
-  finishedTx, onPrevious, firstPage, lastPage, submitting, goTitle, goPath,
+  finishedTx, finishedButton, onPrevious, firstPage, lastPage, submitting,
 }: Props) => (
-  <React.Fragment>
+  finishedTx
-    { finishedTx
+    ? <React.Fragment>{finishedButton}</React.Fragment>
-      ? <GoButton title={goTitle} to={goPath} />
+    : <ControlButtons
-      : <ControlButtons
+      submitting={submitting}
-        submitting={submitting}
+      next={lastPage ? 'Finish' : 'Next'}
-        next={lastPage ? 'Finish' : 'Next'}
+      firstPage={firstPage}
-        firstPage={firstPage}
+      onPrevious={onPrevious}
-        onPrevious={onPrevious}
+    />
-      />
-    }
-  </React.Fragment>
 )
 
 export default Controls

src/components/Stepper/index.jsx

@@ -4,6 +4,7 @@ import { withStyles } from 'material-ui/styles'
 import * as React from 'react'
 import type { FormApi } from 'react-final-form'
 import GnoForm from '~/components/forms/GnoForm'
+import Button from '~/components/layout/Button'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
 import Controls from './Controls'
@@ -12,12 +13,12 @@ export { default as Step } from './Step'
 
 type Props = {
   classes: Object,
-  goTitle: string,
-  goPath: string,
   steps: string[],
   finishedTransaction: boolean,
+  finishedButton: React$Node,
   initialValues?: Object,
   children: React$Node,
+  onReset?: () => void,
   onSubmit: (values: Object, form: FormApi, callback: ?(errors: ?Object) => void) => ?Object | Promise<?Object> | void,
 }
 
@@ -33,6 +34,13 @@ type PageProps = {
 class GnoStepper extends React.PureComponent<Props, State> {
   static Page = ({ children }: PageProps) => children
 
+  static FinishButton = ({
+    component, to, title, ...props
+  }) => (
+    <Button component={component} to={to} variant="raised" color="primary" {...props}>
+      {title}
+    </Button>
+  )
   constructor(props: Props) {
     super(props)
 
@@ -42,6 +50,17 @@ class GnoStepper extends React.PureComponent<Props, State> {
     }
   }
 
+  onReset = () => {
+    const resetCallback = this.props.onReset
+    if (resetCallback) {
+      resetCallback()
+    }
+    this.setState(() => ({
+      page: 0,
+      values: this.props.initialValues || {},
+    }))
+  }
+
   getActivePageFrom = (pages: React$Node) => {
     const activePageProps = React.Children.toArray(pages)[this.state.page].props
     const { children, ...props } = activePageProps
@@ -80,11 +99,12 @@ class GnoStepper extends React.PureComponent<Props, State> {
 
   render() {
     const {
-      steps, children, finishedTransaction, goTitle, goPath, classes,
+      steps, children, finishedTransaction, finishedButton, classes,
     } = this.props
     const { page, values } = this.state
     const activePage = this.getActivePageFrom(children)
     const isLastPage = page === steps.length - 1
+    const finished = React.cloneElement(React.Children.only(finishedButton), { onClick: this.onReset })
 
     return (
       <React.Fragment>
@@ -108,11 +128,10 @@ class GnoStepper extends React.PureComponent<Props, State> {
                 <Controls
                   submitting={submitting}
                   finishedTx={finishedTransaction}
+                  finishedButton={finished}
                   onPrevious={this.previous}
                   firstPage={page === 0}
                   lastPage={isLastPage}
-                  goTitle={goTitle}
-                  goPath={goPath}
                 />
               </Col>
             </Row>

src/routes/open/components/Layout.jsx

@@ -6,6 +6,7 @@ import Confirmation from '~/routes/open/components/FormConfirmation'
 import Review from '~/routes/open/components/ReviewInformation'
 import SafeFields, { safeFieldsValidation } from '~/routes/open/components/SafeForm'
 import { SAFELIST_ADDRESS } from '~/routes/routes'
+import Link from '~/components/layout/Link'
 
 const getSteps = () => [
   'Fill Safe Form', 'Review Information', 'Deploy it',
@@ -29,16 +30,16 @@ const Layout = ({
 }: Props) => {
   const steps = getSteps()
   const initialValues = initialValuesFrom(userAccount)
+  const finishedButton = <Stepper.FinishButton title="VISIT SAFS" component={Link} to={SAFELIST_ADDRESS} />
 
   return (
     <React.Fragment>
       { provider
         ? (
           <Stepper
-            goPath={SAFELIST_ADDRESS}
+            finishedButton={finishedButton}
-            goTitle="VISIT SAFES"
-            onSubmit={onCallSafeContractSubmit}
             finishedTransaction={!!safeAddress}
+            onSubmit={onCallSafeContractSubmit}
             steps={steps}
             initialValues={initialValues}
           >

src/routes/safe/component/Withdrawn/index.jsx

@@ -2,7 +2,6 @@
 import * as React from 'react'
 import { connect } from 'react-redux'
 import Stepper from '~/components/Stepper'
-import { SAFELIST_ADDRESS } from '~/routes/routes'
 import { sleep } from '~/utils/timer'
 import { type DailyLimit } from '~/routes/safe/store/model/dailyLimit'
 import actions, { type Actions } from './actions'
@@ -24,7 +23,7 @@ type State = {
   done: boolean,
 }
 
-export const SEE_TXS_BUTTON_TEXT = 'DONE'
+export const SEE_TXS_BUTTON_TEXT = 'RESET'
 
 class Withdrawn extends React.Component<Props, State> {
   state = {
@@ -45,19 +44,24 @@ class Withdrawn extends React.Component<Props, State> {
     }
   }
 
+  onReset = () => {
+    this.setState({ done: false })
+  }
+
   render() {
-    const { dailyLimit, safeAddress } = this.props
+    const { dailyLimit } = this.props
     const { done } = this.state
     const steps = getSteps()
+    const finishedButton = <Stepper.FinishButton title={SEE_TXS_BUTTON_TEXT} />
 
     return (
       <React.Fragment>
         <Stepper
-          goPath={`${SAFELIST_ADDRESS}/${safeAddress}`}
-          goTitle={SEE_TXS_BUTTON_TEXT}
-          onSubmit={this.onWithdrawn}
           finishedTransaction={done}
+          finishedButton={finishedButton}
+          onSubmit={this.onWithdrawn}
           steps={steps}
+          onReset={this.onReset}
         >
           <Stepper.Page limit={dailyLimit.get('value')} spentToday={dailyLimit.get('spentToday')}>
             { WithdrawnForm }