@akinon/pz-theme 2.0.75-beta.0 → 2.0.75

package/src/blocks/basket-summary-block.tsx

@@ -54,18 +54,39 @@ interface BasketOfferLike {
   pk?: number;
   label?: string;
   voucher_code?: string | null;
-  amount?: string | null;
+  amount?: string | number | null;
   percentage?: string | number | null;
   start_datetime?: string;
   end_datetime?: string;
+  status?: { value?: string } | string | null;
 }
 
-/** Both shapes the offers service answers with, plus a bare array. */
+/** Whether an offer is live; entries without a status are taken as live. */
+const isActiveOffer = (offer: BasketOfferLike): boolean => {
+  const status =
+    typeof offer.status === 'string' ? offer.status : offer.status?.value;
+  return !status || status === 'active';
+};
+
+/**
+ * Every shape the offers service answers with: `{ discounts: [...] }`,
+ * `{ all_discounts: [...] }` (the newer payload, where `discounts` sits empty
+ * beside it and carries only the applied ones), the paginated `{ results }`,
+ * and a bare array. The first non-empty list wins; `all_discounts` is
+ * filtered to active entries because it also lists expired ones.
+ */
 const readOffers = (payload: unknown): BasketOfferLike[] => {
   if (Array.isArray(payload)) return payload as BasketOfferLike[];
   const record = (payload ?? {}) as Record<string, unknown>;
-  if (Array.isArray(record.discounts)) return record.discounts as BasketOfferLike[];
-  if (Array.isArray(record.results)) return record.results as BasketOfferLike[];
+  const lists = [record.discounts, record.all_discounts, record.results];
+  for (const list of lists) {
+    if (Array.isArray(list) && list.length > 0) {
+      const offers = list as BasketOfferLike[];
+      return list === record.all_discounts
+        ? offers.filter(isActiveOffer)
+        : offers;
+    }
+  }
   return [];
 };
 
@@ -82,6 +103,20 @@ const COUPON_PRESENTATIONS = ['inline', 'collapsible'];
 const DISCOUNT_ROWS = ['total', 'each'];
 const COUPON_PLACEMENTS = ['before-cta', 'after-cta'];
 
