From cd524ff1cc1770654ad7ae8bb1a547f43748144d Mon Sep 17 00:00:00 2001
From: Nati <natinigussie7@gmail.com>
Date: Fri, 21 Aug 2026 07:05:42 +0000
Subject: [PATCH] Minor

---
 .../certificates/pages/CertificatesPage.tsx   | 41 ++++++++++++++++++-
 1 file changed, 39 insertions(+), 2 deletions(-)

diff --git a/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx b/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
index 73e924775..c15fa983b 100644
--- a/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
+++ b/apps/portal/src/app/features/certificates/pages/CertificatesPage.tsx
@@ -30,7 +30,12 @@ import {
   IconShieldCheck,
 } from '@tabler/icons-react';
 import { authStorage, useCurrentProfile } from '@ema-platform/auth';
-import { useApiQuery } from '@ema-platform/api';
+import {
+  extractErrorMessage,
+  useApiQuery,
+  useBypassPaymentMutation,
+  useGetPaymentCapabilitiesQuery,
+} from '@ema-platform/api';
 import {
   useGetMySeaServiceRecordsQuery,
   useGetMyMedicalCertificatesQuery,
@@ -146,11 +151,32 @@ export function CertificatesPage() {
   const [previewTitle, setPreviewTitle] = useState('');
   const [loading, setLoading] = useState(false);
   const { pay, isPaying } = useApplicationPayment();
+  // Dev/test only — the API reports false in production and the button is
+  // never rendered. Same shortcut My Applications offers.
+  const { data: capabilities } = useGetPaymentCapabilitiesQuery();
+  const [bypassPayment, { isLoading: bypassing }] = useBypassPaymentMutation();
 
-  const { data } = useApiQuery<CertificatesOverview>({
+  const { data, refetch } = useApiQuery<CertificatesOverview>({
     url: '/certificates/my',
     method: 'GET',
   });
+
+  const handleBypass = async (applicationId: string) => {
+    try {
+      const result = await bypassPayment(applicationId).unwrap();
+      notifications.show({
+        color: 'teal',
+        title: 'Payment bypassed',
+        message: result.certificateIssued
+          ? 'The certificate has been issued.'
+          : `Application is now ${humanStatus(result.status)}.`,
+      });
+      // Generic query, not tag-driven: refresh it by hand.
+      refetch();
+    } catch (err) {
+      notifications.show({ color: 'red', title: 'Bypass failed', message: extractErrorMessage(err) });
+    }
+  };
   const certificates = data?.certificates ?? [];
   const applications = data?.applications ?? [];
 
@@ -331,6 +357,17 @@ export function CertificatesPage() {
                           Pay {app.feeAmount.toLocaleString()} {app.feeCurrency}
                         </Button>
                       )}
+                      {app.feeAmount !== null && capabilities?.bypassEnabled && (
+                        <Button
+                          size="xs"
+                          variant="default"
+                          loading={bypassing}
+                          onClick={() => handleBypass(app.applicationId)}
+                          title="Testing only — marks the fee paid without a provider"
+                        >
+                          Bypass payment
+                        </Button>
+                      )}
                       <Text
                         fz="xs"
                         c="blue"