@burdenoff/microfe-movethewheels 2026.1010.2 → 2026.1011.2

package/src/movethewheels/pages/DeliveryCapturePage.tsx

@@ -15,7 +15,7 @@
  * driver app (BOFF-3991) — this page is the capture core, reachable from the
  * existing web MFE.
  */
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
   CheckCircle2,
   Loader2,
@@ -52,6 +52,10 @@ import {
 } from '../hooks/useEpod';
 import { formatAddress, formatDate } from '../utils/formatters';
 import type { SignatureType } from '../types';
+import { useShipmentStatusQuery } from '../hooks/useShipmentStatusAuthority';
+import { StatusAuthorityOwnedDeliveryDocument } from '../../generated/shipment-status-authority-operations';
+import type { StatusAuthorityOwnedDeliveryQuery } from '../../generated/shipment-status-authority-operations';
+import { useMoveTheWheels } from '../providers/MoveTheWheelsProvider';
 
 /** Resolves the device's current position, if the browser grants it. Never blocks submission. */
 function getCurrentPosition(): Promise<GeolocationPosition | null> {
@@ -77,7 +81,25 @@ function CaptureForm({
   onCaptured: () => void;
   onCancel: () => void;
 }) {
-  const { captureEpod, isSubmitting, error: captureError } = useCaptureEpod();
+  const { captureEpod, isSubmitting, error: captureError, captureFeedback } = useCaptureEpod();
+  const [statusRefresh, setStatusRefresh] = useState(0);
+  const ownedStatus = useShipmentStatusQuery<StatusAuthorityOwnedDeliveryQuery>(
+    StatusAuthorityOwnedDeliveryDocument,
+    { deliveryJobId: job.id },
+    statusRefresh
+  );
+  const [completionAttestation, setCompletionAttestation] = useState(false);
+  const uploadedPhoto = useRef<{ file: File; id: string } | null>(null);
+  const submissionLock = useRef(false);
+  const active = useRef(true);
+  useEffect(() => {
+    active.current = true;
+    return () => {
+      active.current = false;
+    };
+  }, []);
+  const [preparing, setPreparing] = useState(false);
+  const [requiredStatusRefresh, setRequiredStatusRefresh] = useState(0);
   const { upload: uploadPhoto, isUploading, error: uploadError } = useEpodPhotoUpload();
   const signaturePadRef = useRef<SignaturePadHandle>(null);
 
@@ -89,7 +111,21 @@ function CaptureForm({
   const [validationError, setValidationError] = useState<string | null>(null);
 
   const handleSubmit = async () => {
+    if (submissionLock.current) return;
     setValidationError(null);
+    if (
+      ownedStatus.loading ||
+      ownedStatus.error ||
+      !ownedStatus.data ||
+      statusRefresh < requiredStatusRefresh ||
+      !completionAttestation ||
+      captureFeedback?.kind === 'UNKNOWN'
+    ) {
+      setValidationError(
+        'Review the current linked shipment status and confirm completion before capture. Do not resend an uncertain capture.'
+      );
+      return;
+    }
 
     const trimmedRecipient = recipientName.trim();
     if (!trimmedRecipient) {
@@ -110,16 +146,27 @@ function CaptureForm({
       return;
     }
 
+    submissionLock.current = true;
+    setPreparing(true);
     try {
       let photoFileIds: string[] | undefined;
       if (photoFile) {
-        const uploaded = await uploadPhoto(photoFile);
-        photoFileIds = [uploaded.fileId];
+        if (uploadedPhoto.current?.file === photoFile) photoFileIds = [uploadedPhoto.current.id];
+        else {
+          const uploaded = await uploadPhoto(photoFile);
+          uploadedPhoto.current = { file: photoFile, id: uploaded.fileId };
+          photoFileIds = [uploaded.fileId];
+        }
       }
 
+      if (!active.current) return;
       const position = await getCurrentPosition();
+      if (!active.current) return;
 
       await captureEpod({
+        expectedShipmentId: ownedStatus.data.myEpodShipmentStatus?.id ?? null,
+        expectedShipmentStatusRevision: ownedStatus.data.myEpodShipmentStatus?.statusRevision,
+        completionAttestation,
         deliveryJobId: job.id,
         recipientName: trimmedRecipient,
         signatureType,
@@ -133,11 +180,16 @@ function CaptureForm({
 
       onCaptured();
     } catch {
+      setCompletionAttestation(false);
+      setRequiredStatusRefresh(statusRefresh + 1);
       // captureError / uploadError already carry the message for display below.
+    } finally {
+      submissionLock.current = false;
+      setPreparing(false);
     }
   };
 
-  const submitting = isSubmitting || isUploading;
+  const submitting = isSubmitting || isUploading || preparing;
 
   return (
     <Card>
@@ -151,6 +203,47 @@ function CaptureForm({
           {job.customerName && <p>Recipient on file: {job.customerName}</p>}
           {job.deliveryAddress && <p>{formatAddress(job.deliveryAddress)}</p>}
         </div>
+        <section aria-label="Linked shipment status" className="space-y-2">
+          <p>
+            Recorded shipment:{' '}
+            {ownedStatus.data?.myEpodShipmentStatus
+              ? `${ownedStatus.data.myEpodShipmentStatus.status.toLowerCase().replaceAll('_', ' ')} · revision ${ownedStatus.data.myEpodShipmentStatus.statusRevision}`
+              : ownedStatus.data
+                ? 'No linked shipment'
+                : 'Loading current record'}
+          </p>
+          {ownedStatus.error && <p role="alert">{ownedStatus.error}</p>}
+          <Button
+            variant="outline"
+            disabled={ownedStatus.loading || submitting}
+            onClick={() => {
+              setCompletionAttestation(false);
+              setStatusRefresh((value) => value + 1);
+            }}
+          >
+            Refresh linked status
+          </Button>
+          <label className="flex items-start gap-2">
+            <input
+              type="checkbox"
+              checked={completionAttestation}
+              disabled={
+                ownedStatus.loading ||
+                !!ownedStatus.error ||
+                submitting ||
+                statusRefresh < requiredStatusRefresh ||
+                captureFeedback?.kind === 'UNKNOWN'
+              }
+              onChange={(event) => setCompletionAttestation(event.target.checked)}
+            />
+            I reviewed the recorded linked status and attest to this delivery completion.
+          </label>
+          <p>
+            This records an assigned driver's attestation; it does not independently verify physical
+            freight movement.
+          </p>
+          {captureFeedback && <p role="status">{captureFeedback.message}</p>}
+        </section>
 
         <div className="space-y-1.5">
           <Label htmlFor="epod-recipient-name">Recipient name</Label>
@@ -232,7 +325,19 @@ function CaptureForm({
           <Button type="button" variant="outline" onClick={onCancel} disabled={submitting}>
             Cancel
           </Button>
-          <Button type="button" onClick={() => void handleSubmit()} disabled={submitting}>
+          <Button
+            type="button"
+            onClick={() => void handleSubmit()}
+            disabled={
+              submitting ||
+              ownedStatus.loading ||
+              !!ownedStatus.error ||
+              !ownedStatus.data ||
+              statusRefresh < requiredStatusRefresh ||
+              !completionAttestation ||
+              captureFeedback?.kind === 'UNKNOWN'
+            }
+          >
             {submitting ? (
               <>
                 <Loader2 size={14} className="animate-spin" /> Submitting…
@@ -250,6 +355,7 @@ function CaptureForm({
 }
 
 export default function DeliveryCapturePage() {
+  const { workspaceId, tenantId, currentUser, apiGatewayUrl } = useMoveTheWheels();
   const [pageIndex, setPageIndex] = useState(0);
   const pageSize = 20;
   const { jobs, hasMore, isLoading, error, refetch } = useMyPendingEpodDeliveryJobs({
@@ -277,6 +383,7 @@ export default function DeliveryCapturePage() {
 
         {selectedJob ? (
           <CaptureForm
+            key={`${workspaceId}:${tenantId}:${currentUser?.id}:${apiGatewayUrl}:${selectedJob.id}`}
             job={selectedJob}
             onCaptured={handleCaptured}
             onCancel={() => setSelectedJob(null)}