diff --git a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx index 51c89faf427a..2f105a92c48d 100644 --- a/packages/account/src/Components/poi/status/unsupported/unsupported.tsx +++ b/packages/account/src/Components/poi/status/unsupported/unsupported.tsx @@ -107,7 +107,8 @@ const Unsupported = ({ ) { content = status_content; } - const onClick = () => { + + const onClickHandler = () => { if (manual?.status === AUTH_STATUS_CODES.VERIFIED || manual?.status === AUTH_STATUS_CODES.PENDING) { return onClickRedirectButton; } else if (manual?.status === AUTH_STATUS_CODES.EXPIRED) { @@ -121,7 +122,7 @@ const Unsupported = ({ status_description={content.description} status_title={content.title} > - {content.action_button?.(onClick(), from_platform.name)} + {content.action_button?.({ onClick: onClickHandler(), platform_name: from_platform.name })} ); } diff --git a/packages/account/src/Components/verification-status-action-button/verification-status-action-button.tsx b/packages/account/src/Components/verification-status-action-button/verification-status-action-button.tsx index 02ca7ca99f38..c8782f5ecd16 100644 --- a/packages/account/src/Components/verification-status-action-button/verification-status-action-button.tsx +++ b/packages/account/src/Components/verification-status-action-button/verification-status-action-button.tsx @@ -8,7 +8,7 @@ type TButtonLink = { }; type TButton = { - onClick?: () => void; + onClick?: React.MouseEventHandler; to?: never; }; diff --git a/packages/account/src/Helpers/utils.tsx b/packages/account/src/Helpers/utils.tsx index 52d03770ace6..bd560b001077 100644 --- a/packages/account/src/Helpers/utils.tsx +++ b/packages/account/src/Helpers/utils.tsx @@ -13,7 +13,7 @@ import { import { ResidenceList, GetAccountStatus } from '@deriv/api-types'; import { FormikValues } from 'formik'; import { getIDVDocuments } from '../Constants/idv-document-config'; -import { TServerError } from '../Types'; +import { TIDVErrorStatus, TServerError } from '../Types'; import { LANGUAGE_CODES } from '../Constants/onfido'; export const documentAdditionalError = ( @@ -265,7 +265,6 @@ export const validate = (errors: Record, values: T) => { }; }; -export type TIDVErrorStatus = typeof idv_error_statuses[keyof typeof idv_error_statuses]; export const verifyFields = (status: TIDVErrorStatus) => { switch (status) { case idv_error_statuses.poi_dob_mismatch: diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-configs.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-configs.tsx index 77a20c10a42c..f2a3bfd2f80f 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-configs.tsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-configs.tsx @@ -30,57 +30,22 @@ type TAuthStatus = { is_submitted?: boolean; }; -export const getPOAStatusMessages = ( - status: typeof AUTH_STATUS_CODES[keyof typeof AUTH_STATUS_CODES], - auth_status?: TAuthStatus, - should_show_redirect_btn?: boolean -) => { - const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO(); - - const pendingButton = (onClick?: () => void, platform_name?: string) => { - if (!auth_status?.needs_poi) { - if (should_show_redirect_btn) - return ( - - } - onClick={onClick} - /> - ); - if (!is_redirected_from_platform) { - return ( - } - /> - ); - } - } - if (auth_status?.needs_poi) { - return ( - } - /> - ); - } - return null; - }; - - const resubmitButton = (onClick?: () => void) => ( - } onClick={onClick} /> - ); +type TActionButtonProps = { + onClick?: React.MouseEventHandler; + platform_name?: string; + auth_status?: TAuthStatus; + should_show_redirect_btn?: boolean; + is_redirected_from_platform: boolean; +}; - const verifiedButton = (onClick?: () => void, platform_name?: string) => { - if (auth_status?.needs_poi) { - return ( - } - /> - ); - } +const createPendingButton = ({ + auth_status, + should_show_redirect_btn, + is_redirected_from_platform, + platform_name, + onClick, +}: TActionButtonProps) => { + if (!auth_status?.needs_poi) { if (should_show_redirect_btn) return ( ); } - return null; - }; + } + if (auth_status?.needs_poi) { + return ( + } + /> + ); + } + return null; +}; + +const createVerifiedButton = ({ + auth_status, + should_show_redirect_btn, + is_redirected_from_platform, + platform_name, + onClick, +}: TActionButtonProps) => { + if (auth_status?.needs_poi) { + return ( + } + /> + ); + } + if (should_show_redirect_btn) + return ( + } + onClick={onClick} + /> + ); + if (!is_redirected_from_platform) { + return ( + } + /> + ); + } + return null; +}; + +export const getPOAStatusMessages = ( + status: typeof AUTH_STATUS_CODES[keyof typeof AUTH_STATUS_CODES], + auth_status?: TAuthStatus, + should_show_redirect_btn?: boolean +) => { + const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO(); + + const pendingButton = (props: Pick) => + createPendingButton({ + ...props, + auth_status, + should_show_redirect_btn, + is_redirected_from_platform, + }); + + const resubmitButton = ({ onClick }: Pick) => ( + } onClick={onClick} /> + ); + + const verifiedButton = (props: Pick) => + createVerifiedButton({ ...props, auth_status, should_show_redirect_btn, is_redirected_from_platform }); const titles: Record = { expired: , @@ -152,7 +181,7 @@ export const getPOAStatusMessages = ( const action_buttons: Record< typeof status, - null | ((onClick?: () => void, platform_name?: string) => JSX.Element | null) + null | ((props: Pick) => JSX.Element | null) > = { expired: resubmitButton, none: null, diff --git a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx index 7140192eb89c..8b48c76ae7e7 100644 --- a/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx +++ b/packages/account/src/Sections/Verification/ProofOfAddress/proof-of-address-container.tsx @@ -156,7 +156,7 @@ const ProofOfAddressContainer = observer(() => { status_description={status_content.description} status_title={status_content.title} > - {status_content.action_button?.(buttonOnclick(), from_platform.name)} + {status_content.action_button?.({ onClick: buttonOnclick(), platform_name: from_platform.name })} ); }); diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/idv.tsx b/packages/account/src/Sections/Verification/ProofOfIdentity/idv.tsx index c1e028d4ff72..4235a796b319 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/idv.tsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/idv.tsx @@ -47,7 +47,7 @@ const Idv = ({ } }; - const onClick = () => (AUTH_STATUS_CODES.VERIFIED ? handleRequireSubmission : onClickRedirectButton); + const onClick = AUTH_STATUS_CODES.VERIFIED ? handleRequireSubmission : onClickRedirectButton; if ( [AUTH_STATUS_CODES.REJECTED, AUTH_STATUS_CODES.SUSPECTED, AUTH_STATUS_CODES.EXPIRED].some( @@ -64,7 +64,7 @@ const Idv = ({ status_description={status_content.description} status_title={status_content.title} > - {status_content.action_button?.(onClick(), from_platform.name)} + {status_content.action_button?.({ onClick, platform_name: from_platform.name })} ); }; diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido.jsx index 2e3c36327c44..b47c2dafd865 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/onfido.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/onfido.jsx @@ -86,7 +86,7 @@ const Onfido = ({ status_description={content.description} status_title={content.title} > - {content.action_button?.(onClick, from_platform.name)} + {content.action_button?.({ onClick, platform_name: from_platform.name })} ); default: diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-configs.tsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-configs.tsx index ab0df5336afa..53ed1c02612d 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-configs.tsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-configs.tsx @@ -6,10 +6,10 @@ import { isNavigationFromP2P, routes, idv_error_statuses, + TIDVErrorStatus, } from '@deriv/shared'; import { VerificationStatusActionButton } from '../../../Components/verification-status-action-button'; import { TAuthStatusCode } from '../../../Types/common.type'; -import { TIDVErrorStatus } from '../../../Helpers/utils'; export const submission_status_code = { selecting: 'selecting', @@ -27,13 +27,92 @@ type TAuthStatus = { needs_poa?: boolean; }; +type TAuthIDVStatus = TAuthStatus & { + mismatch_status?: TIDVErrorStatus | null; + is_already_attempted?: boolean; +}; + +type TActionButtonProps = { + onClick?: React.MouseEventHandler; + platform_name?: string; + auth_status?: TAuthIDVStatus; + is_from_external?: boolean; + should_show_redirect_btn?: boolean; +}; + +type TAuthUploadCompleteStatus = TAuthStatus & { + is_manual_upload?: boolean; +}; + +const createRejectedButton = ({ onClick }: { onClick?: React.MouseEventHandler }) => ( + } + onClick={onClick} + /> +); + +const createVerifiedButton = ({ + onClick, + platform_name, + auth_status, + is_from_external, + should_show_redirect_btn, +}: TActionButtonProps) => { + if (auth_status?.needs_poa && !is_from_external) { + return ( + } + /> + ); + } else if (should_show_redirect_btn) { + return ( + } + onClick={onClick} + /> + ); + } + return ( + } + /> + ); +}; + +const createPendingButton = ({ + onClick, + auth_status, + is_from_external, + platform_name, + should_show_redirect_btn, +}: TActionButtonProps) => { + if (auth_status?.needs_poa && !is_from_external) { + return ( + } + /> + ); + } else if (should_show_redirect_btn) { + return ( + } + onClick={onClick} + /> + ); + } + return null; +}; + export const getPOIStatusMessages = ( status: TAuthStatusCode, auth_status?: TAuthStatus, should_show_redirect_btn?: boolean, is_from_external?: boolean ) => { - const resubmitButton = (onClick?: () => void, platform_name?: string) => ( + const resubmitButton = ({ onClick, platform_name }: Pick) => ( } @@ -48,7 +127,7 @@ export const getPOIStatusMessages = ( ); - const verifiedButton = (onClick?: () => void, platform_name?: string) => { + const verifiedButton = ({ onClick, platform_name }: Pick) => { if (is_from_external) return null; if (auth_status?.needs_poa) { return ( @@ -119,7 +198,7 @@ export const getPOIStatusMessages = ( const action_buttons: Record< typeof status, - null | ((onClick?: () => void, platform_name?: string) => JSX.Element | null) + null | ((props: Pick) => JSX.Element | null) > = { none: null, pending: null, @@ -137,11 +216,6 @@ export const getPOIStatusMessages = ( }; }; -type TAuthIDVStatus = TAuthStatus & { - mismatch_status?: TIDVErrorStatus | null; - is_already_attempted?: boolean; -}; - export const getIDVStatusMessages = ( status: TAuthStatusCode, auth_status?: TAuthIDVStatus, @@ -149,64 +223,22 @@ export const getIDVStatusMessages = ( is_from_external?: boolean, is_mobile?: boolean ) => { - const rejectedButton = (onClick?: () => void) => ( - } - onClick={onClick} - /> - ); + const rejectedButton = (props: Pick) => createRejectedButton({ ...props }); + const verifiedButton = (props: Pick) => + createVerifiedButton({ ...props, auth_status, is_from_external, should_show_redirect_btn }); - const verifiedButton = (onClick?: () => void, platform_name?: string) => { - if (auth_status?.needs_poa && !is_from_external) { - return ( - } - /> - ); - } else if (should_show_redirect_btn) { - return ( - } - onClick={onClick} - /> - ); - } - return ( - } - /> - ); - }; + const pendingButton = (props: Pick) => + createPendingButton({ ...props, auth_status, is_from_external, should_show_redirect_btn }); - const pendingButton = (onClick?: () => void, platform_name?: string) => { - if (auth_status?.needs_poa && !is_from_external) { - return ( - } - /> - ); - } else if (should_show_redirect_btn) { - return ( - } - onClick={onClick} - /> - ); - } - return null; - }; - - const is_expired_or_failed_error = - auth_status?.mismatch_status === idv_error_statuses.poi_expired || - auth_status?.mismatch_status === idv_error_statuses.poi_failed; + const is_expired_or_failed_error = [idv_error_statuses.poi_expired, idv_error_statuses.poi_failed].some( + status => auth_status?.mismatch_status === status + ); - const is_mismatch_error = - auth_status?.mismatch_status === idv_error_statuses.poi_name_dob_mismatch || - auth_status?.mismatch_status === idv_error_statuses.poi_dob_mismatch || - auth_status?.mismatch_status === idv_error_statuses.poi_name_mismatch; + const is_mismatch_error = [ + idv_error_statuses.poi_name_dob_mismatch, + idv_error_statuses.poi_dob_mismatch, + idv_error_statuses.poi_name_mismatch, + ].some(status => auth_status?.mismatch_status === status); const getPendingHeaderText = () => { if (auth_status?.is_already_attempted) { @@ -286,7 +318,7 @@ export const getIDVStatusMessages = ( const action_buttons: Record< typeof status, - null | ((onClick?: () => void, platform_name?: string) => JSX.Element | null) + null | ((props: Pick) => JSX.Element | null) > = { none: null, pending: pendingButton, @@ -304,10 +336,6 @@ export const getIDVStatusMessages = ( }; }; -type TAuthUploadCompleteStatus = TAuthStatus & { - is_manual_upload?: boolean; -}; - export const getUploadCompleteStatusMessages = ( status: typeof AUTH_STATUS_CODES[keyof typeof AUTH_STATUS_CODES], auth_status?: TAuthUploadCompleteStatus, @@ -316,7 +344,7 @@ export const getUploadCompleteStatusMessages = ( ) => { const is_redirected_from_platform = isNavigationFromP2P() || isNavigationFromDerivGO(); - const pendingButton = (onClick?: () => void, platform_name?: string) => { + const pendingButton = ({ onClick, platform_name }: Pick) => { if (!auth_status?.needs_poa) { if (!is_from_external && should_show_redirect_btn) return ( @@ -330,7 +358,7 @@ export const getUploadCompleteStatusMessages = ( if (!is_redirected_from_platform) { return ( } /> ); @@ -400,7 +428,7 @@ export const getUploadCompleteStatusMessages = ( const action_buttons: Record< typeof status, - null | ((onClick?: () => void, platform_name?: string) => JSX.Element | null) + null | ((props: Pick) => JSX.Element | null) > = { expired: null, none: null, diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx index 46b5d1bcd08c..26de01983177 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-container.jsx @@ -241,7 +241,7 @@ const ProofOfIdentityContainer = observer( status_description={content.description} status_title={content.title} > - {content.action_button?.(onClick(), from_platform.name)} + {content.action_button?.({ onClick: onClick(), platform_name: from_platform.name })} ); } diff --git a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx index 0582fb802b95..1ea671f0d64a 100644 --- a/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx +++ b/packages/account/src/Sections/Verification/ProofOfIdentity/proof-of-identity-submission.jsx @@ -281,7 +281,7 @@ const POISubmission = observer( status_description={content.description} status_title={content.title} > - {content.action_button?.(onClickRedirectButton, from_platform.name)} + {content.action_button?.({ onClick: onClickRedirectButton, platform_name: from_platform.name })} ); } diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-configs.tsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-configs.tsx index 712187d1059d..0851e3e78345 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-configs.tsx +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership-configs.tsx @@ -4,7 +4,7 @@ import { POO_STATUSES } from './constants/constants'; import { VerificationStatusActionButton } from 'Components/verification-status-action-button'; export const getPOOStatusMessages = (status: typeof POO_STATUSES[keyof typeof POO_STATUSES]) => { - const resubmitButton = (onClick?: () => void) => ( + const resubmitButton = ({ onClick }: { onClick?: React.MouseEventHandler }) => ( } onClick={onClick} /> ); @@ -33,7 +33,10 @@ export const getPOOStatusMessages = (status: typeof POO_STATUSES[keyof typeof PO verified: 'IcPooVerified', }; - const action_buttons: Record void) => JSX.Element | null)> = { + const action_buttons: Record< + typeof status, + null | ((props: { onClick?: React.MouseEventHandler }) => JSX.Element | null) + > = { none: null, pending: null, rejected: resubmitButton, diff --git a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx index 9fdffb166805..efec3c9ab896 100644 --- a/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx +++ b/packages/account/src/Sections/Verification/ProofOfOwnership/proof-of-ownership.jsx @@ -72,7 +72,7 @@ export const ProofOfOwnership = observer(() => { status_description={status_content.description} status_title={status_content.title} > - {status_content.action_button?.(onTryAgain)} + {status_content.action_button?.({ onClick: onTryAgain })} ); }); diff --git a/packages/account/src/Types/common.type.ts b/packages/account/src/Types/common.type.ts index 40429a6d24ee..76d7ff59b2bc 100644 --- a/packages/account/src/Types/common.type.ts +++ b/packages/account/src/Types/common.type.ts @@ -2,7 +2,7 @@ import React from 'react'; import { Authorize, IdentityVerificationAddDocumentResponse } from '@deriv/api-types'; import { Redirect } from 'react-router-dom'; -import { AUTH_STATUS_CODES, Platforms } from '@deriv/shared'; +import { AUTH_STATUS_CODES, Platforms, idv_error_statuses } from '@deriv/shared'; export type TToken = { display_name: string; @@ -164,3 +164,5 @@ export type TServerError = { }; export type TAuthStatusCode = typeof AUTH_STATUS_CODES[keyof typeof AUTH_STATUS_CODES]; + +export type TIDVErrorStatus = typeof idv_error_statuses[keyof typeof idv_error_statuses];