Checkout

"use client"

import * as React from "react"

import type { Address } from "../address-form/address"
import type { Cart } from "../cart/cart"
import { Checkout } from "@/components/blocks/checkout/checkout"
import type {
  CheckoutAttempt,
  CheckoutDraft,
  OrderStatusResult,
  PlaceOrderResult,
  TaxEstimate,
} from "@/components/blocks/checkout/checkout-model"
import type { ShippingRate } from "../shipping-methods/shipping"

type PlacedOrder = { id: string; number: string }

type StripeError = {
  type: string
  code?: string
  decline_code?: string
  message?: string
}

type StripeElements = {
  submit: () => Promise<{ error?: StripeError }>
}

type Stripe = {
  confirmPayment: (options: {
    elements: StripeElements
    clientSecret: string
    redirect: "if_required"
    confirmParams: { return_url: string }
  }) => Promise<{ error?: StripeError; paymentIntent?: { id: string; status: string } }>
}

type Prepared =
  | { status: "ready"; orderId: string; clientSecret: string }
  | Extract<PlaceOrderResult<PlacedOrder>, { status: "changed" }>

type CheckoutActions = {
  getRates: (cartId: string, address: Address) => Promise<ShippingRate[]>
  estimateTax: (cartId: string, address: Address) => Promise<TaxEstimate>
  prepareOrder: (draft: CheckoutDraft, idempotencyKey: string) => Promise<Prepared>
  confirmOrder: (orderId: string) => Promise<OrderStatusResult<PlacedOrder>>
  orderStatus: (idempotencyKey: string) => Promise<OrderStatusResult<PlacedOrder>>
}

