feat: handle kyc declined status (#2801)

Author: dnechay

packages/apps/human-app/frontend/.eslintrc.cjs

@@ -34,6 +34,7 @@ module.exports = {
     // allow imports from material react table library
     camelcase: ['error', { allow: ['MRT_'] }],
     'react/jsx-pascal-case': ['error', { ignore: ['MRT_'] }],
+    'react/jsx-no-leaked-render': 'off',
     '@typescript-eslint/restrict-template-expressions': [
       'error',
       {

packages/apps/human-app/frontend/src/i18n/en.json

@@ -196,6 +196,7 @@
       "KYCInProgress": "KYC in progress",
       "confirmEmail": "Confirm email",
       "kycCompleted": "KYC Completed",
+      "kycDeclined": "KYC Declined",
       "walletAddressMessage": "This address is the wallet address where you will receive payments for completing tasks.",
       "connectWallet": "Connect Wallet",
       "walletConnected": "Wallet Connected ",

packages/apps/human-app/frontend/src/pages/worker/profile/error-label.tsx

@@ -0,0 +1,20 @@
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import CancelIcon from '@mui/icons-material/Cancel';
+
+interface ErrorLabelProps {
+  children: string | React.ReactElement;
+}
+
+export function ErrorLabel({ children }: ErrorLabelProps) {
+  if (typeof children === 'string') {
+    return (
+      <Grid alignItems="center" container gap="0.5rem" padding="0.5rem 0">
+        <Typography variant="buttonLarge">{children}</Typography>
+        <CancelIcon color="error" fontSize="small" />
+      </Grid>
+    );
+  }
+
+  return children;
+}

packages/apps/human-app/frontend/src/pages/worker/profile/profile-actions.tsx

@@ -12,6 +12,7 @@ import { RegisterAddressBtn } from '@/pages/worker/profile/register-address-btn'
 import { DoneLabel } from '@/pages/worker/profile/done-label';
 import { useRegisterAddressNotifications } from '@/hooks/use-register-address-notifications';
 import { useRegisterAddressMutation } from '@/api/services/worker/use-register-address';
+import { ErrorLabel } from './error-label';
 // import { RegisterAddressOnChainButton } from '@/pages/worker/profile/register-address-on-chain-btn';
 
 export function ProfileActions() {
@@ -38,6 +39,8 @@ export function ProfileActions() {
   const { t } = useTranslation();
   const emailVerified = user.status === 'active';
   const kycApproved = user.kyc_status === 'approved';
+  const kycDeclined = user.kyc_status === 'declined';
+  const kycToComplete = !(kycApproved || kycDeclined);
 
   const getConnectWalletBtn = () => {
     switch (true) {
@@ -87,11 +90,13 @@ export function ProfileActions() {
   return (
     <Grid container flexDirection="column" gap="1rem">
       <Grid>
-        {kycApproved ? (
+        {kycApproved && (
           <DoneLabel>{t('worker.profile.kycCompleted')}</DoneLabel>
-        ) : (
-          <StartKycButton />
         )}
+        {kycDeclined && (
+          <ErrorLabel>{t('worker.profile.kycDeclined')}</ErrorLabel>
+        )}
+        {kycToComplete && <StartKycButton />}
       </Grid>
       <Grid>{getConnectWalletBtn()}</Grid>
       {kycApproved && !user.wallet_address && isWalletConnected ? (