feat: paid articles via membership subscription

apps/admin/src/api/posts.ts

@@ -27,6 +27,7 @@ export interface CreatePostData {
   copyright?: boolean
   draftId?: string
   images?: Image[]
+  isPremium?: boolean
   isPublished?: boolean
   meta?: Record<string, unknown>
   pin?: null | string

apps/admin/src/api/readers.ts

@@ -1,10 +1,23 @@
 import type { PaginateResult } from '~/models/base'
 
-import { getJson, patchJson } from './http'
+import { deleteJson, getJson, patchJson, putJson } from './http'
 
 export type ReaderRole = 'reader' | 'owner'
 export type ReaderRoleFilter = 'all' | 'owner' | 'reader'
 
+export type MembershipProvider =
+  'creem' | 'dodo' | 'lemonsqueezy' | 'manual' | 'stripe'
+export type MembershipPlan = 'monthly' | 'yearly'
+export type MembershipStatus = 'active' | 'cancelled' | 'expired' | 'on_hold'
+export type ReaderMembershipStatusFilter = 'none' | MembershipStatus
+
+export interface ReaderMembership {
+  status: MembershipStatus
+  plan: MembershipPlan
+  provider: MembershipProvider
+  currentPeriodEnd: string
+}
+
 export interface ReaderModel {
   id: string
   email: string | null
@@ -20,6 +33,7 @@ export interface ReaderModel {
   createdAt: string
   updatedAt: string | null
   lastLoginAt: string | null
+  membership: ReaderMembership | null
 }
 
 export interface ReaderStats {
@@ -34,10 +48,12 @@ export interface ReaderListParams {
   size: number
   search?: string
   role?: ReaderRoleFilter
+  membershipStatus?: ReaderMembershipStatusFilter
 }
 
 export function getReaders(params: ReaderListParams) {
   return getJson<PaginateResult<ReaderModel>>('/readers', {
+    membershipStatus: params.membershipStatus,
     page: params.page,
     role: params.role,
     search: params.search,
@@ -73,3 +89,17 @@ export function unbanReader(id: string) {
     {},
   )
 }
+
+export function grantMembership(
+  readerId: string,
+  data: { plan: MembershipPlan; expiresAt: string },
+) {
+  return putJson<ReaderMembership, typeof data>(
+    `/membership/members/${readerId}`,
+    data,
+  )
+}
+
+export function revokeMembership(readerId: string) {
+  return deleteJson<ReaderMembership>(`/membership/members/${readerId}`)
+}

apps/admin/src/data/resources/post.mutations.ts

@@ -74,6 +74,7 @@ function toOptimisticPostPatch(data: CreatePostData): Partial<PostModel> {
     categoryId: data.categoryId,
     contentFormat: data.contentFormat,
     copyright: data.copyright,
+    isPremium: data.isPremium,
     isPublished: data.isPublished,
     meta: data.meta,
     pinAt: data.pin,

apps/admin/src/features/readers/components/ReaderListRow.tsx

@@ -8,6 +8,14 @@ import { ListRow } from '~/ui/list-actions'
 import { cn } from '~/utils/cn'
 import { relativeTimeFromNow } from '~/utils/time'
 
+import {
+  effectiveMembershipStatus,
+  MEMBERSHIP_PLAN_LABEL_KEY,
+  MEMBERSHIP_STATUS_LABEL_KEY,
+  MEMBERSHIP_STATUS_TONE,
+  providerLabel,
+} from '../utils/membership-status'
+
 interface ReaderListRowProps {
   reader: ReaderModel
   selected: boolean
@@ -25,6 +33,7 @@ export function ReaderListRow(props: ReaderListRowProps) {
   const banned = Boolean(reader.bannedAt)
   const displayName =
     reader.name || reader.username || reader.handle || reader.id
+  const membershipStatus = effectiveMembershipStatus(reader.membership)
 
   return (
     <ListRow
@@ -74,8 +83,27 @@ export function ReaderListRow(props: ReaderListRowProps) {
               {t('readers.row.banned')}
             </StatusPill>
           ) : null}
+          {membershipStatus !== 'none' ? (
+            <StatusPill
+              className="shrink-0"
+              tone={MEMBERSHIP_STATUS_TONE[membershipStatus]}
+            >
+              {t(MEMBERSHIP_STATUS_LABEL_KEY[membershipStatus])}
+            </StatusPill>
+          ) : null}
         </div>
         <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs text-fg-muted">
+          {reader.membership ? (
+            <>
+              <span className="shrink-0 truncate">
+                {t(MEMBERSHIP_PLAN_LABEL_KEY[reader.membership.plan])} ·{' '}
+                {providerLabel(reader.membership.provider)}
+              </span>
+              <span aria-hidden="true" className="text-fg-subtle">
+                ·
+              </span>
+            </>
+          ) : null}
           {reader.handle ? (
             <span className="shrink-0 truncate">@{reader.handle}</span>
           ) : null}

apps/admin/src/features/readers/components/ReaderMembershipBlock.tsx

@@ -0,0 +1,112 @@
+import type { ReaderModel } from '~/api/readers'
+import { useI18n } from '~/i18n'
+import { StatusPill } from '~/ui/data/StatusPill'
+import { confirmDialog } from '~/ui/feedback/confirm'
+import { Button } from '~/ui/primitives/button'
+import { parseDate } from '~/utils/time'
+
+import type { useReaderMutations } from '../hooks/useReaderMutations'
+import {
+  effectiveMembershipStatus,
+  hasLiveProviderManagedMembership,
+  MEMBERSHIP_PLAN_LABEL_KEY,
+  MEMBERSHIP_STATUS_LABEL_KEY,
+  MEMBERSHIP_STATUS_TONE,
+  providerLabel,
+} from '../utils/membership-status'
+import { presentMembershipGrantModal } from './modals/MembershipGrantModal'
+
+export function ReaderMembershipBlock(props: {
+  reader: ReaderModel
+  mutations: ReturnType<typeof useReaderMutations>
+}) {
+  const { t } = useI18n()
+  const { reader, mutations } = props
+  const membership = reader.membership ?? null
+  const status = effectiveMembershipStatus(membership)
+  const liveProviderManaged = hasLiveProviderManagedMembership(membership)
+  const isManual = membership?.provider === 'manual'
+  const name = reader.name ?? reader.handle ?? reader.id
+
+  const handleGrant = async () => {
+    const result = await presentMembershipGrantModal(reader)
+    if (!result) return
+    mutations.grantMembership.mutate({ readerId: reader.id, ...result })
+  }
+
+  const handleRevoke = async () => {
+    const ok = await confirmDialog({
+      description: t('readers.membership.revoke.desc', { name }),
+      destructive: true,
+      title: t('readers.membership.revoke.title'),
+    })
+    if (ok) mutations.revokeMembership.mutate(reader.id)
+  }
+
+  return (
+    <section className="flex flex-col gap-3">
+      <h3 className="text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">
+        {t('readers.membership.section.title')}
+      </h3>
+
+      <div className="rounded-md border border-neutral-200 p-3 dark:border-neutral-800">
+        <div className="flex items-center justify-between gap-2">
+          <StatusPill tone={MEMBERSHIP_STATUS_TONE[status]}>
+            {t(MEMBERSHIP_STATUS_LABEL_KEY[status])}
+          </StatusPill>
+          {membership ? (
+            <span className="text-xs text-neutral-500 dark:text-neutral-400">
+              {t(MEMBERSHIP_PLAN_LABEL_KEY[membership.plan])} ·{' '}
+              {providerLabel(membership.provider)}
+            </span>
+          ) : null}
+        </div>
+
+        {membership ? (
+          <div className="mt-2 text-xs text-neutral-500 dark:text-neutral-400">
+            {t('readers.membership.periodEnd', {
+              date: parseDate(
+                membership.currentPeriodEnd,
+                'yyyy 年 M 月 d 日 HH:mm:ss',
+              ),
+            })}
+          </div>
+        ) : null}
+
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          {!liveProviderManaged ? (
+            <Button
+              className="h-8 px-3"
+              disabled={mutations.grantMembership.isPending}
+              onClick={handleGrant}
+              type="button"
+              variant="subtle"
+            >
+              {t(
+                membership
+                  ? 'readers.membership.action.extend'
+                  : 'readers.membership.action.grant',
+              )}
+            </Button>
+          ) : null}
+          {isManual ? (
+            <Button
+              className="h-8 border-red-200 px-3 text-red-600 hover:bg-red-50 disabled:hover:bg-transparent dark:border-red-950 dark:text-red-400 dark:hover:bg-red-950/30"
+              disabled={mutations.revokeMembership.isPending}
+              onClick={handleRevoke}
+              type="button"
+              variant="subtle"
+            >
+              {t('readers.membership.action.revoke')}
+            </Button>
+          ) : null}
+          {liveProviderManaged ? (
+            <p className="text-xs text-neutral-500 dark:text-neutral-400">
+              {t('readers.membership.providerManagedHint')}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    </section>
+  )
+}

apps/admin/src/features/readers/components/ReadersDetailPane.tsx

@@ -1,13 +1,14 @@
 import { Loader2 } from 'lucide-react'
-import type { ReaderModel } from '~/api/readers'
-import type { useReaderMutations } from '../hooks/useReaderMutations'
 
+import type { ReaderModel } from '~/api/readers'
 import { Scroll } from '~/ui/primitives/scroll'
 
+import type { useReaderMutations } from '../hooks/useReaderMutations'
 import { ReaderActionsFooter } from './ReaderActionsFooter'
 import { ReaderActivityBlock } from './ReaderActivityBlock'
 import { ReaderDetailHeader } from './ReaderDetailHeader'
 import { ReaderIdentityBlock } from './ReaderIdentityBlock'
+import { ReaderMembershipBlock } from './ReaderMembershipBlock'
 import { ReaderStatusBanner } from './ReaderStatusBanner'
 
 export function ReadersDetailPane(props: {
@@ -39,6 +40,7 @@ export function ReadersDetailPane(props: {
             unbanPending={mutations.unbanReader.isPending}
           />
           <ReaderIdentityBlock reader={reader} />
+          <ReaderMembershipBlock mutations={mutations} reader={reader} />
           <ReaderActivityBlock reader={reader} />
         </Scroll>
       </div>

apps/admin/src/features/readers/components/ReadersListPanel.tsx

@@ -1,4 +1,9 @@
-import type { ReaderModel, ReaderRoleFilter, ReaderStats } from '~/api/readers'
+import type {
+  ReaderMembershipStatusFilter,
+  ReaderModel,
+  ReaderRoleFilter,
+  ReaderStats,
+} from '~/api/readers'
 import { APP_SHELL_HEADER_HEIGHT_CLASS } from '~/constants/layout'
 import { useI18n } from '~/i18n'
 import type { Pager } from '~/models/base'
@@ -29,6 +34,10 @@ interface ReadersListPanelProps {
   onSearchChange: (value: string) => void
   role: ReaderRoleFilter
   onRoleChange: (role: ReaderRoleFilter) => void
+  membershipStatus: 'all' | ReaderMembershipStatusFilter
+  onMembershipStatusChange: (
+    value: 'all' | ReaderMembershipStatusFilter,
+  ) => void
   page: number
   onPageChange: (page: number) => void
   onRefresh: () => void
@@ -94,6 +103,8 @@ export function ReadersListPanel(props: ReadersListPanelProps) {
 
       <ReadersToolbar
         isFetching={props.isFetching}
+        membershipStatus={props.membershipStatus}
+        onMembershipStatusChange={props.onMembershipStatusChange}
         onRefresh={props.onRefresh}
         onSearchChange={props.onSearchChange}
         search={props.search}

apps/admin/src/features/readers/components/ReadersRouteViewContent.tsx

@@ -68,6 +68,8 @@ export function ReadersRouteViewContent() {
             detailId={detailId}
             isFetching={list.isFetching}
             isLoading={list.isLoading}
+            membershipStatus={list.membershipStatus}
+            onMembershipStatusChange={list.setMembershipStatus}
             onPageChange={list.setPage}
             onRefresh={list.refetch}
             onRoleChange={list.setRole}

apps/admin/src/features/readers/components/ReadersToolbar.tsx

@@ -1,13 +1,21 @@
 import { RefreshCw, Search } from 'lucide-react'
 
+import type { ReaderMembershipStatusFilter } from '~/api/readers'
 import { useI18n } from '~/i18n'
 import { Button } from '~/ui/primitives/button'
+import { SelectField } from '~/ui/primitives/select'
 import { TextInput } from '~/ui/primitives/text-field'
 import { cn } from '~/utils/cn'
 
+import { MEMBERSHIP_STATUS_FILTERS } from '../constants'
+
 interface ReadersToolbarProps {
   search: string
   onSearchChange: (value: string) => void
+  membershipStatus: 'all' | ReaderMembershipStatusFilter
+  onMembershipStatusChange: (
+    value: 'all' | ReaderMembershipStatusFilter,
+  ) => void
   onRefresh: () => void
   isFetching: boolean
 }
@@ -29,6 +37,16 @@ export function ReadersToolbar(props: ReadersToolbarProps) {
           value={props.search}
         />
       </div>
+      <SelectField
+        aria-label={t('readers.membership.filter.label')}
+        onValueChange={props.onMembershipStatusChange}
+        options={MEMBERSHIP_STATUS_FILTERS.map((filter) => ({
+          label: t(filter.labelKey),
+          value: filter.value,
+        }))}
+        triggerClassName="w-36 shrink-0"
+        value={props.membershipStatus}
+      />
       <Button
         aria-label={t('readers.refresh')}
         disabled={props.isFetching}