@stapel/listings-react 0.3.1 → 0.7.0

package/src/api/generated/schema.ts

@@ -42,7 +42,9 @@ export interface paths {
          */
         get: operations["listings_api_v1_listings_retrieve"];
         /**
-         * @description Listings CRUD plus owner lifecycle actions and favorites.
+         * @description Write the draft fields — the write ``save-draft`` also performs.
+         *
+         *     Owner only: 404 for an absent listing, 403 for someone else's.
          *
          *     **Permissions:** `IsAuthenticatedOrReadOnly`
          */
@@ -274,6 +276,37 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/listings/api/v1/listings/my/listings/": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * @description The caller's OWN listings, in every status.
+         *
+         *     The counterpart of ``my/counters``: the same owner scope and the same
+         *     status grouping, but the rows behind the three numbers. ``list`` is
+         *     the shop window (``published()``, narrowable to nobody), so this is
+         *     the only route by which a person can be shown their own drafts.
+         *
+         *     Owner-scoped at the queryset via ``owned_by`` — a stranger's listing
+         *     cannot be reached from here at any status, and soft-deleted rows are
+         *     excluded by the default manager (a deleted listing is gone from the
+         *     owner's dashboard exactly as it is gone from everywhere else).
+         *
+         *     **Permissions:** `IsAuthenticated`
+         */
+        get: operations["listings_api_v1_listings_my_listings_list"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
 }
 export type webhooks = Record<string, never>;
 export interface components {
@@ -631,7 +664,7 @@ export interface components {
             images_draft?: string[];
             location_id_draft?: string;
             location_label_draft?: string;
-            geohash_draft?: string;
+            readonly geohash_draft: string;
             /** Format: decimal */
             lat_draft?: string | null;
             /** Format: decimal */
@@ -673,6 +706,58 @@ export interface components {
             archived: number;
             drafts: number;
         };
+        /**
+         * @description The owner's own card — the public card plus what only an owner sees.
+         *
+         *     Same family as :class:`ListingCardSerializer` (one shape for every grid a
+         *     product renders), extended along two axes and no further:
+         *
+         *     - **the moderation axis** (``moderation_status``): visibility is decided
+         *       by ``status`` alone, but since 0.5.0 a *published* listing can be under
+         *       re-review, and its owner is the one person who has to be told. A
+         *       dashboard cannot derive that sentence from ``status``.
+         *     - **the draft twins** (``title_draft`` / ``price_draft`` /
+         *       ``images_draft``): the published fields are empty on a listing that has
+         *       never been published, so a drafts tab built on the public card would
+         *       render a column of blank rows. This is the list half of the pair's
+         *       upstream ask #2 — the detail read is unchanged and still serializes the
+         *       published fields only.
+         *
+         *     Owner-scoped by construction: this serializer is used by exactly one
+         *     route, ``my/listings``, whose queryset is ``owned_by(request.user)``.
+         */
+        MyListingCard: {
+            readonly id: number;
+            title?: string;
+            /** Format: decimal */
+            price?: string;
+            /** Format: decimal */
+            price_base?: string | null;
+            currency?: string;
+            readonly images: string[] | null;
+            readonly features_title: components["schemas"]["FeatureDao"][];
+            readonly features_badges: components["schemas"]["FeatureDao"][];
+            location_label?: string;
+            geohash?: string;
+            /** Format: decimal */
+            lat?: string | null;
+            /** Format: decimal */
+            lon?: string | null;
+            countable?: boolean;
+            /** Format: int64 */
+            stock_quantity?: number | null;
+            status?: components["schemas"]["StatusD41Enum"];
+            readonly is_favorited: boolean | null;
+            moderation_status?: components["schemas"]["ModerationStatusEnum"];
+            title_draft?: string;
+            /** Format: decimal */
+            price_draft?: string | null;
+            readonly images_draft: string[] | null;
+            /** Format: date-time */
+            readonly created_at: string;
+            /** Format: date-time */
+            readonly updated_at: string;
+        };
         /** @enum {unknown} */
         NullEnum: null;
         PaginatedListingCardList: {
@@ -688,6 +773,19 @@ export interface components {
             /** @description Number of items in current page */
             count: number;
         };
+        PaginatedMyListingCardList: {
+            items: components["schemas"]["MyListingCard"][];
+            /** @description Anchor value for next page */
+            next_anchor?: string | null;
+            /** @description Anchor value for previous page */
+            prev_anchor?: string | null;
+            /** @description Whether there are more items after this page */
+            has_next: boolean;
+            /** @description Whether there are items before this page */
+            has_prev: boolean;
+            /** @description Number of items in current page */
+            count: number;
+        };
         /**
          * @description Create/update the draft twin fields.
          *
@@ -707,7 +805,7 @@ export interface components {
             images_draft?: string[];
             location_id_draft?: string;
             location_label_draft?: string;
-            geohash_draft?: string;
+            readonly geohash_draft?: string;
             /** Format: decimal */
             lat_draft?: string | null;
             /** Format: decimal */
@@ -1252,4 +1350,32 @@ export interface operations {
             };
         };
     };
+    listings_api_v1_listings_my_listings_list: {
+        parameters: {
+            query?: {
+                /** @description Anchor value to paginate from (exclusive) */
+                anchor?: string;
+                /** @description Pagination direction */
+                direction?: "next" | "prev" | "center";
+                /** @description Number of items (default 100, max 1000) */
+                limit?: number;
+                /** @description Lifecycle status to narrow to. Repeat the parameter or pass one comma-separated value for a set (`?status=draft,rejected`); omit it for every status. An unknown value is a 400, not an empty page. */
+                status?: ("archived" | "blocked" | "draft" | "expired" | "paused" | "pending" | "published" | "rejected" | "sold")[];
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["PaginatedMyListingCardList"];
+                };
+            };
+        };
+    };
 }

package/src/api/listingsApi.ts

@@ -9,7 +9,9 @@ import type {
   ListingPageParams,
   ListingStatusInfo,
   MyCounters,
+  MyListingsParams,
   PaginatedListingCards,
+  PaginatedMyListingCards,
   PublishResponse,
 } from "./types.js";
 import type { ValidationBatchResult } from "@stapel/attributes-react";
@@ -22,21 +24,16 @@ import type { ValidationBatchResult } from "@stapel/attributes-react";
  *
  * ── 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).
