@tribe-nest/forge 3.69.0 → 3.74.0

package/src/ui/styled/CheckoutLinkPayment.tsx

@@ -1,11 +1,14 @@
-import type { CSSProperties } from "react";
+import { useState, type CSSProperties, type FormEvent } from "react";
 import { useForgeT } from "../../i18n";
 import { useCheckoutLinkPayment } from "../headless/checkoutLink/useCheckoutLinkPayment";
 import { useInventoryHold } from "../headless/checkout/useInventoryHold";
 import { usePaymentRenderer } from "../payment/ForgePaymentProvider";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useAmountFormatter } from "../format/useFormatCurrency";
-import type { CheckoutLinkView } from "../../data/queries/useCheckoutLink";
+import type { CheckoutLinkAddress, CheckoutLinkView } from "../../data/queries/useCheckoutLink";
+import { useShippingCountries, useShippingRates, type ShippingGroup, type ShippingRate } from "../../data/queries/useShipping";
+import type { CreateOrderShippingRate } from "../../data/queries/useOrders";
+import { ShippingRateSelector } from "./ShippingRateSelector";
 import { Button } from "./Button";
 import { HoldNotice } from "./HoldNotice";
 import { Loading } from "./Loading";
@@ -165,7 +168,11 @@ export function CheckoutLinkPayment({
     );
   }
 
-  const total = fmt(view.totalCents / 100, view.currency);
+  const shipping = view.shipping ?? null;
+  // Something ships and its address is not in yet: Pay waits for it.
+  const needsAddress = !!shipping?.required && !shipping.set;
+  const totalCents = view.totalCents + (shipping?.set ? (shipping.costCents ?? 0) : 0);
+  const total = fmt(totalCents / 100, view.currency);
   const refused = page.refusal;
   const timeTaken = !!refused && refused.code === "INVENTORY_HOLD_EXPIRED" && !!view.booking;
 
