Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
3.0 kB · 83 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384"use client";import { useEffect, useState } from "react";import { ButtonPrimary } from "components/Buttons";import { ManageSubscription } from "./ManageSubscribe";import { useViewerSubscription } from "./viewerSubscription";import type { SubscribeProps } from "./SubscribeButton";import { JoinMembershipModal } from "components/Memberships/JoinMembershipModal";import { readJoinResume, type JoinResume,} from "components/Memberships/joinReturn";import type { MembershipJoinViewer } from "actions/publications/joinMembership";import type { GatePolicy, MembershipTiers } from "src/membership";
// The subscribe control for publications with paid tiers. Styled like// SubscribeButton, but instead of one-click subscribing it opens the paid join// flow (JoinMembershipModal): identity, tier, then payment. Rendered wherever// SubscribeButton/SubscribeInput would be — they delegate here when// useMembershipTiers finds paid tiers.export const PaidSubscribeButton = ( props: SubscribeProps & { tiers: MembershipTiers; // Badges the plans admitted by the post's gate policy. gatePolicy?: GatePolicy | null; // Test-harness seam, threaded to the modal. viewerOverride?: MembershipJoinViewer; compact?: boolean; },) => { const user = useViewerSubscription(props.publicationUri); const [open, setOpen] = useState(false); const [resume, setResume] = useState<JoinResume | null>(null);
// The join flow leaves for Stripe card setup or sign-in and returns to this // page with markers in the URL. The modal isn't mounted on load, so the // button claims the return (first of possibly several surfaces on the page // wins) and reopens the modal to finish the join. useEffect(() => { const r = readJoinResume(); if (!r) return; setResume(r); setOpen(true); }, []);
return ( <> {user.subscribed ? ( <ManageSubscription publicationUri={props.publicationUri} publicationUrl={props.publicationUrl} newsletterMode={props.newsletterMode} user={user} membershipTiers={props.tiers} onChangeMembership={() => setOpen(true)} /> ) : ( <ButtonPrimary compact={props.compact} type="button" className="pubPageSubscribe text-sm!" onClick={() => setOpen(true)} > Subscribe </ButtonPrimary> )} {/* Stays mounted while the flow subscribes the reader mid-join, so the payment step isn't lost when the trigger above flips to Manage. */} <JoinMembershipModal open={open} onOpenChange={setOpen} publicationUri={props.publicationUri} publicationUrl={props.publicationUrl} publicationName={props.publicationName} newsletterMode={props.newsletterMode} tiers={props.tiers} gatePolicy={props.gatePolicy} resume={resume} source={props.source} viewerOverride={props.viewerOverride} /> </> );};