+ * `PUT /{pk}/` and `PATCH /{pk}/` are absent. That began as a safety decision:
+ * until stapel-listings 0.6.2 both were the plain `ModelViewSet`
+ * implementations under `IsAuthenticatedOrReadOnly` over
+ * `Listing.objects.all()`, so any authenticated caller could write any
+ * listing's draft fields through them — this pair filed the ask and declined
+ * to be the client that exercised the hole. 0.6.2 put `views._get_own` in
+ * front of both, so the hole is closed and the absence is now a plain scope
+ * decision: `POST /{pk}/save-draft/` performs the SAME write (the same
+ * `ListingDraftSerializer`, `partial=True`) and one write path is enough.
+ * Both stay in the generated schema and therefore in `manifest.json`.
  *
  * 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
@@ -70,12 +67,12 @@ export interface ListingsApi {
   /**
    * 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).
+   * Since 0.6.2 the queryset is `visible_to(user)` — the indexed statuses for
+   * everyone plus one's OWN rows in any status — so a stranger's draft 404s
+   * from the same code path an absent id does. The `publiclyVisible` report
+   * `useListing` derives from `status` (`model/status.ts`) stays, and is now
+   * addressed at the one reader who still reaches an unpublished listing
+   * here: its owner, who needs to be told it is not on the shelf.
    */
   retrieve(
     id: number,
@@ -100,6 +97,26 @@ export interface ListingsApi {
    * PENDING in with PUBLISHED, `drafts` folds REJECTED in with DRAFT. */
   myCounters(options?: { readonly signal?: AbortSignal }): Promise<MyCounters>;
 
+  /**
+   * One keyset page of the caller's OWN listings, in every status.
+   *
+   * The route `list` is not and cannot be made into: `list` answers
+   * `published()` and takes no owner parameter, so before stapel-listings
+   * 0.7.0 a seller's own DRAFTS were unreachable by any call this contract
+   * offered — the gap `model/mineSource.ts` used to name on screen. Owner
+   * scope is a property of the ROUTE (`owned_by(request.user)`), not of a
+   * parameter a caller supplies, so there is no way to point it at anyone
+   * else.
+   *
+   * `params.status` narrows to a set of lifecycle statuses; omit it for all
+   * nine. Rows are {@link MyListingCard} — the public card plus
+   * `moderation_status` and the `*_draft` twins.
+   */
+  myListings(
+    params?: MyListingsParams,
+    options?: { readonly signal?: AbortSignal }
+  ): Promise<PaginatedMyListingCards>;
+
   /** One keyset page of the caller's favourites. */
   myFavorites(
     params?: ListingPageParams,
@@ -182,6 +199,22 @@ function pageQuery(
   };
 }
 
+/**
+ * The `?status=` half of a `my/listings` query.
+ *
+ * One comma-separated value rather than a repeated parameter: both spellings
+ * are accepted upstream, and this one survives every `query` serializer a
+ * host's `StapelClient` might carry without depending on how it encodes an
+ * array. An empty set sends nothing at all — the route's own "every status".
+ */
+function statusQuery(
+  statuses: readonly string[] | undefined
+): Record<string, string> {
+  return statuses !== undefined && statuses.length > 0
+    ? { status: statuses.join(",") }
+    : {};
+}
+
 function signal(
   options: { readonly signal?: AbortSignal } | undefined
 ): { signal?: AbortSignal } {
@@ -209,6 +242,12 @@ export function createListingsApi(client: StapelClient): ListingsApi {
     myCounters: (options) =>
       client.get(`${COLLECTION}my/counters/`, signal(options)),
 
+    myListings: (params, options) =>
+      client.get(`${COLLECTION}my/listings/`, {
+        query: { ...pageQuery(params), ...statusQuery(params?.status) },
+        ...signal(options),
+      }),
+
     myFavorites: (params, options) =>
       client.get(`${COLLECTION}my/favorites/`, {
         query: pageQuery(params),

package/src/api/types.ts

@@ -72,9 +72,34 @@ export type FavoriteToggleResponse = Schemas["FavoriteToggleResponse"];
 /** `DELETE /{pk}/` 200. */
 export type DeleteResponse = Schemas["DeleteResponse"];
 
-/** The keyset envelope both card lists come back in (`IDAnchorPagination`). */
+/** The keyset envelope both public card lists come back in
+ * (`IDAnchorPagination`). */
 export type PaginatedListingCards = Schemas["PaginatedListingCardList"];
 
+/**
+ * One row of `GET /listings/my/listings/` — the OWNER's card.
+ *
+ * A superset of {@link ListingCard}, and the two additions are the two things
+ * only an owner is owed (stapel-listings 0.7.0, `MyListingCardSerializer`):
+ *
+ *  - `moderation_status`, the second axis. `model/status.ts` argues at length
+ *    that a dashboard cannot derive "your edit is being screened" from
+ *    `status` — a re-published LIVE listing keeps `status: "published"` and
+ *    moves only this field. The public card omits it, so before 0.7.0 the
+ *    dashboard row passed `"approved"` as an honest stand-in and simply could
+ *    not show the row that most needed showing.
+ *  - the `*_draft` twins. `title`/`price`/`images` are the PUBLISHED fields
+ *    and are empty on a listing that has never been published, so a drafts
+ *    tab keyed off them is a column of blank rows. `myListingTitle` /
+ *    `myListingPrice` (`model/mine.ts`) are the one place the fallback lives.
+ */
+export type MyListingCard = Schemas["MyListingCard"];
+
+/** The keyset envelope `GET /listings/my/listings/` comes back in — the same
+ * `IDAnchorPagination` shape as {@link PaginatedListingCards}, over the owner
+ * row. */
+export type PaginatedMyListingCards = Schemas["PaginatedMyListingCardList"];
+
 /**
  * The nine lifecycle states, as `models.ListingStatus` declares them.
  *
@@ -173,7 +198,7 @@ export interface ListingFeatureView {
  * `@stapel/attributes-react` directly. */
 export type { FeatureConfig, FeatureDef, FeatureValueDto };
 
-/** Query parameters of both keyset-paginated card lists. */
+/** Query parameters of every keyset-paginated card list. */
 export interface ListingPageParams {
   /** Opaque cursor from a previous answer. */
   readonly anchor?: string;
@@ -181,6 +206,25 @@ export interface ListingPageParams {
   readonly limit?: number;
 }
 
+/**
+ * `GET /listings/my/listings/` — a page, plus the statuses to narrow to.
+ *
+ * `status` is a SET because a dashboard tab is one (`active` is
+ * `published` + `pending`, `drafts` is `draft` + `rejected` — the groupings
+ * are the server's, copied in `model/status.ts` so a tab's rows and its count
+ * cannot describe different sets). An empty or absent array means every
+ * status, which is what the route answers with no parameter at all.
+ *
+ * On the wire it goes as one comma-separated value; stapel-listings accepts
+ * that and the repeated-parameter spelling interchangeably
+ * (`views.parse_status_filter`). An unknown value is a `400`
+ * `error.400.listing_invalid_status_filter`, not an empty page — so a status
+ * this pair does not know about cannot silently look like "you have none".
+ */
+export interface MyListingsParams extends ListingPageParams {
+  readonly status?: readonly ListingLifecycleStatus[];
+}
+
 /**
  * The currency a composer starts a new listing in.
  *

package/src/default/FavoritesPane.tsx

@@ -6,19 +6,53 @@
  * "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).
+ *
+ * ── A visitor is told ONE thing ────────────────────────────────────────────
+ *
+ * `useFavorites` disables the query without a mandate, so a visitor's `rows`
+ * sit in `loading` forever — and the pane rendered the blocked notice AND the
+ * spinner underneath it, saying "you cannot see this" and "we are fetching it"
+ * at the same time, with no sign-in link anywhere on the screen. The gate is
+ * now the WHOLE body: one designed state, with the door the container supplies
+ * (`signIn`) inside it, and nothing else drawn.
+ *
+ * The pager obeys the same rule. `Previous`/`Next` were rendered disabled in
+ * every state including empty, failed and blocked — two controls that meant
+ * nothing, three times over. They render when there is a page to go to.
+ *
+ * And each one renders only when ITS page exists. The keyset gates name the
+ * missing page with the button's own label key, so a blocked `Previous` drew
+ * the word twice — once as a dead button, once as its own "reason". A pager
+ * does not explain itself: the page indicator says where you are, and a
+ * direction with nowhere to go is simply not drawn.
  */
-import type { ReactElement } from "react";
-import { Alert, Button, Empty, Flex, Space, Spin, Typography } from "antd";
-import { matchList, useDescribeFlowError, useT } from "@stapel/core";
-import type { LinkComponent } from "@stapel/core";
+import type { ReactElement, ReactNode } from "react";
+import { Button, Flex, Typography } from "antd";
+import {
+  EmptyState,
+  ErrorAlert,
+  SkinTheme,
+} from "@stapel/tokens-antd/skin";
+import { matchList, useT } from "@stapel/core";
+import type { LinkComponent, SignInCtaProp } from "@stapel/core";
+import { spacing } from "@stapel/tokens";
 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 type { ListingCardOpenProps } from "./ListingCard.js";
-import { ListingsSkinTheme } from "./theme.js";
+import { SignInLink } from "./SignInLink.js";
 import type { ThemeModeProp } from "./types.js";
 
+/** The narrowest a card may get before the grid drops a column — the same
+ * element-relative rule the detail gallery uses. It was `width: 240`, which
+ * left two cards floating in a 2560px pane and overflowed a 390px one. */
+export const FAVORITES_CARD_MIN = "15rem";
+
+/** How wide the saved grid may get before it stops being a grid and becomes
+ * three cards adrift in a 1280px window. A measure, not a breakpoint: the
+ * cards keep filling it, and past it the page centres. */
+export const FAVORITES_MEASURE = "72rem";
+
 /** How a card in this grid opens — the same one-contract union `<ListingCard>`
  * takes, one level up, so a pane cannot re-introduce the double navigation the
  * card no longer allows. */
@@ -41,7 +75,21 @@ export type FavoritesPaneOpenProps =
       readonly linkComponent?: undefined;
     };
 
-export type FavoritesPaneProps = ThemeModeProp & FavoritesPaneOpenProps;
+/** The way OUT of an empty favourites list. */
+export interface FavoritesBrowseCtaProp {
+  /**
+   * What a person with nothing saved can do next — a "Browse listings"
+   * button, supplied by the container because only it knows where the
+   * catalogue lives. An empty state without one is a dead end, and this
+   * screen was one of four sharing a single stock illustration and no exit.
+   */
+  readonly browseCta?: ReactNode;
+}
+
+export type FavoritesPaneProps = ThemeModeProp &
+  SignInCtaProp &
+  FavoritesBrowseCtaProp &
+  FavoritesPaneOpenProps;
 
 /** The card's own open props for one row. One arm, never two. */
 function cardOpenProps(
@@ -60,93 +108,119 @@ function cardOpenProps(
 
 export function FavoritesPane(props: FavoritesPaneProps): ReactElement {
   const t = useT();
-  const describe = useDescribeFlowError();
   const bag = useFavorites();
+  const paged = bag.prevPage.available || bag.nextPage.available;
 
   return (
-    <ListingsSkinTheme {...(props.mode !== undefined ? { mode: props.mode } : {})}>
-      <Flex vertical gap={16} data-testid="listings-favorites">
+    <SkinTheme
+      surface="base"
+      style={{ padding: spacing[4], maxWidth: FAVORITES_MEASURE }}
+      {...(props.mode !== undefined ? { mode: props.mode } : {})}
+    >
+      <Flex vertical gap={spacing[4]} 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)}
+          // The whole body, not a banner over a spinner. A blocked screen has
+          // one state and it carries its own way out.
+          <EmptyState
+            testId="listings-favorites-blocked"
+            title={t(bag.gate.block.code, bag.gate.block.params)}
+            hint={t(LISTINGS_I18N_KEYS.favoritesSignInHint)}
+            action={
+              <SignInLink cta={props.signIn} testId="listings-favorites-sign-in" />
+            }
           />
-        ) : 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}
+        ) : (
+          <>
+            {matchList(bag.rows, {
+              loading: () => (
+                <div
+                  role="status"
+                  aria-busy="true"
+                  aria-label={t(LISTINGS_I18N_KEYS.favoritesLoading)}
+                  data-testid="listings-favorites-loading"
+                  data-stapel-load-state="loading"
+                />
+              ),
+              failed: (error) => (
+                <ErrorAlert
+                  testId="listings-favorites-error"
+                  thrown={error}
+                  message={t(LISTINGS_I18N_KEYS.favoritesLoadFailed)}
+                  onRetry={bag.refetch}
+                  retryLabel={t(LISTINGS_I18N_KEYS.mineRetry)}
+                />
+              ),
+              empty: () => (
+                <EmptyState
+                  testId="listings-favorites-empty"
+                  title={t(LISTINGS_I18N_KEYS.favoritesEmpty)}
+                  hint={t(LISTINGS_I18N_KEYS.favoritesEmptyHint)}
+                  {...(props.browseCta !== undefined
+                    ? { action: props.browseCta }
+                    : {})}
+                />
+              ),
+              ready: (rows) => (
+                <div
+                  data-testid="listings-favorites-grid"
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns: `repeat(auto-fill, minmax(${FAVORITES_CARD_MIN}, 1fr))`,
+                    gap: spacing[4],
+                  }}
                 >
-                  {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} {...cardOpenProps(props, row.id)} />
+                  {rows.map((row) => (
+                    <ListingCard
+                      key={row.id}
+                      listing={row}
+                      blockedReason="line"
+                      {...(props.signIn !== undefined ? { signIn: props.signIn } : {})}
+                      {...cardOpenProps(props, row.id)}
+                    />
+                  ))}
                 </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>
+            {paged ? (
+              <Flex gap={spacing[3]} wrap align="center">
+                {bag.prevPage.available ? (
+                  <Button
+                    size="small"
+                    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>
+                ) : null}
+                <Typography.Text
+                  type="secondary"
+                  data-testid="listings-favorites-page"
+                >
+                  {t(LISTINGS_I18N_KEYS.pageIndicator, { page: bag.pageNumber })}
+                </Typography.Text>
+                {bag.nextPage.available ? (
+                  <Button
+                    size="small"
+                    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>
+                ) : null}
+              </Flex>
+            ) : null}
+          </>
+        )}
       </Flex>
-    </ListingsSkinTheme>
+    </SkinTheme>
   );
 }