Billing Details

import { BillingOrderSummary } from "@/components/email/billing-order-summary";
import { defaultTheme } from "@/components/email/theme-default";

export function BillingOrderSummaryDemo() {
  return (
    <BillingOrderSummary
      billingPosition="top"
      appearance="plain"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearancePlainExampleDemo() {
  return <BillingOrderSummary billingPosition="top" appearance="plain" />;
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearancePlainPaymentExampleDemo() {
  return (
    <BillingOrderSummary billingPosition="top" appearance="plain" payment />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearancePlainNotesExampleDemo() {
  return <BillingOrderSummary billingPosition="top" appearance="plain" notes />;
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearancePlainPaymentNotesExampleDemo() {
  return (
    <BillingOrderSummary
      billingPosition="top"
      appearance="plain"
      payment
      notes
    />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearanceBorderedExampleDemo() {
  return <BillingOrderSummary billingPosition="top" appearance="bordered" />;
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearanceBorderedPaymentExampleDemo() {
  return (
    <BillingOrderSummary billingPosition="top" appearance="bordered" payment />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearanceBorderedNotesExampleDemo() {
  return (
    <BillingOrderSummary billingPosition="top" appearance="bordered" notes />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionTopAppearanceBorderedPaymentNotesExampleDemo() {
  return (
    <BillingOrderSummary
      billingPosition="top"
      appearance="bordered"
      payment
      notes
    />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionInlineAppearancePlainExampleDemo() {
  return <BillingOrderSummary billingPosition="inline" appearance="plain" />;
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionInlineAppearancePlainNotesExampleDemo() {
  return (
    <BillingOrderSummary billingPosition="inline" appearance="plain" notes />
  );
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionInlineAppearanceBorderedExampleDemo() {
  return <BillingOrderSummary billingPosition="inline" appearance="bordered" />;
}

import { BillingOrderSummary } from "@/components/email/billing-order-summary";

export function BillingOrderSummaryBillingPositionInlineAppearanceBorderedNotesExampleDemo() {
  return (
    <BillingOrderSummary billingPosition="inline" appearance="bordered" notes />
  );
}