Bal 3860 split review completed status into 3 resolution outcomes

apps/backoffice-v2/CHANGELOG.md

@@ -26,6 +26,7 @@
 
 ### Patch Changes
 
+- Bump
 - Updated dependencies
   - @ballerine/common@0.9.92
   - @ballerine/workflow-browser-sdk@0.6.115

apps/backoffice-v2/public/locales/en/toast.json

@@ -107,6 +107,7 @@
   },
   "business_report_status_update": {
     "success": "Merchant check status updated successfully.",
+    "unexpected_error": "Something went wrong while updating the status of the report.",
     "error": "Error occurred while updating merchant check status."
   },
   "note_created": {

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringReportStatus.tsx

@@ -1,8 +1,12 @@
 import { z } from 'zod';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { MERCHANT_REPORT_STATUSES_MAP, UPDATEABLE_REPORT_STATUSES } from '@ballerine/common';
+import {
+  isObject,
+  MERCHANT_REPORT_STATUSES_MAP,
+  UPDATEABLE_REPORT_STATUSES as _UPDATEABLE_REPORT_STATUSES,
+} from '@ballerine/common';
 import {
   ctw,
   Dialog,
@@ -33,9 +37,20 @@ import {
   MerchantMonitoringStatusBadge,
   statusToData,
 } from '@/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringStatusBadge';
+import { useMerchantMonitoringStatusDialog } from './hooks/useMerchantMonitoringStatusDialog/useMerchantMonitoringStatusDialog';
+import { toast } from 'sonner';
+import { t } from 'i18next';
+import { getNoteContentForUnsubscribe } from './helpers/get-note-content-for-unsubscribe';
+import { getBaseNoteContent } from './helpers/get-base-note-content';
+import { useToggleMonitoringMutation } from '@/pages/MerchantMonitoringBusinessReport/hooks/useToggleMonitoringMutation/useToggleMonitoringMutation';
+
+/* TODO: Remove this filtering once completed status is removed */
+const UPDATEABLE_REPORT_STATUSES = _UPDATEABLE_REPORT_STATUSES.filter(
+  status => status !== 'completed',
+);
 
 const MerchantMonitoringCompletedStatusFormSchema = z.object({
-  text: z.string().optional(),
+  text: z.string().min(1, { message: 'Please provide additional details' }),
 });
 
 export const MerchantMonitoringReportStatus = ({
@@ -51,7 +66,28 @@ export const MerchantMonitoringReportStatus = ({
 }) => {
   const { mutateAsync: mutateCreateNote } = useCreateNoteMutation({ disableToast: true });
 
-  const { mutate: mutateUpdateReportStatus, isLoading } = useUpdateReportStatusMutation();
+  const { mutate: mutateUpdateReportStatus, isLoading: isUpdatingReportStatus } =
+    useUpdateReportStatusMutation();
+  const { mutateAsync: turnOffMonitoringMutation, isLoading: isTurningOffMonitoring } =
+    useToggleMonitoringMutation({
+      state: 'off',
+      onSuccess: () => {
+        form.reset();
+        toast.success(t(`toast:business_monitoring_off.success`));
+      },
+      onError: error => {
+        toast.error(
+          t(`toast:business_monitoring_off.error`, {
+            errorMessage: isObject(error) && 'message' in error ? error.message : error,
+          }),
+        );
+      },
+    });
+
+  const isUpdatingReport = useMemo(
+    () => isUpdatingReportStatus || isTurningOffMonitoring,
+    [isUpdatingReportStatus, isTurningOffMonitoring],
+  );
 
   const formDefaultValues = {
     text: '',
@@ -63,52 +99,65 @@ export const MerchantMonitoringReportStatus = ({
   });
 
   const [isStatusDropdownOpen, toggleStatusDropdownOpen] = useToggle(false);
-  const [isCompleteReviewModalOpen, toggleCompleteReviewModalOpen, _, closeCompleteReviewModal] =
-    useToggle(false);
+  const { dialogState, toggleDialogOpenState, closeDialog } = useMerchantMonitoringStatusDialog();
 
   const onSubmit: SubmitHandler<
     z.infer<typeof MerchantMonitoringCompletedStatusFormSchema>
   > = async ({ text }) => {
-    mutateUpdateReportStatus({ reportId, status: MERCHANT_REPORT_STATUSES_MAP.completed, text });
+    if (!dialogState.status) {
+      console.error('No status selected');
+      toast.error(t(`toast:business_report_status_update.unexpected_error`));
 
-    const content = `
-      <div class="flex flex-col">
-        <span class="text-xs leading-6 text-slate-500">Status changed to <span class="font-semibold">'Review Completed'</span>
-        ${text ? ` with details:</span><div class="text-sm">${text}</div>` : '</span>'}
-      </div>
-    `;
+      return;
+    }
+
+    const isShouldUnsubscribe = dialogState.status === MERCHANT_REPORT_STATUSES_MAP['terminated'];
+
+    const statusReadableText = statusToData[dialogState.status as keyof typeof statusToData]?.title;
+    const noteContent = isShouldUnsubscribe
+      ? getNoteContentForUnsubscribe(statusReadableText, text)
+      : getBaseNoteContent(statusReadableText, text);
+
+    if (isShouldUnsubscribe) {
+      await turnOffMonitoringMutation(businessId ?? '');
+    }
+
+    mutateUpdateReportStatus({ reportId, status: dialogState.status, text });
 
     void mutateCreateNote({
-      content,
+      content: noteContent,
       entityId: businessId ?? '',
       entityType: 'Business',
       noteableId: reportId ?? '',
       noteableType: 'Report',
       parentNoteId: null,
     });
 
-    closeCompleteReviewModal();
+    closeDialog();
     form.reset();
   };
 
   const disabled = useMemo(
     () =>
-      isLoading ||
+      isUpdatingReport ||
       (status &&
         [
           MERCHANT_REPORT_STATUSES_MAP['in-progress'],
           MERCHANT_REPORT_STATUSES_MAP['quality-control'],
           MERCHANT_REPORT_STATUSES_MAP['completed'],
+          MERCHANT_REPORT_STATUSES_MAP['cleared'],
+          MERCHANT_REPORT_STATUSES_MAP['conditionally-approved'],
+          MERCHANT_REPORT_STATUSES_MAP['terminated'],
         ].includes(status)),
-    [isLoading, status],
+    [isUpdatingReport, status],
   );
 
   if (!status || !reportId) {
     return null;
   }
 
   return (
-    <Dialog open={isCompleteReviewModalOpen} onOpenChange={toggleCompleteReviewModalOpen}>
+    <Dialog open={dialogState.isOpen} onOpenChange={() => toggleDialogOpenState()}>
       <DropdownMenu open={isStatusDropdownOpen} onOpenChange={toggleStatusDropdownOpen}>
         <DropdownMenuTrigger
           disabled={disabled}
@@ -118,14 +167,14 @@ export const MerchantMonitoringReportStatus = ({
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="start"
-          className={`space-y-2 p-4`}
+          className={`mr-6 space-y-2 p-4`}
           onEscapeKeyDown={e => {
-            if (isCompleteReviewModalOpen) {
+            if (dialogState.isOpen) {
               e.stopPropagation();
               e.preventDefault();
             }
 
-            closeCompleteReviewModal();
+            closeDialog();
           }}
         >
           {UPDATEABLE_REPORT_STATUSES.map(selectableStatus => (
@@ -135,11 +184,17 @@ export const MerchantMonitoringReportStatus = ({
             >
               <MerchantMonitoringStatusButton
                 status={selectableStatus}
-                disabled={selectableStatus === status || isLoading}
+                disabled={selectableStatus === status || isUpdatingReport}
                 onClick={() => {
-                  if (selectableStatus === MERCHANT_REPORT_STATUSES_MAP.completed) {
+                  if (
+                    [
+                      MERCHANT_REPORT_STATUSES_MAP.cleared,
+                      MERCHANT_REPORT_STATUSES_MAP['conditionally-approved'],
+                      MERCHANT_REPORT_STATUSES_MAP.terminated,
+                    ].includes(selectableStatus)
+                  ) {
                     setTimeout(() => {
-                      toggleCompleteReviewModalOpen();
+                      toggleDialogOpenState(selectableStatus);
                     }, 0);
 
                     return;
@@ -169,13 +224,20 @@ export const MerchantMonitoringReportStatus = ({
 
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            {dialogState.status && (
+              <div className="flex flex-col gap-2">
+                <span className="text-sm">Resolution Status</span>
+                <div>
+                  <MerchantMonitoringStatusBadge status={dialogState.status} />
+                </div>
+              </div>
+            )}
             <FormField
               name="text"
               control={form.control}
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Additional details</FormLabel>
-
                   <FormControl>
                     <TextArea
                       {...field}
@@ -188,7 +250,7 @@ export const MerchantMonitoringReportStatus = ({
             />
 
             <DialogFooter className="mt-6 flex justify-end space-x-4">
-              <Button type="button" onClick={closeCompleteReviewModal} variant="ghost">
+              <Button type="button" onClick={closeDialog} variant="ghost">
                 Cancel
               </Button>
               <Button type="submit">Complete Review</Button>

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringReportStatusButton.tsx

@@ -1,5 +1,5 @@
 import { ctw } from '@ballerine/ui';
-import React, { ComponentProps } from 'react';
+import { ComponentProps } from 'react';
 
 import { Button } from '@/common/components/atoms/Button/Button';
 import {
@@ -24,12 +24,12 @@ export const MerchantMonitoringStatusButton = ({
       onClick?.(e);
     }}
     variant={'status'}
-    className={ctw(`flex h-16 w-80 flex-col items-start justify-center space-y-1 px-4 py-2`, {
+    className={ctw(`flex h-16  w-full flex-col items-start justify-center space-y-1 px-4 py-2`, {
       '!cursor-not-allowed': disabled,
     })}
   >
     <MerchantMonitoringStatusBadge status={status} disabled={disabled} />
-    <span className={`text-xs font-semibold leading-5 text-[#94A3B8]`}>
+    <span className={`text-start text-xs font-semibold leading-5 text-[#94A3B8]`}>
       {statusToData[status].text}
     </span>
   </Button>

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/MerchantMonitoringStatusBadge.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Badge } from '@ballerine/ui';
 import { titleCase } from 'string-ts';
 import { MERCHANT_REPORT_STATUSES_MAP } from '@ballerine/common';
@@ -25,10 +24,20 @@ export const statusToData = {
     title: 'Under Review',
     text: 'The merchant is currently being assessed',
   },
-  [MERCHANT_REPORT_STATUSES_MAP.completed]: {
+  [MERCHANT_REPORT_STATUSES_MAP['conditionally-approved']]: {
+    variant: 'warning',
+    title: 'Conditionally Approved',
+    text: 'Merchant reviewed with minor or borderline issues',
+  },
+  [MERCHANT_REPORT_STATUSES_MAP['cleared']]: {
     variant: 'success',
-    title: 'Review Completed',
-    text: 'The assessment of this merchant is finalized',
+    title: 'Cleared',
+    text: 'Merchant reviewed and found compliant or low risk',
+  },
+  [MERCHANT_REPORT_STATUSES_MAP['terminated']]: {
+    variant: 'destructive',
+    title: 'Terminated',
+    text: 'Merchant reviewed and confirmed non-compliant or high risk',
   },
 } as const;
 
@@ -59,20 +68,25 @@ export const MerchantMonitoringStatusBadge = ({
         'text-[#32302C]/40': status === MERCHANT_REPORT_STATUSES_MAP['pending-review'] && disabled,
         'bg-[#D3E5EF] text-[#183347]': status === MERCHANT_REPORT_STATUSES_MAP['under-review'],
         'text-[#183347]/40': status === MERCHANT_REPORT_STATUSES_MAP['under-review'] && disabled,
-        'bg-[#DBEDDB] text-[#1C3829]': status === MERCHANT_REPORT_STATUSES_MAP['completed'],
+        'bg-[#DBEDDB] text-[#1C3829]': status === MERCHANT_REPORT_STATUSES_MAP['cleared'],
+        'bg-[#F4D8B9] text-[#183347]':
+          status === MERCHANT_REPORT_STATUSES_MAP['conditionally-approved'],
+        'bg-[#ECA1A5] text-[#32302C]': status === MERCHANT_REPORT_STATUSES_MAP['terminated'],
       })}
     >
       <span
         className={ctw(`rounded-full d-2`, {
           'bg-[#91918E]':
             isReportInProgress || status === MERCHANT_REPORT_STATUSES_MAP['pending-review'],
           'bg-[#5B97BD]': status === MERCHANT_REPORT_STATUSES_MAP['under-review'],
-          'bg-[#6C9B7D]': status === MERCHANT_REPORT_STATUSES_MAP['completed'],
+          'bg-[#6C9B7D]': status === MERCHANT_REPORT_STATUSES_MAP['cleared'],
+          'bg-[#F4AA52]': status === MERCHANT_REPORT_STATUSES_MAP['conditionally-approved'],
+          'bg-[#DF2222]': status === MERCHANT_REPORT_STATUSES_MAP['terminated'],
         })}
       >
         &nbsp;
       </span>
-      <span ref={ref} style={{ ...styles, width: '90%' }}>
+      <span ref={ref} style={{ ...styles, width: '100%' }}>
         {statusToData[status].title ?? titleCase(status ?? '')}
       </span>
     </Badge>

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/helpers/get-base-note-content.ts

@@ -0,0 +1,17 @@
+import DOMPurify from 'dompurify';
+
+export const getBaseNoteContent = (status: string, text: string) => {
+  const sanitizedStatus = DOMPurify.sanitize(status);
+  const sanitizedText = DOMPurify.sanitize(text);
+
+  return `
+      <div class="flex flex-col">
+        <span class="text-xs leading-6 text-slate-500">Status changed to <span class="font-semibold">'${sanitizedStatus}'</span>
+        ${
+          sanitizedText
+            ? ` with details:</span><div class="text-sm">${sanitizedText}</div>`
+            : '</span>'
+        }
+      </div>
+    `;
+};

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/helpers/get-note-content-for-unsubscribe.ts

@@ -0,0 +1,18 @@
+import DOMPurify from 'dompurify';
+
+export const getNoteContentForUnsubscribe = (status: string, text: string) => {
+  const sanitizedStatus = DOMPurify.sanitize(status);
+  const sanitizedText = DOMPurify.sanitize(text);
+
+  return `
+  <div class="flex flex-col">
+    <span class="text-xs leading-6 text-slate-500">
+      Status changed to <span class="font-semibold">"${sanitizedStatus},"</span> and the merchant was <b>unsubscribed from ongoing monitoring</b>
+      ${
+        sanitizedText
+          ? ` with details:</span><div class="text-sm">${sanitizedText}</div>`
+          : '</span>'
+      }
+  </div>
+`;
+};

apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringReportStatus/hooks/useMerchantMonitoringStatusDialog/useMerchantMonitoringStatusDialog.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+import { UpdateableReportStatus } from '@ballerine/common';
+
+interface IMerchantMonitoringStatusDialogState {
+  isOpen: boolean;
+  status: UpdateableReportStatus | null;
+}
+
+export const useMerchantMonitoringStatusDialog = () => {
+  const [dialogState, setDialogState] = useState<IMerchantMonitoringStatusDialogState>({
+    isOpen: false,
+    status: null,
+  });
+
+  const toggleDialogOpenState = useCallback((status: UpdateableReportStatus | null = null) => {
+    setDialogState(prev => ({
+      ...prev,
+      isOpen: !prev.isOpen,
+      status,
+    }));
+  }, []);
+
+  const closeDialog = useCallback(() => {
+    setDialogState(prev => ({
+      ...prev,
+      isOpen: false,
+      status: null,
+    }));
+  }, []);
+
+  const openDialog = useCallback((status: UpdateableReportStatus) => {
+    setDialogState(prev => ({
+      ...prev,
+      isOpen: true,
+      status,
+    }));
+  }, []);
+
+  return { dialogState, toggleDialogOpenState, closeDialog, openDialog };
+};