Enhance booking and signature functionalities

- Updated MySignaturePage title to Signature

apps/edr-freight-web/backoffice/src/pages/bookings/BookingContractPage.tsx

@@ -12,6 +12,7 @@ import toast from "react-hot-toast";
 
 import Breadcrumbs from "@/components/ui/Breadcrumbs";
 import { ContractSignaturePad } from "@/components/bookings/ContractSignaturePad";
+import { StampUpload } from "@/components/contracts/StampUpload";
 import { bookingSurface } from "@/components/bookings/booking-ui.styles";
 import { QUERY_KEYS } from "@/constants/QUERY_KEYS";
 import { invalidateBookingDetail } from "@/utils/queryInvalidation";
@@ -40,6 +41,9 @@ export default function BookingContractPage() {
   const [signOpen, setSignOpen] = useState(false);
   const [signerName, setSignerName] = useState("");
   const [signatureData, setSignatureData] = useState<string | null>(null);
+  // Company stamp: prefilled from the profile, or uploaded here when none is
+  // saved yet.
+  const [stampData, setStampData] = useState<string | null>(null);
   // When the user has a saved signature we offer it for approval first; they
   // can switch to drawing a fresh one.
   const [drawNew, setDrawNew] = useState(false);
@@ -55,6 +59,7 @@ export default function BookingContractPage() {
 
   const savedSignature = data?.savedSignature ?? null;
   const savedSignatureImage = savedSignature?.signatureImageUrl ?? null;
+  const savedStampImage = savedSignature?.stampImageUrl ?? null;
   // Show the approval view only while a saved signature exists and the user
   // hasn't opted to draw a new one.
   const usingSaved = Boolean(savedSignatureImage) && !drawNew;
@@ -98,6 +103,8 @@ export default function BookingContractPage() {
     // approve it; otherwise start with an empty pad.
     setSignerName(savedSignature?.signerDisplayName ?? "");
     setSignatureData(null);
+    // Prefill with the reusable stamp saved on the profile; still replaceable.
+    setStampData(savedStampImage);
     setDrawNew(false);
     setSignOpen(true);
   };
@@ -106,10 +113,12 @@ export default function BookingContractPage() {
     if (!canSign || !signerName.trim()) return;
     // Approve the saved signature, or submit the freshly drawn one.
     const image = usingSaved ? savedSignatureImage : signatureData;
-    if (!image) return;
+    // The API rejects a STAFF signature without a stamp.
+    if (!image || !stampData) return;
     signMutation.mutate({
       role: "STAFF",
       signatureImageBase64: image,
+      stampImageBase64: stampData,
       signerDisplayName: signerName.trim(),
       consentText: "I agree to the terms of this contract.",
     });
@@ -234,6 +243,15 @@ export default function BookingContractPage() {
               ) : (
                 <ContractSignaturePad onChange={setSignatureData} />
               )}
+              <StampUpload
+                value={stampData}
+                onChange={setStampData}
+                description={
+                  savedStampImage
+                    ? "Your saved company stamp — replace it for this contract if needed."
+                    : "Required. Attach your official company stamp or seal."
+                }
+              />
             </div>
             <DialogFooter>
               <Button variant="outline" onClick={() => setSignOpen(false)}>
@@ -243,6 +261,7 @@ export default function BookingContractPage() {
                 disabled={
                   signMutation.isPending ||
                   (!usingSaved && !signatureData) ||
+                  !stampData ||
                   !signerName.trim()
                 }
                 onClick={confirmSign}