OrderSummary

const orderSummaryFixture = {
  id: "order-summary",
  items: [
    { id: "seed", name: "Heirloom seed packet", variant: "Tomato / Brandywine", price: 1800, quantity: 2 },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ],
  currency: "USD",
  shipping: 800,
  taxRate: 0.2,
  discount: 500,
  checkoutLabel: "Checkout",
} satisfies {
  id: string;
  items: Array<{ id: string; name: string; variant?: string; price: number; quantity: number }>;
  currency: string;
  shipping: number;
  taxRate: number;
  discount: number;
  checkoutLabel: string;
};
 
import { OrderSummary } from "@grassroot/ui-react";
 
export default function OrderSummaryDemo() {
  return (
    <div>
      <OrderSummary
        items={orderSummaryFixture.items}
        currency={orderSummaryFixture.currency}
        shipping={orderSummaryFixture.shipping}
        taxRate={orderSummaryFixture.taxRate}
        discount={orderSummaryFixture.discount}
        checkoutLabel={orderSummaryFixture.checkoutLabel}
        onCheckout={() => {}}
      />
    </div>
  );
}

<script setup lang="ts">
const orderSummaryFixture = {
  id: "order-summary",
  items: [
    { id: "seed", name: "Heirloom seed packet", variant: "Tomato / Brandywine", price: 1800, quantity: 2 },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ],
  currency: "USD",
  shipping: 800,
  taxRate: 0.2,
  discount: 500,
  checkoutLabel: "Checkout",
} satisfies {
  id: string;
  items: Array<{ id: string; name: string; variant?: string; price: number; quantity: number }>;
  currency: string;
  shipping: number;
  taxRate: number;
  discount: number;
  checkoutLabel: string;
};
 
import { OrderSummary } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <OrderSummary
      :items="orderSummaryFixture.items"
      :currency="orderSummaryFixture.currency"
      :shipping="orderSummaryFixture.shipping"
      :tax-rate="orderSummaryFixture.taxRate"
      :discount="orderSummaryFixture.discount"
      :checkout-label="orderSummaryFixture.checkoutLabel"
      @checkout="() => {}"
    />
  </div>
</template>

import { Component } from "@angular/core";
const orderSummaryFixture = {
  id: "order-summary",
  items: [
    { id: "seed", name: "Heirloom seed packet", variant: "Tomato / Brandywine", price: 1800, quantity: 2 },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ],
  currency: "USD",
  shipping: 800,
  taxRate: 0.2,
  discount: 500,
  checkoutLabel: "Checkout",
} satisfies {
  id: string;
  items: Array<{ id: string; name: string; variant?: string; price: number; quantity: number }>;
  currency: string;
  shipping: number;
  taxRate: number;
  discount: number;
  checkoutLabel: string;
};
 
import { GrassrootOrderSummary } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-order-summary-demo",
  standalone: true,
  imports: [GrassrootOrderSummary],
  template: `
    <div>
      <grassroot-order-summary
        [items]="fixture.items"
        [currency]="fixture.currency"
        [shipping]="fixture.shipping"
        [taxRate]="fixture.taxRate"
        [discount]="fixture.discount"
        [checkoutLabel]="fixture.checkoutLabel"
        (checkout)="onCheckout()"
      />
    </div>
  `,
})
export class OrderSummaryDemoComponent {
  protected readonly fixture = orderSummaryFixture;
  protected onCheckout(): void {}
}
 
export default OrderSummaryDemoComponent;

<script lang="ts">
  import { OrderSummary } from "@grassroot/ui-svelte";
  const orderSummaryFixture = {
    id: "order-summary",
    items: [
      { id: "seed", name: "Heirloom seed packet", variant: "Tomato / Brandywine", price: 1800, quantity: 2 },
      { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
    ],
    currency: "USD",
    shipping: 800,
    taxRate: 0.2,
    discount: 500,
    checkoutLabel: "Checkout",
  } satisfies {
    id: string;
    items: Array<{ id: string; name: string; variant?: string; price: number; quantity: number }>;
    currency: string;
    shipping: number;
    taxRate: number;
    discount: number;
    checkoutLabel: string;
  };
 
  </script>
 
<div>
  <OrderSummary
    items={orderSummaryFixture.items}
    currency={orderSummaryFixture.currency}
    shipping={orderSummaryFixture.shipping}
    taxRate={orderSummaryFixture.taxRate}
    discount={orderSummaryFixture.discount}
    checkoutLabel={orderSummaryFixture.checkoutLabel}
    onCheckout={() => {}}
  />
</div>

/** @jsxImportSource solid-js */
const orderSummaryFixture = {
  id: "order-summary",
  items: [
    { id: "seed", name: "Heirloom seed packet", variant: "Tomato / Brandywine", price: 1800, quantity: 2 },
    { id: "trowel", name: "Forged steel trowel", price: 3200, quantity: 1 },
  ],
  currency: "USD",
  shipping: 800,
  taxRate: 0.2,
  discount: 500,
  checkoutLabel: "Checkout",
} satisfies {
  id: string;
  items: Array<{ id: string; name: string; variant?: string; price: number; quantity: number }>;
  currency: string;
  shipping: number;
  taxRate: number;
  discount: number;
  checkoutLabel: string;
};
 
import { OrderSummary } from "@grassroot/ui-solid";
 
export default function OrderSummaryDemo() {
  return (
    <div>
      <OrderSummary
        items={orderSummaryFixture.items}
        currency={orderSummaryFixture.currency}
        shipping={orderSummaryFixture.shipping}
        taxRate={orderSummaryFixture.taxRate}
        discount={orderSummaryFixture.discount}
        checkoutLabel={orderSummaryFixture.checkoutLabel}
        onCheckout={() => {}}
      />
    </div>
  );
}