Checkout

Back to Cart

Shipping Details

form.setData('customer_name', value) } error={form.errors.customer_name} />

form.setData('customer_email', value) } error={form.errors.customer_email} /> form.setData('customer_phone', value) } error={form.errors.customer_phone} required={false} />

form.setData('address_line1', value) } error={form.errors.address_line1} /> form.setData('address_line2', value) } error={form.errors.address_line2} required={false} />

form.setData('city', value) } error={form.errors.city} /> form.setData('postal_code', value) } error={form.errors.postal_code} /> form.setData('country', value) } error={form.errors.country} />

Notes

form.setData('notes', event.target.value)
                                }
                                className="mt-1 h-24 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-main outline-none focus:border-primary"
                            />
                            {form.errors.notes ? (
                                <p className="mt-1 text-xs text-danger">
                                    {form.errors.notes}
                                </p>
                            ) : null}
                        </div>

<button
                            type="submit"
                            disabled={form.processing}
                            className="w-full rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white hover:bg-primary-hover disabled:opacity-50"
                        >
                            {form.processing
                                ? 'Placing Order...'
                                : 'Place Order'}
                        </button>
                    </form>

<aside className="h-fit rounded-2xl border border-border bg-card p-4 shadow-sm">
                        <h2 className="text-base font-semibold text-main">
                            Order Items
                        </h2>
                        <ul className="mt-3 space-y-3">
                            {items.map((item) => (
                                <li
                                    key={item.product_id}
                                    className="rounded-xl border border-border p-3"
                                >
                                    <p className="text-sm font-medium text-main">
                                        {item.name}
                                    </p>
                                    <p className="text-xs text-muted">
                                        Qty: {item.quantity}
                                        {item.sku ? ` | SKU: ${item.sku}` : ''}
                                    </p>
                                    <p className="text-xs text-muted">
                                        Unit:{' '}
                                        {formatMoney(
                                            item.unit_price_minor,
                                            config.default_currency,
                                        )}
                                    </p>
                                    <p className="text-sm font-semibold text-main">
                                        Line total:{' '}
                                        {formatMoney(
                                            item.line_total_minor,
                                            config.default_currency,
                                        )}
                                    </p>
                                </li>
                            ))}
                        </ul>
                        <div className="mt-4 space-y-1 text-sm text-main">
                            <p>Items: {summary.item_count}</p>
                            <p>
                                Subtotal:{' '}
                                {formatMoney(
                                    summary.subtotal_minor,
                                    config.default_currency,
                                )}
                            </p>
                            <p className="font-semibold">
                                Total:{' '}
                                {formatMoney(
                                    summary.total_minor,
                                    config.default_currency,
                                )}
                            </p>
                        </div>
                    </aside>
                </section>
            </div>
        </PublicLayout>
    );
}

type FieldProps = {
    label: string;
    value: string;
    onChange: (value: string) => void;
    error?: string;
    type?: string;
    required?: boolean;
};

function Field({
    label,
    value,
    onChange,
    error,
    type = 'text',
    required = true,
}: FieldProps) {
    const id = label.toLowerCase().replace(/\s+/g, '-');

return (
        <div>
            <label htmlFor={id} className="block text-sm font-medium text-main">
                {label}
            </label>
            <input
                id={id}
                type={type}
                value={value}
                onChange={(event) => onChange(event.target.value)}
                required={required}
                className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-main outline-none focus:border-primary"
            />
            {error ? <p className="mt-1 text-xs text-danger">{error}</p> : null}
        </div>
    );
}