Release: develop -> main

package.json

@@ -12,7 +12,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@dfx.swiss/react": "^1.3.0-beta.270",
+    "@dfx.swiss/react": "^1.3.2-beta.0",
     "@dfx.swiss/react-components": "^1.3.0-beta.270",
     "@ledgerhq/hw-app-btc": "^6.24.1",
     "@ledgerhq/hw-app-eth": "^6.33.7",

src/App.tsx

@@ -55,6 +55,8 @@ const EditMailScreen = lazy(() => import('./screens/edit-mail.screen'));
 const SafeScreen = lazy(() => import('./screens/safe.screen'));
 const TelegramSupportScreen = lazy(() => import('./screens/telegram-support.screen'));
 const ComplianceScreen = lazy(() => import('./screens/compliance.screen'));
+const ComplianceBankTxScreen = lazy(() => import('./screens/compliance-bank-tx.screen'));
+const ComplianceBankTxRecallScreen = lazy(() => import('./screens/compliance-bank-tx-recall.screen'));
 const ComplianceBankTxReturnScreen = lazy(() => import('./screens/compliance-bank-tx-return.screen'));
 const ComplianceKycFilesScreen = lazy(() => import('./screens/compliance-kyc-files.screen'));
 const ComplianceKycFilesDetailsScreen = lazy(() => import('./screens/compliance-kyc-files-details.screen'));
