Refacto ManagerPage to use GenuineCheck component

src/components/GenuineCheck.js

@@ -63,16 +63,13 @@ class GenuineCheck extends PureComponent<Props> {
 
   checkGenuineInteractionHandler = async ({
     device,
-    infos,
+    deviceInfo,
   }: {
     device: Device,
-    infos: DeviceInfo,
+    deviceInfo: DeviceInfo,
   }) => {
     const res = await getIsGenuine
-      .send({
-        devicePath: device.path,
-        deviceInfo: infos,
-      })
+      .send({ devicePath: device.path, deviceInfo })
       .pipe(timeout(GENUINE_TIMEOUT))
       .toPromise()
     const isGenuine = res === '0000'
@@ -106,7 +103,7 @@ class GenuineCheck extends PureComponent<Props> {
         run: this.connectInteractionHandler,
       },
       {
-        id: 'infos',
+        id: 'deviceInfo',
         title: (
           <Trans i18nKey="deviceConnect:dashboard.open" parent="div">
             {'Navigate to the '}

src/components/ManagerPage/ManagerGenuineCheck.js

@@ -0,0 +1,53 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
+
+import { i } from 'helpers/staticPath'
+
+import GenuineCheck from 'components/GenuineCheck'
+import Box from 'components/base/Box'
+import Space from 'components/base/Space'
+import Text from 'components/base/Text'
+
+type Props = {
+  t: T,
+  onSuccess: void => void,
+}
+
+class ManagerGenuineCheck extends PureComponent<Props> {
+  render() {
+    const { t, onSuccess } = this.props
+    return (
+      <Box align="center" justify="center" sticky style={{ marginRight: 80 }}>
+        <Box align="center" style={{ maxWidth: 460 }}>
+          <img
+            src={i('logos/connectDevice.png')}
+            alt="connect your device"
+            style={{ marginBottom: 30, maxWidth: 362, width: '100%' }}
+          />
+          <Text ff="Museo Sans|Regular" fontSize={7} color="black" style={{ marginBottom: 10 }}>
+            {t('app:manager.device.title')}
+          </Text>
+          <Text ff="Museo Sans|Light" fontSize={5} color="grey" align="center">
+            {t('app:manager.device.desc')}
+          </Text>
+        </Box>
+        <Space of={40} />
+        <GenuineCheck
+          onSuccess={onSuccess}
+          onFail={() => {
+            console.log(`fail`)
+          }}
+          onUnavailable={() => {
+            console.log(`unavailable`)
+          }}
+        />
+      </Box>
+    )
+  }
+}
+
+export default translate()(ManagerGenuineCheck)

src/components/ManagerPage/index.js

@@ -1,52 +1,48 @@
 // @flow
-/* eslint-disable react/jsx-no-literals */ // FIXME: remove
 
 import React, { PureComponent } from 'react'
+import invariant from 'invariant'
 
 import type { Device } from 'types/common'
 import type { DeviceInfo } from 'helpers/devices/getDeviceInfo'
 
-import Workflow from 'components/Workflow'
-import WorkflowWithIcon from 'components/Workflow/WorkflowWithIcon'
 import Dashboard from './Dashboard'
-import FlashMcu from './FlashMcu'
+// import FlashMcu from './FlashMcu'
 
-type Error = {
-  message: string,
-  stack: string,
+import ManagerGenuineCheck from './ManagerGenuineCheck'
+
+type Props = {}
+
+type State = {
+  isGenuine: ?boolean,
+  device: ?Device,
+  deviceInfo: ?DeviceInfo,
 }
 
-class ManagerPage extends PureComponent<*, *> {
+class ManagerPage extends PureComponent<Props, State> {
+  state = {
+    isGenuine: null,
+  }
+
+  handleSuccessGenuine = ({ device, deviceInfo }) => {
+    this.setState({ isGenuine: true, device, deviceInfo })
+  }
+
   render() {
-    return (
-      <Workflow
-        renderFinalUpdate={(device: Device, deviceInfo: DeviceInfo) => (
-          <p>UPDATE FINAL FIRMARE (TEMPLATE + ACTION WIP) {deviceInfo.isOSU}</p>
-        )}
-        renderMcuUpdate={(device: Device, deviceInfo: DeviceInfo) => (
-          <FlashMcu device={device} deviceInfo={deviceInfo} />
-        )}
-        renderDashboard={(device: Device, deviceInfo: DeviceInfo) => (
-          <Dashboard device={device} deviceInfo={deviceInfo} />
-        )}
-        renderDefault={(
-          device: ?Device,
-          deviceInfo: ?DeviceInfo,
-          isGenuine: ?boolean,
-          errors: {
-            dashboardError: ?Error,
-            genuineError: ?Error,
-          },
-        ) => (
-          <WorkflowWithIcon
-            device={device}
-            deviceInfo={deviceInfo}
-            errors={errors}
-            isGenuine={isGenuine}
-          />
-        )}
-      />
-    )
+    const { isGenuine, device, deviceInfo } = this.state
+
+    if (!isGenuine) {
+      return <ManagerGenuineCheck onSuccess={this.handleSuccessGenuine} />
+    }
+
+    invariant(device, 'Inexistant device considered genuine')
+    invariant(deviceInfo, 'Inexistant device infos for genuine device')
+
+    // TODO
+    // renderFinalUpdate
+    // renderMcuUpdate
+
+    return <Dashboard device={device} deviceInfo={deviceInfo} />
   }
 }