tests-subscribe

name	tests-subscribe
description	Generate a manual preview/test harness page for the Subscribe button components. Use when you want to visually preview SubscribeButton / SubscribeInput across logged-in/out and newsletter-mode variants, with checkboxes for whether the viewer has an email / atproto handle.
user-invocable	true

Subscribe Button Test Harness

Scaffolds a client-side preview page that renders the SubscribeButton and SubscribeInput components behind a mocked IdentityContext, so the subscribe affordances can be eyeballed without real auth.

What to produce

Create app/test/subscribe/page.tsx (a folder called subscribe under app/test/) with the exact contents in Reference implementation below. The page is a self-contained "use client" component — no routing or data fetching required. Visit it at /test/subscribe.

If the file already exists, overwrite it so it matches the reference verbatim.

Structure

The page is organized by component, then by auth state:

• Subscribe Button
  • Logged in — has email / has handle checkboxes; renders a cell for newsletter on and off
  • Logged out — newsletter on/off cells
• Subscribe Input
  • Logged in — has email / has handle checkboxes; newsletter on/off cells
  • Logged out — newsletter on/off cells

Source components

• components/Subscribe/SubscribeButton exports SubscribeButton, SubscribeInput, and the SubscribeProps type.
• components/IdentityProvider exports IdentityContext and the Identity type.

SubscribeProps is keyed on publicationUri, publicationUrl, publicationName, publicationDescription, and newsletterMode: boolean (toggles the email-newsletter affordance).

When the viewer is not subscribed the subscribe affordances render; when subscribed ManageSubscription renders instead — so the mocked identity uses empty publication_subscriptions / publication_email_subscribers.

How the mock works

makeIdentity({ hasHandle, hasEmail }) builds a logged-in Identity the viewer is not subscribed to. The handle lives on bsky_profiles.handle and implies an atp_did; the email is independent, so an email-only account has no handle/atp_did. Cast through unknown as Identity — the components only read a few fields. MockIdentity provides IdentityContext with that identity (or null when logged out) plus a no-op mutate. The has email / has handle checkboxes in each logged-in subsection rebuild the identity.

Reference implementation

Write app/test/subscribe/page.tsx with exactly this:

"use client";
import { useState } from "react";
import { IdentityContext, type Identity } from "components/IdentityProvider";
import {
  SubscribeButton,
  SubscribeInput,
  type SubscribeProps,
} from "components/Subscribe/SubscribeButton";

const PUBLICATION_URI = "at://did:plc:example/pub.leaflet.publication/test";
const PUBLICATION_URL = "https://example.leaflet.pub";

const baseProps: Omit<SubscribeProps, "newsletterMode"> = {
  publicationUri: PUBLICATION_URI,
  publicationUrl: PUBLICATION_URL,
  publicationName: "Test Publication",
  publicationDescription:
    "A publication for previewing the subscribe affordances.",
};

type Render = (p: SubscribeProps) => React.ReactNode;

// Build a logged-in identity the viewer is NOT subscribed to. The handle lives
// on bsky_profiles (and implies an atp_did); the email is independent, so an
// email-only account has no handle/atp_did.
 ():  {
   {
    : opts. ?  : ,
    : opts. ?  : ,
    : opts. ? { :  } : ,
    : [],
    : [],
  }    ;
}

 () {
   (
    
  );
}

 () {
   (
    
  );
}

 () {
   (
    
  );
}


 () {
   (
    
  );
}

 () {
   [hasEmail, setHasEmail] = ();
   [hasHandle, setHasHandle] = ();
   (
    
  );
}

 () {
   (
    
  );
}

 () {
   (
    
  );
}

   () {
   (
    
  );
}