+/**
+ * The message commerce put on a rejected voucher ("Kupon kodu geçerli
+ * değildir."), so the shopper sees the real reason instead of the generic
+ * authored copy. The authored copy stays the fallback for network errors and
+ * payloads without one.
+ */
+const readCommerceError = (error: unknown): string => {
+  const data = (error as { data?: Record<string, unknown> })?.data;
+  if (!data) return '';
+  const raw = data.non_field_errors ?? data.detail ?? data.error;
+  if (Array.isArray(raw)) return raw.map(String).join(' ');
+  return typeof raw === 'string' ? raw : '';
+};
+
 const readOption = <T extends string>(
   value: unknown,
   breakpoint: string,
@@ -128,6 +163,7 @@ const ToggleArrow = ({ open }: { open: boolean }) => (
  * Parts: root, totals, row, row-label, row-value, total, total-label,
  * total-value, coupon, coupon-toggle, coupon-toggle-icon, coupon-form,
  * coupon-applied, coupon-code, coupon-remove, coupon-input, coupon-button,
+ * gift-card-applied, gift-card-code, gift-card-remove,
  * coupon-error, gift-card, gift-card-toggle, gift-card-toggle-icon,
  * gift-card-form, gift-card-fields, gift-card-input, gift-card-cvv,
  * gift-card-button, gift-card-error, cta, cta-note, empty. A child marked as
@@ -138,8 +174,11 @@ const ToggleArrow = ({ open }: { open: boolean }) => (
  * moves the voucher (and the gift card panel) below the checkout button.
  * `showGiftCard` adds a second collapsible panel with a card number and CVV.
  * Commerce exposes no basket-level gift card endpoint, so the panel redeems
- * through the voucher endpoint — the same call the brand storefronts make for
- * code-like balances — which is why its error copy is separate.
+ * through the voucher endpoint as "number<giftCardCvvSeparator>cvv" — which
+ * is why its error copy is separate. One voucher fits on a basket, so an
+ * applied promo code locks (disables) the gift card panel and an applied
+ * gift card locks the promo panel; the separator in the applied code is what
+ * tells the two apart.
  * `discountRows: 'each'` prints one discount row per basket campaign or
  * voucher (commerce `discounts[]`, labelled with the campaign description)
  * instead of the single summed row.
@@ -147,8 +186,8 @@ const ToggleArrow = ({ open }: { open: boolean }) => (
  * basket-offers service) as cards above the panels — validity date, label,
  * value and an apply control that submits the offer's voucher code; the card
  * whose code is on the basket is `selected` and its control removes it again.
- * Parts: offers, offer, offer-date, offer-body, offer-label, offer-value,
- * offer-apply, offer-apply-icon, offers-error.
+ * Parts: offers, offer, offer-content, offer-date, offer-body, offer-label,
+ * offer-value, offer-apply, offer-apply-icon, offers-error.
  *
  * Checkout target resolution, highest priority first:
  *   1. `checkoutHref` property — authoritative whenever the author sets it.
@@ -229,6 +268,16 @@ const BasketSummaryBlock = ({
     'giftCardError',
     'Gift card could not be applied.'
   );
+  const giftCardRemoveLabel = prop('giftCardRemoveLabel', 'Remove');
+  // The commerce voucher endpoint takes one code, so the gift card panel
+  // sends "number<separator>cvv". The separator is also how the applied
+  // voucher is told apart from a promo code: a code carrying it belongs to
+  // the gift card panel, one without it to the promo panel.
+  const giftCardCvvSeparator = prop('giftCardCvvSeparator', '|');
+  // With this set (e.g. "Kupon Kodu - {code}"), the itemised discount row
+  // that belongs to the applied voucher is printed under this name instead of
+  // the campaign description commerce sends.
+  const voucherDiscountLabel = prop('voucherDiscountLabel', '');
   const showOffers = boolProp('showOffers', false);
   const offerApplyLabel = prop('offerApplyLabel', 'Apply');
   const offerRemoveLabel = prop('offerRemoveLabel', 'Remove');
@@ -331,6 +380,20 @@ const BasketSummaryBlock = ({
   const withCount = (label: string) =>
     label.replace(/\{count\}/g, String(totals.count));
 
+  // One voucher fits on a basket, so an applied gift card locks the promo
+  // panel and vice versa. Which panel owns the applied code is read off the
+  // separator the gift card submit put into it.
+  const isGiftCardVoucher =
+    Boolean(totals.voucher) &&
+    Boolean(giftCardCvvSeparator) &&
+    totals.voucher.includes(giftCardCvvSeparator);
+  const couponLocked = isGiftCardVoucher;
+  const giftCardLocked = Boolean(totals.voucher) && !isGiftCardVoucher;
+  // What the applied gift card row prints: the number without its CVV.
+  const appliedGiftCardNumber = isGiftCardVoucher
+    ? totals.voucher.split(giftCardCvvSeparator)[0]
+    : '';
+
   // No page supplies a basket page context yet, so `checkoutUrl` is inert for
   // now; the read is kept because the basket page context is being wired.
   const checkoutHref =
@@ -372,11 +435,35 @@ const BasketSummaryBlock = ({
         )
       : [];
 
+  // The campaign names of the wallet offers whose code is the applied
+  // voucher: that is how the voucher's own row is recognised among the
+  // campaign rows, since commerce describes it by campaign name only.
+  const appliedOfferLabels = readOffers(offersData)
+    .filter(
+      (offer) =>
+        Boolean(totals.voucher) &&
+        String(offer.voucher_code ?? '').trim() === totals.voucher
+    )
+    .map((offer) => (offer.label || '').trim())
+    .filter(Boolean);
+
+  const discountRowLabel = (description: string): string => {
+    if (!voucherDiscountLabel || !totals.voucher || isGiftCardVoucher) {
+      return description;
+    }
+    const ownedByVoucher =
+      appliedOfferLabels.includes(description) ||
+      description.includes(totals.voucher);
+    return ownedByVoucher
+      ? voucherDiscountLabel.replace(/\{code\}/g, totals.voucher)
+      : description;
+  };
+
   if (showDiscount && itemisedDiscounts.length > 0) {
     itemisedDiscounts.forEach((entry, index) => {
       rows.push({
         key: `discount-${index}`,
-        label: entry.description?.trim() || discountLabel,
+        label: discountRowLabel(entry.description?.trim() || discountLabel),
         value: `${discountPrefix}${formatAmount(entry.discount)}`,
         type: 'discount'
       });
@@ -453,8 +540,8 @@ const BasketSummaryBlock = ({
 
       syncBasketCache(nextBasket);
       setCode('');
-    } catch {
-      setError(couponApplyError);
+    } catch (applyError) {
+      setError(readCommerceError(applyError) || couponApplyError);
     }
   };
 
@@ -486,8 +573,8 @@ const BasketSummaryBlock = ({
           : await applyVoucherCode({ voucher_code: voucher }).unwrap();
 
       syncBasketCache(nextBasket);
-    } catch {
-      setOffersError(offerApplyError);
+    } catch (applyError) {
+      setOffersError(readCommerceError(applyError) || offerApplyError);
     } finally {
       setPendingOffer('');
     }
@@ -497,23 +584,31 @@ const BasketSummaryBlock = ({
     event.preventDefault();
     setGiftCardFailure('');
 
-    const value = giftCardNumber.trim();
+    const number = giftCardNumber.trim();
+    const cvv = giftCardCvv.trim();
 
-    if (isDesigner || !value) return;
+    if (isDesigner || !number) return;
+    // The design pairs the number with a CVV; an empty one is the same
+    // "invalid card" answer commerce would give, without the round trip.
+    if (!cvv) {
+      setGiftCardFailure(giftCardError);
+      return;
+    }
 
     try {
       const nextBasket = await applyVoucherCode({
-        voucher_code: value
+        voucher_code: `${number}${giftCardCvvSeparator}${cvv}`
       }).unwrap();
 
       syncBasketCache(nextBasket);
       setGiftCardNumber('');
       setGiftCardCvv('');
-    } catch {
-      setGiftCardFailure(giftCardError);
+    } catch (applyError) {
+      setGiftCardFailure(readCommerceError(applyError) || giftCardError);
     }
   };
 
+
   const panelToggleStyle: React.CSSProperties = {
     display: 'flex',
     alignItems: 'center',
@@ -543,7 +638,7 @@ const BasketSummaryBlock = ({
   // `open` so a brand can style the expanded header (a border, a turned arrow).
   const couponBody = (
     <>
-      {totals.voucher ? (
+      {totals.voucher && !isGiftCardVoucher ? (
         <div
           {...partAttrs('coupon-applied', { selected: true })}
           style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
@@ -636,27 +731,41 @@ const BasketSummaryBlock = ({
           : 'inline'
       }
       {...partAttrs('coupon', {
-        open: couponPresentation === 'collapsible' && couponOpen
+        open:
+          couponPresentation === 'collapsible' && couponOpen && !couponLocked,
+        disabled: couponLocked
       })}
     >
       {couponPresentation === 'collapsible' && (
         <button
           type="button"
-          aria-expanded={couponOpen}
+          aria-expanded={couponOpen && !couponLocked}
+          aria-disabled={couponLocked || undefined}
+          disabled={couponLocked}
           onClick={() => setCouponOpen((value) => !value)}
-          {...partAttrs('coupon-toggle', { open: couponOpen })}
-          style={panelToggleStyle}
+          {...partAttrs('coupon-toggle', {
+            open: couponOpen && !couponLocked,
+            disabled: couponLocked
+          })}
+          style={{
+            ...panelToggleStyle,
+            cursor: couponLocked ? 'default' : 'pointer'
+          }}
         >
           <span
-            {...partAttrs('coupon-toggle-icon', { open: couponOpen })}
+            {...partAttrs('coupon-toggle-icon', {
+              open: couponOpen && !couponLocked
+            })}
             style={{ display: 'inline-flex' }}
           >
-            <ToggleArrow open={couponOpen} />
+            <ToggleArrow open={couponOpen && !couponLocked} />
           </span>
           <span>{couponToggleLabel}</span>
         </button>
       )}
-      {(couponPresentation !== 'collapsible' || couponOpen) && couponBody}
+      {!couponLocked &&
+        (couponPresentation !== 'collapsible' || couponOpen) &&
+        couponBody}
     </div>
   ) : null;
 
@@ -680,9 +789,7 @@ const BasketSummaryBlock = ({
 
   const describeOffer = (offer: BasketOfferLike) => {
     const percentage =
-      offer.percentage !== undefined &&
-      offer.percentage !== null &&
-      String(offer.percentage).trim()
+      (parseAmount(offer.percentage) ?? 0) > 0
         ? `${offerPercentagePrefix}${offer.percentage}`
         : '';
     const amount =
@@ -718,22 +825,36 @@ const BasketSummaryBlock = ({
               {...partAttrs('offer', { selected: applied })}
               style={{
                 display: 'flex',
-                flexDirection: 'column',
-                gap: '8px',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: '16px',
                 padding: '12px',
-                background: 'var(--basket-summary-offer-bg, #f3efe6)'
+                background: 'var(--basket-summary-offer-bg, #f9f7ef)'
               }}
             >
-              {date && <span {...partAttrs('offer-date')}>{date}</span>}
-              {(label || value) && (
-                <span
-                  {...partAttrs('offer-body')}
-                  style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}
-                >
-                  {label && <span {...partAttrs('offer-label')}>{label}</span>}
-                  {value && <span {...partAttrs('offer-value')}>{value}</span>}
-                </span>
-              )}
+              {/* Date chip over the name/value row; the apply control sits
+                  beside them, vertically centred — the wallet card layout. */}
+              <div
+                {...partAttrs('offer-content')}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'flex-start',
+                  gap: '8px',
+                  minWidth: 0
+                }}
+              >
+                {date && <span {...partAttrs('offer-date')}>{date}</span>}
+                {(label || value) && (
+                  <span
+                    {...partAttrs('offer-body')}
+                    style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}
+                  >
+                    {label && <span {...partAttrs('offer-label')}>{label}</span>}
+                    {value && <span {...partAttrs('offer-value')}>{value}</span>}
+                  </span>
+                )}
+              </div>
               {voucher && (
                 <button
                   type="button"
@@ -747,7 +868,7 @@ const BasketSummaryBlock = ({
                   style={{
                     ...panelToggleStyle,
                     width: 'auto',
-                    alignSelf: 'flex-start'
+                    flex: '0 0 auto'
                   }}
                 >
                   <span
@@ -774,24 +895,64 @@ const BasketSummaryBlock = ({
     <div
       data-basket-summary-gift-card=""
       data-basket-summary-gift-card-state={giftCardOpen ? 'open' : 'closed'}
-      {...partAttrs('gift-card', { open: giftCardOpen })}
+      {...partAttrs('gift-card', {
+        open: giftCardOpen && !giftCardLocked,
+        disabled: giftCardLocked
+      })}
     >
       <button
         type="button"
-        aria-expanded={giftCardOpen}
+        aria-expanded={giftCardOpen && !giftCardLocked}
+        aria-disabled={giftCardLocked || undefined}
+        disabled={giftCardLocked}
         onClick={() => setGiftCardOpen((value) => !value)}
-        {...partAttrs('gift-card-toggle', { open: giftCardOpen })}
-        style={panelToggleStyle}
+        {...partAttrs('gift-card-toggle', {
+          open: giftCardOpen && !giftCardLocked,
+          disabled: giftCardLocked
+        })}
+        style={{
+          ...panelToggleStyle,
+          cursor: giftCardLocked ? 'default' : 'pointer'
+        }}
       >
         <span
-          {...partAttrs('gift-card-toggle-icon', { open: giftCardOpen })}
+          {...partAttrs('gift-card-toggle-icon', {
+            open: giftCardOpen && !giftCardLocked
+          })}
           style={{ display: 'inline-flex' }}
         >
-          <ToggleArrow open={giftCardOpen} />
+          <ToggleArrow open={giftCardOpen && !giftCardLocked} />
         </span>
         <span>{giftCardToggleLabel}</span>
       </button>
-      {giftCardOpen && (
+      {isGiftCardVoucher && giftCardOpen && (
+        <div
+          {...partAttrs('gift-card-applied', { selected: true })}
+          style={{ display: 'flex', gap: '8px', alignItems: 'center' }}
+        >
+          <span {...partAttrs('gift-card-code')}>{appliedGiftCardNumber}</span>
+          <button
+            type="button"
+            disabled={isRemoving || isDesigner}
+            onClick={dropVoucher}
+            {...partAttrs('gift-card-remove', {
+              disabled: isRemoving || isDesigner,
+              loading: isRemoving
+            })}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              color: 'inherit',
+              textDecoration: 'underline',
+              padding: 0
+            }}
+          >
+            {giftCardRemoveLabel}
+          </button>
+        </div>
+      )}
+      {!isGiftCardVoucher && !giftCardLocked && giftCardOpen && (
         <form
           onSubmit={submitGiftCard}
           {...partAttrs('gift-card-form')}
@@ -823,10 +984,21 @@ const BasketSummaryBlock = ({
               onChange={(event) => setGiftCardCvv(event.target.value)}
               placeholder={giftCardCvvPlaceholder}
               aria-label={giftCardCvvPlaceholder}
-              {...partAttrs('gift-card-cvv')}
+              aria-invalid={giftCardFailure ? true : undefined}
+              {...partAttrs('gift-card-cvv', {
+                invalid: Boolean(giftCardFailure)
+              })}
               style={{ ...fieldStyle, flex: '0 0 30%' }}
             />
           </div>
+          {giftCardFailure && (
+            <div
+              role="alert"
+              {...partAttrs('gift-card-error', { invalid: true })}
+            >
+              {giftCardFailure}
+            </div>
+          )}
           <button
             type="submit"
             disabled={isApplying}
@@ -846,14 +1018,6 @@ const BasketSummaryBlock = ({
           >
             {giftCardApplyLabel}
           </button>
-          {giftCardFailure && (
-            <div
-              role="alert"
-              {...partAttrs('gift-card-error', { invalid: true })}
-            >
-              {giftCardFailure}
-            </div>
-          )}
         </form>
       )}
     </div>

package/src/chrome/__tests__/composition-source.test.ts

@@ -0,0 +1,125 @@
+/**
+ * The slot's composed/uncomposed decision and the placeholder's section
+ * loader read the SAME widget, and they used to fetch it independently: a
+ * transient failure on one side rendered the brand fallback and the
+ * composition stacked on one page, or silently dropped a published
+ * composition. These pin the shared fetch — one request, one settled result,
+ * no way to disagree.
+ */
+jest.mock('server-only', () => ({}), { virtual: true });
+
+jest.mock('react', () => {
+  const actual = jest.requireActual('react');
+  // Jest runs the client build, where `cache` does not memoize. The contract
+  // under test is "both readers share one memoized fetch", so give the module
+  // the RSC behavior: same args, same settled promise.
+  const cache = <A extends unknown[], R>(fn: (...args: A) => R) => {
+    const store = new Map<string, R>();
+    return (...args: A): R => {
+      const key = JSON.stringify(args);
+      if (!store.has(key)) store.set(key, fn(...args));
+      return store.get(key) as R;
+    };
+  };
+  return { ...actual, cache };
+});
+
+const getWidgetData = jest.fn();
+const getWidgetSchemaData = jest.fn();
+const getCollectionWidgetData = jest.fn();
+
+jest.mock('@akinon/next/data/server', () => ({
+  getWidgetData: (...args: unknown[]) => getWidgetData(...args),
+  getWidgetSchemaData: (...args: unknown[]) => getWidgetSchemaData(...args),
+  getCollectionWidgetData: (...args: unknown[]) =>
+    getCollectionWidgetData(...args)
+}));
+
+jest.mock(
+  '@akinon/next/utils/app-fetch',
+  () => ({ __esModule: true, default: jest.fn() }),
+  { virtual: true }
+);
+
+jest.mock(
+  '@akinon/next/utils/server-variables',
+  () => ({ ServerVariables: { locale: 'tr', currency: 'try' } }),
+  { virtual: true }
+);
+
+import { getSlugCompositionState } from '../composition-source';
+import { loadPlaceholderSections } from '../../load-placeholder-sections';
+
+const placeholderPayload = (slug: string) => ({
+  slug,
+  attributes: {
+    theme_editor_placeholder: {
+      value: JSON.stringify([{ section_slug: 'sec-a', order: 0 }])
+    }
+  }
+});
+
+beforeEach(() => {
+  getWidgetData.mockReset();
+  getWidgetSchemaData.mockReset().mockResolvedValue(null);
+  getCollectionWidgetData.mockReset().mockResolvedValue(null);
+});
+
+describe('shared placeholder widget fetch', () => {
+  it('serves the state reader and the section loader from one request', async () => {
+    const slot = 'one-fetch-slot';
+    getWidgetData.mockImplementation(async ({ slug }: { slug: string }) =>
+      slug === slot ? placeholderPayload(slot) : null
+    );
+
+    const state = await getSlugCompositionState(slot);
+    expect(state).toEqual({ kind: 'composed', sectionCount: 1 });
+
+    await loadPlaceholderSections(slot);
+
+    const placeholderFetches = getWidgetData.mock.calls.filter(
+      ([args]) => (args as { slug: string }).slug === slot
+    );
+    expect(placeholderFetches).toHaveLength(1);
+  });
+
+  it('recovers from a transient fetch failure for both readers at once', async () => {
+    const slot = 'flaky-slot';
+    // The old double-fetch turned exactly this flake into a double render:
+    // the state call failed (fallback shown), the loader's own call
+    // succeeded (composition shown too). Now the one shared fetch retries
+    // the flake away and both readers see the recovered widget.
+    let attempts = 0;
+    getWidgetData.mockImplementation(async ({ slug }: { slug: string }) => {
+      if (slug !== slot) return null;
+      attempts += 1;
+      if (attempts === 1) {
+        throw new Error('transient commerce hiccup');
+      }
+      return placeholderPayload(slot);
+    });
+
+    const state = await getSlugCompositionState(slot);
+    expect(state).toEqual({ kind: 'composed', sectionCount: 1 });
+
+    await loadPlaceholderSections(slot);
+    expect(attempts).toBe(2);
+  });
+
+  it('keeps the two readers agreeing when the widget never answers', async () => {
+    const slot = 'dead-slot';
+    let attempts = 0;
+    getWidgetData.mockImplementation(async ({ slug }: { slug: string }) => {
+      if (slug !== slot) return null;
+      attempts += 1;
+      throw new Error('commerce is down');
+    });
+
+    const state = await getSlugCompositionState(slot);
+    expect(state).toEqual({ kind: 'missing' });
+
+    const loaded = await loadPlaceholderSections(slot);
+    expect(loaded?.sections ?? []).toHaveLength(0);
+    expect(attempts).toBe(3);
+  });
+});

package/src/chrome/composition-source.ts

@@ -1,7 +1,42 @@
 import * as React from 'react';
-import { getWidgetData } from '@akinon/next/data/server';
 
 import { CompositionState, readCompositionState } from './composition-state';
+import { getWidgetDataWithRetry } from './retrying-widget-data';
+
+// `React.cache` exists on the RSC-capable React this package renders under;
+// fall back to the raw function on older cores, where correctness is identical
+// and the only cost is a second fetch.
+const cache = (React as { cache?: <T>(fn: T) => T }).cache;
+
+/** A placeholder widget as the data layer hands it over; `null` when absent. */
+export type PlaceholderWidget = {
+  slug?: string;
+  attributes?:
+    | ({ theme_editor_placeholder?: unknown } & Record<string, unknown>)
+    | null;
+} | null;
+
+const fetchPlaceholderWidget = async (
+  slug: string
+): Promise<PlaceholderWidget> =>
+  (await getWidgetDataWithRetry<{
+    attributes?: { theme_editor_placeholder?: unknown };
+  }>(slug)) as PlaceholderWidget;
+
+/**
+ * The one fetch of a placeholder widget per request.
+ *
+ * The slot's composed/uncomposed decision and the placeholder's section
+ * loader used to fetch the same widget independently, and a transient
+ * failure on one side made them disagree: the state fetch missing while the
+ * section fetch succeeded rendered the brand fallback AND the composition
+ * stacked on one page; the reverse silently dropped a published composition.
+ * Sharing one memoized fetch makes disagreement impossible — every reader
+ * in the request sees the same settled result.
+ */
+export const getPlaceholderWidget = cache
+  ? cache(fetchPlaceholderWidget)
+  : fetchPlaceholderWidget;
 
 /**
  * The one server-side answer to "is this slug composed?".
@@ -14,10 +49,7 @@ import { CompositionState, readCompositionState } from './composition-state';
  */
 const load = async (slug: string): Promise<CompositionState> => {
   try {
-    // The generic is the widget's attributes bag, not the widget wrapper
-    const data = await getWidgetData<{
-      theme_editor_placeholder?: unknown;
-    }>({ slug });
+    const data = await getPlaceholderWidget(slug);
 
     return readCompositionState(data);
   } catch {
@@ -26,9 +58,4 @@ const load = async (slug: string): Promise<CompositionState> => {
   }
 };
 
-// `React.cache` exists on the RSC-capable React this package renders under;
-// fall back to the raw function on older cores, where correctness is identical
-// and the only cost is a second fetch.
-const cache = (React as { cache?: <T>(fn: T) => T }).cache;
-
 export const getSlugCompositionState = cache ? cache(load) : load;