feat(customer-account): payment extension for order page (shares /api/public/payment-info; dual auth)

2026-05-09 21:45:27 +02:00
parent 5ac2e09f8c
commit ca769c49a4
6 changed files with 183 additions and 5 deletions
@@ -0,0 +1,110 @@
+import "@shopify/ui-extensions/preact";
+import { render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+
+const APP_URL_PROD = "https://invoice-app.linumiq.com";
+const APP_URL_DEV = "https://invoice-app-dev.linumiq.com";
+const DEV_SHOPS = new Set(["linumiq-dev.myshopify.com"]);
+
+function resolveAppUrl(shopify: any): string {
+  const shop: string | undefined =
+    shopify?.shop?.myshopifyDomain ?? shopify?.shop?.value?.myshopifyDomain;
+  if (shop && DEV_SHOPS.has(shop)) return APP_URL_DEV;
+  return APP_URL_PROD;
+}
+
+interface PaymentInstructions {
+  language: "de" | "en";
+  heading: string;
+  giroCodeUrl: 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?.order?.value?.id;
+        if (!orderId) {
+          setDone(true);
+          return;
+        }
+        const token: string = await shopify.sessionToken.get();
+        const appUrl = resolveAppUrl(shopify);
+        const res = await fetch(
+          `${appUrl}/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 {
+        // swallow; render nothing
+      } finally {
+        if (!cancelled) setDone(true);
+      }
+    }
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  if (!done || !data) {
+    return null;
+  }
+
+  return (
+    <s-section heading={data.heading}>
+      <s-paragraph>{data.instructions}</s-paragraph>
+      <s-grid gridTemplateColumns="200px 1fr" gap="base" alignItems="start">
+        <s-image src={data.giroCodeUrl} alt="GiroCode" inlineSize="fill" aspectRatio="1" />
+        <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-grid>
+    </s-section>
+  );
+}