// @bun
// src/components/docs/integrations/IntegrationsPostmarkPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function IntegrationsPostmarkPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "Postmark"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Postmark is a transactional email service with industry-leading deliverability. Use it to send order confirmations, password resets, notifications, and other critical emails."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Setup"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Add your Postmark credentials to your environment variables:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `# .env
POSTMARK_API_TOKEN=...
POSTMARK_FROM_EMAIL=noreply@example.com
POSTMARK_FROM_NAME="Your App Name"`
            })
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground text-sm",
            children: [
              "Get your API token from the",
              " ",
              /* @__PURE__ */ jsx("a", {
                href: "https://account.postmarkapp.com/servers",
                target: "_blank",
                rel: "noopener noreferrer",
                className: "text-violet-400 hover:text-violet-300",
                children: "Postmark Dashboard"
              }),
              "."
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Sending emails"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `capabilityId: send-email
provider:
  type: postmark
  operation: sendEmail

inputs:
  to:
    type: string
    description: "Recipient email address"
  subject:
    type: string
  htmlBody:
    type: string
    optional: true
  textBody:
    type: string
    optional: true
  templateId:
    type: string
    optional: true
  templateData:
    type: object
    optional: true

outputs:
  messageId:
    type: string
  submittedAt:
    type: timestamp`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Using templates"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Postmark templates allow you to design emails in their dashboard and populate them with data:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `capabilityId: send-welcome-email
provider:
  type: postmark
  operation: sendEmail

inputs:
  to:
    type: string
  userName:
    type: string

config:
  templateId: "welcome-email"
  templateData:
    user_name: \${input.userName}
    login_url: "https://app.example.com/login"`
            })
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Webhooks"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Postmark can notify your app about delivery, bounces, and opens:"
          }),
          /* @__PURE__ */ jsx("div", {
            className: "bg-background/50 border-border text-muted-foreground overflow-x-auto rounded-lg border p-4 font-mono text-sm",
            children: /* @__PURE__ */ jsx("pre", {
              children: `https://your-app.com/api/webhooks/postmark`
            })
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "ContractSpec automatically processes these webhook events:"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Delivery"
                  }),
                  " \u2013 Email was successfully delivered"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Bounce"
                  }),
                  " \u2013 Email bounced (hard or soft)"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "SpamComplaint"
                  }),
                  " \u2013 Recipient marked email as spam"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Open"
                  }),
                  " \u2013 Recipient opened the email"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("strong", {
                    children: "Click"
                  }),
                  " \u2013 Recipient clicked a link"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Best practices"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "Use templates for consistent branding"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Always provide both HTML and plain text versions"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Monitor bounce rates and remove invalid addresses"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Use message streams to separate different email types"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Test emails in the Postmark sandbox before going live"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "Set up DKIM and SPF records for your domain"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/integrations/stripe",
            className: "btn-ghost",
            children: "Previous: Stripe"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/integrations/resend",
            className: "btn-primary",
            children: [
              "Next: Resend ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  IntegrationsPostmarkPage
};
