@marianmeres/stuic 3.9.1 → 3.10.0

package/dist/components/Checkout/CheckoutAddressForm.svelte

@@ -0,0 +1,227 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type {
+		CheckoutAddressData,
+		CheckoutValidationError,
+	} from "./_internal/checkout-types.js";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
+		/** Bindable address data. Default: createEmptyAddress() */
+		address?: CheckoutAddressData;
+
+		/**
+		 * Label prefix used for:
+		 * - Accessible field IDs (e.g., "shipping-name", "billing-street")
+		 * - Error field matching (errors with field "shipping.name" match when label="shipping")
+		 * Default: "address"
+		 */
+		label?: string;
+
+		/** External validation errors */
+		errors?: CheckoutValidationError[];
+
+		/** Which fields to display. All default to true. */
+		fields?: {
+			name?: boolean;
+			street?: boolean;
+			city?: boolean;
+			postal_code?: boolean;
+			country?: boolean;
+			phone?: boolean;
+		};
+
+		/**
+		 * Which fields are required (shown with * marker, included in built-in validation).
+		 * Default: ["name", "street", "city", "postal_code", "country"]
+		 */
+		requiredFields?: string[];
+
+		/**
+		 * Override the country field with a custom selector.
+		 * When provided, replaces the default text input for country.
+		 */
+		countryField?: Snippet<
+			[
+				{
+					/** Current country value */
+					value: string;
+					/** Called when country changes */
+					onchange: (value: string) => void;
+					/** Error message for this field (if any) */
+					error?: string;
+					/** Field label text */
+					label: string;
+					/** HTML id attribute for the input */
+					id: string;
+				},
+			]
+		>;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLFieldSetElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./_internal/checkout-i18n-defaults.js";
+	import { createEmptyAddress } from "./_internal/checkout-utils.js";
+	import FieldInput from "../Input/FieldInput.svelte";
+
+	const DEFAULT_REQUIRED = ["name", "street", "city", "postal_code", "country"];
+
+	let {
+		address = $bindable(createEmptyAddress()),
+		label = "address",
+		errors: externalErrors = [],
+		fields,
+		requiredFields = DEFAULT_REQUIRED,
+		countryField,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	function fieldError(field: string): string | undefined {
+		return externalErrors.find((e) => e.field.endsWith(`.${field}`))?.message;
+	}
+
+	function isRequired(field: string): boolean {
+		return requiredFields.includes(field);
+	}
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-checkout-address", classProp)
+	);
+</script>
+
+<fieldset bind:this={el} class={_class} {...rest}>
+	<!-- Name (full width, block label) -->
+	{#if fields?.name !== false}
+		<FieldInput
+			bind:value={address.name}
+			label={t("checkout.address.name_label")}
+			placeholder={t("checkout.address.name_placeholder")}
+			required={isRequired("name")}
+			name="{label}-name"
+			id="{label}-name"
+			labelLeftBreakpoint={0}
+			validate={{
+				customValidator(val) {
+					return fieldError("name") || "";
+				},
+			}}
+		/>
+	{/if}
+
+	<!-- Street (full width, block label) -->
+	{#if fields?.street !== false}
+		<FieldInput
+			bind:value={address.street}
+			label={t("checkout.address.street_label")}
+			placeholder={t("checkout.address.street_placeholder")}
+			required={isRequired("street")}
+			name="{label}-street"
+			id="{label}-street"
+			labelLeftBreakpoint={0}
+			validate={{
+				customValidator(val) {
+					return fieldError("street") || "";
+				},
+			}}
+		/>
+	{/if}
+
+	<!-- City + Postal Code (2-column grid) -->
+	{#if fields?.city !== false || fields?.postal_code !== false}
+		<div class={unstyled ? undefined : "stuic-checkout-address-row"}>
+			{#if fields?.city !== false}
+				<FieldInput
+					bind:value={address.city}
+					label={t("checkout.address.city_label")}
+					placeholder={t("checkout.address.city_placeholder")}
+					required={isRequired("city")}
+					name="{label}-city"
+					id="{label}-city"
+					validate={{
+						customValidator(val) {
+							return fieldError("city") || "";
+						},
+					}}
+				/>
+			{/if}
+			{#if fields?.postal_code !== false}
+				<FieldInput
+					bind:value={address.postal_code}
+					label={t("checkout.address.postal_code_label")}
+					placeholder={t("checkout.address.postal_code_placeholder")}
+					required={isRequired("postal_code")}
+					name="{label}-postal_code"
+					id="{label}-postal_code"
+					validate={{
+						customValidator(val) {
+							return fieldError("postal_code") || "";
+						},
+					}}
+				/>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- Country (full width, block label) -->
+	{#if fields?.country !== false}
+		{#if countryField}
+			{@render countryField({
+				value: address.country,
+				onchange: (v) => {
+					address.country = v;
+				},
+				error: fieldError("country"),
+				label: t("checkout.address.country_label"),
+				id: `${label}-country`,
+			})}
+		{:else}
+			<FieldInput
+				bind:value={address.country}
+				label={t("checkout.address.country_label")}
+				placeholder={t("checkout.address.country_placeholder")}
+				required={isRequired("country")}
+				name="{label}-country"
+				id="{label}-country"
+				labelLeftBreakpoint={0}
+				validate={{
+					customValidator(val) {
+						return fieldError("country") || "";
+					},
+				}}
+			/>
+		{/if}
+	{/if}
+
+	<!-- Phone (full width, block label) -->
+	{#if fields?.phone !== false}
+		<FieldInput
+			bind:value={address.phone}
+			label={t("checkout.address.phone_label")}
+			type="tel"
+			placeholder={t("checkout.address.phone_placeholder")}
+			required={isRequired("phone")}
+			name="{label}-phone"
+			id="{label}-phone"
+			labelLeftBreakpoint={0}
+			validate={{
+				customValidator(val) {
+					return fieldError("phone") || "";
+				},
+			}}
+		/>
+	{/if}
+</fieldset>

package/dist/components/Checkout/CheckoutAddressForm.svelte.d.ts

@@ -0,0 +1,56 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { CheckoutAddressData, CheckoutValidationError } from "./_internal/checkout-types.js";
+export interface Props extends Omit<HTMLAttributes<HTMLFieldSetElement>, "children"> {
+    /** Bindable address data. Default: createEmptyAddress() */
+    address?: CheckoutAddressData;
+    /**
+     * Label prefix used for:
+     * - Accessible field IDs (e.g., "shipping-name", "billing-street")
+     * - Error field matching (errors with field "shipping.name" match when label="shipping")
+     * Default: "address"
+     */
+    label?: string;
+    /** External validation errors */
+    errors?: CheckoutValidationError[];
+    /** Which fields to display. All default to true. */
+    fields?: {
+        name?: boolean;
+        street?: boolean;
+        city?: boolean;
+        postal_code?: boolean;
+        country?: boolean;
+        phone?: boolean;
+    };
+    /**
+     * Which fields are required (shown with * marker, included in built-in validation).
+     * Default: ["name", "street", "city", "postal_code", "country"]
+     */
+    requiredFields?: string[];
+    /**
+     * Override the country field with a custom selector.
+     * When provided, replaces the default text input for country.
+     */
+    countryField?: Snippet<[
+        {
+            /** Current country value */
+            value: string;
+            /** Called when country changes */
+            onchange: (value: string) => void;
+            /** Error message for this field (if any) */
+            error?: string;
+            /** Field label text */
+            label: string;
+            /** HTML id attribute for the input */
+            id: string;
+        }
+    ]>;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLFieldSetElement;
+}
+declare const CheckoutAddressForm: import("svelte").Component<Props, {}, "address" | "el">;
+type CheckoutAddressForm = ReturnType<typeof CheckoutAddressForm>;
+export default CheckoutAddressForm;

package/dist/components/Checkout/CheckoutCartReview.svelte

@@ -0,0 +1,132 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type { CartComponentItem } from "../Cart/Cart.svelte";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+		/** Cart items in stuic CartComponentItem format */
+		items: CartComponentItem[];
+
+		/**
+		 * Format a number (in cents) to a display string.
+		 * Default: defaultFormatPrice (cents / 100, 2 decimal places)
+		 */
+		formatPrice?: (value: number) => string;
+
+		/**
+		 * Called when "Edit Cart" is clicked.
+		 * If undefined, the edit action is not rendered.
+		 */
+		onEditCart?: () => void;
+
+		/** Override thumbnail rendering (passed through to Cart) */
+		thumbnail?: Snippet<[{ item: CartComponentItem }]>;
+
+		/**
+		 * Override the Cart's summary section.
+		 * Passed through to Cart's `summary` snippet.
+		 */
+		summary?: Snippet<
+			[{
+				items: CartComponentItem[];
+				total: number;
+				itemCount: number;
+				formatPrice: (v: number) => string;
+			}]
+		>;
+
+		/** Override the title (default: "Order Summary") */
+		title?: Snippet | string;
+
+		/** Override the edit action */
+		editAction?: Snippet<[{ onEditCart?: () => void }]>;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLDivElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { t_default } from "./_internal/checkout-i18n-defaults.js";
+	import { defaultFormatPrice } from "./_internal/checkout-utils.js";
+	import Cart from "../Cart/Cart.svelte";
+	import Button from "../Button/Button.svelte";
+
+	let {
+		items,
+		formatPrice: formatPriceProp,
+		onEditCart,
+		thumbnail,
+		summary: summaryProp,
+		title: titleProp,
+		editAction,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+	let fp = $derived(formatPriceProp ?? defaultFormatPrice);
+
+	let total = $derived(items.reduce((sum, item) => sum + item.lineTotal, 0));
+	let itemCount = $derived(items.reduce((sum, item) => sum + item.quantity, 0));
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-checkout-cart-review", classProp)
+	);
+</script>
+
+<div bind:this={el} class={_class} {...rest}>
+	<!-- Header bar -->
+	<div class={unstyled ? undefined : "stuic-checkout-cart-review-header"}>
+		{#if typeof titleProp === "function"}
+			{@render titleProp()}
+		{:else}
+			<h3 class={unstyled ? undefined : "stuic-checkout-cart-review-title"}>
+				{typeof titleProp === "string" ? titleProp : t("checkout.cart.title")}
+			</h3>
+		{/if}
+
+		{#if editAction}
+			{@render editAction({ onEditCart })}
+		{:else if onEditCart}
+			<Button variant="outline" size="sm" onclick={onEditCart}>
+				{t("checkout.cart.edit")}
+			</Button>
+		{/if}
+	</div>
+
+	<!-- Cart (readonly) -->
+	<Cart
+		{items}
+		readonly
+		formatPrice={fp}
+		{thumbnail}
+		t={tProp}
+		{unstyled}
+	>
+		{#snippet summary({ items: _items, total: _total, itemCount: _itemCount, formatPrice: _fp })}
+			{#if summaryProp}
+				{@render summaryProp({ items: _items, total: _total, itemCount: _itemCount, formatPrice: _fp })}
+			{:else}
+				<div class={unstyled ? undefined : "stuic-checkout-cart-review-summary"}>
+					<span>
+						{t("checkout.cart.subtotal")}
+						({_itemCount === 1
+							? t("checkout.cart.item_count_1")
+							: t("checkout.cart.item_count_n", { count: _itemCount })})
+					</span>
+					<span class={unstyled ? undefined : "stuic-checkout-cart-review-summary-total"}>
+						{_fp(_total)}
+					</span>
+				</div>
+			{/if}
+		{/snippet}
+	</Cart>
+</div>

package/dist/components/Checkout/CheckoutCartReview.svelte.d.ts

@@ -0,0 +1,47 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { CartComponentItem } from "../Cart/Cart.svelte";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "title"> {
+    /** Cart items in stuic CartComponentItem format */
+    items: CartComponentItem[];
+    /**
+     * Format a number (in cents) to a display string.
+     * Default: defaultFormatPrice (cents / 100, 2 decimal places)
+     */
+    formatPrice?: (value: number) => string;
+    /**
+     * Called when "Edit Cart" is clicked.
+     * If undefined, the edit action is not rendered.
+     */
+    onEditCart?: () => void;
+    /** Override thumbnail rendering (passed through to Cart) */
+    thumbnail?: Snippet<[{
+        item: CartComponentItem;
+    }]>;
+    /**
+     * Override the Cart's summary section.
+     * Passed through to Cart's `summary` snippet.
+     */
+    summary?: Snippet<[
+        {
+            items: CartComponentItem[];
+            total: number;
+            itemCount: number;
+            formatPrice: (v: number) => string;
+        }
+    ]>;
+    /** Override the title (default: "Order Summary") */
+    title?: Snippet | string;
+    /** Override the edit action */
+    editAction?: Snippet<[{
+        onEditCart?: () => void;
+    }]>;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLDivElement;
+}
+declare const CheckoutCartReview: import("svelte").Component<Props, {}, "el">;
+type CheckoutCartReview = ReturnType<typeof CheckoutCartReview>;
+export default CheckoutCartReview;

package/dist/components/Checkout/CheckoutCompleteStep.svelte

@@ -0,0 +1,152 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { TranslateFn } from "../../types.js";
+	import type { CheckoutOrderData, CheckoutStep } from "./_internal/checkout-types.js";
+
+	export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+		/** Completed order data */
+		order: CheckoutOrderData;
+
+		/** Order ID */
+		orderId: string;
+
+		/** Whether confirmation email was sent */
+		emailSent?: boolean;
+
+		// -- State --
+
+		/** Whether the step is loading (e.g., completing payment in background) */
+		isLoading?: boolean;
+
+		/** Error message */
+		error?: string | null;
+
+		// -- Progress --
+
+		currentStep?: string;
+		steps?: CheckoutStep[];
+		onStepNavigate?: (step: CheckoutStep) => void;
+
+		// -- Actions --
+
+		/** Called when "Continue Shopping" is clicked */
+		onContinueShopping?: () => void;
+
+		/** Called when "Return to Checkout" is clicked (from error state) */
+		onReturnToCheckout?: () => void;
+
+		// -- Formatting --
+
+		formatPrice?: (v: number) => string;
+
+		// -- Pass-through to CheckoutOrderConfirmation --
+
+		/** Success icon HTML override */
+		successIcon?: string;
+
+		/** Override the confirmation header */
+		header?: Snippet<[{ orderId: string }]>;
+
+		/** Override order number display */
+		orderNumber?: Snippet<[{ orderId: string }]>;
+
+		/** Additional content after the confirmation */
+		confirmationFooter?: Snippet<[{ orderId: string; order: CheckoutOrderData }]>;
+
+		t?: TranslateFn;
+		unstyled?: boolean;
+		class?: string;
+		el?: HTMLDivElement;
+	}
+</script>
+
+<script lang="ts">
+	import { twMerge } from "../../utils/tw-merge.js";
+	import Button from "../Button/Button.svelte";
+	import Skeleton from "../Skeleton/Skeleton.svelte";
+	import CheckoutOrderConfirmation from "./CheckoutOrderConfirmation.svelte";
+	import CheckoutProgress from "./CheckoutProgress.svelte";
+	import { t_default } from "./_internal/checkout-i18n-defaults.js";
+
+	let {
+		order,
+		orderId,
+		emailSent,
+		isLoading = false,
+		error,
+		currentStep = "complete",
+		steps,
+		onStepNavigate,
+		onContinueShopping,
+		onReturnToCheckout,
+		formatPrice,
+		successIcon,
+		header,
+		orderNumber,
+		confirmationFooter,
+		t: tProp,
+		unstyled = false,
+		class: classProp,
+		el = $bindable(),
+		...rest
+	}: Props = $props();
+
+	let t = $derived(tProp ?? t_default);
+
+	let _class = $derived(
+		unstyled ? classProp : twMerge("stuic-checkout-complete-step", classProp)
+	);
+</script>
+
+<div bind:this={el} class={_class} {...rest}>
+	<!-- Progress -->
+	<CheckoutProgress
+		{steps}
+		{currentStep}
+		onNavigate={onStepNavigate}
+		t={tProp}
+		{unstyled}
+	/>
+
+	{#if isLoading}
+		<div class={unstyled ? undefined : "stuic-checkout-complete-step-loading"}>
+			<Skeleton variant="circle" height="4rem" width="4rem" />
+			<Skeleton height="2rem" width="60%" />
+			<Skeleton height="1rem" width="40%" />
+			<Skeleton variant="rectangle" height="12rem" />
+		</div>
+	{:else if error}
+		<div class={unstyled ? undefined : "stuic-checkout-complete-step-error"}>
+			<div class={unstyled ? undefined : "stuic-checkout-alert"} role="alert">
+				{error}
+			</div>
+			<div class={unstyled ? undefined : "stuic-checkout-complete-step-error-actions"}>
+				{#if onReturnToCheckout}
+					<Button variant="outline" onclick={onReturnToCheckout}>
+						{t("checkout.step.return_to_checkout")}
+					</Button>
+				{/if}
+				{#if onContinueShopping}
+					<Button intent="primary" onclick={onContinueShopping}>
+						{t("checkout.complete.continue_shopping")}
+					</Button>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<CheckoutOrderConfirmation
+			{order}
+			{orderId}
+			{emailSent}
+			{formatPrice}
+			{onContinueShopping}
+			{successIcon}
+			{header}
+			{orderNumber}
+			footer={confirmationFooter}
+			t={tProp}
+			{unstyled}
+		/>
+	{/if}
+</div>

package/dist/components/Checkout/CheckoutCompleteStep.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { TranslateFn } from "../../types.js";
+import type { CheckoutOrderData, CheckoutStep } from "./_internal/checkout-types.js";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Completed order data */
+    order: CheckoutOrderData;
+    /** Order ID */
+    orderId: string;
+    /** Whether confirmation email was sent */
+    emailSent?: boolean;
+    /** Whether the step is loading (e.g., completing payment in background) */
+    isLoading?: boolean;
+    /** Error message */
+    error?: string | null;
+    currentStep?: string;
+    steps?: CheckoutStep[];
+    onStepNavigate?: (step: CheckoutStep) => void;
+    /** Called when "Continue Shopping" is clicked */
+    onContinueShopping?: () => void;
+    /** Called when "Return to Checkout" is clicked (from error state) */
+    onReturnToCheckout?: () => void;
+    formatPrice?: (v: number) => string;
+    /** Success icon HTML override */
+    successIcon?: string;
+    /** Override the confirmation header */
+    header?: Snippet<[{
+        orderId: string;
+    }]>;
+    /** Override order number display */
+    orderNumber?: Snippet<[{
+        orderId: string;
+    }]>;
+    /** Additional content after the confirmation */
+    confirmationFooter?: Snippet<[{
+        orderId: string;
+        order: CheckoutOrderData;
+    }]>;
+    t?: TranslateFn;
+    unstyled?: boolean;
+    class?: string;
+    el?: HTMLDivElement;
+}
+declare const CheckoutCompleteStep: import("svelte").Component<Props, {}, "el">;
+type CheckoutCompleteStep = ReturnType<typeof CheckoutCompleteStep>;
+export default CheckoutCompleteStep;