From 05b9cfe4f7c7cd81afaf5d3c500fbf9e5d894f58 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 24 Nov 2021 10:59:42 -0700 Subject: [PATCH 1/7] dont run teardown on desktop --- src/components/Onfido/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Onfido/index.js b/src/components/Onfido/index.js index 0c3d0b885da2..edf98ee9fa2d 100644 --- a/src/components/Onfido/index.js +++ b/src/components/Onfido/index.js @@ -9,6 +9,7 @@ import variables from '../../styles/variables'; import colors from '../../styles/colors'; import fontWeightBold from '../../styles/fontWeight/bold'; import fontFamily from '../../styles/fontFamily'; +import getPlatform from '../../libs/getPlatform'; const propTypes = { ...withLocalizePropTypes, @@ -94,7 +95,7 @@ class Onfido extends React.Component { } componentWillUnmount() { - if (!this.onfidoOut) { + if (!this.onfidoOut || getPlatform() === 'desktop') { return; } From 55f6d4ce6fdbb3bc3c0d2f488101ed2023e44886 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 16:25:55 -0700 Subject: [PATCH 2/7] create base onfido component --- src/components/Onfido/BaseOnfido.js | 104 ++++++++++++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 src/components/Onfido/BaseOnfido.js diff --git a/src/components/Onfido/BaseOnfido.js b/src/components/Onfido/BaseOnfido.js new file mode 100644 index 000000000000..63ae8e679d12 --- /dev/null +++ b/src/components/Onfido/BaseOnfido.js @@ -0,0 +1,104 @@ +import './index.css'; +import lodashGet from 'lodash/get'; +import React from 'react'; +import * as OnfidoSDK from 'onfido-sdk-ui'; +import withLocalize, {withLocalizePropTypes} from '../withLocalize'; +import onfidoPropTypes from './onfidoPropTypes'; +import CONST from '../../CONST'; +import variables from '../../styles/variables'; +import colors from '../../styles/colors'; +import fontWeightBold from '../../styles/fontWeight/bold'; +import fontFamily from '../../styles/fontFamily'; + +const propTypes = { + ...withLocalizePropTypes, + ...onfidoPropTypes, +}; + +class Onfido extends React.Component { + componentDidMount() { + this.onfidoOut = OnfidoSDK.init({ + token: this.props.sdkToken, + containerId: CONST.ONFIDO.CONTAINER_ID, + customUI: { + fontFamilyTitle: `${fontFamily.GTA}, -apple-system, serif`, + fontFamilySubtitle: `${fontFamily.GTA}, -apple-system, serif`, + fontFamilyBody: `${fontFamily.GTA}, -apple-system, serif`, + fontSizeTitle: `${variables.fontSizeLarge}px`, + fontWeightTitle: fontWeightBold, + fontWeightSubtitle: 400, + fontSizeSubtitle: `${variables.fontSizeNormal}px`, + colorContentTitle: colors.dark, + colorContentSubtitle: colors.dark, + colorContentBody: colors.dark, + borderRadiusButton: `${variables.componentBorderRadius}px`, + colorBackgroundSurfaceModal: colors.white, + colorBorderDocTypeButton: colors.gray2, + colorBorderDocTypeButtonHover: colors.blue, + colorBackgroundButtonPrimary: colors.green, + colorBackgroundButtonPrimaryHover: colors.greenHover, + colorBackgroundButtonPrimaryActive: colors.greenHover, + colorBorderButtonPrimary: colors.green, + colorContentButtonSecondaryText: colors.dark, + colorBackgroundButtonSecondary: colors.gray2, + colorBackgroundButtonSecondaryHover: colors.gray3, + colorBackgroundButtonSecondaryActive: colors.gray3, + colorBorderButtonSecondary: colors.gray2, + colorBackgroundIcon: colors.white, + colorContentLinkTextHover: colors.white, + colorBorderLinkUnderline: colors.blue, + colorBackgroundLinkHover: colors.blue, + colorBackgroundLinkActive: colors.blue, + authAccentColor: colors.blue, + colorBackgroundInfoPill: colors.blue, + }, + steps: [ + { + type: CONST.ONFIDO.TYPE.DOCUMENT, + options: { + useLiveDocumentCapture: true, + forceCrossDevice: true, + showCountrySelection: false, + documentTypes: { + driving_licence: { + country: null, + }, + national_identity_card: { + country: null, + }, + residence_permit: { + country: null, + }, + passport: true, + }, + }, + }, + { + type: CONST.ONFIDO.TYPE.FACE, + options: { + requestedVariant: CONST.ONFIDO.VARIANT.VIDEO, + uploadFallback: false, + }, + }, + ], + smsNumberCountryCode: CONST.ONFIDO.SMS_NUMBER_COUNTRY_CODE.US, + showCountrySelection: false, + onComplete: this.props.onSuccess, + onError: (error) => { + const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR); + this.props.onError(errorMessage); + }, + onUserExit: this.props.onUserExit, + onModalRequestClose: () => {}, + }); + } + + render() { + return ( +
+ ); + } +} + +Onfido.propTypes = propTypes; +export default withLocalize(Onfido); From c37def14af00e992bf82e9553db34d0d6f21d9e2 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 16:26:42 -0700 Subject: [PATCH 3/7] create web onfido component --- src/components/Onfido/index.website.js | 35 ++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/components/Onfido/index.website.js diff --git a/src/components/Onfido/index.website.js b/src/components/Onfido/index.website.js new file mode 100644 index 000000000000..bfe0f30211de --- /dev/null +++ b/src/components/Onfido/index.website.js @@ -0,0 +1,35 @@ +import React, {Component} from 'react'; +import lodashGet from 'lodash/get'; +import BaseOnfido from './BaseOnfido'; +import onfidoPropTypes from './onfidoPropTypes'; + +class Onfido extends Component { + constructor(props) { + super(props); + this.baseOnfido = null; + } + + componentWillUnmount() { + const onfidoOut = lodashGet(this, 'baseOnfido.onfidoOut'); + if (!onfidoOut) { + return; + } + + onfidoOut.tearDown(); + } + + render() { + return ( + this.baseOnfido = e} + + // eslint-disable-next-line react/jsx-props-no-spreading + {...this.props} + /> + ); + } +} + +Onfido.propTypes = onfidoPropTypes; + +export default Onfido; \ No newline at end of file From 0f8c50d5530a6406611dac8f794fb204834894f4 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 16:27:18 -0700 Subject: [PATCH 4/7] create desktop onfido component --- src/components/Onfido/index.desktop.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/components/Onfido/index.desktop.js diff --git a/src/components/Onfido/index.desktop.js b/src/components/Onfido/index.desktop.js new file mode 100644 index 000000000000..614bca4c2250 --- /dev/null +++ b/src/components/Onfido/index.desktop.js @@ -0,0 +1,11 @@ +import BaseOnfido from './BaseOnfido'; +import onfidoPropTypes from './onfidoPropTypes'; + +// On desktop, we do not want to teardown onfido, because it causes a crash. +// See https://github.com/Expensify/App/issues/6082 +const Onfido = BaseOnfido; + +Onfido.propTypes = onfidoPropTypes; +Onfido.displayName = 'Onfido'; + +export default Onfido; \ No newline at end of file From fc70a96263180708b5f6c6d626de171e1c5b5346 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 16:34:01 -0700 Subject: [PATCH 5/7] fix style --- src/components/Onfido/index.desktop.js | 2 +- src/components/Onfido/index.website.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Onfido/index.desktop.js b/src/components/Onfido/index.desktop.js index 614bca4c2250..03f09c5b3499 100644 --- a/src/components/Onfido/index.desktop.js +++ b/src/components/Onfido/index.desktop.js @@ -8,4 +8,4 @@ const Onfido = BaseOnfido; Onfido.propTypes = onfidoPropTypes; Onfido.displayName = 'Onfido'; -export default Onfido; \ No newline at end of file +export default Onfido; diff --git a/src/components/Onfido/index.website.js b/src/components/Onfido/index.website.js index bfe0f30211de..a32eae6f1a0e 100644 --- a/src/components/Onfido/index.website.js +++ b/src/components/Onfido/index.website.js @@ -8,21 +8,20 @@ class Onfido extends Component { super(props); this.baseOnfido = null; } - + componentWillUnmount() { const onfidoOut = lodashGet(this, 'baseOnfido.onfidoOut'); if (!onfidoOut) { return; } - + onfidoOut.tearDown(); } - + render() { return ( this.baseOnfido = e} - // eslint-disable-next-line react/jsx-props-no-spreading {...this.props} /> @@ -32,4 +31,4 @@ class Onfido extends Component { Onfido.propTypes = onfidoPropTypes; -export default Onfido; \ No newline at end of file +export default Onfido; From 2c578572a9d256d454e3e86b2faa3def2744695e Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 16:39:09 -0700 Subject: [PATCH 6/7] remove index.js --- src/components/Onfido/index.js | 113 --------------------------------- 1 file changed, 113 deletions(-) delete mode 100644 src/components/Onfido/index.js diff --git a/src/components/Onfido/index.js b/src/components/Onfido/index.js deleted file mode 100644 index edf98ee9fa2d..000000000000 --- a/src/components/Onfido/index.js +++ /dev/null @@ -1,113 +0,0 @@ -import './index.css'; -import lodashGet from 'lodash/get'; -import React from 'react'; -import * as OnfidoSDK from 'onfido-sdk-ui'; -import withLocalize, {withLocalizePropTypes} from '../withLocalize'; -import onfidoPropTypes from './onfidoPropTypes'; -import CONST from '../../CONST'; -import variables from '../../styles/variables'; -import colors from '../../styles/colors'; -import fontWeightBold from '../../styles/fontWeight/bold'; -import fontFamily from '../../styles/fontFamily'; -import getPlatform from '../../libs/getPlatform'; - -const propTypes = { - ...withLocalizePropTypes, - ...onfidoPropTypes, -}; - -class Onfido extends React.Component { - componentDidMount() { - this.onfidoOut = OnfidoSDK.init({ - token: this.props.sdkToken, - containerId: CONST.ONFIDO.CONTAINER_ID, - customUI: { - fontFamilyTitle: `${fontFamily.GTA}, -apple-system, serif`, - fontFamilySubtitle: `${fontFamily.GTA}, -apple-system, serif`, - fontFamilyBody: `${fontFamily.GTA}, -apple-system, serif`, - fontSizeTitle: `${variables.fontSizeLarge}px`, - fontWeightTitle: fontWeightBold, - fontWeightSubtitle: 400, - fontSizeSubtitle: `${variables.fontSizeNormal}px`, - colorContentTitle: colors.dark, - colorContentSubtitle: colors.dark, - colorContentBody: colors.dark, - borderRadiusButton: `${variables.componentBorderRadius}px`, - colorBackgroundSurfaceModal: colors.white, - colorBorderDocTypeButton: colors.gray2, - colorBorderDocTypeButtonHover: colors.blue, - colorBackgroundButtonPrimary: colors.green, - colorBackgroundButtonPrimaryHover: colors.greenHover, - colorBackgroundButtonPrimaryActive: colors.greenHover, - colorBorderButtonPrimary: colors.green, - colorContentButtonSecondaryText: colors.dark, - colorBackgroundButtonSecondary: colors.gray2, - colorBackgroundButtonSecondaryHover: colors.gray3, - colorBackgroundButtonSecondaryActive: colors.gray3, - colorBorderButtonSecondary: colors.gray2, - colorBackgroundIcon: colors.white, - colorContentLinkTextHover: colors.white, - colorBorderLinkUnderline: colors.blue, - colorBackgroundLinkHover: colors.blue, - colorBackgroundLinkActive: colors.blue, - authAccentColor: colors.blue, - colorBackgroundInfoPill: colors.blue, - }, - steps: [ - { - type: CONST.ONFIDO.TYPE.DOCUMENT, - options: { - useLiveDocumentCapture: true, - forceCrossDevice: true, - showCountrySelection: false, - documentTypes: { - driving_licence: { - country: null, - }, - national_identity_card: { - country: null, - }, - residence_permit: { - country: null, - }, - passport: true, - }, - }, - }, - { - type: CONST.ONFIDO.TYPE.FACE, - options: { - requestedVariant: CONST.ONFIDO.VARIANT.VIDEO, - uploadFallback: false, - }, - }, - ], - smsNumberCountryCode: CONST.ONFIDO.SMS_NUMBER_COUNTRY_CODE.US, - showCountrySelection: false, - onComplete: this.props.onSuccess, - onError: (error) => { - const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR); - this.props.onError(errorMessage); - }, - onUserExit: this.props.onUserExit, - onModalRequestClose: () => {}, - }); - } - - componentWillUnmount() { - if (!this.onfidoOut || getPlatform() === 'desktop') { - return; - } - - this.onfidoOut.tearDown(); - } - - render() { - return ( -
- ); - } -} - -Onfido.propTypes = propTypes; -export default withLocalize(Onfido); From 4b421cfb39aed6810bac884f8f02354cadfbf25a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Thu, 2 Dec 2021 18:12:57 -0700 Subject: [PATCH 7/7] rename BaseOnfido --- src/components/Onfido/{BaseOnfido.js => BaseOnfidoWeb.js} | 0 src/components/Onfido/index.desktop.js | 4 ++-- src/components/Onfido/index.website.js | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) rename src/components/Onfido/{BaseOnfido.js => BaseOnfidoWeb.js} (100%) diff --git a/src/components/Onfido/BaseOnfido.js b/src/components/Onfido/BaseOnfidoWeb.js similarity index 100% rename from src/components/Onfido/BaseOnfido.js rename to src/components/Onfido/BaseOnfidoWeb.js diff --git a/src/components/Onfido/index.desktop.js b/src/components/Onfido/index.desktop.js index 03f09c5b3499..e455eaf78d32 100644 --- a/src/components/Onfido/index.desktop.js +++ b/src/components/Onfido/index.desktop.js @@ -1,9 +1,9 @@ -import BaseOnfido from './BaseOnfido'; +import BaseOnfidoWeb from './BaseOnfidoWeb'; import onfidoPropTypes from './onfidoPropTypes'; // On desktop, we do not want to teardown onfido, because it causes a crash. // See https://github.com/Expensify/App/issues/6082 -const Onfido = BaseOnfido; +const Onfido = BaseOnfidoWeb; Onfido.propTypes = onfidoPropTypes; Onfido.displayName = 'Onfido'; diff --git a/src/components/Onfido/index.website.js b/src/components/Onfido/index.website.js index a32eae6f1a0e..c5909f73fa9c 100644 --- a/src/components/Onfido/index.website.js +++ b/src/components/Onfido/index.website.js @@ -1,6 +1,6 @@ import React, {Component} from 'react'; import lodashGet from 'lodash/get'; -import BaseOnfido from './BaseOnfido'; +import BaseOnfidoWeb from './BaseOnfidoWeb'; import onfidoPropTypes from './onfidoPropTypes'; class Onfido extends Component { @@ -20,7 +20,7 @@ class Onfido extends Component { render() { return ( - this.baseOnfido = e} // eslint-disable-next-line react/jsx-props-no-spreading {...this.props}