Payment

"use client"

import { money } from "../price/money"
import { Payment, PayButton, PaymentStatus } from "@/components/blocks/payment/payment"
import { PaymentMethods } from "@/components/blocks/payment/payment-methods"
import type { PaymentRequest, PaymentResult } from "@/components/blocks/payment/payment-model"

type StripeConfirmResult = {
  error?: { code?: string; decline_code?: string; message?: string }
  paymentIntent?: {
    id: string
    status: "succeeded" | "processing" | "requires_action"
  }
}

type Stripe = {
  confirmPayment: (options: {
    elements: unknown
    clientSecret: string
    redirect: "if_required"
    confirmParams?: { return_url: string }
  }) => Promise<StripeConfirmResult>
}

async function createPaymentIntent(idempotencyKey: string) {
  const response = await fetch("/api/payment-intents", {
    method: "POST",
    headers: { "Idempotency-Key": idempotencyKey },
  })
  if (!response.ok) throw new Error("We couldn’t start the payment. Try again.")
  const { clientSecret } = (await response.json()) as { clientSecret: string }
  return clientSecret
}

export function StripePayment({
  stripe,
  elements,
}: {
  stripe: Stripe
  elements: unknown
}) {
  const pay = async (request: PaymentRequest): Promise<PaymentResult> => {
    const clientSecret = await createPaymentIntent(request.idempotencyKey)
    const { error, paymentIntent } = await stripe.confirmPayment({
      elements,
      clientSecret,
      redirect: "if_required",
      confirmParams: { return_url: `${window.location.origin}/order/complete` },
    })
    if (error) {
      return {
        status: "declined",
        code: error.decline_code ?? error.code,
        message: error.message,
      }
    }
    return { status: "succeeded", id: paymentIntent?.id }
  }

  return (
    <Payment
      total={money("123.45", "USD")}
      methods={["card"]}
      onPay={pay}
      onComplete={() => window.location.assign("/order/complete")}
    >
      <PaymentMethods />
      <PayButton />
      <PaymentStatus />
    </Payment>
  )
}

"use client"

import { money } from "../price/money"
import { Payment, PayButton, PaymentStatus } from "@/components/blocks/payment/payment"
import { PaymentMethods } from "@/components/blocks/payment/payment-methods"
import type { PaymentRequest } from "@/components/blocks/payment/payment-model"

export function PayPalRedirect({ cartId }: { cartId: string }) {
  const pay = async (request: PaymentRequest) => {
    if (request.method !== "paypal") {
      throw new Error("This store only takes PayPal right now.")
    }
    const response = await fetch("/api/paypal/orders", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "PayPal-Request-Id": request.idempotencyKey,
      },
      body: JSON.stringify({ cartId }),
    })
    if (!response.ok) {
      throw new Error("PayPal isn’t responding. Nothing was charged.")
    }
    const { approveUrl } = (await response.json()) as { approveUrl: string }
    window.location.assign(approveUrl)
    await new Promise(() => {})
  }

  return (
    <Payment
      total={money("123.45", "USD")}
      methods={["paypal"]}
      defaultMethod="paypal"
      onPay={pay}
    >
      <PaymentMethods />
      <PayButton />
      <PaymentStatus />
    </Payment>
  )
}

"use client"

import { ExpressCheckout } from "@/components/blocks/payment/express-checkout"
import { Payment, PayButton, PaymentStatus } from "@/components/blocks/payment/payment"
import { PaymentMethods } from "@/components/blocks/payment/payment-methods"

type ShopifyCart = {
  checkoutUrl: string
  cost: { totalAmount: { amount: string; currencyCode: string } }
}

function go(url: string) {
  window.location.assign(url)
  return new Promise<void>(() => {})
}

export function ShopifyHandoff({ cart }: { cart: ShopifyCart }) {
  const url = new URL(cart.checkoutUrl)

  return (
    <Payment
      total={cart.cost.totalAmount}
      methods={["paypal"]}
      defaultMethod="paypal"
      onPay={() => go(url.toString())}
    >
      <ExpressCheckout
        methods={["shop_pay"]}
        onExpress={() => {
          url.searchParams.set("payment", "shop_pay")
          return go(url.toString())
        }}
      />
      <PaymentMethods />
      <PayButton />
      <PaymentStatus />
    </Payment>
  )
}