src/components/DroneFlightRequestForm.astro

@@ -131,9 +131,12 @@ const frzGeoJsonEndpoint = `${pprApiBase}/drone-requests/frz`;
     Submitting your drone request...
   </div>
 
-  <div class="drone-success notice" id="success-message" role="status" aria-live="polite">
+  <div class="drone-success notice" id="success-message" role="status" aria-live="polite" tabindex="-1">
     <h3>Drone Request Submitted.</h3>
     <p>Your drone request has been submitted. We will review it and contact you if we need any further information.</p>
+    <p class="drone-reference" id="reference-number-message" hidden>
+      Reference number: <strong id="reference-number"></strong> - please make a note of this in case you don't get the email.
+    </p>
   </div>
 </section>
 
@@ -447,8 +450,24 @@ const frzGeoJsonEndpoint = `${pprApiBase}/drone-requests/frz`;
           throw new Error(errorData.detail || `Submission failed: ${response.status}`);
         }
 
+        const responseData = await response.json().catch(() => ({}));
+        const referenceNumber = responseData?.reference_number;
+        const referenceMessage = get('reference-number-message');
+        const referenceNumberElement = get('reference-number');
+
+        if (referenceNumber) {
+          referenceNumberElement.textContent = referenceNumber;
+          referenceMessage.hidden = false;
+        } else {
+          referenceNumberElement.textContent = '';
+          referenceMessage.hidden = true;
+        }
+
         form.style.display = 'none';
-        get('success-message').style.display = 'block';
+        const successMessage = get('success-message');
+        successMessage.style.display = 'block';
+        successMessage.focus({ preventScroll: true });
+        window.scrollTo({ top: 0, behavior: 'smooth' });
         showNotification('Drone request submitted successfully!');
       } catch (error) {
         console.error('Error submitting drone request:', error);