+
+
+
+
++
+
+
+
+ {error && }
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/checkout-fields-list.module.css b/packages/headless-react/src/lib/components/checkout-fields-list.module.css
new file mode 100644
index 0000000..da39a09
--- /dev/null
+++ b/packages/headless-react/src/lib/components/checkout-fields-list.module.css
@@ -0,0 +1,4 @@
+.break {
+ flex-basis: 100%;
+ height: 0;
+}
diff --git a/packages/headless-react/src/lib/components/checkout-fields-list.tsx b/packages/headless-react/src/lib/components/checkout-fields-list.tsx
new file mode 100644
index 0000000..51516bf
--- /dev/null
+++ b/packages/headless-react/src/lib/components/checkout-fields-list.tsx
@@ -0,0 +1,442 @@
+import React, { useMemo } from 'react';
+import { TextInput, TextInputProps } from './text-input';
+import { DropdownInput, DropdownInputProps } from './dropdown-input';
+import { CheckboxInput, CheckboxInputProps } from './checkbox-input';
+import { getAvailableCountryOptions } from '../utils/countries';
+import { FirmhouseCart } from '@firmhouse/firmhouse-sdk';
+import styles from './checkout-fields-list.module.css';
+import { TranslationFunction, useFirmhouseCart } from '../hooks/cart';
+import { DateInput, DateInputProps } from './date-input';
+import { SubmitButton, SubmitButtonProps } from './submit-button';
+
+type PartialInputProps =
+ | Partial+ {field.title.startsWith('checkout.form.') + ? t?.(field.title) + : field.title} +
+ )} +
+
+
+ {error && }
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/dropdown-input.module.css b/packages/headless-react/src/lib/components/dropdown-input.module.css
new file mode 100644
index 0000000..98d4a52
--- /dev/null
+++ b/packages/headless-react/src/lib/components/dropdown-input.module.css
@@ -0,0 +1,42 @@
+.inputContainer {
+ padding: 0.25rem 0.75rem;
+}
+
+.labelError {
+ font-size: 0.875rem;
+ width: auto;
+ color: #f87171;
+ padding: 0.5rem;
+}
+
+.label {
+ display: block;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #374151;
+ padding: 0.25rem;
+}
+
+.input {
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a0aec0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+ background-position: right 0.5rem center;
+ background-repeat: no-repeat;
+ background-size: 1.5em 1.5em;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ border-width: 2px;
+ border-color: #e5e7eb;
+ border-radius: 0.5rem;
+ width: 100%;
+ padding: 0.375rem 1.75rem 0.375rem 0.5rem;
+ font-size: 1rem;
+ background-color: transparent;
+}
+.input::placeholder {
+ color: #9ca3af;
+}
+
+.input:focus {
+ outline: 1px solid #bfdbfe;
+}
diff --git a/packages/headless-react/src/lib/components/dropdown-input.tsx b/packages/headless-react/src/lib/components/dropdown-input.tsx
new file mode 100644
index 0000000..24bce69
--- /dev/null
+++ b/packages/headless-react/src/lib/components/dropdown-input.tsx
@@ -0,0 +1,52 @@
+import { InputHTMLAttributes, useCallback, useMemo, useState } from 'react';
+import styles from './dropdown-input.module.css';
+
+export interface DropdownInputProps
+ extends InputHTMLAttributes
+
+
+ {error && }
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/index.tsx b/packages/headless-react/src/lib/components/index.tsx
new file mode 100644
index 0000000..e8561d9
--- /dev/null
+++ b/packages/headless-react/src/lib/components/index.tsx
@@ -0,0 +1,14 @@
+export * from './cart-provider';
+export * from './order-summary';
+export * from './order-summary-ui';
+export * from './checkout-form';
+export * from './ordered-products-list';
+export * from './ordered-product';
+export * from './ordered-products-group';
+export * from './checkout-fields-list';
+export * from './checkbox-input';
+export * from './text-input';
+export * from './dropdown-input';
+export * from './date-input';
+export * from './submit-button';
+export * from './translated';
diff --git a/packages/headless-react/src/lib/components/order-summary-ui.module.css b/packages/headless-react/src/lib/components/order-summary-ui.module.css
new file mode 100644
index 0000000..5fc0f1e
--- /dev/null
+++ b/packages/headless-react/src/lib/components/order-summary-ui.module.css
@@ -0,0 +1,11 @@
+.tax {
+ /* make it smaller and lighter */
+ font-size: 0.875rem;
+ font-weight: 300;
+}
+
+.total {
+ font-weight: 500;
+ font-size: 1.25rem;
+ margin: 0.25rem 0;
+}
diff --git a/packages/headless-react/src/lib/components/order-summary-ui.tsx b/packages/headless-react/src/lib/components/order-summary-ui.tsx
new file mode 100644
index 0000000..284416b
--- /dev/null
+++ b/packages/headless-react/src/lib/components/order-summary-ui.tsx
@@ -0,0 +1,51 @@
+import { formatCentsWithCurrency } from '../utils';
+import styles from './order-summary-ui.module.css';
+import { FirmhouseCart } from '@firmhouse/firmhouse-sdk';
+import { TranslationFunction } from '../hooks/cart';
+
+export interface OrderSummaryUIProps {
+ className?: string;
+ totalAmount: number;
+ totalAmountWithCurrency: string;
+ totalTaxAmount?: number;
+ totalTaxAmountWithCurrency?: string;
+ totalDiscountAmount?: number;
+ totalDiscountAmountWithCurrency?: string;
+ currency: string;
+ cart: FirmhouseCart | null;
+ children?: React.ReactNode;
+ t?: TranslationFunction;
+ locale?: string;
+}
+
+export function OrderSummaryUI({
+ className,
+ totalAmountWithCurrency,
+ totalTaxAmount,
+ cart,
+ children,
+ currency,
+ t,
+ locale,
+}: OrderSummaryUIProps) {
+ return (
+
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/order-summary.tsx b/packages/headless-react/src/lib/components/order-summary.tsx
new file mode 100644
index 0000000..a956c74
--- /dev/null
+++ b/packages/headless-react/src/lib/components/order-summary.tsx
@@ -0,0 +1,45 @@
+import { useFirmhouseCart } from '../hooks';
+import { formatCentsWithCurrency, getOrderCalculations } from '../utils';
+import { OrderSummaryUI, OrderSummaryUIProps } from './order-summary-ui';
+
+export interface OrderSummaryProps {
+ className?: string;
+ fallback?: React.ReactNode;
+ children?: React.ReactNode;
+ OrderSummaryUIComponent?: React.ComponentType+ {`${t?.('checkout.orderSummary.total')}: `} + {totalAmountWithCurrency} +
+ {totalAmountWithCurrency && ( ++ {t?.('checkout.orderSummary.tax', { + amount: formatCentsWithCurrency( + totalTaxAmount ?? 0, + currency, + locale ?? cart?.locale + ), + })} +
+ )} + {children} +
+ 
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/ordered-products-group.tsx b/packages/headless-react/src/lib/components/ordered-products-group.tsx
new file mode 100644
index 0000000..b4b5cb3
--- /dev/null
+++ b/packages/headless-react/src/lib/components/ordered-products-group.tsx
@@ -0,0 +1,18 @@
+export interface OrderedProductsGroupProps {
+ children?: React.ReactNode;
+ name: string;
+ className?: string;
+}
+
+export function OrderedProductsGroup({
+ children,
+ name,
+ className,
+}: OrderedProductsGroupProps) {
+ return (
+
+
+ + {quantity} x + {title} +
+ {totalAmountIncludingTaxCents && plan === null && ( ++ {formatCentsWithCurrency( + totalAmountIncludingTaxCents, + cart.currency ?? 'EUR', + cart.locale + )} + + {orderedProduct.recurring && ` / ${billingFrequency}`} + +
+ )} + {!billsOnce && !shipsOnce && shippingFrequency === billingFrequency && ( ++ {t?.(`checkout.orderedProduct.billingShippingFrequency.${unit}`, { + count: interval ?? 0, + }) ?? ''} +
+ )} + {plan !== null &&Included in plan
} +
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/ordered-products-list.tsx b/packages/headless-react/src/lib/components/ordered-products-list.tsx
new file mode 100644
index 0000000..4b9839b
--- /dev/null
+++ b/packages/headless-react/src/lib/components/ordered-products-list.tsx
@@ -0,0 +1,139 @@
+import { FirmhouseOrderedProduct } from '@firmhouse/firmhouse-sdk';
+import { useFirmhouseCart } from '../hooks';
+import { OrderedProductProps, OrderedProduct } from './ordered-product';
+import React, { useCallback, useMemo } from 'react';
+import { getOrderedProductInfo } from '../utils';
+import {
+ OrderedProductsGroup,
+ OrderedProductsGroupProps,
+} from './ordered-products-group';
+import { TranslationFunction } from '../hooks/cart';
+
+export interface OrderedProductsListProps {
+ OrderedProductComponent?: React.ComponentType{name}
+{children}
+
+ {header}
+ {groups}
+ {children}
+
+ );
+ }
+
+ if (!cart || !t || loading) {
+ return fallback || null;
+ }
+ return filteredOrderedProducts.length > 0 ? (
+
+ {header}
+ {filteredOrderedProducts.map((orderedProduct) => (
+
+ ) : null;
+}
diff --git a/packages/headless-react/src/lib/components/submit-button.module.css b/packages/headless-react/src/lib/components/submit-button.module.css
new file mode 100644
index 0000000..6591731
--- /dev/null
+++ b/packages/headless-react/src/lib/components/submit-button.module.css
@@ -0,0 +1,41 @@
+.inputContainer {
+ padding: 0.25rem 0.75rem;
+ display: flex;
+ flex-direction: column;
+}
+
+.labelError {
+ font-size: 0.875rem;
+ width: 100%;
+ color: #f87171;
+ padding: 0 0.25rem;
+}
+
+.inputTextContainer {
+ padding: 0.25rem 0.75rem;
+ width: 100%;
+}
+
+.labelText {
+ display: block;
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: #374151;
+ padding: 0.25rem;
+}
+
+.inputText {
+ border-width: 2px;
+ border-color: #e5e7eb;
+ border-radius: 0.5rem;
+ width: 100%;
+ padding: 0.375rem 0.5rem;
+ font-size: 1rem;
+}
+.inputText::placeholder {
+ color: #9ca3af;
+}
+
+.inputText:focus {
+ outline: 1px solid #bfdbfe;
+}
diff --git a/packages/headless-react/src/lib/components/submit-button.tsx b/packages/headless-react/src/lib/components/submit-button.tsx
new file mode 100644
index 0000000..3aee3d7
--- /dev/null
+++ b/packages/headless-react/src/lib/components/submit-button.tsx
@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from 'react';
+
+export type SubmitButtonProps = InputHTMLAttributes
+
+
+ {error && }
+
+ );
+}
diff --git a/packages/headless-react/src/lib/components/translated.tsx b/packages/headless-react/src/lib/components/translated.tsx
new file mode 100644
index 0000000..cb26094
--- /dev/null
+++ b/packages/headless-react/src/lib/components/translated.tsx
@@ -0,0 +1,12 @@
+import { useFirmhouseCart } from '../hooks';
+
+export interface TranslatedProps {
+ value: string;
+ options?: Record