export function StripeCheckout({
  cart,
  stripe,
  elements,
  paymentElement,
  actions,
}: {
  cart: Cart
  stripe: Stripe
  elements: StripeElements
  paymentElement: React.ReactNode
  actions: CheckoutActions
}) {
  const placeOrder = async (
    draft: CheckoutDraft,
    request: { idempotencyKey: string }
  ): Promise<PlaceOrderResult<PlacedOrder>> => {
    const submitted = await elements.submit()
    if (submitted.error) {
      return { status: "declined", message: submitted.error.message }
    }

    const prepared = await actions.prepareOrder(draft, request.idempotencyKey)
    if (prepared.status === "changed") return prepared

    const { error } = await stripe.confirmPayment({
      elements,
      clientSecret: prepared.clientSecret,
      redirect: "if_required",
      confirmParams: {
        return_url: `${window.location.origin}/checkout/return?order=${prepared.orderId}`,
      },
    })
    if (error?.type === "card_error" || error?.type === "validation_error") {
      return {
        status: "declined",
        code: error.decline_code ?? error.code,
        message: error.message,
      }
    }
    if (error) throw new Error(error.message ?? "We couldn’t reach Stripe. Nothing was charged.")

    const confirmed = await actions.confirmOrder(prepared.orderId)
    if (confirmed.status === "pending") return new Promise(() => {})
    return confirmed
  }

  return (
    <Checkout<PlacedOrder>
      cart={cart}
      paymentElement={paymentElement}
      onGetRates={(address) => actions.getRates(cart.id, address)}
      onEstimateTax={(address) => actions.estimateTax(cart.id, address)}
      onPlaceOrder={placeOrder}
      onCheckStatus={(attempt: CheckoutAttempt) =>
        actions.orderStatus(attempt.idempotencyKey)
      }
      onComplete={(order) => {
        if (order) window.location.assign(`/orders/${order.id}`)
      }}
    />
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"

import type { Address } from "../address-form/address"

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

type Storefront = <T>(query: string, variables: Record<string, unknown>) => Promise<T>

type UserErrors = { userErrors: { field: string[] | null; message: string }[] }

const buyerIdentity = `
  mutation cartBuyerIdentityUpdate($cartId: ID!, $buyerIdentity: CartBuyerIdentityInput!) {
    cartBuyerIdentityUpdate(cartId: $cartId, buyerIdentity: $buyerIdentity) {
      cart { id checkoutUrl }
      userErrors { field message }
    }
  }
`

const deliveryAddress = `
  mutation cartDeliveryAddressesAdd($cartId: ID!, $addresses: [CartSelectableAddressInput!]!) {
    cartDeliveryAddressesAdd(cartId: $cartId, addresses: $addresses) {
      cart { id }
      userErrors { field message }
    }
  }
`

function toShopifyAddress(address: Address) {
  const [firstName, ...rest] = address.name.trim().split(/\s+/)
  return {
    firstName,
    lastName: rest.join(" "),
    company: address.company,
    address1: address.line1,
    address2: address.line2,
    city: address.city,
    provinceCode: address.region,
    zip: address.postalCode,
    countryCode: address.country,
    phone: address.phone,
  }
}

export function ShopifyCheckoutButton({
  cart,
  storefront,
  customer,
}: {
  cart: ShopifyCart
  storefront: Storefront
  customer?: { email: string; address?: Address } | null
}) {
  const [error, setError] = React.useState<string | null>(null)

  const handoff = async () => {
    setError(null)
    try {
      if (customer) {
        const identity = await storefront<{ cartBuyerIdentityUpdate: UserErrors }>(
          buyerIdentity,
          {
            cartId: cart.id,
            buyerIdentity: {
              email: customer.email,
              countryCode: customer.address?.country,
            },
          }
        )
        const problem = identity.cartBuyerIdentityUpdate.userErrors[0]
        if (problem) throw new Error(problem.message)
      }
      if (customer?.address) {
        await storefront<{ cartDeliveryAddressesAdd: UserErrors }>(deliveryAddress, {
          cartId: cart.id,
          addresses: [
            {
              address: { deliveryAddress: toShopifyAddress(customer.address) },
              selected: true,
            },
          ],
        })
      }
      window.location.assign(cart.checkoutUrl)
      await new Promise(() => {})
    } catch (caught) {
      setError(
        caught instanceof Error && caught.message
          ? caught.message
          : "We couldn’t open checkout. Try again."
      )
    }
  }

  return (
    <div className="flex flex-col gap-2">
      <Button size="lg" className="w-full" feedback onClick={handoff}>
        Check out
      </Button>
      {error ? (
        <p role="alert" className="text-sm text-destructive">
          {error}
        </p>
      ) : null}
    </div>
  )
}

"use client"

import type * as React from "react"

import type { Address } from "../address-form/address"
import type { Cart } from "../cart/cart"
import { compareMoney, money, type Money } from "../price/money"
import type { ShippingRate } from "../shipping-methods/shipping"
import { Checkout } from "@/components/blocks/checkout/checkout"
import type {
  CheckoutChange,
  CheckoutDraft,
  PlaceOrderResult,
} from "@/components/blocks/checkout/checkout-model"

type MedusaAddress = {
  first_name: string
  last_name: string
  company?: string
  address_1: string
  address_2?: string
  city: string
  province?: string
  postal_code?: string
  country_code: string
  phone?: string
}

type MedusaCart = {
  id: string
  currency_code: string
  total: number
  tax_total: number
  shipping_total: number
  items: {
    id: string
    title: string
    product_title: string
    variant_id: string
    product_id: string
    quantity: number
    unit_price: number
    thumbnail: string | null
  }[]
}

type MedusaOrder = { id: string; display_id: number }

type MedusaSdk = {
  store: {
    cart: {
      update: (
        id: string,
        body: { email?: string; shipping_address?: MedusaAddress; billing_address?: MedusaAddress }
      ) => Promise<{ cart: MedusaCart }>
      addShippingMethod: (id: string, body: { option_id: string }) => Promise<{ cart: MedusaCart }>
      complete: (
        id: string
      ) => Promise<
        | { type: "order"; order: MedusaOrder }
        | { type: "cart"; cart: MedusaCart; error: { message: string } }
      >
    }
    fulfillment: {
      listCartOptions: (query: { cart_id: string }) => Promise<{
        shipping_options: { id: string; name: string; amount: number }[]
      }>
    }
    payment: {
      initiatePaymentSession: (
        cart: MedusaCart,
        body: { provider_id: string }
      ) => Promise<{ payment_collection: { payment_sessions: { id: string; data: Record<string, unknown> }[] } }>
    }
  }
}

function toMedusaAddress(address: Address): MedusaAddress {
  const [first, ...rest] = address.name.trim().split(/\s+/)
  return {
    first_name: first ?? "",
    last_name: rest.join(" "),
    company: address.company,
    address_1: address.line1,
    address_2: address.line2,
    city: address.city,
    province: address.region,
    postal_code: address.postalCode,
    country_code: address.country.toLowerCase(),
    phone: address.phone,
  }
}

function toCart(cart: MedusaCart): Cart {
  const currency = cart.currency_code.toUpperCase()
  return {
    id: cart.id,
    currencyCode: currency,
    lines: cart.items.map((item) => ({
      id: item.id,
      quantity: item.quantity,
      price: money(item.unit_price, currency),
      merchandise: {
        id: item.variant_id,
        productId: item.product_id,
        productTitle: item.product_title,
        variantTitle: item.title,
        image: item.thumbnail
          ? { id: item.thumbnail, src: item.thumbnail, alt: "" }
          : undefined,
      },
    })),
  }
}

function changesBetween(draft: CheckoutDraft, cart: MedusaCart): CheckoutChange[] {
  const currency = cart.currency_code.toUpperCase()
  const changes: CheckoutChange[] = []
  for (const line of draft.lines) {
    const item = cart.items.find((entry) => entry.id === line.id)
    if (!item) {
      changes.push({ type: "sold_out", lineId: line.id, title: line.merchandise.productTitle })
      continue
    }
    const price = money(item.unit_price, currency)
    if (compareMoney(price, line.price) !== 0) {
      changes.push({ type: "price", lineId: line.id, title: item.product_title, from: line.price, to: price })
    }
    if (item.quantity !== line.quantity) {
      changes.push({ type: "quantity", lineId: line.id, title: item.product_title, from: line.quantity, to: item.quantity })
    }
  }
  const shipping = money(cart.shipping_total, currency)
  if (compareMoney(shipping, draft.shippingRate.price) !== 0) {
    changes.push({ type: "shipping", from: draft.shippingRate.price, to: shipping })
  }
  return changes
}

type PaymentSession = { id: string; data: Record<string, unknown> }

export function MedusaCheckout({
  sdk,
  cart,
  providerId = "pp_stripe_stripe",
  paymentElement,
  confirmPayment,
  onPlaced,
}: {
  sdk: MedusaSdk
  cart: MedusaCart
  providerId?: string
  paymentElement: React.ReactNode
  confirmPayment: (session: PaymentSession) => Promise<{ declined?: string } | void>
  onPlaced: (order: MedusaOrder) => void
}) {
  const currency = cart.currency_code.toUpperCase()
  const taxes = new Map<string, Money>()

  const placeOrder = async (draft: CheckoutDraft): Promise<PlaceOrderResult<MedusaOrder>> => {
    await sdk.store.cart.update(cart.id, {
      email: draft.email,
      shipping_address: toMedusaAddress(draft.shippingAddress),
      billing_address: toMedusaAddress(draft.billingAddress),
    })
    const { cart: priced } = await sdk.store.cart.addShippingMethod(cart.id, {
      option_id: draft.shippingRate.id,
    })

    if (compareMoney(money(priced.total, currency), draft.total) !== 0) {
      const changes = changesBetween(draft, priced)
      const estimated = taxes.get(cart.id)
      const tax = money(priced.tax_total, currency)
      if (estimated && compareMoney(estimated, tax) !== 0) {
        changes.push({ type: "tax", from: estimated, to: tax })
      }
      return {
        status: "changed",
        changes,
        cart: toCart(priced),
        shipping: money(priced.shipping_total, currency),
        tax,
      }
    }

    const { payment_collection } = await sdk.store.payment.initiatePaymentSession(priced, {
      provider_id: providerId,
    })
    const session = payment_collection.payment_sessions[0]
    if (session) {
      const confirmed = await confirmPayment(session)
      if (confirmed?.declined) return { status: "declined", message: confirmed.declined }
    }
    const completed = await sdk.store.cart.complete(cart.id)
    if (completed.type === "cart") {
      return { status: "declined", message: completed.error.message }
    }
    return { status: "succeeded", order: completed.order }
  }

  return (
    <Checkout<MedusaOrder>
      cart={toCart(cart)}
      paymentElement={paymentElement}
      onGetRates={async (address) => {
        await sdk.store.cart.update(cart.id, { shipping_address: toMedusaAddress(address) })
        const { shipping_options } = await sdk.store.fulfillment.listCartOptions({
          cart_id: cart.id,
        })
        return shipping_options.map(
          (option): ShippingRate => ({
            id: option.id,
            title: option.name,
            price: money(option.amount, currency),
            delivery: { businessDays: [3, 5] },
            kind: "ship",
          })
        )
      }}
      onEstimateTax={async (address) => {
        const { cart: updated } = await sdk.store.cart.update(cart.id, {
          shipping_address: toMedusaAddress(address),
        })
        const tax = money(updated.tax_total, currency)
        taxes.set(cart.id, tax)
        return tax
      }}
      onPlaceOrder={placeOrder}
      onComplete={(order) => {
        if (order) onPlaced(order)
      }}
    />
  )
}