@faststore/core 4.7.0-dev.3 → 4.7.0-dev.5

package/src/components/sections/RecommendationShelf/README.md

@@ -4,7 +4,7 @@ CMS section that renders a carousel of personalized product recommendations from
 
 - **Data source:** VTEX Recommendations BFF, exposed by `@faststore/api` through the `recommendations` GraphQL query.
 - **Registration:** global CMS component (`$componentKey: "RecommendationShelf"`), available on any page via CMS.
-- **Opt-in via CMS:** enable Recommendations with the **Enable recommendations?** toggle on the shelf (default `false`). No store code changes or feature flags are required.
+- **Session opt-in:** personalization session starts via the `experimental.enableRecommendations` discovery feature flag (Layout, every page). When the flag is off, any mounted Recommendation Shelf starts the session as a fallback if `userId` is missing.
 
 ## Contents
 
@@ -22,7 +22,7 @@ CMS section that renders a carousel of personalized product recommendations from
 
 The shelf renders products only when the following conditions are met:
 
-1. **Enable recommendations on the shelf.** Set **Enable recommendations?** to `true` on the Recommendation Shelf in the CMS. This opts the store into the personalization session (`startRecommendationSession` mutation, owned by Layout) and allows the shelf to fetch recommendations. Without it (default `false`), no session is started and the shelf does not fetch.
+1. **Personalization session.** Prefer enabling `experimental.enableRecommendations` in `discovery.config` so `Layout` starts the session on every page. If the flag is off, any mounted Recommendation Shelf starts the session as a fallback when `userId` is missing (cookie + in-memory lock still limit this to one attempt per browser session).
 
 2. **Active VTEX Recommendations campaign.** Provide a valid campaign **VRN**. Example: `vrn:recommendations:my-account:rec-persona-v2:abc123`.
 
@@ -32,7 +32,19 @@ The shelf renders products only when the following conditions are met:
 
 ## Setup
 
-### 1. Obtain the campaign VRN
+### 1. Opt into the personalization session (recommended)
+
+In the store's `discovery.config.js` (or local override), set:
+
+```js
+experimental: {
+  enableRecommendations: true,
+}
+```
+
+Default is `false`. With the flag on, `Layout` calls `startRecommendationSession` on every page without inspecting CMS data. With the flag off, placing a Recommendation Shelf on a page still starts the session when `userId` is missing.
+
+### 2. Obtain the campaign VRN
 
 In the VTEX Recommendations admin, create or select a campaign and copy its **VRN**. The expected format is:
 
