[HUMAN App] refactor: change KYC to IDV (#3368)

dnechay · web-flow · commit 004868230bee · 2025-05-27T13:00:46.000+03:00
diff --git a/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx b/packages/apps/human-app/frontend/src/modules/governance-banner/components/governance-banner.tsx
@@ -5,13 +5,13 @@ import { useTranslation } from 'react-i18next';
 import { env } from '@/shared/env';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { useWorkerKycStatus } from '@/modules/worker/profile/hooks';
+import { useWorkerIdentityVerificationStatus } from '@/modules/worker/profile/hooks';
 import { useActiveProposalQuery } from '../hooks/use-active-proposal-query';
 
 export function GovernanceBanner() {
   const { t } = useTranslation();
   const { data, isLoading, isError } = useActiveProposalQuery();
-  const { kycApproved } = useWorkerKycStatus();
+  const { isVerificationCompleted } = useWorkerIdentityVerificationStatus();
   const { colorPalette } = useColorMode();
   const [timeRemaining, setTimeRemaining] = useState('00:00:00');
   const isMobile = useIsMobile('lg');
@@ -43,7 +43,7 @@ export function GovernanceBanner() {
     };
   }, [data?.deadline]);
 
-  if (!kycApproved || isLoading || isError || !data) {
+  if (!isVerificationCompleted || isLoading || isError || !data) {
     return null;
   }
 
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/hcaptcha-labeling/hcaptcha-labeling.page.tsx
@@ -11,6 +11,7 @@ import { Counter } from '@/shared/components/ui/counter';
 import { getErrorMessageForError } from '@/shared/errors';
 import { getTomorrowDate } from '@/shared/helpers/date';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
+import { useWorkerIdentityVerificationStatus } from '@/modules/worker/profile/hooks';
 import { useHCaptchaLabelingNotifications } from '@/modules/worker/hooks/use-hcaptcha-labeling-notifications';
 import { useColorMode } from '@/shared/contexts/color-mode';
 import { onlyDarkModeColor } from '@/shared/styles/dark-color-palette';
@@ -29,6 +30,7 @@ export function HcaptchaLabelingPage() {
   const { colorPalette, isDarkMode } = useColorMode();
   const captchaRef = useRef<HCaptcha>(null);
   const { user } = useAuthenticatedUser();
+  const { isVerificationCompleted } = useWorkerIdentityVerificationStatus();
   const { onSuccess, onError } = useHCaptchaLabelingNotifications();
   const statsColor = isDarkMode
     ? onlyDarkModeColor.additionalTextColor
@@ -79,7 +81,7 @@ export function HcaptchaLabelingPage() {
     solveHCaptchaMutation({ token });
   };
 
-  if (user.kyc_status !== 'approved') {
+  if (!isVerificationCompleted) {
     return <Navigate to={routerPaths.worker.profile} replace />;
   }
 
diff --git a/packages/apps/human-app/frontend/src/modules/worker/hooks/use-idv-notification.tsx b/packages/apps/human-app/frontend/src/modules/worker/hooks/use-idv-notification.tsx
@@ -5,7 +5,7 @@ import {
 import { getErrorMessageForError } from '@/shared/errors';
 import type { ResponseError } from '@/shared/types/global.type';
 
-export function useKycErrorNotifications() {
+export function useIdvErrorNotifications() {
   const { showNotification } = useNotification();
 
   return (error: ResponseError) => {
diff --git a/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx b/packages/apps/human-app/frontend/src/modules/worker/jobs-discovery/jobs-discovery.page.tsx
@@ -2,15 +2,15 @@ import Paper from '@mui/material/Paper';
 import Grid from '@mui/material/Grid';
 import { Navigate } from 'react-router-dom';
 import { useIsMobile } from '@/shared/hooks/use-is-mobile';
-import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
+import { useWorkerIdentityVerificationStatus } from '@/modules/worker/profile/hooks';
 import { routerPaths } from '@/router/router-paths';
 import { OraclesTableJobTypesSelect, OraclesTable } from './components';
 
 export function JobsDiscoveryPage() {
   const isMobile = useIsMobile();
-  const { user } = useAuthenticatedUser();
+  const { isVerificationCompleted } = useWorkerIdentityVerificationStatus();
 
-  if (user.kyc_status !== 'approved') {
+  if (!isVerificationCompleted) {
     return <Navigate to={routerPaths.worker.profile} replace />;
   }
 
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/index.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/index.ts
@@ -1,2 +1,2 @@
-export * from './start-kyc-btn';
+export * from './start-idv-btn';
 export * from './register-address-btn';
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/start-idv-btn.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/start-idv-btn.tsx
@@ -0,0 +1,26 @@
+import { t } from 'i18next';
+import { Button } from '@/shared/components/ui/button';
+import { useStartIdv } from '../../hooks';
+
+export function StartIdvBtn() {
+  const { isIdvAlreadyInProgress, idvStartIsPending, startIdv } = useStartIdv();
+
+  if (isIdvAlreadyInProgress) {
+    return (
+      <Button disabled fullWidth variant="contained">
+        {t('worker.profile.identityVerificationInProgress')}
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      fullWidth
+      loading={idvStartIsPending}
+      onClick={startIdv}
+      variant="contained"
+    >
+      {t('worker.profile.completeIdentityVerification')}
+    </Button>
+  );
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/start-kyc-btn.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/buttons/start-kyc-btn.tsx
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/identity-verification-control.tsx
@@ -0,0 +1,21 @@
+import { useTranslation } from 'react-i18next';
+import { useWorkerIdentityVerificationStatus } from '../hooks';
+import { StartIdvBtn } from './buttons';
+import { DoneLabel, ErrorLabel } from './status-labels';
+
+export function IdentityVerificationControl() {
+  const { t } = useTranslation();
+  const { status } = useWorkerIdentityVerificationStatus();
+
+  if (status === 'approved') {
+    return (
+      <DoneLabel>{t('worker.profile.identityVerificationStatus')}</DoneLabel>
+    );
+  } else if (status === 'declined') {
+    return (
+      <ErrorLabel>{t('worker.profile.identityVerificationStatus')}</ErrorLabel>
+    );
+  }
+
+  return <StartIdvBtn />;
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/kyc-verification-control.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/kyc-verification-control.tsx
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-actions.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/profile-actions.tsx
@@ -1,12 +1,12 @@
 import Grid from '@mui/material/Grid';
-import { KycVerificationControl } from './kyc-verification-control';
+import { IdentityVerificationControl } from './identity-verification-control';
 import { WalletConnectionControl } from './wallet-connection-control';
 
 export function ProfileActions() {
   return (
     <Grid container flexDirection="column" gap="1rem">
       <Grid>
-        <KycVerificationControl />
+        <IdentityVerificationControl />
       </Grid>
 
       <Grid>
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connection-control.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/components/wallet-connection-control.tsx
@@ -3,15 +3,15 @@ import { Grid } from '@mui/material';
 import { Button } from '@/shared/components/ui/button';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
 import { useWalletConnect } from '@/shared/contexts/wallet-connect';
-import { useWorkerKycStatus } from '../hooks';
+import { useWorkerIdentityVerificationStatus } from '../hooks';
 import { DoneLabel } from './status-labels';
 import { WalletConnectDone } from './wallet-connect-done';
 import { RegisterAddressBtn } from './buttons';
 
 export function WalletConnectionControl() {
   const { t } = useTranslation();
   const { user } = useAuthenticatedUser();
-  const { kycApproved } = useWorkerKycStatus();
+  const { isVerificationCompleted } = useWorkerIdentityVerificationStatus();
   const { isConnected, openModal } = useWalletConnect();
 
   const { wallet_address: walletAddress } = user;
@@ -25,7 +25,7 @@ export function WalletConnectionControl() {
     );
   }
 
-  if (kycApproved && isConnected) {
+  if (isVerificationCompleted && isConnected) {
     return (
       <Grid>
         <RegisterAddressBtn />
@@ -36,7 +36,7 @@ export function WalletConnectionControl() {
 
   return (
     <Button
-      disabled={!kycApproved}
+      disabled={!isVerificationCompleted}
       fullWidth
       onClick={() => void openModal()}
       variant="contained"
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/index.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/index.ts
@@ -1,2 +1,2 @@
 export * from './use-worker-profile-status';
-export * from './use-start-kyc';
+export * from './use-start-idv';
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv-mutation.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv-mutation.ts
@@ -2,18 +2,18 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
 import * as profileService from '../services/profile.service';
 
-export function useKycStartMutation() {
+export function useIdvStartMutation() {
   const queryClient = useQueryClient();
   const { user } = useAuthenticatedUser();
 
   return useMutation({
-    mutationFn: async () => profileService.startKyc(),
+    mutationFn: async () => profileService.startIdv(),
     onError: () => {
       void queryClient.invalidateQueries();
     },
     onSuccess: () => {
       void queryClient.invalidateQueries();
     },
-    mutationKey: ['kycStart', user.email],
+    mutationKey: ['idvStart', user.email],
   });
 }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-idv.ts
@@ -0,0 +1,50 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useIdvErrorNotifications } from '@/modules/worker/hooks/use-idv-notification';
+import { ApiClientError } from '@/api';
+import { useIdvStartMutation } from './use-start-idv-mutation';
+
+export function useStartIdv() {
+  const [isIdvAlreadyInProgress, setIsIdvAlreadyInProgress] = useState(false);
+  const onError = useIdvErrorNotifications();
+  const {
+    data: idvStartData,
+    isPending: idvStartIsPending,
+    isSuccess: idvStarted,
+    isError: idvStartFailed,
+    mutate: idvStartMutation,
+    error: idvStartMutationError,
+  } = useIdvStartMutation();
+
+  const startIdv = useCallback(() => {
+    idvStartMutation();
+  }, [idvStartMutation]);
+
+  useEffect(() => {
+    if (idvStartFailed) {
+      if (
+        idvStartMutationError instanceof ApiClientError &&
+        idvStartMutationError.status === 400
+      ) {
+        setIsIdvAlreadyInProgress(true);
+        return;
+      }
+      onError(idvStartMutationError);
+    }
+
+    if (idvStarted && idvStartData.url) {
+      window.location.href = idvStartData.url;
+    }
+  }, [
+    idvStartData?.url,
+    idvStartFailed,
+    idvStarted,
+    idvStartMutationError,
+    onError,
+  ]);
+
+  return {
+    isIdvAlreadyInProgress,
+    idvStartIsPending,
+    startIdv,
+  };
+}
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-kyc.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-start-kyc.ts
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-worker-profile-status.tsx b/packages/apps/human-app/frontend/src/modules/worker/profile/hooks/use-worker-profile-status.tsx
@@ -1,16 +1,11 @@
 import { useAuthenticatedUser } from '@/modules/auth/hooks/use-authenticated-user';
-import { type WorkerProfileStatus } from '../types';
+import { type WorkerItentityVerificationStatus } from '../types';
 
-export function useWorkerKycStatus(): WorkerProfileStatus {
+export function useWorkerIdentityVerificationStatus(): WorkerItentityVerificationStatus {
   const { user } = useAuthenticatedUser();
 
-  const kycApproved = user.kyc_status === 'approved';
-  const kycDeclined = user.kyc_status === 'declined';
-  const kycToComplete = !(kycApproved || kycDeclined);
-
   return {
-    kycApproved,
-    kycDeclined,
-    kycToComplete,
+    isVerificationCompleted: user.kyc_status === 'approved',
+    status: user.kyc_status ?? 'none',
   };
 }
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/services/profile.service.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/services/profile.service.ts
diff --git a/packages/apps/human-app/frontend/src/modules/worker/profile/types/profile-types.ts b/packages/apps/human-app/frontend/src/modules/worker/profile/types/profile-types.ts
diff --git a/packages/apps/human-app/frontend/src/shared/i18n/en.json b/packages/apps/human-app/frontend/src/shared/i18n/en.json

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-export * from './start-kyc-btn';`
	`1`	`+export * from './start-idv-btn';`
`2`	`2`	`export * from './register-address-btn';`