diff --git a/src/components/DeviceInteraction/DeviceInteractionStep.js b/src/components/DeviceInteraction/DeviceInteractionStep.js index e462ebab..5fe9a077 100644 --- a/src/components/DeviceInteraction/DeviceInteractionStep.js +++ b/src/components/DeviceInteraction/DeviceInteractionStep.js @@ -10,7 +10,6 @@ import { SpinnerContainer, IconContainer, SuccessContainer, - ErrorDescContainer, ErrorContainer, } from './components' @@ -20,10 +19,7 @@ export type Step = { desc?: React$Node, icon: React$Node, run?: Object => Promise | { promise: Promise, unsubscribe: void => any }, - render?: ( - { onSuccess: Object => any, onFail: Error => void, onRetry: void => void }, - any, - ) => React$Node, + render?: ({ onSuccess: Object => any, onFail: Error => void }, any) => React$Node, minMs?: number, } @@ -38,10 +34,8 @@ type Props = { isSuccess: boolean, isPassed: boolean, step: Step, - error: ?Error, onSuccess: (any, Step) => any, onFail: (Error, Step) => any, - onRetry: void => any, data: any, } @@ -66,13 +60,13 @@ class DeviceInteractionStep extends PureComponent< } componentDidUpdate(prevProps: Props) { - const { isActive, error } = this.props + const { isActive, isError } = this.props const { status } = this.state const didActivated = isActive && !prevProps.isActive const didDeactivated = !isActive && prevProps.isActive const stillActivated = isActive && prevProps.isActive - const didResetError = !error && !!prevProps.error + const didResetError = !isError && !!prevProps.isError if (didActivated && status !== 'running') { this.run() @@ -163,8 +157,6 @@ class DeviceInteractionStep extends PureComponent< isError, isPassed, step, - error, - onRetry, data, } = this.props @@ -191,14 +183,8 @@ class DeviceInteractionStep extends PureComponent< )} {step.desc && step.desc} {CustomRender && ( - + )} - {isError && error && }
diff --git a/src/components/DeviceInteraction/components.js b/src/components/DeviceInteraction/components.js index 884649ad..dfce363d 100644 --- a/src/components/DeviceInteraction/components.js +++ b/src/components/DeviceInteraction/components.js @@ -92,6 +92,8 @@ export const ErrorContainer = ({ isVisible }: { isVisible: boolean }) => ( ) const ErrorRetryContainer = styled(Box).attrs({ + bg: rgba(colors.alertRed, 0.1), + borderRadius: 1, grow: 1, color: 'alertRed', cursor: 'pointer', @@ -118,6 +120,7 @@ export const ErrorDescContainer = ({ }) => ( - + {error.message || 'Failed'} diff --git a/src/components/DeviceInteraction/index.js b/src/components/DeviceInteraction/index.js index 2375ebbf..1759c41d 100644 --- a/src/components/DeviceInteraction/index.js +++ b/src/components/DeviceInteraction/index.js @@ -1,40 +1,43 @@ // @flow import React, { PureComponent } from 'react' -import styled from 'styled-components' import { delay } from 'helpers/promise' import Box from 'components/base/Box' +import Space from 'components/base/Space' + import DeviceInteractionStep from './DeviceInteractionStep' import type { Step } from './DeviceInteractionStep' +import { ErrorDescContainer } from './components' + +type Props = { + steps: Step[], + onSuccess?: any => void, + onFail?: any => void, + waitBeforeSuccess?: number, + + // when true and there is an error, display the error + retry button + shouldRenderRetry?: boolean, +} + +type State = { + stepIndex: number, + isSuccess: boolean, + error: ?Error, + data: Object, +} + const INITIAL_STATE = { stepIndex: 0, isSuccess: false, - showSuccess: false, error: null, data: {}, } -class DeviceInteraction extends PureComponent< - { - steps: Step[], - onSuccess?: any => void, - onFail?: any => void, - renderSuccess?: any => any, - waitBeforeSuccess?: number, - }, - { - stepIndex: number, - isSuccess: boolean, - // used to be able to display the last check for a small amount of time - showSuccess: boolean, - error: ?Error, - data: Object, - }, -> { +class DeviceInteraction extends PureComponent { state = INITIAL_STATE componentWillUnmount() { @@ -58,12 +61,11 @@ class DeviceInteraction extends PureComponent< if (!waitBeforeSuccess) { onSuccess && onSuccess(data) } - this.setState({ isSuccess: true, data, showSuccess: !waitBeforeSuccess }) + this.setState({ isSuccess: true, data }) if (waitBeforeSuccess) { await delay(waitBeforeSuccess) if (this._unmounted) return onSuccess && onSuccess(data) - this.setState({ showSuccess: true }) } } else { this.setState({ stepIndex: stepIndex + 1, data }) @@ -82,39 +84,40 @@ class DeviceInteraction extends PureComponent< } render() { - const { steps, renderSuccess, waitBeforeSuccess: _waitBeforeSuccess, ...props } = this.props - const { stepIndex, error, isSuccess, data, showSuccess } = this.state + const { steps, shouldRenderRetry, ...props } = this.props + const { stepIndex, error, isSuccess, data } = this.state return ( - - {isSuccess && showSuccess && renderSuccess - ? renderSuccess(data) - : steps.map((step, i) => { - const isError = !!error && i === stepIndex - return ( - - ) - })} - + + {steps.map((step, i) => { + const isError = !!error && i === stepIndex + return ( + + ) + })} + {error && + shouldRenderRetry && ( + + + + + )} + ) } } -const DeviceInteractionContainer = styled(Box).attrs({})`` - export default DeviceInteraction diff --git a/src/components/GenuineCheck.js b/src/components/GenuineCheck.js index 3528b50e..d673f5d7 100644 --- a/src/components/GenuineCheck.js +++ b/src/components/GenuineCheck.js @@ -101,7 +101,7 @@ class GenuineCheck extends PureComponent { } render() { - const { onSuccess } = this.props + const { onSuccess, ...props } = this.props const steps = [ { id: 'device', @@ -146,6 +146,7 @@ class GenuineCheck extends PureComponent { steps={steps} onSuccess={onSuccess} onFail={this.handleFail} + {...props} /> ) } diff --git a/src/components/ManagerPage/ManagerGenuineCheck.js b/src/components/ManagerPage/ManagerGenuineCheck.js index d637db48..27d34841 100644 --- a/src/components/ManagerPage/ManagerGenuineCheck.js +++ b/src/components/ManagerPage/ManagerGenuineCheck.js @@ -21,7 +21,8 @@ class ManagerGenuineCheck extends PureComponent { render() { const { t, onSuccess } = this.props return ( - + + { - { - console.log(`fail`) - }} - onUnavailable={() => { - console.log(`unavailable`) - }} - /> + ) } diff --git a/src/components/ManagerPage/index.js b/src/components/ManagerPage/index.js index a8e3ca65..634dce65 100644 --- a/src/components/ManagerPage/index.js +++ b/src/components/ManagerPage/index.js @@ -22,9 +22,11 @@ type State = { class ManagerPage extends PureComponent { state = { isGenuine: null, + device: null, + deviceInfo: null, } - handleSuccessGenuine = ({ device, deviceInfo }) => { + handleSuccessGenuine = ({ device, deviceInfo }: { device: Device, deviceInfo: DeviceInfo }) => { this.setState({ isGenuine: true, device, deviceInfo }) }