feat(thank-you): payment instructions extension (GiroCode + bank details) for manual payment orders

extensions/invoice-thank-you-payment/src/Checkout.tsx

@@ -0,0 +1,103 @@
+import "@shopify/ui-extensions/preact";
+import { render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+const APP_URL = "https://invoice-app.linumiq.com";
+
+interface PaymentInstructions {
+  language: "de" | "en";
+  heading: string;
+  giroCodeDataUrl: string;
+  recipient: string;
+  bankName: string;
+  iban: string;
+  bic: string;
+  amountFormatted: string;
+  reference: string;
+  dueDateFormatted: string | null;
+  instructions: string;
+  labels: {
+    recipient: string;
+    bank: string;
+    iban: string;
+    bic: string;
+    amount: string;
+    reference: string;
+  };
+}
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const shopify = (globalThis as any).shopify;
+  const [data, setData] = useState<PaymentInstructions | null>(null);
+  const [done, setDone] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      try {
+        const orderId: string | undefined = shopify?.orderConfirmation?.value?.order?.id;
+        if (!orderId) {
+          setDone(true);
+          return;
+        }
+        const token: string = await shopify.sessionToken.get();
+        const res = await fetch(
+          `${APP_URL}/api/public/payment-info?orderId=${encodeURIComponent(orderId)}`,
+          { headers: { Authorization: `Bearer ${token}` } },
+        );
+        if (!res.ok) {
+          setDone(true);
+          return;
+        }
+        const json = (await res.json()) as {
+          showPaymentInstructions: boolean;
+          payload?: PaymentInstructions;
+        };
+        if (cancelled) return;
+        if (json.showPaymentInstructions && json.payload) {
+          setData(json.payload);
+        }
+      } catch {
+        // ignore — render nothing on error
+      } finally {
+        if (!cancelled) setDone(true);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!done) {
+    return <s-skeleton-paragraph />;
+  }
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <s-section heading={data.heading}>
+      <s-paragraph>{data.instructions}</s-paragraph>
+      <s-stack direction="inline" gap="base" align-items="start">
+        <s-image src={data.giroCodeDataUrl} alt="GiroCode" />
+        <s-stack direction="block" gap="small-200">
+          <s-text>{data.labels.recipient}: {data.recipient}</s-text>
+          {data.bankName ? (
+            <s-text>{data.labels.bank}: {data.bankName}</s-text>
+          ) : null}
+          <s-text>{data.labels.iban}: {data.iban}</s-text>
+          {data.bic ? (
+            <s-text>{data.labels.bic}: {data.bic}</s-text>
+          ) : null}
+          <s-text>{data.labels.amount}: {data.amountFormatted}</s-text>
+          <s-text>{data.labels.reference}: {data.reference}</s-text>
+        </s-stack>
+      </s-stack>
+    </s-section>
+  );
+}