@asteby/storefront-react 0.8.0 → 0.10.0

package/dist/checkout.css

@@ -0,0 +1,100 @@
+/*
+ * Default sheet for <DeliveryOptions> and the brand marks (`@asteby/storefront-react/checkout.css`). Optional and
+ * neutral: layout, badges, skeleton and the reserved line of the quote note. Colors come from `currentColor` and a few
+ * variables the shop can set (light and dark):
+ *   --sf-brand-mark-ring   hairline around a mark            (default rgb(127 127 127 / .35))
+ *   --sf-brand-mark-bg/fg  badge of a brand outside the catalog
+ *   --sf-delivery-badge-bg / --sf-delivery-badge-fg
+ *   --sf-delivery-muted    secondary text                     (default currentColor at 70%)
+ */
+[data-sf-delivery] {
+  display: grid;
+  gap: 0.75rem;
+}
+[data-sf-delivery-option] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-height: 44px;
+  cursor: pointer;
+}
+[data-sf-delivery-option][data-loading] {
+  opacity: 0.6;
+  transition: opacity 150ms;
+}
+[data-sf-delivery-body] {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+[data-sf-delivery-title] {
+  overflow-wrap: anywhere;
+}
+[data-sf-delivery-carrier] {
+  font-weight: 600;
+}
+[data-sf-delivery-service],
+[data-sf-delivery-eta] {
+  color: var(--sf-delivery-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+[data-sf-delivery-eta] {
+  font-size: 0.875em;
+}
+[data-sf-delivery-badges] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+[data-sf-delivery-badge] {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 0.0625rem 0.5rem;
+  font-size: 0.75em;
+  font-weight: 600;
+  line-height: 1.5;
+  background: var(--sf-delivery-badge-bg, color-mix(in srgb, currentColor 10%, transparent));
+  color: var(--sf-delivery-badge-fg, inherit);
+}
+[data-sf-delivery-price] {
+  flex: none;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+[data-sf-delivery-note] {
+  min-height: 1.5em; /* reserved before hydration: the text never shifts the layout */
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--sf-delivery-muted, color-mix(in srgb, currentColor 72%, transparent));
+}
+[data-sf-delivery-skeleton] {
+  height: 4.5rem;
+  border-radius: 0.375rem;
+  background: linear-gradient(90deg, color-mix(in srgb, currentColor 6%, transparent) 0%, color-mix(in srgb, currentColor 12%, transparent) 50%, color-mix(in srgb, currentColor 6%, transparent) 100%);
+  background-size: 200% 100%;
+  animation: sf-delivery-shimmer 1.2s ease-in-out infinite;
+}
+@keyframes sf-delivery-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-sf-delivery-skeleton] {
+    animation: none;
+  }
+  [data-sf-delivery-option][data-loading] {
+    transition: none;
+  }
+}
+[data-sf-brand-mark] {
+  display: inline-block;
+  vertical-align: middle;
+}

package/dist/checkout.d.cts

@@ -0,0 +1,197 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ShippingRate, PickupOption, Money } from '@asteby/storefront';
+
+type BrandMarkProps = {
+    /** Provider identifier (`fedex`, `oxxo`, `mercadopago`, `7eleven`…). Unknown keys get a neutral monogram. */
+    brand: string | null | undefined;
+    /** Licensed logo sent by the provider (`PaymentPoint.logo_url`…). Only `https:`; it wins over the badge. */
+    logoUrl?: string | null;
+    /** Height in px. The badge is 3:2 (width = 1.5 × height). Default 24. */
+    size?: number;
+    /**
+     * Accessible name. Omit it when the brand name is already written next to the mark (the usual case): the mark is then
+     * decorative (`aria-hidden`).
+     */
+    title?: string;
+    className?: string;
+};
+/**
+ * The mark of a carrier, card network, wallet or cash point: an inline SVG badge in the brand color with its short
+ * wordmark (no network request, same size on the server and in the browser, so no layout shift). With `logoUrl` it
+ * draws the provider's licensed logo instead, lazily, with fixed dimensions.
+ *
+ * The badge carries its own background, so it keeps its contrast on light and dark themes; a hairline
+ * (`--sf-brand-mark-ring`) separates it from the page.
+ */
+declare function BrandMark({ brand, logoUrl, size, title, className }: BrandMarkProps): react.JSX.Element;
+
+/**
+ * Shared catalog of the brands a checkout names: parcel carriers, card networks, wallets and cash payment points.
+ *
+ * Keys are the stable identifiers the providers already send (`ShippingRate.carrier` of Skydropx / Envía, the
+ * `PaymentPoint.payment_point` or `id` of the payment addon, a `PaymentMethod.key`). Nothing here decides what a shop
+ * offers: the server lists the rates and methods; this only gives each one its commercial name and a mark.
+ *
+ * Marks are typographic badges drawn by `<BrandMark>` (brand color + short wordmark): no third-party logo files are
+ * bundled, so there is no licensing question and no extra request. A provider that holds a licensed logo sends it as
+ * `logo_url` and it wins over the badge. Colors are close approximations of each brand's public color.
+ */
+type BrandKind = 'carrier' | 'card' | 'wallet' | 'cash' | 'bank';
+type Brand = {
+    key: string;
+    /** Commercial name, as the brand writes it. */
+    name: string;
+    kind: BrandKind;
+    /** Badge background. */
+    bg: string;
+    /** Badge text color (AA on `bg`). */
+    fg: string;
+    /** Short wordmark drawn in the badge (`\n` = two lines). Default: `name`. */
+    mark?: string;
+    /** Special drawings instead of a wordmark. */
+    shape?: 'mastercard';
+};
+/** `"FedEx México"`, `"fedex_mx"` and `"FEDEX"` all become `fedex`. Lowercase ASCII letters and digits only. */
+declare function brandKey(raw: string | null | undefined): string;
+/** Catalog entry for a provider identifier, or `null` when the brand is not in the catalog. */
+declare function findBrand(raw: string | null | undefined): Brand | null;
+/**
+ * Commercial name for a provider identifier: the catalog's (`fedex` → "FedEx") or, for an unknown one, the identifier
+ * in title case (`"envios_rapidos"` → "Envios Rapidos"). `null` for an empty input.
+ */
+declare function brandName(raw: string | null | undefined): string | null;
+/** Every brand of the catalog (for docs, previews and tests). */
+declare function listBrands(kind?: BrandKind): Brand[];
+
+/**
+ * Pure helpers for the "Delivery" step: how to name a carrier rate, its arrival time, which rate is the cheapest or the
+ * fastest, and one human note for the quote deadline. No amounts are computed: `cost` is shown as the server sends it;
+ * comparing two costs to flag the cheapest is the only arithmetic.
+ */
+
+type DeliveryMessages = {
+    /** `{n}` = business days. */
+    etaOne: string;
+    etaMany: string;
+    /** `{min}` / `{max}` = business days. */
+    etaRange: string;
+    etaUpTo: string;
+    etaFrom: string;
+    cheapest: string;
+    fastest: string;
+    free: string;
+    pickupTitle: string;
+    /** Quote deadline, `{time}` = local time. */
+    quoteToday: string;
+    quoteTomorrow: string;
+    /** `{date}` = short date + time. */
+    quoteLater: string;
+    quoteSoon: string;
+    partial: string;
+    loading: string;
+    /** The quote expired or changed and the rates were reloaded. */
+    requoted: string;
+};
+/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
+declare function deliveryMessages(locale?: string | null, overrides?: Partial<DeliveryMessages> | null): DeliveryMessages;
+/** Commercial carrier name of a rate (`fedex` → "FedEx"); `null` without carrier. */
+declare function rateCarrier(rate: Pick<ShippingRate, 'carrier'>): string | null;
+/**
+ * Service name without the carrier repeated: "FedEx Express Saver" with carrier `fedex` → "Express Saver". Falls back
+ * to the title when stripping would leave nothing.
+ */
+declare function rateService(rate: Pick<ShippingRate, 'title' | 'carrier'>): string;
+/** Arrival time of a rate: business days from the provider, else the server `eta` text as is. */
+declare function rateEta(rate: Pick<ShippingRate, 'eta' | 'eta_days_min' | 'eta_days_max'>, messages?: DeliveryMessages): string | null;
+type RateBadge = 'cheapest' | 'fastest';
+/**
+ * Badges per rate id. Only with two or more rates, only when one rate is strictly the cheapest (same currency) or
+ * strictly the fastest: a tie gets no badge, so the badge always tells the buyer something.
+ */
+declare function rateBadges(rates: readonly ShippingRate[]): Map<string, RateBadge[]>;
+/** Earliest `expires_at` of the rates (the deadline of the whole list), or `null`. */
+declare function quoteDeadline(rates: readonly Pick<ShippingRate, 'expires_at'>[]): Date | null;
+type QuoteNote = {
+    text: string;
+    soon: boolean;
+};
+/**
+ * One human note for the quote deadline, in the buyer's time zone (or `timeZone`): "valid until 9:39 p.m.", "until
+ * tomorrow at…", "until Oct 24, …", or "expire soon" within `soonMinutes` (default 15). `null` when already past.
+ */
+declare function quoteNote(deadline: Date | null, opts?: {
+    locale?: string;
+    now?: Date;
+    timeZone?: string;
+    soonMinutes?: number;
+    messages?: DeliveryMessages;
+}): QuoteNote | null;
+/**
+ * `true` when saving a shipping rate failed because the quote expired or the rates changed, so the shop should reload
+ * the rates (and keep the address) instead of showing a generic failure. Recognizes the explicit codes
+ * (`quote_expired`, `rate_expired`…, any status), a `409`, and the generic `422` on the rate field that older servers
+ * answer when the provider re-quoted with new ids. 5xx and other 4xx stay real failures.
+ */
+declare function isQuoteChange(err: {
+    status?: number;
+    code?: string | null;
+    field?: string | null;
+} | null | undefined): boolean;
+/**
+ * The rate of a fresh quote that matches the one the buyer had chosen (same carrier and service), so a re-quote keeps
+ * the choice even though the provider issued new ids. `null` when that service is no longer offered.
+ */
+declare function matchRate<R extends Pick<ShippingRate, 'id' | 'carrier' | 'service_code' | 'title'>>(previous: Pick<ShippingRate, 'carrier' | 'service_code' | 'title'> | null | undefined, rates: readonly R[]): R | null;
+
+type DeliveryOptionsClassNames = Partial<Record<'root' | 'option' | 'radio' | 'mark' | 'body' | 'title' | 'carrier' | 'service' | 'eta' | 'badges' | 'badge' | 'price' | 'free' | 'note' | 'partial' | 'skeleton', string>>;
+type DeliveryOptionsProps = {
+    rates: readonly ShippingRate[];
+    pickup?: readonly PickupOption[];
+    /** Radio group name. Default `delivery_choice`. */
+    name?: string;
+    /** Form value of a rate. Default `rate:<id>`. */
+    rateValue?: (rate: ShippingRate) => string;
+    /** Form value of a pickup branch. Default `pickup:<branch_id>`. */
+    pickupValue?: (branch: PickupOption) => string;
+    /** Uncontrolled preselection. Default: the first rate. `null`: nothing preselected. */
+    defaultValue?: string | null;
+    /** Controlled value (use with `onValueChange`). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Some provider did not answer (`DeliveryOptions.partial`): one neutral note above the list. */
+    partial?: boolean;
+    /** The previous quote expired or changed and these rates are fresh: one status note above the list. */
+    requoted?: boolean;
+    /** Rates are being quoted again: skeleton rows (no rates yet) or the current rows dimmed, `aria-busy`. */
+    loading?: boolean;
+    /** Quote deadline note: `always` (default), only when it is `soon`, or `never`. */
+    quoteNote?: 'always' | 'soon' | 'never';
+    /** Time zone of the note. Default: the buyer's browser. */
+    timeZone?: string;
+    /** Show the carrier marks. Default true. */
+    marks?: boolean;
+    /** Cheapest / fastest badges. Default true. */
+    badges?: boolean;
+    required?: boolean;
+    locale?: string;
+    messages?: Partial<DeliveryMessages>;
+    renderAmount?: (amount: Money) => ReactNode;
+    classNames?: DeliveryOptionsClassNames;
+    /** `data-testid` of every radio. */
+    testId?: string;
+    /** Rows the shop renders before the rates (e.g. "home delivery, rates after the address"). */
+    children?: ReactNode;
+};
+/**
+ * The rates and pickup branches of "Delivery" as native radios: carrier mark and commercial name, readable service,
+ * arrival time, cheapest / fastest badges, price as the server sends it, and ONE note for the quote deadline in the
+ * buyer's time zone. Works without JavaScript (plain radios in the page form); the note appears after hydration in a
+ * reserved line, so it never shifts the layout.
+ *
+ * Wrap it in the shop's own `<fieldset><legend>`. Style it with `classNames` and/or the default sheet
+ * `@asteby/storefront-react/checkout.css`.
+ */
+declare function DeliveryOptions(props: DeliveryOptionsProps): react.JSX.Element;
+
+export { type Brand, type BrandKind, BrandMark, type BrandMarkProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, type QuoteNote, type RateBadge, brandKey, brandName, deliveryMessages, findBrand, isQuoteChange, listBrands, matchRate, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService };

package/dist/checkout.d.ts

@@ -0,0 +1,197 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ShippingRate, PickupOption, Money } from '@asteby/storefront';
+
+type BrandMarkProps = {
+    /** Provider identifier (`fedex`, `oxxo`, `mercadopago`, `7eleven`…). Unknown keys get a neutral monogram. */
+    brand: string | null | undefined;
+    /** Licensed logo sent by the provider (`PaymentPoint.logo_url`…). Only `https:`; it wins over the badge. */
+    logoUrl?: string | null;
+    /** Height in px. The badge is 3:2 (width = 1.5 × height). Default 24. */
+    size?: number;
+    /**
+     * Accessible name. Omit it when the brand name is already written next to the mark (the usual case): the mark is then
+     * decorative (`aria-hidden`).
+     */
+    title?: string;
+    className?: string;
+};
+/**
+ * The mark of a carrier, card network, wallet or cash point: an inline SVG badge in the brand color with its short
+ * wordmark (no network request, same size on the server and in the browser, so no layout shift). With `logoUrl` it
+ * draws the provider's licensed logo instead, lazily, with fixed dimensions.
+ *
+ * The badge carries its own background, so it keeps its contrast on light and dark themes; a hairline
+ * (`--sf-brand-mark-ring`) separates it from the page.
+ */
+declare function BrandMark({ brand, logoUrl, size, title, className }: BrandMarkProps): react.JSX.Element;
+
+/**
+ * Shared catalog of the brands a checkout names: parcel carriers, card networks, wallets and cash payment points.
+ *
+ * Keys are the stable identifiers the providers already send (`ShippingRate.carrier` of Skydropx / Envía, the
+ * `PaymentPoint.payment_point` or `id` of the payment addon, a `PaymentMethod.key`). Nothing here decides what a shop
+ * offers: the server lists the rates and methods; this only gives each one its commercial name and a mark.
+ *
+ * Marks are typographic badges drawn by `<BrandMark>` (brand color + short wordmark): no third-party logo files are
+ * bundled, so there is no licensing question and no extra request. A provider that holds a licensed logo sends it as
+ * `logo_url` and it wins over the badge. Colors are close approximations of each brand's public color.
+ */
+type BrandKind = 'carrier' | 'card' | 'wallet' | 'cash' | 'bank';
+type Brand = {
+    key: string;
+    /** Commercial name, as the brand writes it. */
+    name: string;
+    kind: BrandKind;
+    /** Badge background. */
+    bg: string;
+    /** Badge text color (AA on `bg`). */
+    fg: string;
+    /** Short wordmark drawn in the badge (`\n` = two lines). Default: `name`. */
+    mark?: string;
+    /** Special drawings instead of a wordmark. */
+    shape?: 'mastercard';
+};
+/** `"FedEx México"`, `"fedex_mx"` and `"FEDEX"` all become `fedex`. Lowercase ASCII letters and digits only. */
+declare function brandKey(raw: string | null | undefined): string;
+/** Catalog entry for a provider identifier, or `null` when the brand is not in the catalog. */
+declare function findBrand(raw: string | null | undefined): Brand | null;
+/**
+ * Commercial name for a provider identifier: the catalog's (`fedex` → "FedEx") or, for an unknown one, the identifier
+ * in title case (`"envios_rapidos"` → "Envios Rapidos"). `null` for an empty input.
+ */
+declare function brandName(raw: string | null | undefined): string | null;
+/** Every brand of the catalog (for docs, previews and tests). */
+declare function listBrands(kind?: BrandKind): Brand[];
+
+/**
+ * Pure helpers for the "Delivery" step: how to name a carrier rate, its arrival time, which rate is the cheapest or the
+ * fastest, and one human note for the quote deadline. No amounts are computed: `cost` is shown as the server sends it;
+ * comparing two costs to flag the cheapest is the only arithmetic.
+ */
+
+type DeliveryMessages = {
+    /** `{n}` = business days. */
+    etaOne: string;
+    etaMany: string;
+    /** `{min}` / `{max}` = business days. */
+    etaRange: string;
+    etaUpTo: string;
+    etaFrom: string;
+    cheapest: string;
+    fastest: string;
+    free: string;
+    pickupTitle: string;
+    /** Quote deadline, `{time}` = local time. */
+    quoteToday: string;
+    quoteTomorrow: string;
+    /** `{date}` = short date + time. */
+    quoteLater: string;
+    quoteSoon: string;
+    partial: string;
+    loading: string;
+    /** The quote expired or changed and the rates were reloaded. */
+    requoted: string;
+};
+/** Messages for a locale (`es*` default, `en*`), with optional overrides. */
+declare function deliveryMessages(locale?: string | null, overrides?: Partial<DeliveryMessages> | null): DeliveryMessages;
+/** Commercial carrier name of a rate (`fedex` → "FedEx"); `null` without carrier. */
+declare function rateCarrier(rate: Pick<ShippingRate, 'carrier'>): string | null;
+/**
+ * Service name without the carrier repeated: "FedEx Express Saver" with carrier `fedex` → "Express Saver". Falls back
+ * to the title when stripping would leave nothing.
+ */
+declare function rateService(rate: Pick<ShippingRate, 'title' | 'carrier'>): string;
+/** Arrival time of a rate: business days from the provider, else the server `eta` text as is. */
+declare function rateEta(rate: Pick<ShippingRate, 'eta' | 'eta_days_min' | 'eta_days_max'>, messages?: DeliveryMessages): string | null;
+type RateBadge = 'cheapest' | 'fastest';
+/**
+ * Badges per rate id. Only with two or more rates, only when one rate is strictly the cheapest (same currency) or
+ * strictly the fastest: a tie gets no badge, so the badge always tells the buyer something.
+ */
+declare function rateBadges(rates: readonly ShippingRate[]): Map<string, RateBadge[]>;
+/** Earliest `expires_at` of the rates (the deadline of the whole list), or `null`. */
+declare function quoteDeadline(rates: readonly Pick<ShippingRate, 'expires_at'>[]): Date | null;
+type QuoteNote = {
+    text: string;
+    soon: boolean;
+};
+/**
+ * One human note for the quote deadline, in the buyer's time zone (or `timeZone`): "valid until 9:39 p.m.", "until
+ * tomorrow at…", "until Oct 24, …", or "expire soon" within `soonMinutes` (default 15). `null` when already past.
+ */
+declare function quoteNote(deadline: Date | null, opts?: {
+    locale?: string;
+    now?: Date;
+    timeZone?: string;
+    soonMinutes?: number;
+    messages?: DeliveryMessages;
+}): QuoteNote | null;
+/**
+ * `true` when saving a shipping rate failed because the quote expired or the rates changed, so the shop should reload
+ * the rates (and keep the address) instead of showing a generic failure. Recognizes the explicit codes
+ * (`quote_expired`, `rate_expired`…, any status), a `409`, and the generic `422` on the rate field that older servers
+ * answer when the provider re-quoted with new ids. 5xx and other 4xx stay real failures.
+ */
+declare function isQuoteChange(err: {
+    status?: number;
+    code?: string | null;
+    field?: string | null;
+} | null | undefined): boolean;
+/**
+ * The rate of a fresh quote that matches the one the buyer had chosen (same carrier and service), so a re-quote keeps
+ * the choice even though the provider issued new ids. `null` when that service is no longer offered.
+ */
+declare function matchRate<R extends Pick<ShippingRate, 'id' | 'carrier' | 'service_code' | 'title'>>(previous: Pick<ShippingRate, 'carrier' | 'service_code' | 'title'> | null | undefined, rates: readonly R[]): R | null;
+
+type DeliveryOptionsClassNames = Partial<Record<'root' | 'option' | 'radio' | 'mark' | 'body' | 'title' | 'carrier' | 'service' | 'eta' | 'badges' | 'badge' | 'price' | 'free' | 'note' | 'partial' | 'skeleton', string>>;
+type DeliveryOptionsProps = {
+    rates: readonly ShippingRate[];
+    pickup?: readonly PickupOption[];
+    /** Radio group name. Default `delivery_choice`. */
+    name?: string;
+    /** Form value of a rate. Default `rate:<id>`. */
+    rateValue?: (rate: ShippingRate) => string;
+    /** Form value of a pickup branch. Default `pickup:<branch_id>`. */
+    pickupValue?: (branch: PickupOption) => string;
+    /** Uncontrolled preselection. Default: the first rate. `null`: nothing preselected. */
+    defaultValue?: string | null;
+    /** Controlled value (use with `onValueChange`). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Some provider did not answer (`DeliveryOptions.partial`): one neutral note above the list. */
+    partial?: boolean;
+    /** The previous quote expired or changed and these rates are fresh: one status note above the list. */
+    requoted?: boolean;
+    /** Rates are being quoted again: skeleton rows (no rates yet) or the current rows dimmed, `aria-busy`. */
+    loading?: boolean;
+    /** Quote deadline note: `always` (default), only when it is `soon`, or `never`. */
+    quoteNote?: 'always' | 'soon' | 'never';
+    /** Time zone of the note. Default: the buyer's browser. */
+    timeZone?: string;
+    /** Show the carrier marks. Default true. */
+    marks?: boolean;
+    /** Cheapest / fastest badges. Default true. */
+    badges?: boolean;
+    required?: boolean;
+    locale?: string;
+    messages?: Partial<DeliveryMessages>;
+    renderAmount?: (amount: Money) => ReactNode;
+    classNames?: DeliveryOptionsClassNames;
+    /** `data-testid` of every radio. */
+    testId?: string;
+    /** Rows the shop renders before the rates (e.g. "home delivery, rates after the address"). */
+    children?: ReactNode;
+};
+/**
+ * The rates and pickup branches of "Delivery" as native radios: carrier mark and commercial name, readable service,
+ * arrival time, cheapest / fastest badges, price as the server sends it, and ONE note for the quote deadline in the
+ * buyer's time zone. Works without JavaScript (plain radios in the page form); the note appears after hydration in a
+ * reserved line, so it never shifts the layout.
+ *
+ * Wrap it in the shop's own `<fieldset><legend>`. Style it with `classNames` and/or the default sheet
+ * `@asteby/storefront-react/checkout.css`.
+ */
+declare function DeliveryOptions(props: DeliveryOptionsProps): react.JSX.Element;
+
+export { type Brand, type BrandKind, BrandMark, type BrandMarkProps, type DeliveryMessages, DeliveryOptions, type DeliveryOptionsClassNames, type DeliveryOptionsProps, type QuoteNote, type RateBadge, brandKey, brandName, deliveryMessages, findBrand, isQuoteChange, listBrands, matchRate, quoteDeadline, quoteNote, rateBadges, rateCarrier, rateEta, rateService };