@@ -42,9 +54,9 @@ vrn:recommendations:<account>:<campaign-type>:<campaign-id>
 
 Supported `<campaign-type>` values are listed under [Campaign types (VRN) and context](#campaign-types-vrn-and-context).
 
-### 2. Add Recommendation Shelf via CMS
+### 3. Add Recommendation Shelf via CMS
 
-Add **Recommendation Shelf** to the target page (home, PDP, PLP, cart, and so on), configure at least **Campaign VRN** (required), and turn **Enable recommendations?** on.
+Add **Recommendation Shelf** to the target page (home, PDP, PLP, cart, and so on) and configure at least **Campaign VRN** (required).
 
 ## CMS configuration
 
@@ -52,7 +64,6 @@ Schema: `cms/faststore/components/cms_component__recommendationshelf.jsonc`.
 
 | CMS property | Key | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- | --- |
-| Enable recommendations? | `enableRecommendations` | boolean | No | `false` | Opt-in that starts the personalization session (via Layout) and allows this shelf to fetch recommendations. |
 | Title | `title` | string | No | — | Overrides the shelf title. Falls back to the campaign title. If both are empty, the heading is not rendered. |
 | Campaign VRN | `campaignVrn` | string | **Yes** | — | Recommendation campaign VRN. Validated by regex (see campaign types below). |
 | Items context | `itemsContext` | `PDP` \| `CART` | No | `PDP` | Source of products used as request context. Applies only to context-based campaigns. |
@@ -92,9 +103,9 @@ Context-based campaigns (cross-sell, similar items, visual similarity, next inte
 
 All recommendation work runs client-side after hydration:
 
-1. **Session start (CMS opt-in)** — `Layout` calls `useStartRecommendationSession(pageProps)` once. The hook checks whether any `RecommendationShelf` in the CMS data has `enableRecommendations: true` and no-ops when none do. Multiple enabled shelves on the same page still start the session only once (in-memory lock + session cookie).
+1. **Session start (feature flag + shelf fallback)** — `Layout` calls `useStartRecommendationSession()` once. The hook starts the session when `experimental.enableRecommendations` is `true` (no CMS lookup). When the flag is `false`, `useRecommendationShelf()` (used by every RecommendationShelf) calls the same hook as a fallback while `userId` is missing (`undefined` or `null`), in parallel with cookie retry. Cookie (`vtex-rec-user-start-session`) + in-memory lock ensure at most one attempt per browser session. If `userId` is already available, the shelf does not start the session.
 2. **User id resolution** — `useRecommendationUserId()` reads the `vtex-rec-user-id` cookie, retrying until a value is available or the retry budget is exhausted.
-3. **Request arguments** — when enabled, `getRecommendationArguments()` builds `{ userId, campaignVrn, products }` or returns `null` when the VRN is invalid, the user id is missing, or a context-based campaign has no context products. When disabled, arguments stay `null`.
+3. **Request arguments** — `getRecommendationArguments()` builds `{ userId, campaignVrn, products }` or returns `null` when the VRN is invalid, the user id is missing, or a context-based campaign has no context products.
 4. **Fetch** — `useRecommendations()` runs `ClientRecommendationsQuery` and returns `products`, `correlationId`, and `campaign`.
 5. **Render** — shows `ProductShelfSkeleton` while loading; returns `null` on error or empty results; otherwise renders the carousel and optional heading.
 6. **Tracking** — when correlation and campaign identifiers are present, the shelf emits `data-af-*` attributes for Activity Flow. PDP product views use `product:*` meta tags from `pages/[slug]/p.tsx`.
@@ -107,6 +118,7 @@ Related files:
 - Shelf: `src/components/sections/RecommendationShelf/`
 - Hook: `src/sdk/analytics/hooks/useStartRecommendationSession.ts`
 - Layout: `src/Layout.tsx`
+- Flag: `discovery.config.default.js` → `experimental.enableRecommendations`
 
 ## Code-level overrides
 
@@ -116,7 +128,6 @@ In addition to CMS props, the component accepts code-level overrides (not expose
 import { RecommendationShelf } from 'src/components/sections/RecommendationShelf'
 
 <RecommendationShelf
-  enableRecommendations
   campaignVrn="vrn:recommendations:my-account:rec-cross-v2:abc123"
   itemsContext="PDP"
   ProductCard={MyCustomCard}
@@ -143,7 +154,7 @@ As a global component, the shelf can be placed on any CMS page. Suggested placem
 - **Cart:** cross-sell with `itemsContext: CART`.
 - **PLP:** context-agnostic campaigns.
 
-The personalization session runs only when at least one shelf has **Enable recommendations?** turned on.
+Prefer enabling `experimental.enableRecommendations` so the session is ready on every page. Stores without the flag and without a Recommendation Shelf never call `startRecommendationSession`.
 
 ## Privacy and cache
 
@@ -155,11 +166,10 @@ The personalization session runs only when at least one shelf has **Enable recom
 
 **The shelf does not render.** Check, in order:
 
-1. Is **Enable recommendations?** set to `true` on the shelf?
-2. Is `campaignVrn` valid and is the campaign active?
-3. Is the `vtex-rec-user-id` cookie available? Without a user id, the shelf does not fetch.
-4. For context-based campaigns, is product context available (`PDP` on a product page, or a non-empty cart for `CART`)?
-5. Did the campaign return products? An empty response renders nothing by design.
+1. Is `campaignVrn` valid and is the campaign active?
+2. Is the `vtex-rec-user-id` cookie available? Without a user id, the shelf does not fetch. With the discovery flag off, confirm the shelf fallback started the session (`vtex-rec-user-start-session`).
+3. For context-based campaigns, is product context available (`PDP` on a product page, or a non-empty cart for `CART`)?
+4. Did the campaign return products? An empty response renders nothing by design.
 
 **Skeleton never resolves.** Inspect the console and the GraphQL `recommendations` response for pending or failing requests.
 

package/src/components/sections/RecommendationShelf/RecommendationShelf.tsx

@@ -21,7 +21,6 @@ export function RecommendationShelf<
 >({
   title,
   campaignVrn,
-  enableRecommendations = false,
   itemsContext = 'PDP',
   ProductCard,
   mapProductToProductCard,
@@ -56,7 +55,6 @@ export function RecommendationShelf<
   const { items, isLoading, error, campaign, correlationId } =
     useRecommendationShelf({
       campaignVrn,
-      enableRecommendations,
       itemsContext,
     })
 

package/src/components/sections/RecommendationShelf/RecommendationShelf.types.ts

@@ -25,13 +25,6 @@ export type RecommendationShelfProps<
 > = {
   readonly title?: string
   readonly campaignVrn: string
-  /**
-   * Opt-in for VTEX Recommendations on this shelf. When `true`, Layout starts
-   * the personalization session (`useStartRecommendationSession`) and this
-   * shelf fetches recommendations. When `false` (default), neither happens.
-   * @default false
-   */
-  readonly enableRecommendations?: boolean
   /**
    * Where to read the products used as context for the recommendation request:
    * - `'PDP'`: the current product detail page product.

package/src/pages/pvt/account/403.tsx

@@ -66,6 +66,7 @@ function Page({
         <NextSeo noindex nofollow />
 
         <RenderSectionsBase
+          skipLazyLoading
           sections={pageSections}
           components={ACCOUNT_COMPONENTS}
         />

package/src/pages/pvt/account/404.tsx

@@ -57,7 +57,11 @@ function Page({
 
         <Layout accountName={accountName}>
           {sections && sections.length > 0 && (
-            <RenderSectionsBase sections={sections} components={COMPONENTS} />
+            <RenderSectionsBase
+              skipLazyLoading
+              sections={sections}
+              components={COMPONENTS}
+            />
           )}
         </Layout>
       </RenderSections>

package/src/pages/pvt/account/cards/index.tsx

@@ -94,6 +94,7 @@ export default function ListCardsPage({
           navigationLabels={navigationLabels}
         >
           <RenderSectionsBase
+            skipLazyLoading
             sections={pageSections}
             components={ACCOUNT_COMPONENTS}
           />

package/src/pages/pvt/account/orders/[id].tsx

@@ -76,6 +76,7 @@ export default function OrderDetailsPage({
           <OrderDetailsPageShell>
             <main data-fs-order-details-content>
               <RenderSectionsBase
+                skipLazyLoading
                 sections={pageSections}
                 components={ACCOUNT_COMPONENTS}
               />
@@ -408,7 +409,10 @@ const getServerSidePropsBase: GetServerSideProps<
       navigationLabels: navigationData as AccountNavigationLabels,
       accountPageData: {
         order: orderDetails.data.userOrder,
-        orderStatusLabels,
+        // Yields undefined when no section carries order-status labels — the
+        // case for a store with no CMS content, since the default sections are
+        // created with empty data. getServerSideProps cannot serialize it.
+        ...(orderStatusLabels ? { orderStatusLabels } : {}),
       },
       pageSections,
       isRepresentative,

package/src/pages/pvt/account/orders/index.tsx

@@ -75,6 +75,7 @@ export default function ListOrdersPage({
         >
           <BeforeSection />
           <RenderSectionsBase
+            skipLazyLoading
             sections={pageSections}
             components={ACCOUNT_COMPONENTS}
           />

package/src/pages/pvt/account/profile.tsx

@@ -74,6 +74,7 @@ export default function Profile({
         >
           <BeforeSection />
           <RenderSectionsBase
+            skipLazyLoading
             sections={pageSections}
             components={ACCOUNT_COMPONENTS}
           />

package/src/pages/pvt/account/security.tsx

@@ -74,6 +74,7 @@ export default function Page({
         >
           <BeforeSection />
           <RenderSectionsBase
+            skipLazyLoading
             sections={pageSections}
             components={ACCOUNT_COMPONENTS}
           />

package/src/pages/pvt/account/user-details.tsx

@@ -73,6 +73,7 @@ export default function Page({
         >
           <BeforeSection />
           <RenderSectionsBase
+            skipLazyLoading
             sections={pageSections}
             components={ACCOUNT_COMPONENTS}
           />

package/src/sdk/analytics/hooks/useStartRecommendationSession.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 
 import { gql } from '@faststore/core/api'
 
-import { hasEnabledRecommendationShelf } from 'src/sdk/analytics/utils/hasEnabledRecommendationShelf'
+import storeConfig from 'discovery.config'
 import { useLazyQuery } from 'src/sdk/graphql/useLazyQuery'
 import { getCookie } from 'src/utils/getCookie'
 import { retry } from 'src/utils/retry'
@@ -20,9 +20,9 @@ const startRecommendationSessionMutation = gql(`
 type StartRecommendationSessionData = { startRecommendationSession: boolean }
 type StartRecommendationSessionVariables = Record<string, never>
 
-// In-memory lock so Layout re-renders (e.g. multiple RecommendationShelves
-// fetching) cannot start more than one session before the cookie lands.
-// Survives effect cleanup / Strict Mode remounts for this JS realm.
+// In-memory lock so Layout re-renders / shelf fallback cannot start more than
+// one session before the cookie lands. Survives effect cleanup / Strict Mode
+// remounts for this JS realm.
 let hasRequestedStartRecommendationSession = false
 
 /** @internal Test-only: clears the in-memory session-start lock. */
@@ -34,14 +34,14 @@ export function resetStartRecommendationSessionLock() {
  * Starts the anonymous recommendation/personalization session once per browser
  * session.
  *
- * Mounted from `Layout` with the current page props. Opt-in is controlled by
- * the CMS boolean prop `enableRecommendations` on `RecommendationShelf`
- * (default `false`): if no shelf on the page has it enabled, this hook is a
- * no-op and the store never hits the Recommendations API.
+ * Mounted from `Layout` (gated by `experimental.enableRecommendations`) so it
+ * runs on every page when the store opts in via discovery config. Also used as
+ * a fallback from `RecommendationShelf` when the flag is off and `userId` is
+ * missing (including while lookup is still pending) — pass `enabled` to
+ * override the feature flag for that call site.
  *
- * Multiple enabled shelves on the same page still produce a single call: the
- * hook runs once from Layout and is gated by an in-memory lock plus the
- * session cookie.
+ * Multiple callers still produce a single mutation: the in-memory lock plus the
+ * session cookie ensure at most one attempt per browser session.
  *
  * The product view is no longer reported through a mutation here: the PDP now
  * exposes the product data as `<meta property="product:*">` tags, which the
@@ -49,9 +49,14 @@ export function resetStartRecommendationSessionLock() {
  *
  * All work runs client-side in effects (after hydration), so it doesn't affect
  * SSR/TTFB or Lighthouse render metrics.
+ *
+ * @param enabled Optional override. When omitted, uses
+ *   `storeConfig.experimental.enableRecommendations`. When provided (e.g. by
+ *   RecommendationShelf fallback), that boolean wins.
  */
-export function useStartRecommendationSession(pageProps?: unknown) {
-  const enableRecommendations = hasEnabledRecommendationShelf(pageProps)
+export function useStartRecommendationSession(enabled?: boolean) {
+  const flagEnabled = storeConfig.experimental?.enableRecommendations === true
+  const enableRecommendations = enabled ?? flagEnabled
 
   const [runStartRecommendationSession] = useLazyQuery<
     StartRecommendationSessionData,

package/src/sdk/recommendations/useRecommendationShelf.ts

@@ -1,6 +1,7 @@
 import { usePDP } from '@faststore/core'
 import { useMemo } from 'react'
 
+import { useStartRecommendationSession } from 'src/sdk/analytics/hooks/useStartRecommendationSession'
 import { useCart } from 'src/sdk/cart'
 
 import type { ItemContext } from './types'
@@ -50,12 +51,6 @@ export function getRecommendationArguments(
 
 export type UseRecommendationShelfArgs = {
   readonly campaignVrn: string
-  /**
-   * Opt-in for VTEX Recommendations. When `false` (default) the campaign is
-   * never requested. The anonymous user id is still resolved, but it goes
-   * unused and never leaves the browser.
-   */
-  readonly enableRecommendations?: boolean
   /**
    * Where to read the products used as context for the recommendation request.
    * @default 'PDP'
@@ -79,14 +74,25 @@ const EMPTY_ITEMS: RecommendationResponse['products'] = []
  * campaign. It renders nothing — presentation lives in the shelf components
  * that consume it, so a new surface can reuse the campaign rules instead of
  * reimplementing them.
+ *
+ * When `userId` is missing (`undefined` or `null`), starts the personalization
+ * session as a fallback in parallel with cookie retry (Layout already starts
+ * it when `experimental.enableRecommendations` is on). Cookie + in-memory lock
+ * keep the mutation to one attempt per browser session.
  */
 export function useRecommendationShelf({
   campaignVrn,
-  enableRecommendations = false,
   itemsContext = 'PDP',
 }: UseRecommendationShelfArgs): UseRecommendationShelfResult {
   const userId = useRecommendationUserId(campaignVrn)
 
+  // Fallback when Layout did not start the session (flag off): start in
+  // parallel with cookie lookup. `undefined` and `null` both mean no id yet;
+  // waiting for `null` exhausts the retry budget before the mutation can set
+  // `vtex-rec-user-id`, so the first page would never fetch. Cookie + lock
+  // already no-op when a session exists.
+  useStartRecommendationSession(!userId)
+
   const { data: productDetailPage } = usePDP()
   const { items: cartItems } = useCart()
 
@@ -108,14 +114,10 @@ export function useRecommendationShelf({
     return pdpProduct ? [pdpProduct] : []
   }, [itemsContext, cartItems, productDetailPage])
 
-  // Gate the whole feature behind the CMS opt-in: when Recommendations is
-  // disabled the shelf never requests recommendations (nor renders).
-  const recommendationArgs = enableRecommendations
-    ? getRecommendationArguments(campaignVrn, {
-        userId,
-        contextProducts,
-      })
-    : null
+  const recommendationArgs = getRecommendationArguments(campaignVrn, {
+    userId,
+    contextProducts,
+  })
 
   const { data, isLoading, error } = useRecommendations(recommendationArgs)
 

package/src/server/cms/myAccountDefaultSections.ts

@@ -20,16 +20,21 @@ const DEFAULT_SECTION_KEYS: Record<NativeMyAccountContentType, string[]> = {
   myAccountProfile: ['AccountNavigation', 'AccountProfile'],
   myAccountOrders: ['AccountNavigation', 'AccountOrdersList'],
   myAccountCards: ['AccountNavigation', 'AccountListCards'],
+  // Mirrors the render order of the `@deprecated OrderDetails.tsx` component,
+  // which is the design reference available in the repo. The delivery option
+  // accordions render inside AccountOrderDelivery, so they sit right after the
+  // compact delivery card instead of after the summary. Known deviation: fixing
+  // it would mean splitting AccountOrderDelivery into two CMS sections.
   myAccountOrderDetails: [
     'AccountNavigation',
     'AccountOrderDetails',
+    'AccountOrderOrderedBy',
+    'AccountOrderDelivery',
     'AccountOrderStatus',
     'AccountOrderPayment',
-    'AccountOrderDelivery',
     'AccountOrderSummary',
-    'AccountOrderOrderedBy',
-    'AccountOrderBudgets',
     'AccountOrderMoreInfo',
+    'AccountOrderBudgets',
   ],
   myAccountUserDetails: ['AccountNavigation', 'AccountUserDetails'],
   myAccountSecurity: ['AccountNavigation', 'AccountSecurity'],

package/test/components/RecommendationShelf/RecommendationShelf.browser.test.tsx

@@ -41,6 +41,10 @@ vi.mock('src/sdk/recommendations/useRecommendationUserId', () => ({
   useRecommendationUserId,
 }))
 
+vi.mock('src/sdk/analytics/hooks/useStartRecommendationSession', () => ({
+  useStartRecommendationSession: vi.fn(),
+}))
+
 import { RecommendationShelf } from 'src/components/sections/RecommendationShelf/RecommendationShelf'
 
 const CAMPAIGN_VRN = 'vrn:recommendations:acc:rec-top-items-v2:campaign-1'
@@ -71,7 +75,7 @@ afterEach(() => {
 })
 
 describe('RecommendationShelf', () => {
-  it('renders a product card per recommended product when enabled', async () => {
+  it('renders a product card per recommended product', async () => {
     useRecommendations.mockReturnValue({
       data: recommendationData,
       isLoading: false,
@@ -79,7 +83,7 @@ describe('RecommendationShelf', () => {
     })
 
     const { getAllByTestId, getByText } = render(
-      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} enableRecommendations />
+      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} />
     )
 
     await waitFor(() => {
@@ -98,9 +102,7 @@ describe('RecommendationShelf', () => {
       error: null,
     })
 
-    render(
-      <RecommendationShelf campaignVrn={CROSS_SELL_VRN} enableRecommendations />
-    )
+    render(<RecommendationShelf campaignVrn={CROSS_SELL_VRN} />)
 
     await waitFor(() => {
       const lastArgs = useRecommendations.mock.calls.at(-1)?.[0]
@@ -120,11 +122,7 @@ describe('RecommendationShelf', () => {
     })
 
     const { getByText } = render(
-      <RecommendationShelf
-        campaignVrn={CAMPAIGN_VRN}
-        enableRecommendations
-        title="Custom title"
-      />
+      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} title="Custom title" />
     )
 
     await waitFor(() => {
@@ -140,25 +138,6 @@ describe('RecommendationShelf', () => {
       error: null,
     })
 
-    const { container, queryByTestId } = render(
-      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} enableRecommendations />
-    )
-
-    await waitFor(() => {
-      const lastArgs = useRecommendations.mock.calls.at(-1)?.[0]
-      expect(lastArgs).toBeNull()
-    })
-    expect(queryByTestId('product-card')).toBeNull()
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it('skips the fetch when recommendations are disabled (default)', async () => {
-    useRecommendations.mockReturnValue({
-      data: undefined,
-      isLoading: false,
-      error: null,
-    })
-
     const { container, queryByTestId } = render(
       <RecommendationShelf campaignVrn={CAMPAIGN_VRN} />
     )
@@ -179,7 +158,7 @@ describe('RecommendationShelf', () => {
     })
 
     const { container } = render(
-      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} enableRecommendations />
+      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} />
     )
 
     expect(container).toBeEmptyDOMElement()
@@ -193,7 +172,7 @@ describe('RecommendationShelf', () => {
     })
 
     const { container, queryByTestId } = render(
-      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} enableRecommendations />
+      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} />
     )
 
     expect(queryByTestId('product-card')).toBeNull()
@@ -208,7 +187,7 @@ describe('RecommendationShelf', () => {
     })
 
     const { getByTestId } = render(
-      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} enableRecommendations />
+      <RecommendationShelf campaignVrn={CAMPAIGN_VRN} />
     )
 
     expect(getByTestId('skeleton').getAttribute('data-loading')).toBe('true')

package/test/components/cms/RenderSections.browser.test.tsx

@@ -0,0 +1,135 @@
+import { UIProvider } from '@faststore/ui'
+import { render, screen } from '@testing-library/react'
+import { renderToString } from 'react-dom/server'
+import { beforeAll, describe, expect, it } from 'vitest'
+
+import { RenderSectionsBase } from 'src/components/cms/RenderSections'
+import { getDefaultMyAccountSections } from 'src/server/cms/myAccountDefaultSections'
+
+/**
+ * First-paint behavior of the My Account pages.
+ *
+ * Sections rendered through `RenderSectionsBase` go through `ViewportObserver`,
+ * which emits an 823px-tall placeholder instead of the section content until the
+ * element intersects the viewport. That is correct for the public storefront and
+ * wrong for My Account, which is authenticated, SSR and above the fold.
+ *
+ * `skipLazyLoading` opts a whole render pass out of it.
+ */
+
+/** Never-firing observer — reproduces the pre-intersection (first paint) state. */
+class NeverIntersectingObserver implements IntersectionObserver {
+  readonly root = null
+  readonly rootMargin = ''
+  readonly thresholds = [] as unknown as ReadonlyArray<number>
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() {
+    return []
+  }
+}
+
+beforeAll(() => {
+  window.IntersectionObserver =
+    NeverIntersectingObserver as unknown as typeof IntersectionObserver
+})
+
+const orderDetailsSections = getDefaultMyAccountSections(
+  'myAccountOrderDetails'
+).filter((section) => section.$componentKey !== 'AccountNavigation')
+
+const markerComponents = Object.fromEntries(
+  orderDetailsSections.map((section) => [
+    section.$componentKey,
+    () => <div>{section.$componentKey}</div>,
+  ])
+)
+
+describe('skipLazyLoading', () => {
+  it('renders section content immediately instead of a placeholder', () => {
+    const { container } = render(
+      <UIProvider>
+        <RenderSectionsBase
+          skipLazyLoading
+          sections={[{ name: 'AccountOrderStatus', data: {} }]}
+          components={{ AccountOrderStatus: () => <div>status</div> }}
+        />
+      </UIProvider>
+    )
+
+    expect(screen.getByText('status')).toBeTruthy()
+    expect(container.querySelector('[data-store-section-name]')).toBeNull()
+  })
+
+  it('renders every default order-details section on first paint', () => {
+    const { container } = render(
+      <UIProvider>
+        <RenderSectionsBase
+          skipLazyLoading
+          sections={orderDetailsSections}
+          components={markerComponents}
+        />
+      </UIProvider>
+    )
+
+    for (const section of orderDetailsSections) {
+      expect(screen.getByText(section.$componentKey)).toBeTruthy()
+    }
+
+    expect(
+      container.querySelectorAll('[data-store-section-name]')
+    ).toHaveLength(0)
+  })
+
+  it('covers store-authored sections, not only the framework defaults', () => {
+    render(
+      <UIProvider>
+        <RenderSectionsBase
+          skipLazyLoading
+          sections={[{ name: 'StoreCustomAccountSection', data: {} }]}
+          components={{
+            StoreCustomAccountSection: () => <div>custom</div>,
+          }}
+        />
+      </UIProvider>
+    )
+
+    expect(screen.getByText('custom')).toBeTruthy()
+  })
+
+  it('puts the section content in the SSR HTML, not the placeholder', () => {
+    const html = renderToString(
+      <UIProvider>
+        <RenderSectionsBase
+          skipLazyLoading
+          sections={orderDetailsSections}
+          components={markerComponents}
+        />
+      </UIProvider>
+    )
+
+    expect(html).toContain('AccountOrderStatus')
+    expect(html).not.toContain('data-store-section-name')
+    expect(html).not.toContain('823')
+  })
+
+  it('preserves lazy loading when the flag is absent', () => {
+    const { container } = render(
+      <UIProvider>
+        <RenderSectionsBase
+          sections={[{ name: 'AccountOrderStatus', data: {} }]}
+          components={{ AccountOrderStatus: () => <div>status</div> }}
+        />
+      </UIProvider>
+    )
+
+    expect(screen.queryByText('status')).toBeNull()
+
+    const placeholder = container.querySelector(
+      '[data-store-section-name="AccountOrderStatus"]'
+    ) as HTMLElement | null
+
+    expect(placeholder?.style.height).toBe('823px')
+  })
+})