-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20142 from Expensify/hayata-funcCompMigration
Migrate BaseOnfidoWeb.js to functional component
- Loading branch information
Showing
1 changed file
with
128 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,134 +1,151 @@ | ||
| import _ from 'underscore'; | ||
| import './index.css'; | ||
| import lodashGet from 'lodash/get'; | ||
| import React from 'react'; | ||
| import React, {useEffect, forwardRef} 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 themeColors from '../../styles/themes/default'; | ||
| import fontWeightBold from '../../styles/fontWeight/bold'; | ||
| import fontFamily from '../../styles/fontFamily'; | ||
| import Log from '../../libs/Log'; | ||
| import useLocalize from '../../hooks/useLocalize'; | ||
|
|
||
| const propTypes = { | ||
| ...withLocalizePropTypes, | ||
| ...onfidoPropTypes, | ||
| }; | ||
|
|
||
| class Onfido extends React.Component { | ||
| componentDidMount() { | ||
| this.onfidoOut = OnfidoSDK.init({ | ||
| token: this.props.sdkToken, | ||
| containerId: CONST.ONFIDO.CONTAINER_ID, | ||
| useMemoryHistory: true, | ||
| customUI: { | ||
| fontFamilyTitle: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontFamilySubtitle: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontFamilyBody: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontSizeTitle: `${variables.fontSizeLarge}px`, | ||
| fontWeightTitle: fontWeightBold, | ||
| fontWeightSubtitle: 400, | ||
| fontSizeSubtitle: `${variables.fontSizeNormal}px`, | ||
| colorContentTitle: themeColors.text, | ||
| colorContentSubtitle: themeColors.text, | ||
| colorContentBody: themeColors.text, | ||
| borderRadiusButton: `${variables.buttonBorderRadius}px`, | ||
| colorBackgroundSurfaceModal: themeColors.appBG, | ||
| colorBorderDocTypeButton: themeColors.border, | ||
| colorBorderDocTypeButtonHover: themeColors.link, | ||
| colorBackgroundButtonPrimary: themeColors.success, | ||
| colorBackgroundButtonPrimaryHover: themeColors.successHover, | ||
| colorBackgroundButtonPrimaryActive: themeColors.successHover, | ||
| colorBorderButtonPrimary: themeColors.success, | ||
| colorContentButtonSecondaryText: themeColors.text, | ||
| colorBackgroundButtonSecondary: themeColors.border, | ||
| colorBackgroundButtonSecondaryHover: themeColors.icon, | ||
| colorBackgroundButtonSecondaryActive: themeColors.icon, | ||
| colorBorderButtonSecondary: themeColors.border, | ||
| colorBackgroundIcon: themeColors.transparent, | ||
| colorContentLinkTextHover: themeColors.appBG, | ||
| colorBorderLinkUnderline: themeColors.link, | ||
| colorBackgroundLinkHover: themeColors.link, | ||
| colorBackgroundLinkActive: themeColors.link, | ||
| authAccentColor: themeColors.link, | ||
| colorBackgroundInfoPill: themeColors.link, | ||
| colorBackgroundSelector: themeColors.appBG, | ||
| colorBackgroundDocTypeButton: themeColors.success, | ||
| colorBackgroundDocTypeButtonHover: themeColors.successHover, | ||
| colorBackgroundButtonIconHover: themeColors.transparent, | ||
| colorBackgroundButtonIconActive: themeColors.transparent, | ||
| }, | ||
| steps: [ | ||
| { | ||
| type: CONST.ONFIDO.TYPE.DOCUMENT, | ||
| options: { | ||
| useLiveDocumentCapture: true, | ||
| forceCrossDevice: true, | ||
| hideCountrySelection: true, | ||
| country: 'USA', | ||
| uploadFallback: false, | ||
| documentTypes: { | ||
| driving_licence: { | ||
| country: 'USA', | ||
| }, | ||
| passport: true, | ||
| function initializeOnfido({sdkToken, onSuccess, onError, onUserExit, preferredLocale, translate}) { | ||
| OnfidoSDK.init({ | ||
| token: sdkToken, | ||
| containerId: CONST.ONFIDO.CONTAINER_ID, | ||
| useMemoryHistory: true, | ||
| customUI: { | ||
| fontFamilyTitle: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontFamilySubtitle: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontFamilyBody: `${fontFamily.EXP_NEUE}, -apple-system, serif`, | ||
| fontSizeTitle: `${variables.fontSizeLarge}px`, | ||
| fontWeightTitle: fontWeightBold, | ||
| fontWeightSubtitle: 400, | ||
| fontSizeSubtitle: `${variables.fontSizeNormal}px`, | ||
| colorContentTitle: themeColors.text, | ||
| colorContentSubtitle: themeColors.text, | ||
| colorContentBody: themeColors.text, | ||
| borderRadiusButton: `${variables.buttonBorderRadius}px`, | ||
| colorBackgroundSurfaceModal: themeColors.appBG, | ||
| colorBorderDocTypeButton: themeColors.border, | ||
| colorBorderDocTypeButtonHover: themeColors.link, | ||
| colorBackgroundButtonPrimary: themeColors.success, | ||
| colorBackgroundButtonPrimaryHover: themeColors.successHover, | ||
| colorBackgroundButtonPrimaryActive: themeColors.successHover, | ||
| colorBorderButtonPrimary: themeColors.success, | ||
| colorContentButtonSecondaryText: themeColors.text, | ||
| colorBackgroundButtonSecondary: themeColors.border, | ||
| colorBackgroundButtonSecondaryHover: themeColors.icon, | ||
| colorBackgroundButtonSecondaryActive: themeColors.icon, | ||
| colorBorderButtonSecondary: themeColors.border, | ||
| colorBackgroundIcon: themeColors.transparent, | ||
| colorContentLinkTextHover: themeColors.appBG, | ||
| colorBorderLinkUnderline: themeColors.link, | ||
| colorBackgroundLinkHover: themeColors.link, | ||
| colorBackgroundLinkActive: themeColors.link, | ||
| authAccentColor: themeColors.link, | ||
| colorBackgroundInfoPill: themeColors.link, | ||
| colorBackgroundSelector: themeColors.appBG, | ||
| colorBackgroundDocTypeButton: themeColors.success, | ||
| colorBackgroundDocTypeButtonHover: themeColors.successHover, | ||
| colorBackgroundButtonIconHover: themeColors.transparent, | ||
| colorBackgroundButtonIconActive: themeColors.transparent, | ||
| }, | ||
| steps: [ | ||
| { | ||
| type: CONST.ONFIDO.TYPE.DOCUMENT, | ||
| options: { | ||
| useLiveDocumentCapture: true, | ||
| forceCrossDevice: true, | ||
| hideCountrySelection: true, | ||
| country: 'USA', | ||
| uploadFallback: false, | ||
| documentTypes: { | ||
| driving_licence: { | ||
| country: 'USA', | ||
| }, | ||
| 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: (data) => { | ||
| if (_.isEmpty(data)) { | ||
| Log.warn('Onfido completed with no data'); | ||
| } | ||
| this.props.onSuccess(data); | ||
| }, | ||
| onError: (error) => { | ||
| const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR); | ||
| const errorType = lodashGet(error, 'type'); | ||
| Log.hmmm('Onfido error', {errorType, errorMessage}); | ||
| this.props.onError(errorMessage); | ||
| }, | ||
| onUserExit: (userExitCode) => { | ||
| Log.hmmm('Onfido user exits the flow', {userExitCode}); | ||
| this.props.onUserExit(userExitCode); | ||
| }, | ||
| onModalRequestClose: () => { | ||
| Log.hmmm('Onfido user closed the modal'); | ||
| { | ||
| type: CONST.ONFIDO.TYPE.FACE, | ||
| options: { | ||
| requestedVariant: CONST.ONFIDO.VARIANT.VIDEO, | ||
| uploadFallback: false, | ||
| }, | ||
| }, | ||
| language: { | ||
| // We need to use ES_ES as locale key because the key `ES` is not a valid config key for Onfido | ||
| locale: this.props.preferredLocale === CONST.LOCALES.ES ? CONST.LOCALES.ES_ES_ONFIDO : this.props.preferredLocale, | ||
| ], | ||
| smsNumberCountryCode: CONST.ONFIDO.SMS_NUMBER_COUNTRY_CODE.US, | ||
| showCountrySelection: false, | ||
| onComplete: (data) => { | ||
| if (_.isEmpty(data)) { | ||
| Log.warn('Onfido completed with no data'); | ||
| } | ||
| onSuccess(data); | ||
| }, | ||
| onError: (error) => { | ||
| const errorMessage = lodashGet(error, 'message', CONST.ERROR.UNKNOWN_ERROR); | ||
| const errorType = lodashGet(error, 'type'); | ||
| Log.hmmm('Onfido error', {errorType, errorMessage}); | ||
| onError(errorMessage); | ||
| }, | ||
| onUserExit: (userExitCode) => { | ||
| Log.hmmm('Onfido user exits the flow', {userExitCode}); | ||
| onUserExit(userExitCode); | ||
| }, | ||
| onModalRequestClose: () => { | ||
| Log.hmmm('Onfido user closed the modal'); | ||
| }, | ||
| language: { | ||
| // We need to use ES_ES as locale key because the key `ES` is not a valid config key for Onfido | ||
| locale: preferredLocale === CONST.LOCALES.ES ? CONST.LOCALES.ES_ES_ONFIDO : preferredLocale, | ||
|
|
||
| // Provide a custom phrase for the back button so that the first letter is capitalized, | ||
| // and translate the phrase while we're at it. See the issue and documentation for more context. | ||
| // https://github.com/Expensify/App/issues/17244 | ||
| // https://documentation.onfido.com/sdk/web/#custom-languages | ||
| phrases: { | ||
| 'generic.back': this.props.translate('common.back'), | ||
| }, | ||
| // Provide a custom phrase for the back button so that the first letter is capitalized, | ||
| // and translate the phrase while we're at it. See the issue and documentation for more context. | ||
| // https://github.com/Expensify/App/issues/17244 | ||
| // https://documentation.onfido.com/sdk/web/#custom-languages | ||
| phrases: { | ||
| 'generic.back': translate('common.back'), | ||
| }, | ||
| }); | ||
| }, | ||
| }); | ||
| } | ||
|
|
||
| function logOnFidoEvent(event) { | ||
| Log.hmmm('Receiving Onfido analytic event', event.detail); | ||
| } | ||
|
|
||
| window.addEventListener('userAnalyticsEvent', (event) => { | ||
| Log.hmmm('Receiving Onfido analytic event', event.detail); | ||
| const Onfido = forwardRef((props, ref) => { | ||
| const {preferredLocale, translate} = useLocalize(); | ||
|
|
||
| useEffect(() => { | ||
| initializeOnfido({ | ||
| sdkToken: props.sdkToken, | ||
| onSuccess: props.onSuccess, | ||
| onError: props.onError, | ||
| onUserExit: props.onUserExit, | ||
| preferredLocale, | ||
| translate, | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return <div id={CONST.ONFIDO.CONTAINER_ID} />; | ||
| } | ||
| } | ||
| window.addEventListener('userAnalyticsEvent', logOnFidoEvent); | ||
| return () => window.removeEventListener('userAnalyticsEvent', logOnFidoEvent); | ||
| // Onfido should be initialized only once on mount | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div | ||
| id={CONST.ONFIDO.CONTAINER_ID} | ||
| ref={ref} | ||
| /> | ||
| ); | ||
| }); | ||
|
|
||
| Onfido.propTypes = propTypes; | ||
| export default withLocalize(Onfido); | ||
| Onfido.displayName = 'Onfido'; | ||
| Onfido.propTypes = onfidoPropTypes; | ||
| export default Onfido; |