Release: develop -> main

package.json

@@ -12,8 +12,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@dfx.swiss/react": "^1.3.0-beta.247",
-    "@dfx.swiss/react-components": "^1.3.0-beta.247",
+    "@dfx.swiss/react": "^1.3.0-beta.250",
+    "@dfx.swiss/react-components": "^1.3.0-beta.250",
     "@ledgerhq/hw-app-btc": "^6.24.1",
     "@ledgerhq/hw-app-eth": "^6.33.7",
     "@ledgerhq/hw-transport-webhid": "^6.27.19",
@@ -59,6 +59,7 @@
     "react-qr-code": "^2.0.11",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
+    "reactflow": "^11.11.4",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "tronweb": "^6.1.1",

src/App.tsx

@@ -59,6 +59,8 @@ const ComplianceKycFilesScreen = lazy(() => import('./screens/compliance-kyc-fil
 const ComplianceKycFilesDetailsScreen = lazy(() => import('./screens/compliance-kyc-files-details.screen'));
 const ComplianceKycStatsScreen = lazy(() => import('./screens/compliance-kyc-stats.screen'));
 const ComplianceTransactionListScreen = lazy(() => import('./screens/compliance-transaction-list.screen'));
+const ComplianceKycStepScreen = lazy(() => import('./screens/compliance-kyc-step.screen'));
+const ComplianceRecommendationGraphScreen = lazy(() => import('./screens/compliance-recommendation-graph.screen'));
 const RealunitScreen = lazy(() => import('./screens/realunit.screen'));
 const RealunitHoldersScreen = lazy(() => import('./screens/realunit-holders.screen'));
 const RealunitQuotesScreen = lazy(() => import('./screens/realunit-quotes.screen'));
@@ -333,6 +335,14 @@ export const Routes = [
         path: 'compliance/user/:id',
         element: withSuspense(<ComplianceUserScreen />),
       },
+      {
+        path: 'compliance/user/:id/kyc-step/:stepId',
+        element: withSuspense(<ComplianceKycStepScreen />),
+      },
+      {
+        path: 'compliance/recommendations/:id',
+        element: withSuspense(<ComplianceRecommendationGraphScreen />),
+      },
       {
         path: 'compliance/bank-tx/:id/return',
         element: withSuspense(<ComplianceBankTxReturnScreen />),

src/__tests__/labels.test.ts

@@ -64,6 +64,16 @@ jest.mock('@dfx.swiss/react', () => ({
   TransactionFailureReason: {},
   PaymentQuoteStatus: {},
   FileType: {},
+  PhoneCallTime: {
+    H_9_TO_10: 'H9To10',
+    H_10_TO_11: 'H10To11',
+    H_11_TO_12: 'H11To12',
+    H_12_TO_13: 'H12To13',
+    H_13_TO_14: 'H13To14',
+    H_14_TO_15: 'H14To15',
+    H_15_TO_16: 'H15To16',
+    H_9_TO_16: 'H9To16',
+  },
 }));
 
 import { toPaymentStateLabel, PaymentMethodLabels, LimitLabels, addressLabel } from '../config/labels';

src/config/labels.ts

@@ -5,6 +5,7 @@ import {
   InvestmentDate,
   Limit,
   PaymentQuoteStatus,
+  PhoneCallTime,
   Session,
   SupportIssueReason,
   SupportIssueType,
@@ -172,3 +173,16 @@ export function addressLabel(wallet: UserAddress | Session): string {
     ? custodyLabel
     : wallet.address ?? '';
 }
+
+// --- VERIFICATION CALL --- //
+export const PhoneCallTimeLabels = {
+  [PhoneCallTime.H_9_TO_10]: '09:00 - 10:00',
+  [PhoneCallTime.H_10_TO_11]: '10:00 - 11:00',
+  [PhoneCallTime.H_11_TO_12]: '11:00 - 12:00',
+  [PhoneCallTime.H_12_TO_13]: '12:00 - 13:00',
+  [PhoneCallTime.H_13_TO_14]: '13:00 - 14:00',
+  [PhoneCallTime.H_14_TO_15]: '14:00 - 15:00',
+  [PhoneCallTime.H_15_TO_16]: '15:00 - 16:00',
+  [PhoneCallTime.H_9_TO_16]: '09:00 - 16:00',
+};
+

src/hooks/anchor.hook.ts

@@ -0,0 +1,17 @@
+import { RefObject, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+export function useAnchor(anchorName: string, ref: RefObject<HTMLElement>, isReady = true): void {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const anchor = searchParams.get('a');
+
+  useEffect(() => {
+    if (anchor === anchorName && ref.current && isReady) {
+      setTimeout(() => {
+        ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        searchParams.delete('a');
+        setSearchParams(searchParams, { replace: true });
+      }, 100);
+    }
+  }, [anchor, anchorName, isReady]);
+}

src/hooks/compliance.hook.ts

@@ -92,12 +92,57 @@ export interface ComplianceUserData {
   sellRoutes: SellRouteInfo[];
 }
 
+export interface RecommendationGraphNode {
+  id: number;
+  firstname?: string;
+  surname?: string;
+  kycStatus?: string;
+  kycLevel?: number;
+  tradeApprovalDate?: Date;
+}
+
+export interface RecommendationGraphEdge {
+  id: number;
+  recommenderId: number;
+  recommendedId: number;
+  method: string;
+  type: string;
+  isConfirmed?: boolean;
+  confirmationDate?: Date;
+  created: Date;
+}
+
+export interface RecommendationGraph {
+  nodes: RecommendationGraphNode[];
+  edges: RecommendationGraphEdge[];
+  rootId: number;
+}
+
+export interface RecommendationUserInfo {
+  id: number;
+  firstname?: string;
+  surname?: string;
+}
+
+export interface RecommendationEntry {
+  id: number;
+  recommended: RecommendationUserInfo;
+  isConfirmed?: boolean;
+  confirmationDate?: Date;
+  created: Date;
+}
+
 export interface KycStepInfo {
   id: number;
   name: string;
   type?: string;
   status: string;
   sequenceNumber: number;
+  result?: string;
+  comment?: string;
+  recommender?: RecommendationUserInfo;
+  recommended?: RecommendationUserInfo;
+  allRecommendations?: RecommendationEntry[];
   created: Date;
 }
 
@@ -291,6 +336,13 @@ export function useCompliance() {
     });
   }
 
+  async function getRecommendationGraph(userDataId: number): Promise<RecommendationGraph> {
+    return call<RecommendationGraph>({
+      url: `support/recommendation-graph/${userDataId}`,
+      method: 'GET',
+    });
+  }
+
   return useMemo(
     () => ({
       search,
@@ -302,6 +354,7 @@ export function useCompliance() {
       getKycFileList,
       getKycFileStats,
       getTransactionList,
+      getRecommendationGraph,
     }),
     [call],
   );

src/screens/account.screen.tsx

@@ -27,13 +27,13 @@ import {
   StyledDataTableExpandableRow,
   StyledDataTableRow,
   StyledDropdown,
+  StyledIconButton,
   StyledInput,
   StyledLoadingSpinner,
-  StyledIconButton,
   StyledVerticalStack,
 } from '@dfx.swiss/react-components';
 import copy from 'copy-to-clipboard';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { RecommendationsSection } from 'src/components/account/recommendations-section';
 import { KycStatus } from 'src/components/kyc-status';
@@ -42,8 +42,9 @@ import { addressLabel } from 'src/config/labels';
 import { Urls } from 'src/config/urls';
 import { useLayoutContext } from 'src/contexts/layout.context';
 import { useWindowContext } from 'src/contexts/window.context';
-import { useKycHelper } from 'src/hooks/kyc-helper.hook';
+import { useAnchor } from 'src/hooks/anchor.hook';
 import { useUserGuard } from 'src/hooks/guard.hook';
+import { useKycHelper } from 'src/hooks/kyc-helper.hook';
 import { useLayoutOptions } from 'src/hooks/layout-config.hook';
 import { useNavigation } from 'src/hooks/navigation.hook';
 import { blankedAddress, downloadPdfFromString, sortAddressesByBlockchain, url } from 'src/util/utils';
@@ -99,10 +100,12 @@ export default function AccountScreen(): JSX.Element {
   const [isPdfLoading, setIsPdfLoading] = useState(false);
   const [pdfError, setPdfError] = useState<string>();
   const [showRecommendationModal, setShowRecommendationModal] = useState(false);
-
   const [isDataLoading, setIsDataLoading] = useState(true);
   const [pdfBlockchains, setPdfBlockchains] = useState<Blockchain[]>([]);
 
+  const recommendationsRef = useRef<HTMLHeadingElement>(null);
+  useAnchor('recommendation', recommendationsRef, !isUserLoading && !isDataLoading);
+
   const isKycLevel50 = user && user.kyc.level >= 50;
 
   useUserGuard('/login');
@@ -302,18 +305,18 @@ export default function AccountScreen(): JSX.Element {
   const annualVolumeSum = annualVolumeItems?.reduce((acc, item) => acc + item.value, 0);
 
   const title = showPdfModal
-      ? translate('screens/home', 'PDF Download Address Report')
-      : showRecommendationModal
-        ? translate('screens/recommendation', 'Create Invitation')
-        : isEmbedded
-          ? translate('screens/home', 'DFX services')
-          : translate('screens/home', 'Account');
+    ? translate('screens/home', 'PDF Download Address Report')
+    : showRecommendationModal
+      ? translate('screens/recommendation', 'Create Invitation')
+      : isEmbedded
+        ? translate('screens/home', 'DFX services')
+        : translate('screens/home', 'Account');
   const hasBackButton = (canClose && !isEmbedded) || showPdfModal || showRecommendationModal;
   const onBack = showPdfModal
-      ? closePdfModal
-      : showRecommendationModal
-        ? () => setShowRecommendationModal(false)
-        : undefined;
+    ? closePdfModal
+    : showRecommendationModal
+      ? () => setShowRecommendationModal(false)
+      : undefined;
   const image = 'https://dfx.swiss/images/app/berge.jpg';
 
   useLayoutOptions({ title, backButton: hasBackButton, onBack });
@@ -338,31 +341,47 @@ export default function AccountScreen(): JSX.Element {
                 <StyledDataTableRow label={translate('screens/home', 'Email')}>
                   <div className="flex items-center gap-2">
                     {profile.mail}
-                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => navigate('/account/mail', { setRedirect: true })} inline />
+                    <StyledIconButton
+                      icon={IconVariant.EDIT}
+                      onClick={() => navigate('/account/mail', { setRedirect: true })}
+                      inline
+                    />
                   </div>
                 </StyledDataTableRow>
               )}
               {profile.phone && (
                 <StyledDataTableRow label={translate('screens/kyc', 'Phone number')}>
                   <div className="flex items-center gap-2">
                     {profile.phone}
-                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.PHONE_CHANGE)} inline />
+                    <StyledIconButton
+                      icon={IconVariant.EDIT}
+                      onClick={() => startStep(KycStepName.PHONE_CHANGE)}
+                      inline
+                    />
                   </div>
                 </StyledDataTableRow>
               )}
               {(profile.firstName || profile.lastName) && (
                 <StyledDataTableRow label={translate('screens/home', 'Name')}>
                   <div className="flex items-center gap-2">
                     {[profile.firstName, profile.lastName].filter(Boolean).join(' ')}
-                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.NAME_CHANGE)} inline />
+                    <StyledIconButton
+                      icon={IconVariant.EDIT}
+                      onClick={() => startStep(KycStepName.NAME_CHANGE)}
+                      inline
+                    />
                   </div>
                 </StyledDataTableRow>
               )}
               {profile.address && (
                 <StyledDataTableRow label={translate('screens/home', 'Address')}>
                   <div className="flex items-center gap-2">
                     {formatAddress(profile.address)}
-                    <StyledIconButton icon={IconVariant.EDIT} onClick={() => startStep(KycStepName.ADDRESS_CHANGE)} inline />
+                    <StyledIconButton
+                      icon={IconVariant.EDIT}
+                      onClick={() => startStep(KycStepName.ADDRESS_CHANGE)}
+                      inline
+                    />
                   </div>
                 </StyledDataTableRow>
               )}
@@ -473,7 +492,7 @@ export default function AccountScreen(): JSX.Element {
             <>
               <div className="border-b my-2.5 border-dfxGray-400 w-full"></div>
 
-              <h2 className="text-dfxBlue-800 text-lg font-semibold w-full">
+              <h2 ref={recommendationsRef} className="text-dfxBlue-800 text-lg font-semibold w-full">
                 {translate('screens/recommendation', 'Recommendations')}
               </h2>