Something went wrong. Try again.
leaflet fork for copy edit / bug fixes forked from leaflet.pub/leaflet
Something went wrong. Try again.
2.9 kB · 72 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273import { useIsBlockSelected } from "src/useUIState";import { useLeafletPublicationData } from "components/PageSWRDataProvider";import { BlockProps, BlockLayout } from "./Block";import { SubscribeInput } from "components/Subscribe/SubscribeButton";
// SubscribeBlock renders the publication subscribe form in the editor, styled to// match SubscribePanel (components/Subscribe/SubscribeButton.tsx). The published// page renders the same form via PostContent.tsx's signup case.export const SubscribeBlock = ( props: BlockProps & { preview?: boolean; areYouSure?: boolean; setAreYouSure?: (value: boolean) => void; },) => { let isSelected = useIsBlockSelected(props.entityID); // Source publication data from the leaflet editor's provider — the dashboard // PublicationSWRProvider (usePublicationData) isn't mounted in the post // editor, so reading newsletter settings from it always came back empty and // the block fell back to atproto-only subscribe. The published page reads the // same data from getPostPageData via DocumentContext. let { data, normalizedPublication } = useLeafletPublicationData(); let publicationUri = data?.publications?.uri; let newsletterMode = !!data?.publications?.publication_newsletter_settings?.enabled;
let publicationName = normalizedPublication?.name || "Subscribe"; let publicationDescription = normalizedPublication?.description;
if (props.preview) return ( <BlockLayout isSelected={false} className="accent-container rounded-lg! border-none! p-0! text-center justify-center" > <div className="px-3 pt-3 pb-4 sm:px-4 sm:pt-4 sm:pb-5"> <h3 className="leading-snug text-secondary">{publicationName}</h3> {publicationDescription && ( <div className="text-tertiary">{publicationDescription}</div> )} </div> </BlockLayout> );
return ( <BlockLayout isSelected={!!isSelected} areYouSure={props.areYouSure} setAreYouSure={props.setAreYouSure} className="accent-container rounded-lg! border-none! p-0! text-center justify-center" > <div className="px-3 pt-3 pb-4 sm:px-4 sm:pt-4 sm:pb-5"> <h3 className="leading-snug text-secondary">{publicationName}</h3> {publicationDescription && ( <div className="text-tertiary">{publicationDescription}</div> )} <div className="w-fit max-w-full mx-auto pt-3"> {publicationUri && ( <SubscribeInput publicationUri={publicationUri} publicationUrl={normalizedPublication?.url} source={{ placement: "editor" }} publicationName={publicationName} publicationDescription={publicationDescription} newsletterMode={newsletterMode} /> )} </div> </div> </BlockLayout> );};