feat: fix the settings preview for the business licence and changes request to the approval

apps/edr-freight-web/backoffice/src/components/customers/ChangeRequestReview.tsx

@@ -1,5 +1,6 @@
 import {
   Alert,
+  Anchor,
   Badge,
   Box,
   Button,
@@ -12,9 +13,17 @@ import {
   Textarea,
 } from "@mantine/core";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { AlertTriangle, ClipboardCheck, Clock } from "lucide-react";
+import {
+  AlertTriangle,
+  ClipboardCheck,
+  Clock,
+  FilePlus2,
+  FileX2,
+} from "lucide-react";
 import { useState } from "react";
+import { useFileViewer } from "@edr/ui-common";
 
+import { fileViewUrl } from "@/constants/apiConfig";
 import { api } from "@/services/api";
 import type { Company, CompanyChangeRequest } from "@/types/customer";
 import { formatDate, humanize } from "./format";
@@ -129,6 +138,7 @@ export function ChangeRequestReview({ company }: { company: Company }) {
     api.customers.rejectChangeRequest.mutationOptions(),
   );
 
+  const { view, viewer } = useFileViewer();
   const [rejectId, setRejectId] = useState<string | null>(null);
   const [note, setNote] = useState("");
 
@@ -142,6 +152,7 @@ export function ChangeRequestReview({ company }: { company: Company }) {
     ? Object.keys(pending.snapshot ?? {})
     : ([] as string[]);
   const docCount = pending?.documentFileIds?.length ?? 0;
+  const licenseChanges = pending?.licenseChanges ?? [];
 
   const confirmReject = () => {
     if (!rejectId) return;
@@ -206,6 +217,48 @@ export function ChangeRequestReview({ company }: { company: Company }) {
               </Text>
             )}
 
+            {licenseChanges.length > 0 && (
+              <Stack gap={8}>
+                <Text size="sm" fw={600} c="edr-text">
+                  Business license changes
+                </Text>
+                {licenseChanges.map((c, i) => (
+                  <Group key={`${c.fileId}-${i}`} gap={8} wrap="nowrap">
+                    {c.op === "add" ? (
+                      <FilePlus2 size={15} className="text-edr-muted" />
+                    ) : (
+                      <FileX2 size={15} className="text-edr-muted" />
+                    )}
+                    <Badge
+                      size="sm"
+                      radius="sm"
+                      variant="light"
+                      color={c.op === "add" ? "green" : "red"}
+                    >
+                      {c.op === "add" ? "Add" : "Remove"}
+                    </Badge>
+                    <Anchor
+                      component="button"
+                      type="button"
+                      size="sm"
+                      onClick={() =>
+                        view({
+                          name: c.fileName ?? "License document",
+                          url: fileViewUrl(c.fileId),
+                        })
+                      }
+                      style={{
+                        textDecoration:
+                          c.op === "remove" ? "line-through" : undefined,
+                      }}
+                    >
+                      {c.fileName ?? "License document"}
+                    </Anchor>
+                  </Group>
+                ))}
+              </Stack>
+            )}
+
             <Group justify="flex-end" gap="sm">
               <Button
                 variant="light"
@@ -300,6 +353,8 @@ export function ChangeRequestReview({ company }: { company: Company }) {
           </Group>
         </Stack>
       </Modal>
+
+      {viewer}
     </>
   );
 }