@stapel/listings-react 0.1.0

package/src/api/listingsApi.ts

@@ -0,0 +1,237 @@
+import type { StapelClient } from "@stapel/core";
+import type {
+  DeleteResponse,
+  FavoriteToggleResponse,
+  ListingActionResponse,
+  ListingDetail,
+  ListingDraft,
+  ListingDraftPatch,
+  ListingPageParams,
+  ListingStatusInfo,
+  MyCounters,
+  PaginatedListingCards,
+  PublishResponse,
+} from "./types.js";
+import type { ValidationBatchResult } from "@stapel/attributes-react";
+
+/**
+ * The pair's typed operation surface — one method per stapel-listings endpoint
+ * a storefront may call, bound to the injected {@link StapelClient} (the
+ * per-module override seam of frontend-standard §7.2). Paths are relative to
+ * the runtime's `baseUrl` (`/listings/api/v1/`).
+ *
+ * ── The two operations that are on the contract and NOT here ───────────────
+ *
+ * `PUT /{pk}/` and `PATCH /{pk}/` are absent, and this is the one place in
+ * the pair where an absence is a safety decision rather than a scope one.
+ * Every OWNER operation in this module routes through `views._get_own`, which
+ * answers `error.403.listing_not_owner` when the caller is not the owner —
+ * every one except these two. `update`/`partial_update` are the plain
+ * `ModelViewSet` implementations under the viewset's default
+ * `IsAuthenticatedOrReadOnly`, and `get_queryset` hands them
+ * `Listing.objects.all()`: any authenticated caller can write any listing's
+ * draft fields through them. `POST /{pk}/save-draft/` performs the SAME write
+ * (the same `ListingDraftSerializer`, `partial=True`) with the ownership
+ * check, so the pair uses it and nothing is lost. Both stay in the generated
+ * schema and therefore in `manifest.json` — the contract is not hidden, this
+ * pair simply declines to be the client that exercises it. Upstream ask,
+ * recorded in MODULE.md: put `_get_own` in front of `update`/`partial_update`
+ * (or drop them from the router).
+ *
+ * These operations will be GENERATED from schema.json operationIds by gen-api
+ * v2 (task `core-typed-ops`); until then they are hand-authored here (the ONE
+ * legal home of path strings — `stapel/no-string-paths` §2.3 carve-out).
+ */
+export interface ListingsApi {
+  readonly client: StapelClient;
+
+  /**
+   * One keyset page of PUBLISHED cards.
+   *
+   * Two things this is not, both worth stating because the storefront spec
+   * assumed otherwise at one point:
+   *
+   *  - It is not "my listings". `get_queryset` answers `qs.published()` for
+   *    `list` and takes no owner parameter, so this endpoint cannot be
+   *    narrowed to the caller. See `headless/MyListings.tsx` for what the
+   *    dashboard does about that.
+   *  - It is not the storefront grid either. A marketplace's result page goes
+   *    through `@stapel/search-react`, because `promoted` (DSA Art. 26) rides
+   *    every search item under every sort and a card list that carried the
+   *    marking on some pages and not others would be worse than one that
+   *    never claimed it. This exists for a host with no search module and for
+   *    the "more from this category" strip a detail page may want.
+   */
+  list(
+    params?: ListingPageParams,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<PaginatedListingCards>;
+
+  /**
+   * One listing in full.
+   *
+   * `IsAuthenticatedOrReadOnly` + a queryset with no `published()` filter:
+   * this answers for a DRAFT and for a BLOCKED listing too, to anyone who
+   * knows the id. The pair does not pretend otherwise — `useListing` reports
+   * `publiclyVisible` off `status` so a skin can say "this listing is not
+   * published" instead of drawing a live-looking page (see `model/status.ts`,
+   * and MODULE.md's upstream note).
+   */
+  retrieve(
+    id: number,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<ListingDetail>;
+
+  /**
+   * The AllowAny status probe: both axes plus `is_deleted` / `is_expired` /
+   * `is_active` / `owner_id`.
+   *
+   * It reads `Listing.all_objects`, so it is the only operation that still
+   * answers for a SOFT-DELETED listing — which is exactly what turns a bare
+   * 404 on the detail into "this listing was removed".
+   */
+  status(
+    id: number,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<ListingStatusInfo>;
+
+  /** Counts by dashboard tab for the caller (`active` / `archived` /
+   * `drafts`). Server-side definitions, not the pair's: `active` folds
+   * PENDING in with PUBLISHED, `drafts` folds REJECTED in with DRAFT. */
+  myCounters(options?: { readonly signal?: AbortSignal }): Promise<MyCounters>;
+
+  /** One keyset page of the caller's favourites. */
+  myFavorites(
+    params?: ListingPageParams,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<PaginatedListingCards>;
+
+  /**
+   * Start a draft. `category_id` is the only required member: the server
+   * forces `owner=request.user` and `status=draft` in `perform_create`, so a
+   * body that tried to set either is writing a field it does not own.
+   */
+  createDraft(body: ListingDraftPatch): Promise<ListingDraft>;
+
+  /**
+   * Persist draft fields. Always partial — send what moved.
+   *
+   * Refuses with the DRF field-error envelope (`error.400.field.*`) on a
+   * declarative violation (`title_draft` over 255, a negative price, a
+   * `stock_quantity` that contradicts `countable`).
+   */
+  saveDraft(id: number, body: ListingDraftPatch): Promise<ListingDraft>;
+
+  /**
+   * Ask what publishing WOULD say, without publishing. Same validator as
+   * `publish` (`services.publish.validate_draft`), so the two cannot disagree
+   * — including on an unknown feature slug, which 0.6.0's M-7 convergence
+   * made a per-feature refusal (`error.400.listing_feature_not_allowed`)
+   * rather than an opaque failure at publish time.
+   */
+  validateDraft(
+    id: number,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<ValidationBatchResult>;
+
+  /**
+   * Promote the draft.
+   *
+   * TWO distinct 400s, and a caller must tell them apart:
+   *  - an INVALID DRAFT answers with a bare {@link ValidationBatchResult}
+   *    body — no `localizable_error`, no envelope — which core wraps as
+   *    `stapel.http.400` with the batch on `StapelApiError.body`;
+   *  - a promotion that then fails (`REQUIRE_IMAGE_ON_PUBLISH` with no photo)
+   *    answers the ordinary envelope `error.400.publish_validation_failed`.
+   * `model/validation.ts` owns that split so no screen re-derives it.
+   *
+   * On success the returned `status` is `pending` for a first publication and
+   * stays `published` for an edit to a LIVE listing — the 0.5.0
+   * re-moderation semantics the whole dashboard is built around.
+   */
+  publish(id: number): Promise<PublishResponse>;
+
+  /** Move to ARCHIVED. `error.409.invalid_listing_transition` with
+   * `params.from_status` when the lifecycle does not allow it. */
+  archive(id: number): Promise<ListingActionResponse>;
+
+  /** Mark SOLD. Same 409 contract as {@link archive}. */
+  complete(id: number): Promise<ListingActionResponse>;
+
+  /** Favourite a listing. Idempotent server-side (`get_or_create`). */
+  favorite(id: number): Promise<FavoriteToggleResponse>;
+
+  /** Un-favourite. Idempotent: deleting nothing still answers 200. */
+  unfavorite(id: number): Promise<FavoriteToggleResponse>;
+
+  /**
+   * Soft-delete. Ownership-checked (unlike PUT/PATCH — see the header) and
+   * refused with `error.409.listing_cannot_delete_active` while the listing
+   * is PUBLISHED or PENDING: archive it first.
+   */
+  remove(id: number): Promise<DeleteResponse>;
+}
+
+function pageQuery(
+  params: ListingPageParams | undefined
+): Record<string, string | number | undefined> {
+  return {
+    ...(params?.anchor !== undefined ? { anchor: params.anchor } : {}),
+    ...(params?.direction !== undefined ? { direction: params.direction } : {}),
+    ...(params?.limit !== undefined ? { limit: params.limit } : {}),
+  };
+}
+
+function signal(
+  options: { readonly signal?: AbortSignal } | undefined
+): { signal?: AbortSignal } {
+  return options?.signal !== undefined ? { signal: options.signal } : {};
+}
+
+/** The collection root and the one place a listing id becomes a path. */
+const COLLECTION = "/listings/";
+function listingPath(id: number): string {
+  return `${COLLECTION}${String(id)}/`;
+}
+
+export function createListingsApi(client: StapelClient): ListingsApi {
+  return {
+    client,
+
+    list: (params, options) =>
+      client.get(COLLECTION, { query: pageQuery(params), ...signal(options) }),
+
+    retrieve: (id, options) => client.get(listingPath(id), signal(options)),
+
+    status: (id, options) =>
+      client.get(`${listingPath(id)}status/`, signal(options)),
+
+    myCounters: (options) =>
+      client.get(`${COLLECTION}my/counters/`, signal(options)),
+
+    myFavorites: (params, options) =>
+      client.get(`${COLLECTION}my/favorites/`, {
+        query: pageQuery(params),
+        ...signal(options),
+      }),
+
+    createDraft: (body) => client.post(COLLECTION, body),
+
+    saveDraft: (id, body) => client.post(`${listingPath(id)}save-draft/`, body),
+
+    validateDraft: (id, options) =>
+      client.get(`${listingPath(id)}validate-draft/`, signal(options)),
+
+    publish: (id) => client.post(`${listingPath(id)}publish/`),
+
+    archive: (id) => client.post(`${listingPath(id)}archive/`),
+
+    complete: (id) => client.post(`${listingPath(id)}complete/`),
+
+    favorite: (id) => client.post(`${listingPath(id)}favorite/`),
+
+    unfavorite: (id) => client.post(`${listingPath(id)}unfavorite/`),
+
+    remove: (id) => client.delete(listingPath(id)),
+  };
+}

package/src/api/types.ts

@@ -0,0 +1,193 @@
+/**
+ * Wire types for the stapel-listings HTTP contract — **derived from the
+ * generated OpenAPI surface** (frontend-standard §2/§3), never hand-maintained.
+ * The single source of truth is `components["schemas"]` from this pair's own
+ * package-LOCAL generated schema (`./generated/schema.js`, produced by
+ * `pnpm gen:api` from stapel-listings' OWN `docs/schema.json`).
+ *
+ * Two notes about the polymorphic feature union, one of them now HISTORY and
+ * kept because the reason it is history is the useful part:
+ *
+ * 1. **The discriminator is correct as of stapel-listings 0.6.1, and was not
+ *    in 0.6.0.** 0.6.0 declared `discriminator: {propertyName: "type",
+ *    mapping: {"null": ConvertibleUnitDao}}` — one bogus entry instead of the
+ *    ten type slugs — and openapi-typescript answers that by stripping `type`
+ *    from every member and re-adding a SYNTHETIC discriminant, so the
+ *    generated `IntDao` said `type: "IntDao"` where the wire sends `"int"`.
+ *    `@stapel/categories-react` hit the same defect one directory over and
+ *    routed around it. 0.6.1 emits the ten slugs (and an upstream contract
+ *    test now holds them there), so `Schemas["FeatureDao"]` and
+ *    `Schemas["FeatureDto"]` discriminate on the real values and ARE the wire
+ *    types this pair uses. What still comes from
+ *    `@stapel/attributes-react` is the behaviour — the editors, the mirror,
+ *    the formatter — which is the spec's L0 seam and never was a workaround.
+ *
+ * 2. **A stored DAO carries `slug`; the schema's `FeatureDao` does not.**
+ *    `features`/`features_title`/`features_badges` are `ListingFeaturesOutput
+ *    Field`, a plain `serializers.JSONField` whose OpenAPI *description* is
+ *    swapped for the DAO union by an extension (`stapel-listings/
+ *    serializers.py`). A JSONField filters nothing: what reaches the wire is
+ *    what `build_features_list` stored, and that is `{**dao, "slug": slug}`
+ *    (`services/features.py`). The slug is load-bearing — it is how a card
+ *    keys a badge and how a refusal finds its control — so {@link
+ *    ListingFeatureDao} mirrors the runtime shape and says why.
+ */
+import type { FeatureConfig, FeatureDef, FeatureValueDto } from "@stapel/attributes-react";
+import type { components } from "./generated/schema.js";
+
+/** The generated schema table — the one source of truth for wire shapes. */
+export type Schemas = components["schemas"];
+
+/** `GET /listings/{pk}/` 200 — everything a detail page reads. */
+export type ListingDetail = Schemas["ListingDetail"];
+
+/** One row of a card list (`GET /listings/`, `GET /listings/my/favorites/`). */
+export type ListingCard = Schemas["ListingCard"];
+
+/** `POST /listings/` request+response and `POST /{pk}/save-draft/` response —
+ * the draft twin. Every user-editable field is a `*_draft` one, promoted onto
+ * its published sibling by `publish`. */
+export type ListingDraft = Schemas["ListingDraft"];
+
+/** The partial body a `save-draft` write sends. */
+export type ListingDraftPatch = Schemas["PatchedListingDraft"];
+
+/** `GET /{pk}/status/` 200 — the AllowAny status probe, and the ONLY read that
+ * still answers for a soft-deleted listing (`Listing.all_objects`). */
+export type ListingStatusInfo = Schemas["ListingStatus"];
+
+/** `GET /my/counters/` 200 — the three dashboard tab counts. */
+export type MyCounters = Schemas["MyCountersResponse"];
+
+/** `POST /{pk}/publish/` 200. The 400 is a `ValidationBatchResult`, NOT an
+ * error envelope — see `model/validation.ts`. */
+export type PublishResponse = Schemas["PublishResponse"];
+
+/** `POST /{pk}/archive|complete/` 200. */
+export type ListingActionResponse = Schemas["ListingActionResponse"];
+
+/** `POST /{pk}/favorite|unfavorite/` 200. */
+export type FavoriteToggleResponse = Schemas["FavoriteToggleResponse"];
+
+/** `DELETE /{pk}/` 200. */
+export type DeleteResponse = Schemas["DeleteResponse"];
+
+/** The keyset envelope both card lists come back in (`IDAnchorPagination`). */
+export type PaginatedListingCards = Schemas["PaginatedListingCardList"];
+
+/**
+ * The nine lifecycle states, as `models.ListingStatus` declares them.
+ *
+ * A runtime array and not only a type, because the dashboard's own table of
+ * expected captions is asserted over it — a status added upstream turns
+ * `test/status.test.ts` red instead of rendering as a bare enum value.
+ */
+export const LISTING_STATUSES: readonly ListingLifecycleStatus[] = [
+  "draft",
+  "pending",
+  "published",
+  "paused",
+  "expired",
+  "sold",
+  "rejected",
+  "blocked",
+  "archived",
+];
+
+/** One lifecycle state. THE field that decides public visibility — and the
+ * only one (`models.py`: "no visibility-reads-moderation_status coupling"). */
+export type ListingLifecycleStatus = Schemas["StatusD41Enum"];
+
+/** The four content-moderation states, as `models.ModerationStatus` declares
+ * them. Independent of the lifecycle: see `model/status.ts`. */
+export const MODERATION_STATUSES: readonly ListingModerationStatus[] = [
+  "pending",
+  "approved",
+  "rejected",
+  "needs_review",
+];
+
+/** One moderation state. Decides NOTHING about visibility. */
+export type ListingModerationStatus = Schemas["ModerationStatusEnum"];
+
+/**
+ * The ten value types, straight out of the generated discriminated union.
+ *
+ * Not a hand-written list: `Schemas["FeatureDao"]["type"]` is the union of the
+ * ten `discriminator.mapping` keys, so a type registered upstream widens this
+ * automatically and a type REMOVED upstream reddens every exhaustive switch
+ * over it. That is only true because 0.6.1 fixed the mapping (header, note 1).
+ */
+export type ListingFeatureType = Schemas["FeatureDao"]["type"];
+
+/** The generated union itself, for a consumer that wants to narrow a row
+ * exhaustively by `type`. `featureFromDao` deliberately does not — it hands
+ * the whole row to `@stapel/attributes-react`, which switches on the same
+ * discriminant at runtime and is the one place that knows what each type's
+ * `value` means. */
+export type ListingFeatureDaoUnion = Schemas["FeatureDao"];
+
+/**
+ * One stored feature projection, as it actually arrives.
+ *
+ * The DAO is the value TOGETHER with the display configuration its type
+ * needs — `prefix`, `postfix`, `precision`, `trueLabel`, `maxSelected`, … all
+ * ride along beside `value`. That is why a card can render a badge without
+ * fetching the category schema: everything `formatFeatureValue` reads is in
+ * the row. `featureFromDao` (`model/features.ts`) is the one place that
+ * splits it back into the `(FeatureDef, FeatureValueDto)` pair
+ * `@stapel/attributes-react` formats.
+ *
+ * `slug` is declared REQUIRED here even though the schema omits it — see this
+ * file's header, note 2. A DAO without one is a stored row this build cannot
+ * key, and `featureFromDao` says so rather than inventing an index. The index
+ * signature is the other half of the same fact: the field is a `JSONField`,
+ * so what the row carries is what was stored, not what the union describes.
+ */
+export interface ListingFeatureDao {
+  readonly slug: string;
+  /** The VALUE type slug — the axis `@stapel/attributes-react` switches on.
+   * Typed from the generated union, optional because a malformed stored row
+   * can lack it and a JSONField will pass that through. */
+  readonly type?: ListingFeatureType;
+  readonly value?: unknown;
+  /** Display name or translation key; falls back to the slug. */
+  readonly name?: string | null;
+  readonly order?: number | null;
+  /** Part of the listing's title line. */
+  readonly title?: boolean | null;
+  /** Rendered as a badge on the card. */
+  readonly badge?: boolean | null;
+  readonly translate?: string | null;
+  /** The type's own config keys (`prefix`, `precision`, `unitType`, …). */
+  readonly [key: string]: unknown;
+}
+
+/** The `(definition, value)` pair `@stapel/attributes-react` formats. */
+export interface ListingFeatureView {
+  readonly feature: FeatureDef;
+  readonly value: FeatureValueDto | undefined;
+}
+
+/** Re-exported so a consumer types a feature config without also depending on
+ * `@stapel/attributes-react` directly. */
+export type { FeatureConfig, FeatureDef, FeatureValueDto };
+
+/** Query parameters of both keyset-paginated card lists. */
+export interface ListingPageParams {
+  /** Opaque cursor from a previous answer. */
+  readonly anchor?: string;
+  readonly direction?: "next" | "prev" | "center";
+  readonly limit?: number;
+}
+
+/**
+ * The currency a composer starts a new listing in.
+ *
+ * RUB by owner verdict F6 (storefront spec, the owner's
+ * fork verdicts of 2026-08-22), and a default rather than a constant: `currency` is
+ * a free `maxLength: 8` string on the wire (stapel-listings has no currency
+ * enum — the vocabulary lives in stapel-currencies), so a deployment that
+ * sells in something else passes its own through `createListingsRuntime`.
+ */
+export const DEFAULT_LISTING_CURRENCY = "RUB";

package/src/default/ErrorAlert.tsx

@@ -0,0 +1,46 @@
+/**
+ * The one error surface this pair's default skin renders, so the split copy
+ * core produces reaches a screen the same way everywhere (mirrors the
+ * docs/notifications/workspaces etalon).
+ *
+ * Core's `describeFlowError` splits a failure into the sentence a person
+ * reads and the technical detail a support agent quotes (owner report
+ * 2026-08-09: the status used to be spliced into the sentence, ending in a
+ * bare `" (500)"`). The split only helps if a skin renders both halves at
+ * their own weights: `message` at normal weight, `detail` muted and small.
+ *
+ * `undefined` in — including a `detail` core left `undefined` because there
+ * was nothing worth quoting — renders nothing rather than an empty line.
+ */
+import { Alert, Typography } from "antd";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
+import type { FlowErrorDisplay } from "@stapel/core";
+
+export function ErrorAlert(props: {
+  error: FlowErrorDisplay | undefined;
+  style?: CSSProperties | undefined;
+  testId?: string | undefined;
+  action?: ReactNode;
+}): ReactElement | null {
+  const { error } = props;
+  if (!error) return null;
+  return (
+    <Alert
+      type="error"
+      showIcon
+      {...(props.style ? { style: props.style } : {})}
+      {...(props.testId ? { "data-testid": props.testId } : {})}
+      {...(props.action ? { action: props.action } : {})}
+      message={error.message}
+      {...(error.detail
+        ? {
+            description: (
+              <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+                {error.detail}
+              </Typography.Text>
+            ),
+          }
+        : {})}
+    />
+  );
+}

package/src/default/FavoritesPane.tsx

@@ -0,0 +1,123 @@
+/**
+ * `<FavoritesPane>` — what the person saved.
+ *
+ * The simplest screen in the pair, and the one that shows the load-state
+ * discipline at its plainest: four arms, four different things on screen.
+ * "You have not saved anything yet" and "we could not load your favourites"
+ * are the pair a `data ?? []` would have merged, and merging them is exactly
+ * the substitution that cost the fleet an incident (spec §7.4).
+ */
+import type { ReactElement } from "react";
+import { Alert, Button, Empty, Flex, Space, Spin, Typography } from "antd";
+import { matchList, useDescribeFlowError, useT } from "@stapel/core";
+import { useFavorites } from "../headless/Favorites.js";
+import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
+import { ErrorAlert } from "./ErrorAlert.js";
+import { ListingCard } from "./ListingCard.js";
+import { ListingsSkinTheme } from "./theme.js";
+import type { ThemeModeProp } from "./types.js";
+
+export interface FavoritesPaneProps extends ThemeModeProp {
+  /** Where a card leads. The container owns routing. */
+  readonly hrefFor?: (id: number) => string;
+  readonly onOpen?: (id: number) => void;
+}
+
+export function FavoritesPane(props: FavoritesPaneProps): ReactElement {
+  const t = useT();
+  const describe = useDescribeFlowError();
+  const bag = useFavorites();
+
+  return (
+    <ListingsSkinTheme {...(props.mode !== undefined ? { mode: props.mode } : {})}>
+      <Flex vertical gap={16} data-testid="listings-favorites">
+        <Typography.Title level={3}>
+          {t(LISTINGS_I18N_KEYS.favoritesTitle)}
+        </Typography.Title>
+
+        {!bag.gate.available ? (
+          <Alert
+            type="info"
+            showIcon
+            data-testid="listings-favorites-blocked"
+            message={t(bag.gate.block.code, bag.gate.block.params)}
+          />
+        ) : null}
+
+        {matchList(bag.rows, {
+          loading: () => (
+            <Flex justify="center" data-testid="listings-favorites-loading">
+              <Spin aria-label={t(LISTINGS_I18N_KEYS.favoritesLoading)} />
+            </Flex>
+          ),
+          failed: () => (
+            <ErrorAlert
+              testId="listings-favorites-error"
+              error={describe({
+                code: LISTINGS_I18N_KEYS.favoritesLoadFailed,
+                params: {},
+                status: 0,
+                message: undefined,
+                language: undefined,
+              })}
+              action={
+                <Button
+                  size="small"
+                  data-analytics="none"
+                  data-analytics-reason="retrying a read the person already asked for; not a business action"
+                  onClick={bag.refetch}
+                >
+                  {t(LISTINGS_I18N_KEYS.mineRetry)}
+                </Button>
+              }
+            />
+          ),
+          empty: () => (
+            <Empty
+              data-testid="listings-favorites-empty"
+              description={t(LISTINGS_I18N_KEYS.favoritesEmpty)}
+            />
+          ),
+          ready: (rows) => (
+            <Flex wrap gap={16} data-testid="listings-favorites-grid">
+              {rows.map((row) => (
+                <div key={row.id} style={{ width: 240 }}>
+                  <ListingCard
+                    listing={row}
+                    {...(props.hrefFor !== undefined
+                      ? { href: props.hrefFor(row.id) }
+                      : {})}
+                    {...(props.onOpen !== undefined ? { onOpen: props.onOpen } : {})}
+                  />
+                </div>
+              ))}
+            </Flex>
+          ),
+        })}
+
+        <Space>
+          <Button
+            size="small"
+            disabled={!bag.prevPage.available}
+            data-testid="listings-favorites-prev"
+            data-analytics="none"
+            data-analytics-reason="paging a list the person is already reading; not a business action"
+            onClick={bag.goPrev}
+          >
+            {t(LISTINGS_I18N_KEYS.pagePrev)}
+          </Button>
+          <Button
+            size="small"
+            disabled={!bag.nextPage.available}
+            data-testid="listings-favorites-next"
+            data-analytics="none"
+            data-analytics-reason="paging a list the person is already reading; not a business action"
+            onClick={bag.goNext}
+          >
+            {t(LISTINGS_I18N_KEYS.pageNext)}
+          </Button>
+        </Space>
+      </Flex>
+    </ListingsSkinTheme>
+  );
+}