From aa925ce8a52c187649936444d21f72652d3ef07d Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Thu, 30 Apr 2026 14:54:58 -0400
Subject: [PATCH] update subscription flow

---
 components/Subscribe/SubscribeButton.tsx   | 65 +++++++++++++---------
 components/Subscribe/viewerSubscription.ts | 20 ++++---
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/components/Subscribe/SubscribeButton.tsx b/components/Subscribe/SubscribeButton.tsx
index a4f81008..6b565773 100644
--- a/components/Subscribe/SubscribeButton.tsx
+++ b/components/Subscribe/SubscribeButton.tsx
@@ -47,12 +47,15 @@ export const SubscribePanel = (props: SubscribeProps) => {
 
 export const SubscribeButton = (props: SubscribeProps) => {
   const user = useViewerSubscription(props.publicationUri);
+  const showManage = props.newsletterMode
+    ? user.emailSubscribed
+    : user.atprotoSubscribed;
   return (
     <Modal
       className="px-0! py-3! sm:py-4! w-[1000px] sm:max-w-md max-w-full"
       asChild
       trigger={
-        user.subscribed ? (
+        showManage ? (
           <ManageSubscription
             publicationUri={props.publicationUri}
             publicationUrl={props.publicationUrl}
@@ -118,7 +121,10 @@ export const SubscribeInput = (props: SubscribeProps) => {
     setConfirmOpen(true);
   };
 
-  const isSubscribed = user.subscribed || locallySubscribed;
+  const showManage = props.newsletterMode
+    ? user.emailSubscribed
+    : user.atprotoSubscribed;
+  const isSubscribed = showManage || locallySubscribed;
   return (
     <>
       {isSubscribed ? (
@@ -129,30 +135,37 @@ export const SubscribeInput = (props: SubscribeProps) => {
           user={user}
         />
       ) : props.newsletterMode ? (
-        <EmailInput
-          value={email}
-          onChange={setEmail}
-          disabled={user.loggedIn && !!user.email}
-          autoFocus={props.autoFocus}
-          loading={requesting}
-          action={
-            <ButtonPrimary
-              compact
-              className="leading-tight! outline-none! text-sm!"
-              disabled={requesting || !email}
-              onClick={async () => {
-                if (requesting) return;
-                if (needsLinkConfirmation) {
-                  setLinkModalOpen(true);
-                  return;
-                }
-                await sendRequest(false);
-              }}
-            >
-              Subscribe
-            </ButtonPrimary>
-          }
-        />
+        <>
+          {user.atprotoSubscribed && (
+            <div className="text-tertiary text-sm pb-2">
+              You're already subscribed with atproto. Subscribe with email too?
+            </div>
+          )}
+          <EmailInput
+            value={email}
+            onChange={setEmail}
+            disabled={user.loggedIn && !!user.email}
+            autoFocus={props.autoFocus}
+            loading={requesting}
+            action={
+              <ButtonPrimary
+                compact
+                className="leading-tight! outline-none! text-sm!"
+                disabled={requesting || !email}
+                onClick={async () => {
+                  if (requesting) return;
+                  if (needsLinkConfirmation) {
+                    setLinkModalOpen(true);
+                    return;
+                  }
+                  await sendRequest(false);
+                }}
+              >
+                Subscribe
+              </ButtonPrimary>
+            }
+          />
+        </>
       ) : (
         <SubscribeWithHandle
           user={user}
diff --git a/components/Subscribe/viewerSubscription.ts b/components/Subscribe/viewerSubscription.ts
index 1eb938a8..57db231a 100644
--- a/components/Subscribe/viewerSubscription.ts
+++ b/components/Subscribe/viewerSubscription.ts
@@ -6,26 +6,30 @@ export type ViewerUser = {
   loggedIn: boolean;
   email: string | undefined;
   handle: string | undefined;
-  subscribed: boolean;
+  atprotoSubscribed: boolean;
+  emailSubscribed: boolean;
 };
 
 export function useViewerSubscription(publicationUri: string): ViewerUser {
   const { identity } = useIdentityData();
 
   return useMemo(() => {
-    const subscribed =
+    const atprotoSubscribed =
       !!identity &&
-      ((identity.publication_subscriptions ?? []).some(
+      (identity.publication_subscriptions ?? []).some(
         (s) => s.publication === publicationUri,
-      ) ||
-        (identity.publication_email_subscribers ?? []).some(
-          (s) => s.publication === publicationUri && s.state === "confirmed",
-        ));
+      );
+    const emailSubscribed =
+      !!identity &&
+      (identity.publication_email_subscribers ?? []).some(
+        (s) => s.publication === publicationUri && s.state === "confirmed",
+      );
     return {
       loggedIn: !!identity,
       email: identity?.email ?? undefined,
       handle: identity?.bsky_profiles?.handle ?? undefined,
-      subscribed,
+      atprotoSubscribed,
+      emailSubscribed,
     };
   }, [identity, publicationUri]);
 }
-- 
2.51.2