diff --git a/app/lish/Subscribe.tsx b/app/lish/Subscribe.tsx index 7c443496..118292cb 100644 --- a/app/lish/Subscribe.tsx +++ b/app/lish/Subscribe.tsx @@ -262,10 +262,10 @@ const SubscribeSuccessModal = ({ - + { > {loading ? : "Get it!"} - {error && ( -
{error}
- )} + {error &&
{error}
} @@ -91,3 +89,21 @@ export const UpgradeModal = (props: { ); }; + +export const InlineUpgrade = () => { + return ( +
+ + Upgrade to Leaflet Pro! + + } + /> +
+ Analytics for all your pubs!
Emails and membership coming soon. +
+
+ ); +}; diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx index bac897c7..f6c8b01c 100644 --- a/app/lish/[did]/[publication]/dashboard/Actions.tsx +++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx @@ -21,8 +21,6 @@ export const Actions = (props: { publication: string }) => { return ( <> - {canSeePro && !isPro && } - @@ -85,19 +83,3 @@ function PublicationShareButton() { ); } - -const MobileUpgrade = () => { - return ( - } - className={`sm:hidden block bg-[var(--accent-light)]!`} - style={{ backgroundColor: "var(--accent-light) important!" }} - /> - } - /> - ); -}; diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx index b1c437f3..7e84ed17 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx @@ -241,9 +241,9 @@ export const PublicationAnalytics = (props: { if (!isPro) return (
)}
- +
{formatDayTick(String(label))}
-
{Number(pageviews).toLocaleString()} {metricLabel}
+
+ {Number(pageviews).toLocaleString()} {metricLabel} +
); }} diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx index aede5c80..0ccd083b 100644 --- a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx +++ b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx @@ -48,7 +48,7 @@ export function PublicationSubscribers(props: { if (subscribers.length === 0) return (
void }) => { +export const ManageProSubscription = (props: {}) => { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const { identity } = useIdentityData(); @@ -34,9 +34,6 @@ export const ManageProSubscription = (props: { backToMenu: () => void }) => {
Manage Subscription -
diff --git a/components/ActionBar/ProfileButton.tsx b/components/ActionBar/ProfileButton.tsx index 58983d4e..f2e3fb3d 100644 --- a/components/ActionBar/ProfileButton.tsx +++ b/components/ActionBar/ProfileButton.tsx @@ -10,16 +10,16 @@ import { SpeedyLink } from "components/SpeedyLink"; import { Popover } from "components/Popover"; import { ArrowRightTiny } from "components/Icons/ArrowRightTiny"; import { Modal } from "components/Modal"; -import { UpgradeContent } from "app/lish/[did]/[publication]/UpgradeModal"; +import { InlineUpgrade } from "app/lish/[did]/[publication]/UpgradeModal"; import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription"; import { useIsPro, useCanSeePro } from "src/hooks/useEntitlement"; import { useState } from "react"; +import { LeafletPro } from "components/Icons/LeafletPro"; export const ProfileButton = () => { let { identity } = useIdentityData(); let { data: record } = useRecordFromDid(identity?.atp_did); let isMobile = useIsMobile(); - let [state, setState] = useState<"menu" | "manage-subscription">("menu"); let isPro = useIsPro(); let canSeePro = useCanSeePro(); @@ -28,8 +28,7 @@ export const ProfileButton = () => { asChild side={isMobile ? "top" : "right"} align={isMobile ? "center" : "start"} - onOpenChange={() => setState("menu")} - className="w-xs" + className="w-xs py-1!" trigger={ { /> } > - {state === "manage-subscription" ? ( - setState("menu")} /> - ) : ( -
- {record && ( - <> - - - - -
- - )} - {canSeePro && ( - <> - {!isPro ? ( - - Get Leaflet Pro - -
- } - > - - - ) : ( - + + + )} + {canSeePro && isPro && ( + <> + + Manage Pro Subscription - - - )} - -
- - )} - - -
- )} +
+ } + > + + +
+ + )} + + {canSeePro && !isPro && ( + <> + {" "} +
+
+ +
+ + )} +
); }; diff --git a/components/Modal.tsx b/components/Modal.tsx index fa9def2e..c6139ee7 100644 --- a/components/Modal.tsx +++ b/components/Modal.tsx @@ -23,11 +23,11 @@ export const Modal = ({ {trigger} - + @@ -47,7 +47,9 @@ export const Modal = ({ ) : ( )} - {children} + +
{children}
+
diff --git a/components/SubscriptionSuccessModal.tsx b/components/SubscriptionSuccessModal.tsx index a2146f7e..a81db0d7 100644 --- a/components/SubscriptionSuccessModal.tsx +++ b/components/SubscriptionSuccessModal.tsx @@ -4,6 +4,8 @@ import { useSearchParams, useRouter, usePathname } from "next/navigation"; import { useEffect, useState } from "react"; import { useIdentityData } from "./IdentityProvider"; import { Modal } from "./Modal"; +import { ButtonPrimary } from "./Buttons"; +import { theme } from "tailwind.config"; export function SubscriptionSuccessModal() { let searchParams = useSearchParams(); @@ -39,8 +41,7 @@ export function SubscriptionSuccessModal() { open={open} onOpenChange={handleOpenChange} trigger={} - title="Welcome to Pro" - className="w-80" + className="sm:max-w-sm sm:w-[1000px] w-full" > {loading ? (
@@ -50,12 +51,43 @@ export function SubscriptionSuccessModal() {

) : ( -
-

- Your Pro subscription is active. Thanks for supporting Leaflet! +

+
+ +
+

Welcome to Pro!

+

+ Thank you for supporting Leaflet. +
+ We're looking forward to bringing you even cooler stuff in the near + future!

+ + Got it, Thanks! +
)} ); } + +const ProIllo = () => { + return ( + + + + + ); +};