@@ -174,6 +181,17 @@ export function CheckoutLinkPayment({
       <h1 style={heading}>{tr("forge.checkout_link_payment.title")}</h1>
       <Summary view={view} fmt={fmt} />
 
+      {shipping?.required && (
+        <ShippingStep
+          view={view}
+          fmt={fmt}
+          canChange={!page.paymentStarted}
+          saving={page.isSavingShipping}
+          error={page.shippingError}
+          onSave={page.saveShipping}
+        />
+      )}
+
       <div style={{ marginTop: 16 }}>
         <HoldNotice
           hold={hold}
@@ -210,7 +228,7 @@ export function CheckoutLinkPayment({
           <Button
             fullWidth
             loading={page.isStarting}
-            disabled={hold.hasLapsed && !refused}
+            disabled={(hold.hasLapsed && !refused) || needsAddress}
             onClick={() => void page.pay()}
             data-testid="checkout-link-pay"
           >
@@ -231,6 +249,7 @@ function Summary({
 }) {
   const tr = useForgeT();
   const t = useThemeTokens();
+  const lines = view.items ?? [];
   return (
     <div
       data-testid="checkout-link-summary"
@@ -241,10 +260,29 @@ function Summary({
         background: t.surface,
       }}
     >
-      <div style={{ fontSize: 18, fontWeight: 700 }} data-testid="checkout-link-item">
-        {view.item?.title}
-      </div>
-      {view.booking ? (
+      {lines.length > 1 ? (
+        <div data-testid="checkout-link-items">
+          {lines.map((line, index) => (
+            <div
+              key={`${line.title}-${index}`}
+              data-testid="checkout-link-line"
+              style={{ display: "flex", justifyContent: "space-between", gap: 12, marginTop: index ? 8 : 0 }}
+            >
+              <span style={{ fontWeight: 600 }}>
+                {line.quantity > 1 ? `${line.quantity} x ${line.title}` : line.title}
+              </span>
+              <span style={{ color: t.muted, whiteSpace: "nowrap" }}>
+                {fmt((line.unitPriceCents * line.quantity) / 100, view.currency)}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div style={{ fontSize: 18, fontWeight: 700 }} data-testid="checkout-link-item">
+          {view.item?.title}
+        </div>
+      )}
+      {lines.length > 1 ? null : view.booking ? (
         <div style={{ marginTop: 12, color: t.muted }}>
           {view.booking.sessions.map((session) => (
             // The buyer's own clock: the time is shown in the zone of the
@@ -269,18 +307,283 @@ function Summary({
           )}
         </div>
       )}
+      {view.shipping?.set && view.shipping.costCents !== null && (
+        <div
+          style={{ display: "flex", justifyContent: "space-between", marginTop: 12, color: t.muted }}
+          data-testid="checkout-link-shipping-cost"
+        >
+          <span>{tr("forge.checkout_link_payment.shipping")}</span>
+          <span>{fmt(view.shipping.costCents / 100, view.currency)}</span>
+        </div>
+      )}
       <div
         style={{ display: "flex", justifyContent: "space-between", marginTop: 12, fontSize: 20, fontWeight: 800 }}
       >
         <span>{tr("forge.checkout_link_payment.total")}</span>
         <span data-testid="checkout-link-total" style={{ color: t.primary }}>
-          {fmt(view.totalCents / 100, view.currency)}
+          {fmt(
+            (view.totalCents + (view.shipping?.set ? (view.shipping.costCents ?? 0) : 0)) / 100,
+            view.currency,
+          )}
         </span>
       </div>
     </div>
   );
 }
 
+/**
+ * Where the link's shipped items go (phase 2): the address, then the store's
+ * own shipping rates for it (`/public/orders/shipping-rates`, the same groups
+ * and rate picker the store checkout shows), then saved to the link, which
+ * prices the shipping again on the server. Once saved it reads as a line with
+ * a way to change it, until a payment has been started.
+ */
+function ShippingStep({
+  view,
+  fmt,
+  canChange,
+  saving,
+  error,
+  onSave,
+}: {
+  view: CheckoutLinkView;
+  fmt: (amount: number, currencyCode?: string) => string;
+  canChange: boolean;
+  saving: boolean;
+  error: string | null;
+  onSave: (input: {
+    shippingAddress: CheckoutLinkAddress & { phone?: string };
+    selectedShippingRates: CreateOrderShippingRate[];
+  }) => Promise<boolean>;
+}) {
+  const tr = useForgeT();
+  const t = useThemeTokens();
+  const countries = useShippingCountries();
+  const rates = useShippingRates();
+  const shipping = view.shipping!;
+  const [editing, setEditing] = useState(false);
+  const [address, setAddress] = useState<CheckoutLinkAddress & { phone: string }>({
+    address1: shipping.address?.address1 ?? "",
+    city: shipping.address?.city ?? "",
+    stateCode: shipping.address?.stateCode ?? "",
+    countryCode: shipping.address?.countryCode ?? "",
+    zip: shipping.address?.zip ?? "",
+    phone: "",
+  });
+  const [groups, setGroups] = useState<ShippingGroup[] | null>(null);
+  const [selections, setSelections] = useState<Record<string, CreateOrderShippingRate>>({});
+  const [ratesError, setRatesError] = useState<string | null>(null);
+
+  const box: CSSProperties = {
+    marginTop: 16,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: 20,
+    background: t.surface,
+  };
+  const input: CSSProperties = {
+    width: "100%",
+    padding: "10px 12px",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: "transparent",
+    color: t.text,
+    fontSize: 15,
+  };
+  const label: CSSProperties = { display: "block", fontSize: 14, fontWeight: 600, margin: "12px 0 6px" };
+
+  if (shipping.set && !editing) {
+    const a = shipping.address;
+    return (
+      <div style={box} data-testid="checkout-link-shipping" data-state="set">
+        <div style={{ display: "flex", justifyContent: "space-between", gap: 12, alignItems: "flex-start" }}>
+          <div>
+            <div style={{ fontWeight: 700 }}>{tr("forge.checkout_link_payment.ship_to")}</div>
+            {a && (
+              <div style={{ color: t.muted, marginTop: 4 }} data-testid="checkout-link-ship-to">
+                {[a.address1, a.city, a.stateCode, a.zip, a.countryCode].filter(Boolean).join(", ")}
+              </div>
+            )}
+          </div>
+          {canChange && (
+            <Button variant="secondary" onClick={() => setEditing(true)} data-testid="checkout-link-change-address">
+              {tr("forge.checkout_link_payment.change_address")}
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const physical = (view.items ?? []).filter((line) => line.physical && line.productId && line.productVariantId);
+  const country = (countries.data ?? []).find((c) => c.code === address.countryCode);
+  const set = (key: keyof typeof address) => (event: { target: { value: string } }) =>
+    setAddress((prev) => ({ ...prev, [key]: event.target.value }));
+
+  const toSelected = (group: ShippingGroup, rate: ShippingRate): CreateOrderShippingRate => ({
+    groupId: group.id,
+    type: group.type,
+    productIds: group.productIds,
+    rateId: rate.rateId,
+    shipmentId: rate.shipmentId,
+    amount: rate.amount,
+    currency: rate.currency,
+    carrier: rate.carrier,
+    service: rate.service,
+  });
+
+  const save = async (picked: Record<string, CreateOrderShippingRate>) => {
+    const ok = await onSave({
+      shippingAddress: { ...address, ...(address.phone ? { phone: address.phone } : {}) },
+      selectedShippingRates: Object.values(picked),
+    });
+    if (ok) {
+      setEditing(false);
+      setGroups(null);
+    }
+  };
+
+  const findRates = async (event: FormEvent) => {
+    event.preventDefault();
+    setRatesError(null);
+    try {
+      const found = await rates.mutateAsync({
+        shippingAddress: address,
+        cartItems: physical.map((line) => ({
+          productId: line.productId!,
+          productVariantId: line.productVariantId!,
+          quantity: line.quantity,
+        })),
+      });
+      const auto: Record<string, CreateOrderShippingRate> = {};
+      for (const group of found.groups) {
+        if (!group.selectable && group.rates.length > 0) auto[group.id] = toSelected(group, group.rates[0]);
+      }
+      setSelections(auto);
+      // Nothing to choose (flat or external rates only): save straight away.
+      if (!found.groups.some((group) => group.selectable)) {
+        await save(auto);
+        return;
+      }
+      setGroups(found.groups);
+    } catch (err) {
+      setRatesError(
+        (err as { response?: { data?: { message?: string } } })?.response?.data?.message ??
+          tr("forge.checkout_link_payment.shipping_unavailable"),
+      );
+    }
+  };
+
+  const shownError = ratesError ?? (typeof error === "string" ? error || tr("forge.checkout_link_payment.shipping_unavailable") : null);
+
+  return (
+    <div style={box} data-testid="checkout-link-shipping" data-state={groups ? "rates" : "address"}>
+      <div style={{ fontWeight: 700, fontSize: 17 }}>
+        {groups ? tr("forge.checkout.shipping_options_title") : tr("forge.checkout_link_payment.shipping_title")}
+      </div>
+
+      {groups ? (
+        <div style={{ marginTop: 12 }}>
+          <ShippingRateSelector
+            groups={groups}
+            selections={selections}
+            onSelect={(group, rate) => setSelections((prev) => ({ ...prev, [group.id]: toSelected(group, rate) }))}
+            formatCurrency={fmt}
+          />
+          <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
+            <Button variant="secondary" onClick={() => setGroups(null)}>
+              {tr("forge.checkout.back")}
+            </Button>
+            <Button
+              fullWidth
+              loading={saving}
+              disabled={groups.some((group) => group.selectable && !selections[group.id])}
+              onClick={() => void save(selections)}
+              data-testid="checkout-link-use-shipping"
+            >
+              {tr("forge.checkout_link_payment.use_shipping")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={(event) => void findRates(event)}>
+          <label style={label} htmlFor="checkout-link-address1">
+            {tr("forge.checkout.address1_label")}
+          </label>
+          <input id="checkout-link-address1" required style={input} value={address.address1} onChange={set("address1")} />
+          <label style={label} htmlFor="checkout-link-city">
+            {tr("forge.checkout.city_label")}
+          </label>
+          <input id="checkout-link-city" required style={input} value={address.city} onChange={set("city")} />
+          <label style={label} htmlFor="checkout-link-zip">
+            {tr("forge.checkout.zip_label")}
+          </label>
+          <input id="checkout-link-zip" required style={input} value={address.zip} onChange={set("zip")} />
+          <label style={label} htmlFor="checkout-link-country">
+            {tr("forge.checkout.country_label")}
+          </label>
+          <select
+            id="checkout-link-country"
+            required
+            style={input}
+            value={address.countryCode}
+            onChange={(event) => setAddress((prev) => ({ ...prev, countryCode: event.target.value, stateCode: "" }))}
+          >
+            <option value="">{tr("forge.checkout.country_select")}</option>
+            {(countries.data ?? []).map((c) => (
+              <option key={c.code} value={c.code}>
+                {c.name}
+              </option>
+            ))}
+          </select>
+          {country?.states && country.states.length > 0 && (
+            <>
+              <label style={label} htmlFor="checkout-link-state">
+                {tr("forge.checkout.state_label")}
+              </label>
+              <select id="checkout-link-state" required style={input} value={address.stateCode} onChange={set("stateCode")}>
+                <option value="">{tr("forge.checkout.state_select")}</option>
+                {country.states.map((state) => (
+                  <option key={state.code} value={state.code}>
+                    {state.name}
+                  </option>
+                ))}
+              </select>
+            </>
+          )}
+          <label style={label} htmlFor="checkout-link-phone">
+            {tr("forge.checkout.phone_label")}
+          </label>
+          <input
+            id="checkout-link-phone"
+            type="tel"
+            style={input}
+            value={address.phone}
+            placeholder={tr("forge.checkout.phone_placeholder")}
+            onChange={set("phone")}
+          />
+          <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
+            {shipping.set && (
+              <Button type="button" variant="secondary" onClick={() => setEditing(false)}>
+                {tr("forge.checkout.back")}
+              </Button>
+            )}
+            <Button type="submit" fullWidth loading={rates.isPending || saving} data-testid="checkout-link-find-shipping">
+              {rates.isPending ? tr("forge.checkout.fetching_rates") : tr("forge.checkout.continue_to_shipping")}
+            </Button>
+          </div>
+        </form>
+      )}
+
+      {shownError && (
+        <p role="alert" data-testid="checkout-link-shipping-error" style={{ color: t.secondary, fontSize: 14, marginTop: 8 }}>
+          {shownError}
+        </p>
+      )}
+    </div>
+  );
+}
+
 function go(path: string) {
   if (typeof window !== "undefined") window.location.href = path;
 }

package/src/ui/styled/EmailListForm.tsx

@@ -1,4 +1,5 @@
 import type { CountryCode } from "libphonenumber-js";
+import type { ConsentChannel } from "../../types/models";
 import { useEmailListForm } from "../headless/forms/useEmailListForm";
 import { PhoneInput } from "./PhoneInput";
 import { useForgeT } from "../../i18n";
@@ -12,6 +13,12 @@ export interface EmailListFormProps {
   includePhoneNumber?: boolean;
   /** Seeds the phone country select. Undefined lets the visitor choose. */
   defaultCountry?: CountryCode;
+  /**
+   * Consent boxes to offer, one per channel: `ai_call` (calls, including by an
+   * AI voice agent), `sms`, `whatsapp`. Each is unticked and optional, worded
+   * with the business's name in the site's language. Adds a phone field.
+   */
+  consentChannels?: ConsentChannel[];
   title?: string;
   description?: string;
   buttonText?: string;
@@ -25,6 +32,7 @@ export function EmailListForm({
   includeName,
   includePhoneNumber,
   defaultCountry,
+  consentChannels,
   title,
   description,
   buttonText,
@@ -32,7 +40,14 @@ export function EmailListForm({
 }: EmailListFormProps) {
   const t = useForgeT();
   const theme = useForgeTheme();
-  const f = useEmailListForm({ emailListId, leadMagnetId, includeName, includePhoneNumber, defaultCountry });
+  const f = useEmailListForm({
+    emailListId,
+    leadMagnetId,
+    includeName,
+    includePhoneNumber,
+    defaultCountry,
+    consentChannels,
+  });
 
   // Defaults resolve here rather than in the signature so they can be
   // translated. `??` keeps a caller-supplied "" falsy exactly as before.
@@ -76,7 +91,18 @@ export function EmailListForm({
         onChange={(e) => f.setEmail(e.target.value)}
         style={inputStyle}
       />
-      {includePhoneNumber && <PhoneInput controller={f.phone} />}
+      {f.showPhone && <PhoneInput controller={f.phone} />}
+      {f.consentBoxes.map((box) => (
+        <label key={box.channel} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13, lineHeight: 1.5 }}>
+          <input
+            type="checkbox"
+            checked={box.checked}
+            onChange={(e) => f.setConsent(box.channel, e.target.checked)}
+            style={{ marginTop: 3, flexShrink: 0 }}
+          />
+          <span>{box.text}</span>
+        </label>
+      ))}
       {f.error && <p style={{ color: "#ef4444", fontSize: 14 }}>{f.error}</p>}
       <button
         onClick={f.submit}

package/src/ui/styled/FormRenderer.tsx

@@ -1,9 +1,16 @@
 import { useState } from "react";
-import { usePublicForm, useSubmitPublicForm } from "../../data/queries/useForms";
+import {
+  usePublicForm,
+  useSubmitPublicForm,
+  formConsentPayload,
+  consentWithoutPhone,
+} from "../../data/queries/useForms";
 import type { FormField } from "../../types/models";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
-import { useForgeT } from "../../i18n";
+import { useForgeLocale, useForgeT } from "../../i18n";
 import { Loading } from "./Loading";
+import { PhoneInput } from "./PhoneInput";
+
 
 export interface FormRendererProps {
   formId: string;
@@ -17,6 +24,7 @@ export interface FormRendererProps {
 export function FormRenderer({ formId }: FormRendererProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
+  const locale = useForgeLocale();
   const { data: form, isLoading } = usePublicForm(formId);
   const submitMutation = useSubmitPublicForm(formId);
 
@@ -45,9 +53,13 @@ export function FormRenderer({ formId }: FormRendererProps) {
         }
       }
     }
+    if (consentWithoutPhone(fields, answers)) {
+      setError(t("forge.form_renderer.consent_phone_required"));
+      return;
+    }
     try {
       const entries = fields.map((f) => ({ fieldId: f.id, value: answers[f.id] || null }));
-      await submitMutation.mutateAsync(entries);
+      await submitMutation.mutateAsync({ answers: entries, consent: formConsentPayload(fields, locale) });
       setIsCompleted(true);
     } catch {
       setError(t("forge.form_renderer.submit_error"));
@@ -138,8 +150,28 @@ export function FieldInput({
     </label>
   );
 
+  // A consent box: unticked by default, never required, and its text is the
+  // server's locked wording shown exactly as served (it is the evidence).
+  if (field.type === "call_consent") {
+    if (!field.consent) return null;
+    return (
+      <label style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, lineHeight: 1.5 }}>
+        <input
+          type="checkbox"
+          checked={value === "true"}
+          onChange={(e) => onChange(e.target.checked ? "true" : "")}
+          style={{ marginTop: 4, flexShrink: 0 }}
+        />
+        <span>{field.consent.text}</span>
+      </label>
+    );
+  }
+
   let control: React.ReactNode;
   switch (field.type) {
+    case "phone":
+      control = <PhoneFieldControl fieldId={field.id} value={value} onChange={onChange} />;
+      break;
     case "long_text":
       control = (
         <textarea
@@ -262,3 +294,23 @@ export function FieldInput({
     </div>
   );
 }
+
+/** A form's phone question: country select plus number, submitted as E.164. */
+function PhoneFieldControl({
+  fieldId,
+  value,
+  onChange,
+}: {
+  fieldId: string;
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <PhoneInput
+      id={`forge-form-phone-${fieldId}`}
+      mode="shipping"
+      initialValue={value || undefined}
+      onChange={(e164) => onChange(e164 ?? "")}
+    />
+  );
+}

package/src/ui/styled/ShippingRateSelector.tsx

@@ -0,0 +1,122 @@
+import type { SelectedShippingRate } from "../headless/checkout/useCheckout";
+import type { ShippingRate, ShippingGroup } from "../../data/queries/useShipping";
+import { useForgeT } from "../../i18n";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+function alpha(value: number) {
+  return Math.round(value * 255)
+    .toString(16)
+    .padStart(2, "0");
+}
+
+// Shared by the store checkout and the checkout link pay page (phase 2), so a
+// buyer picks shipping the same way on both.
+/**
+ * Renders the shipping groups: fixed lines for auto-selected flat/external
+ * groups, and a radio list for the selectable (dynamic/carrier) group. Selection
+ * state is owned by `useCheckout`; this component just renders + calls `onSelect`.
+ */
+export function ShippingRateSelector({
+  groups,
+  selections,
+  onSelect,
+  formatCurrency,
+}: {
+  groups: ShippingGroup[];
+  selections: Record<string, SelectedShippingRate>;
+  onSelect: (group: ShippingGroup, rate: ShippingRate) => void;
+  formatCurrency: (amount: number, currencyCode?: string) => string;
+}) {
+  const theme = useForgeTheme();
+  const tr = useForgeT();
+  if (groups.length === 0) return null;
+
+  return (
+    <div className="fg:space-y-6">
+      {groups.map((group) => (
+        <div
+          key={group.id}
+          className="fg:p-4 fg:rounded-lg"
+          style={{ border: `1px solid ${theme.colors.primary}${alpha(0.15)}`, borderRadius: `${theme.cornerRadius}px` }}
+        >
+          <p className="fg:font-medium fg:mb-3" style={{ color: theme.colors.text }}>
+            {group.title}
+          </p>
+
+          {!group.selectable && group.rates.length > 0 ? (
+            // Flat or external: a single, auto-selected rate.
+            <div
+              className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md"
+              style={{
+                backgroundColor: `${theme.colors.primary}${alpha(0.05)}`,
+                borderRadius: `${theme.cornerRadius}px`,
+              }}
+            >
+              <div>
+                <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
+                  {group.rates[0].carrier} · {group.rates[0].service}
+                </span>
+                {group.rates[0].estimatedDays != null && (
+                  <span className="fg:text-xs fg:ml-2" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                    {tr("forge.checkout.rate_days", { days: group.rates[0].estimatedDays })}
+                  </span>
+                )}
+              </div>
+              <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
+                {formatCurrency(group.rates[0].amount, group.rates[0].currency)}
+              </span>
+            </div>
+          ) : (
+            // Dynamic: the buyer picks a carrier option.
+            <div className="fg:space-y-2">
+              {group.rates.length === 0 && (
+                <p className="fg:text-sm" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                  {tr("forge.checkout.no_shipping_options")}
+                </p>
+              )}
+              {group.rates.map((rate) => {
+                const isSelected = selections[group.id]?.rateId === rate.rateId;
+                return (
+                  <label
+                    key={rate.rateId}
+                    className="fg:flex fg:items-center fg:justify-between fg:p-3 fg:rounded-md fg:cursor-pointer fg:transition-colors"
+                    style={{
+                      backgroundColor: isSelected ? `${theme.colors.primary}${alpha(0.1)}` : "transparent",
+                      border: `1px solid ${isSelected ? theme.colors.primary : `${theme.colors.primary}${alpha(0.2)}`}`,
+                      borderRadius: `${theme.cornerRadius}px`,
+                    }}
+                  >
+                    <div className="fg:flex fg:items-center fg:gap-3">
+                      <input
+                        type="radio"
+                        name={`shipping-rate-${group.id}`}
+                        checked={isSelected}
+                        onChange={() => onSelect(group, rate)}
+                        style={{ accentColor: theme.colors.primary }}
+                      />
+                      <div>
+                        <span className="fg:text-sm fg:font-medium" style={{ color: theme.colors.text }}>
+                          {rate.carrier} - {rate.service}
+                        </span>
+                        {rate.estimatedDays && (
+                          <p className="fg:text-xs" style={{ color: `${theme.colors.text}${alpha(0.6)}` }}>
+                            {rate.estimatedDays === 1
+                              ? tr("forge.checkout.rate_estimated_day", { days: rate.estimatedDays })
+                              : tr("forge.checkout.rate_estimated_days", { days: rate.estimatedDays })}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                    <span className="fg:text-sm fg:font-semibold" style={{ color: theme.colors.primary }}>
+                      {formatCurrency(rate.amount, rate.currency)}
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}