fix: always show refine button and ask confirmation when reviewing a confirmed_hit (#705)

Author: ChibiBlasphem

packages/app-builder/src/components/Sanctions/SanctionReview.tsx

@@ -38,16 +38,14 @@ export function SanctionReviewSection({
               totalMatches: sanctionCheck.matches.length,
             })}
           </span>
-          {needsRefine ? (
-            <Button
-              className="ml-auto"
-              variant="secondary"
-              onClick={() => setIsRefining(true)}
-            >
-              <Icon icon="restart-alt" className="size-5" />
-              {t('sanctions:refine_search')}
-            </Button>
-          ) : null}
+          <Button
+            className="ml-auto"
+            variant="secondary"
+            onClick={() => setIsRefining(true)}
+          >
+            <Icon icon="restart-alt" className="size-5" />
+            {t('sanctions:refine_search')}
+          </Button>
         </div>
         {!needsRefine ? (
           <Callout bordered>{t('sanctions:callout.review')}</Callout>
@@ -70,7 +68,7 @@ export function SanctionReviewSection({
           />
         ))}
       </div>
-      {needsRefine && isRefining ? (
+      {isRefining ? (
         <RefineSearchModal
           decisionId={decisionId}
           sanctionCheck={sanctionCheck}

packages/app-builder/src/locales/ar/sanctions.json

@@ -112,5 +112,6 @@
   "match.status.skipped": "تخطي",
   "match.unique_counterparty_identifier": "معرف فريد للطرف المقابل",
   "sanction_check": "فحص العقوبة",
-  "see_details": "انظر التفاصيل"
+  "see_details": "انظر التفاصيل",
+  "review_modal.confirmation": "تأكيد"
 }

packages/app-builder/src/locales/en/sanctions.json

@@ -22,6 +22,7 @@
   "review_modal.comment_label": "Add a comment",
   "review_modal.status_label": "Choose a status",
   "review_modal.title": "Change match status",
+  "review_modal.confirmation": "Confirmation",
   "review_modal.whitelist_label": "Do not alert again if this profile is associated with:",
   "see_details": "See details",
   "start_reviewing": "Start reviewing",

packages/app-builder/src/locales/fr/sanctions.json

@@ -101,6 +101,7 @@
   "review_modal.comment_label": "Ajouter un commentaire",
   "review_modal.status_label": "Choisissez un statut",
   "review_modal.title": "Modifier l'état de la correspondance",
+  "review_modal.confirmation": "Confirmation",
   "review_modal.whitelist_label": "Ne plus alerter si ce profil est associé à:",
   "callout.needs_review": "{{toreview}} / {{totalmatches}} à examiner",
   "entity.schema.vehicle": "Véhicule",

packages/app-builder/src/routes/ressources+/cases+/review-sanction-match.tsx

@@ -9,7 +9,7 @@ import { parseWithZod } from '@conform-to/zod';
 import { type ActionFunctionArgs, json } from '@remix-run/node';
 import { useFetcher } from '@remix-run/react';
 import { type UpdateSanctionCheckMatchDto } from 'marble-api';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalV2, Switch, TextArea } from 'ui-design-system';
 import { z } from 'zod';
@@ -74,6 +74,8 @@ export const SanctionCheckReviewModal = ({
     UpdateSanctionCheckMatchDto['status'] | null
   >(null);
   const onClose = useCallbackRef(_onClose);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const formRef = useRef<HTMLFormElement>(null);
 
   const fetcher = useFetcher<typeof action>();
   useEffect(() => {
@@ -98,6 +100,7 @@ export const SanctionCheckReviewModal = ({
         className="flex flex-col gap-8 p-8"
         method="post"
         action={getRoute('/ressources/cases/review-sanction-match')}
+        ref={formRef}
       >
         <input name="matchId" type="hidden" value={sanctionMatch.id} />
         <div className="flex flex-col gap-2">
@@ -142,14 +145,54 @@ export const SanctionCheckReviewModal = ({
             {t('common:cancel')}
           </ModalV2.Close>
           <Button
-            type="submit"
+            type={currentStatus === 'confirmed_hit' ? 'button' : 'submit'}
             disabled={!currentStatus}
             className="flex-1"
             variant="primary"
             name="save"
+            onClick={() => {
+              if (currentStatus === 'confirmed_hit') {
+                setIsConfirming(true);
+              }
+            }}
           >
             {t('common:save')}
           </Button>
+          <ModalV2.Content
+            open={isConfirming}
+            onClose={() => setIsConfirming(false)}
+          >
+            <ModalV2.Title>
+              {t('sanctions:review_modal.confirmation')}
+            </ModalV2.Title>
+            <div className="flex flex-col gap-4 p-6">
+              <div>{t('sanctions:review_modal.callout_confirmed_hit')}</div>
+              <div className="flex justify-between gap-4">
+                <ModalV2.Close
+                  render={
+                    <Button
+                      className="flex-1"
+                      variant="secondary"
+                      name="cancel"
+                    />
+                  }
+                >
+                  {t('common:cancel')}
+                </ModalV2.Close>
+                <Button
+                  disabled={!currentStatus}
+                  className="flex-1"
+                  variant="primary"
+                  name="save"
+                  onClick={() => {
+                    fetcher.submit(formRef.current);
+                  }}
+                >
+                  {t('common:save')}
+                </Button>
+              </div>
+            </div>
+          </ModalV2.Content>
         </div>
       </fetcher.Form>
     </ModalV2.Content>