@@ -65,8 +67,11 @@ const ComplianceSupportIssueScreen = lazy(() => import('./screens/compliance-sup
 const ComplianceRecommendationGraphScreen = lazy(() => import('./screens/compliance-recommendation-graph.screen'));
 const ComplianceCustodyOrdersScreen = lazy(() => import('./screens/compliance-custody-orders.screen'));
 const ComplianceMrosListScreen = lazy(() => import('./screens/compliance-mros-list.screen'));
+const ComplianceMrosCreateScreen = lazy(() => import('./screens/compliance-mros-create.screen'));
+const ComplianceMrosDetailScreen = lazy(() => import('./screens/compliance-mros-detail.screen'));
 const ComplianceRecallListScreen = lazy(() => import('./screens/compliance-recall-list.screen'));
 const ComplianceReviewScreen = lazy(() => import('./screens/compliance-review.screen'));
+const CompliancePendingReviewsScreen = lazy(() => import('./screens/compliance-pending-reviews.screen'));
 const SupportDashboardScreen = lazy(() => import('./screens/support-dashboard.screen'));
 const SupportDashboardIssueScreen = lazy(() => import('./screens/support-dashboard-issue.screen'));
 const SupportDashboardCreateScreen = lazy(() => import('./screens/support-dashboard-create.screen'));
@@ -367,6 +372,14 @@ export const Routes = [
         path: 'compliance/recommendations/:id',
         element: withSuspense(<ComplianceRecommendationGraphScreen />),
       },
+      {
+        path: 'compliance/bank-tx/:id',
+        element: withSuspense(<ComplianceBankTxScreen />),
+      },
+      {
+        path: 'compliance/bank-tx/:id/recall',
+        element: withSuspense(<ComplianceBankTxRecallScreen />),
+      },
       {
         path: 'compliance/bank-tx/:id/return',
         element: withSuspense(<ComplianceBankTxReturnScreen />),
@@ -395,6 +408,14 @@ export const Routes = [
         path: 'compliance/mros',
         element: withSuspense(<ComplianceMrosListScreen />),
       },
+      {
+        path: 'compliance/mros/create',
+        element: withSuspense(<ComplianceMrosCreateScreen />),
+      },
+      {
+        path: 'compliance/mros/:id',
+        element: withSuspense(<ComplianceMrosDetailScreen />),
+      },
       {
         path: 'compliance/recalls',
         element: withSuspense(<ComplianceRecallListScreen />),
@@ -403,6 +424,10 @@ export const Routes = [
         path: 'compliance/user/:id/kyc',
         element: withSuspense(<ComplianceReviewScreen />),
       },
+      {
+        path: 'compliance/pending-reviews/:type/:name',
+        element: withSuspense(<CompliancePendingReviewsScreen />),
+      },
       {
         path: 'sitemap',
         element: withSuspense(<SitemapScreen />),

src/components/compliance/recall-details-modal.tsx

@@ -0,0 +1,37 @@
+import { StyledButton, StyledButtonColor, StyledButtonWidth, StyledVerticalStack } from '@dfx.swiss/react-components';
+import { Modal } from 'src/components/modal';
+import { useSettingsContext } from 'src/contexts/settings.context';
+import { RecallInfo } from 'src/hooks/compliance.hook';
+import { RecallDetails } from './recall-details';
+
+interface RecallDetailsModalProps {
+  readonly isOpen: boolean;
+  readonly recall: RecallInfo | undefined;
+  readonly onClose: () => void;
+}
+
+export function RecallDetailsModal({ isOpen, recall, onClose }: RecallDetailsModalProps): JSX.Element {
+  const { translate } = useSettingsContext();
+
+  if (!isOpen || !recall) return <></>;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <div className="bg-white rounded-lg shadow-sm p-6 max-w-lg mx-auto w-full">
+        <h2 className="text-lg font-semibold text-dfxBlue-800 mb-4 text-left">
+          {translate('screens/compliance', 'Recall')}
+        </h2>
+
+        <StyledVerticalStack gap={4} full>
+          <RecallDetails recall={recall} />
+          <StyledButton
+            label={translate('general/actions', 'Close')}
+            onClick={onClose}
+            width={StyledButtonWidth.FULL}
+            color={StyledButtonColor.STURDY_WHITE}
+          />
+        </StyledVerticalStack>
+      </div>
+    </Modal>
+  );
+}

src/components/compliance/recall-details.tsx

@@ -0,0 +1,17 @@
+import { RecallInfo } from 'src/hooks/compliance.hook';
+import { DetailRow, formatDateTime } from 'src/util/compliance-helpers';
+
+export function RecallDetails({ recall }: { recall: RecallInfo }): JSX.Element {
+  return (
+    <table className="text-sm text-dfxBlue-800 text-left">
+      <tbody>
+        <DetailRow label="ID" value={recall.id} />
+        <DetailRow label="Created" value={formatDateTime(recall.created)} />
+        <DetailRow label="Sequence" value={recall.sequence} />
+        <DetailRow label="Reason" value={recall.reason} />
+        <DetailRow label="Fee" value={recall.fee} />
+        <DetailRow label="Comment" value={recall.comment} />
+      </tbody>
+    </table>
+  );
+}

src/components/compliance/recall-modal.tsx

@@ -0,0 +1,155 @@
+import { Utils, Validations } from '@dfx.swiss/react';
+import {
+  Form,
+  StyledButton,
+  StyledButtonColor,
+  StyledButtonWidth,
+  StyledDropdown,
+  StyledInput,
+  StyledVerticalStack,
+} from '@dfx.swiss/react-components';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { ErrorHint } from 'src/components/error-hint';
+import { Modal } from 'src/components/modal';
+import { useLayoutContext } from 'src/contexts/layout.context';
+import { useSettingsContext } from 'src/contexts/settings.context';
+import { RecallReason } from 'src/dto/recall.dto';
+import { useCompliance } from 'src/hooks/compliance.hook';
+
+interface RecallModalProps {
+  readonly isOpen: boolean;
+  readonly bankTxId: number | undefined;
+  readonly onClose: () => void;
+  readonly onSuccess: () => void;
+}
+
+interface RecallFormData {
+  reason: RecallReason;
+  comment: string;
+  fee: string;
+}
+
+export function RecallModal({ isOpen, bankTxId, onClose, onSuccess }: RecallModalProps): JSX.Element {
+  const { translate, translateError } = useSettingsContext();
+  const { createRecall } = useCompliance();
+  const { rootRef } = useLayoutContext();
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string>();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { isValid, errors },
+    reset,
+  } = useForm<RecallFormData>({
+    mode: 'onTouched',
+    defaultValues: { fee: '500', comment: 'n.a.' },
+  });
+
+  useEffect(() => {
+    if (!isOpen) {
+      setError(undefined);
+      reset();
+    }
+  }, [isOpen]);
+
+  async function onSubmit(formData: RecallFormData): Promise<void> {
+    if (!bankTxId) return;
+
+    setIsSubmitting(true);
+    setError(undefined);
+
+    try {
+      await createRecall({
+        bankTxId,
+        sequence: 1,
+        reason: formData.reason,
+        comment: formData.comment,
+        fee: Number(formData.fee),
+      });
+      onSuccess();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Unknown error');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }
+
+  function handleClose(): void {
+    reset();
+    setError(undefined);
+    onClose();
+  }
+
+  const rules = Utils.createRules({
+    reason: Validations.Required,
+    comment: Validations.Required,
+    fee: [Validations.Required, Validations.Custom((v) => (isNaN(Number(v)) ? 'pattern' : true))],
+  });
+
+  if (!isOpen) return <></>;
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose}>
+      <div className="bg-white rounded-lg shadow-sm p-6 max-w-lg mx-auto w-full">
+        <h2 className="text-lg font-semibold text-dfxBlue-800 mb-4 text-left">
+          {translate('screens/compliance', 'Recall erfassen')}
+        </h2>
+
+        <Form
+          control={control}
+          rules={rules}
+          errors={errors}
+          onSubmit={handleSubmit(onSubmit)}
+          translate={translateError}
+        >
+          <StyledVerticalStack gap={4} full>
+            <StyledDropdown<RecallReason>
+              rootRef={rootRef}
+              name="reason"
+              label={translate('screens/compliance', 'Reason')}
+              placeholder={translate('general/actions', 'Select') + '...'}
+              items={Object.values(RecallReason).filter((r) => r !== RecallReason.UNKNOWN)}
+              labelFunc={(item) => item}
+              full
+              smallLabel
+            />
+
+            <StyledInput
+              name="fee"
+              type="number"
+              label={translate('screens/compliance', 'Fee')}
+              placeholder="0"
+              full
+              smallLabel
+            />
+
+            <StyledInput name="comment" label={translate('screens/compliance', 'Comment')} full smallLabel />
+
+            {error && <ErrorHint message={error} />}
+
+            <div className="flex gap-2 w-full">
+              <StyledButton
+                label={translate('general/actions', 'Cancel')}
+                onClick={handleClose}
+                width={StyledButtonWidth.FULL}
+                color={StyledButtonColor.STURDY_WHITE}
+                disabled={isSubmitting}
+              />
+              <StyledButton
+                type="submit"
+                label={translate('general/actions', 'Create recall')}
+                onClick={handleSubmit(onSubmit)}
+                width={StyledButtonWidth.FULL}
+                disabled={!isValid}
+                isLoading={isSubmitting}
+              />
+            </div>
+          </StyledVerticalStack>
+        </Form>
+      </div>
+    </Modal>
+  );
+}