@owlmeans/web-payment 0.1.18-rc.2 → 0.1.18-rc.21

package/build/types.d.ts

@@ -1,10 +1,128 @@
-import type { AmountCheckoutPolicy, CreateCheckoutResponse } from '@owlmeans/payment';
+import type { ReactNode } from 'react';
+import type { CallOptions, RequestShape } from '@owlmeans/entrypoint';
+import type { AmountCheckoutPolicy, CapabilityView, CheckoutLimitView, CreateCheckoutResponse, EntitlementPlanView, LimitView, PortalLinkBody, PriceEstimate, PriceEstimateBody } from '@owlmeans/payment';
 export type CheckoutResult = CreateCheckoutResponse;
 export interface AmountCheckoutDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
+    /** The plan's policy — or one already narrowed for the entity (`AmountPolicyView.policy`). */
     policy: AmountCheckoutPolicy;
     pending?: boolean;
-    onConfirm: (amountMinor: number) => Promise<void> | void;
+    /** Chosen amount and, where tax estimation collected it, the billing country. */
+    onConfirm: (amountMinor: number, country?: string) => Promise<void> | void;
+    /** A live tax/currency estimate for the credit line — absent: the plain "tax at checkout" note. */
+    estimate?: PriceEstimateControl;
+    /**
+     * What the entity may buy now (`AmountPolicyView.limit`). The dialog narrows `policy` with it
+     * through `narrowAmountPolicy` — presets above the maximum disappear, the default is clamped —
+     * shows a `CheckoutLimitNote`, and on `blocked` disables the input and the confirm button.
+     */
+    limit?: CheckoutLimitView | null;
+    /** Legal text the application places right above the buttons (a withdrawal note, terms links). */
+    legalNote?: ReactNode;
 }
+/** What `usePriceEstimate` returns: the latest answer, the chosen country, and its lifecycle. */
+export interface PriceEstimateControl {
+    estimate: PriceEstimate | null;
+    /** ISO 3166-1 alpha-2, or `''` before a country is known. */
+    country: string;
+    /** A request is in flight — including the first, silent one. */
+    loading: boolean;
+    /** The last request failed; `estimate` is the previous good answer, if any. */
+    failed: boolean;
+    /**
+     * The country is the entity's locked billing country (an answer with `locked` or `source:
+     * 'profile'`): a picker shows it disabled, and `onCountryChange` does nothing.
+     */
+    locked?: boolean;
+    onCountryChange: (country: string) => void;
+}
+export interface CheckoutLimitNoteProps {
+    /** `null`, or a limit that narrowed nothing, renders nothing. */
+    limit: CheckoutLimitView | null | undefined;
+    /** Replaces the package's sentence for the limit's `reason` (`per-purchase`, `window`, `hold`). */
+    reasonLabel?: string | ((reason: string) => string | null | undefined);
+    className?: string;
+}
+/** The request of a price-estimate protocol: its body is a `PriceEstimateBody`. */
+export type PriceEstimateRequest = RequestShape & {
+    body: PriceEstimateBody;
+};
+type PriceEstimateCall<Request extends PriceEstimateRequest> = Omit<Request, 'body'> & {
+    body?: Omit<Request['body'], 'country'>;
+};
+/** A price-estimate protocol's call arguments with `body.country` left to `usePriceEstimate`. */
+export type PriceEstimateArguments<Request extends PriceEstimateRequest> = {} extends PriceEstimateCall<Request> ? [request?: PriceEstimateCall<Request> & CallOptions] : [request: PriceEstimateCall<Request> & CallOptions];
+/** A limit row plus what a UI derives from it. */
+export interface LimitStatus extends LimitView {
+    /** No room for one more unit — including a limit that is not included (`limit: 0`). */
+    exhausted: boolean;
+    /**
+     * How full the limit is, clamped to `[0, 1]`. A `0` ceiling reads `1` once anything is used and
+     * `0` otherwise: the ratio says how full, `exhausted` says whether anything is left.
+     */
+    ratio: number;
+}
+/**
+ * What a plan's status line says, in precedence order: an inactive or blocked status, paused,
+ * suspended, trial, past due, cancellation scheduled, free, renews, active.
+ */
+export type PlanStatusLineKind = 'created' | 'canceled' | 'expired' | 'ended' | 'blocked' | 'paused' | 'suspended' | 'trial' | 'past-due' | 'cancel-scheduled' | 'free' | 'renews' | 'active';
+/** How a status line should be coloured: entitled and fine, needs attention, revoked, or over. */
+export type PlanStatusTone = 'ok' | 'warning' | 'critical' | 'inactive';
+export interface PlanStatusLine {
+    kind: PlanStatusLineKind;
+    tone: PlanStatusTone;
+    /** The date the line names — trial end, cancellation, pause start or renewal. */
+    date?: Date;
+}
+/** How a promo is inscribed: free until its end, kept by a grandfathered plan, or over. */
+export type PromoInscription = 'free-until' | 'grandfathered' | 'ended';
+/** The request of a portal protocol: its body is a `PortalLinkBody`. */
+export type PortalRequest = RequestShape & {
+    body: PortalLinkBody;
+};
+type PortalCall<Request extends PortalRequest> = Omit<Request, 'body'> & {
+    body?: Omit<Request['body'], 'flow'>;
+};
+/** A portal protocol's call arguments with `body.flow` left to `usePortal`. */
+export type PortalArguments<Request extends PortalRequest> = {} extends PortalCall<Request> ? [request?: PortalCall<Request> & CallOptions] : [request: PortalCall<Request> & CallOptions];
+/** A plan offered next to the entity's own — an upgrade, a downgrade, a plan comparison column. */
+export interface PlanOffer {
+    sku: string;
+    title: string;
+    /** The price as the application formats it (`$20 / month`); the package never formats prices. */
+    priceLabel: string;
+    highlight?: boolean;
+}
+export interface PlanCardProps {
+    /** The entity's effective plan. */
+    plan: EntitlementPlanView;
+    /** Render an offered plan instead; the status line then shows only when the offer is current. */
+    offer?: PlanOffer;
+    /** Defaults to `offer.sku === plan.sku` when an offer is given. */
+    current?: boolean;
+    pending?: boolean;
+    actionLabel?: string;
+    /** Called with the rendered sku (`offer.sku`, else `plan.sku`). */
+    onAction?: (sku: string) => Promise<void> | void;
+    className?: string;
+    children?: ReactNode;
+}
+export interface LimitMeterProps {
+    limit: LimitView;
+    label: string;
+    /** Show when a window limit resets. Default `true`. */
+    showReset?: boolean;
+    compact?: boolean;
+    className?: string;
+}
+export interface CapabilityListProps {
+    capabilities: CapabilityView[];
+    /** Product copy by capability `param`; a capability without a label is not rendered. */
+    labels: Record<string, string>;
+    onlyGranted?: boolean;
+    className?: string;
+}
+export {};
 //# sourceMappingURL=types.d.ts.map

package/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAA;AAErF,MAAM,MAAM,cAAc,GAAG,sBAAsB,CAAA;AACnD,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,MAAM,EAAE,oBAAoB,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;CACzD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/web-payment",
-  "version": "0.1.18-rc.2",
+  "version": "0.1.18-rc.21",
   "license": "MIT",
   "description": "Protocol-bound payment hooks and themed amount checkout UI for OwlMeans web applications.",
   "type": "module",
@@ -20,18 +20,30 @@
       "default": "./build/index.js",
       "module": "./build/index.js",
       "types": "./build/index.d.ts"
+    },
+    "./consumer": {
+      "import": "./build/consumer/index.js",
+      "require": "./build/consumer/index.js",
+      "default": "./build/consumer/index.js",
+      "module": "./build/consumer/index.js",
+      "types": "./build/consumer/index.d.ts"
     }
   },
   "dependencies": {
-    "@owlmeans/client-i18n": "^0.1.18-rc.21",
-    "@owlmeans/client-payment": "^0.1.18-rc.26",
-    "@owlmeans/entrypoint": "^0.1.18-rc.17",
-    "@owlmeans/i18n": "^0.1.18-rc.14",
-    "@owlmeans/payment": "^0.1.18-rc.19"
+    "@owlmeans/api": "^0.1.18-rc.37",
+    "@owlmeans/client-i18n": "^0.1.18-rc.39",
+    "@owlmeans/client-payment": "^0.1.18-rc.46",
+    "@owlmeans/entrypoint": "^0.1.18-rc.36",
+    "@owlmeans/error": "^0.1.18-rc.35",
+    "@owlmeans/i18n": "^0.1.18-rc.36",
+    "@owlmeans/payment": "^0.1.18-rc.38"
   },
   "peerDependencies": {
+    "@radix-ui/react-checkbox": "*",
     "@radix-ui/react-dialog": "*",
     "@radix-ui/react-label": "*",
+    "@radix-ui/react-progress": "*",
+    "@radix-ui/react-select": "*",
     "@radix-ui/react-slot": "*",
     "class-variance-authority": "*",
     "clsx": "*",
@@ -42,9 +54,12 @@
   },
   "devDependencies": {
     "@owlmeans/dep-config": "workspace:*",
-    "@owlmeans/test-ui": "^0.1.18-rc.21",
+    "@owlmeans/test-ui": "^0.1.18-rc.38",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.1.0",
     "@vitejs/plugin-react": "^6.0.3",
     "@types/bun": "^1.4.0",

package/src/@/components/ui/card.tsx

@@ -0,0 +1,93 @@
+// shadcn card — sourced from shadcn (new-york) 2026-05-23
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

package/src/@/components/ui/checkbox.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { cn } from '@/lib/utils'
+
+/** The shadcn checkbox, with an inline check mark instead of an icon library. */
+export const Checkbox = ({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) =>
+  <CheckboxPrimitive.Root
+    data-slot="checkbox"
+    className={cn(
+      'peer border-input size-4 shrink-0 cursor-pointer rounded-[4px] border shadow-xs outline-none transition-shadow',
+      'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary',
+      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="flex items-center justify-center text-current">
+      <svg viewBox="0 0 24 24" aria-hidden="true" className="size-3.5" fill="none" stroke="currentColor"
+        strokeWidth={3} strokeLinecap="round" strokeLinejoin="round">
+        <path d="M20 6 9 17l-5-5" />
+      </svg>
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>

package/src/@/components/ui/progress.tsx

@@ -0,0 +1,44 @@
+// shadcn progress — sourced from shadcn (new-york) 2026-05-23
+// Extended with `indeterminate` mode: when `value === undefined` (or not passed),
+// the indicator animates left-to-right continuously via the
+// `--animate-progress-indeterminate` token defined in globals.css.
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+
+import { cn } from '@/lib/utils'
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  const indeterminate = value == null
+
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      )}
+      value={indeterminate ? undefined : value}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        data-state={indeterminate ? 'indeterminate' : 'determinate'}
+        className={cn(
+          "bg-primary h-full w-full flex-1 transition-all",
+          indeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.5s_linear_infinite]"
+        )}
+        style={
+          indeterminate
+            ? undefined
+            : { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/src/@/components/ui/select.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { cn } from '@/lib/utils'
+
+export const Select = (props: React.ComponentProps<typeof SelectPrimitive.Root>) => <SelectPrimitive.Root {...props} />
+export const SelectValue = (props: React.ComponentProps<typeof SelectPrimitive.Value>) => <SelectPrimitive.Value {...props} />
+
+export const SelectTrigger = ({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger>) => (
+  <SelectPrimitive.Trigger
+    className={cn(
+      'border-input data-[placeholder]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50',
+      'flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs',
+      'outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <span aria-hidden="true" className="text-muted-foreground shrink-0">▾</span>
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+)
+
+export const SelectContent = ({ className, children, position = 'popper', ...props }: React.ComponentProps<typeof SelectPrimitive.Content>) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      position={position}
+      className={cn(
+        'bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-y-auto rounded-md border shadow-md',
+        position === 'popper' && 'data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1',
+        className,
+      )}
+      {...props}
+    >
+      <SelectPrimitive.ScrollUpButton className="flex items-center justify-center py-1">
+        <span aria-hidden="true">▴</span>
+      </SelectPrimitive.ScrollUpButton>
+      <SelectPrimitive.Viewport className={cn('p-1', position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]')}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectPrimitive.ScrollDownButton className="flex items-center justify-center py-1">
+        <span aria-hidden="true">▾</span>
+      </SelectPrimitive.ScrollDownButton>
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+)
+
+export const SelectItem = ({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) => (
+  <SelectPrimitive.Item
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator aria-hidden="true">✓</SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+)

package/src/@/globals.css

@@ -1 +1,11 @@
 @import "tailwindcss";
+
+@theme {
+  /* The indeterminate mode of the private `progress` primitive (a `value`-less bar). */
+  --animate-progress-indeterminate: progress-indeterminate 1.5s linear infinite;
+
+  @keyframes progress-indeterminate {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+}

package/src/capability-list.tsx

@@ -0,0 +1,50 @@
+import type { CapabilityView } from '@owlmeans/payment'
+import { PromoNote, useEntitlementCopy } from './copy.js'
+import type { CapabilityListProps } from './types.js'
+
+const classes = (...names: Array<string | false | null | undefined>): string =>
+  names.filter(Boolean).join(' ')
+
+/** One row per param, in view order: granted when any row grants it, the promo of that row. */
+const collapse = (capabilities: CapabilityView[]): CapabilityView[] => {
+  const rows = new Map<string, CapabilityView>()
+  for (const capability of capabilities) {
+    const seen = rows.get(capability.param)
+    if (seen == null || (!seen.granted && capability.granted)) {
+      rows.set(capability.param, capability)
+    }
+  }
+
+  return [...rows.values()]
+}
+
+/**
+ * The capabilities of a view, labelled by the application. A capability without a label is not
+ * rendered, so a view may carry grants a screen has nothing to say about.
+ */
+export const CapabilityList = ({ capabilities, labels, onlyGranted = false, className }: CapabilityListProps) => {
+  const copy = useEntitlementCopy()
+  const rows = collapse(capabilities).filter(capability =>
+    (labels[capability.param] ?? '') !== '' && (!onlyGranted || capability.granted))
+
+  return <ul data-capability-list="" className={classes('grid gap-2 text-sm', className)}>
+    {rows.map(capability => <li
+      key={capability.param}
+      data-capability={capability.param}
+      data-granted={capability.granted ? 'true' : 'false'}
+      className="flex items-start gap-2"
+    >
+      <span aria-hidden="true" className={classes(
+        'mt-0.5 inline-flex size-4 shrink-0 items-center justify-center text-xs font-semibold',
+        capability.granted ? 'text-primary' : 'text-muted-foreground',
+      )}>{capability.granted ? '✓' : '–'}</span>
+      <span className="grid gap-0.5">
+        <span className={capability.granted ? undefined : 'text-muted-foreground'}>
+          {labels[capability.param]}
+          <span className="sr-only">{` — ${copy.text(capability.granted ? 'capability.included' : 'capability.not-included')}`}</span>
+        </span>
+        {capability.promo != null && <span className="text-xs"><PromoNote promo={capability.promo} copy={copy} /></span>}
+      </span>
+    </li>)}
+  </ul>
+}

package/src/checkout-limit.tsx

@@ -0,0 +1,48 @@
+import { useI18nLib, useLanguage } from '@owlmeans/client-i18n'
+import { cn } from '@/lib/utils'
+import { money, shortMomentUtc } from './format.js'
+import type { CheckoutLimitNoteProps } from './types.js'
+
+/** The reasons the package phrases itself; any other reads the generic sentence. */
+const KNOWN_REASONS = ['per-purchase', 'window', 'hold']
+
+/**
+ * What an amount checkout is narrowed to for this entity now: the largest amount (or that nothing
+ * may be bought), why, and when it rises again — the same `CheckoutLimitView` the server refuses
+ * with, so the note and a refusal never disagree.
+ *
+ * `[data-checkout-limit]` carries `data-max-minor`, `data-blocked`, `data-reason` and, when known,
+ * `data-resets-at` (ISO).
+ */
+export const CheckoutLimitNote = ({ limit, reasonLabel, className }: CheckoutLimitNoteProps) => {
+  const t = useI18nLib('web-payment', 'checkout-limit')
+  const [locale] = useLanguage()
+  if (limit == null || (!limit.narrowed && !limit.blocked)) {
+    return null
+  }
+
+  const reason = limit.reason ?? ''
+  const custom = typeof reasonLabel === 'function' ? reasonLabel(reason) : reasonLabel
+  const explained = custom != null && custom !== ''
+    ? custom
+    : t(`reason.${KNOWN_REASONS.includes(reason) ? reason : 'other'}`)
+  const resetsAt = limit.resetsAt != null ? new Date(limit.resetsAt) : null
+  const resets = resetsAt != null && !Number.isNaN(resetsAt.getTime())
+    ? t('resets', { date: shortMomentUtc(resetsAt, locale), interpolation: { escapeValue: false } })
+    : null
+
+  return <div
+    data-checkout-limit="" data-max-minor={limit.maximumMinor} data-blocked={limit.blocked ? 'true' : 'false'}
+    data-reason={reason} data-resets-at={resetsAt?.toISOString()}
+    role={limit.blocked ? 'alert' : 'note'}
+    className={cn('grid gap-1 rounded-lg border p-3 text-sm', limit.blocked ? 'border-destructive/50' : 'bg-muted/30', className)}
+  >
+    <p className={limit.blocked ? 'text-destructive font-medium' : 'font-medium'} data-checkout-limit-headline="">
+      {limit.blocked
+        ? t('blocked')
+        : t('note', { amount: money(limit.maximumMinor, limit.currency, locale), interpolation: { escapeValue: false } })}
+    </p>
+    <p className="text-muted-foreground text-xs" data-checkout-limit-reason="">{explained}</p>
+    {resets != null && <p className="text-muted-foreground text-xs" data-checkout-limit-resets="">{resets}</p>}
+  </div>
+}