Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-10 07:55:21 +02:00
Code Issues Releases Activity Actions

Re-implemented some of the billing UI/UX

Browse source 
This is in preparation for a hosted version of Maybe and ultimately will be hidden/disabled for all self-hosters. Just getting the UI bits back in there as we'd removed them when we shut down last year.
This commit is contained in:
Josh Pigford 2024-01-16 09:34:13 -06:00
parent 2c41c7ea90
commit 2b7924247e
4 changed files with 39 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

33
apps/client/pages/upgrade.tsx
View file

@ -1,20 +1,23 @@
import { Button } from '@maybe-finance/design-system' import { UpgradeTakeover } from '@maybe-finance/client/features'
import Link from 'next/link' import { useUserApi } from '@maybe-finance/client/shared'
import { useRouter } from 'next/router'
export default function UpgradePage() { export default function UpgradePage() {
const router = useRouter()
const { useSubscription } = useUserApi()
const subscription = useSubscription()
return ( return (
<div className="h-screen flex flex-col justify-center items-center space-y-4"> <UpgradeTakeover
<h3>Signups have been disabled.</h3> open
<p> onClose={() =>
Maybe will be shutting down on July 31.{' '} router.push(
<Link !subscription.data || subscription.data?.subscribed
className="text-cyan-500 underline hover:text-cyan-400" ? '/'
href="https://maybefinance.notion.site/To-Investors-Customers-The-Future-of-Maybe-6758bfc0e46f4ec68bf4a7a8f619199f" : '/settings?tab=billing'
> )
Details and FAQ }
</Link> />
</p>
<Button href="/">Back home</Button>
</div>
) )
} }

7
libs/client/features/src/layout/DesktopLayout.tsx
View file

@ -23,6 +23,7 @@ import {
} from 'react-icons/ri' } from 'react-icons/ri'
import { Button, Tooltip } from '@maybe-finance/design-system' import { Button, Tooltip } from '@maybe-finance/design-system'
import { MenuPopover } from './MenuPopover' import { MenuPopover } from './MenuPopover'
import { UpgradePrompt } from '../user-billing'
import { SidebarOnboarding } from '../onboarding' import { SidebarOnboarding } from '../onboarding'
import { useSession } from 'next-auth/react' import { useSession } from 'next-auth/react'
@ -227,7 +228,7 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
className="p-3 text-base bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600" className="p-3 text-base bg-gray-700 rounded-lg cursor-pointer hover:bg-gray-600"
onClick={() => setOnboardingExpanded(true)} onClick={() => setOnboardingExpanded(true)}
> >
<div className="flex items-center justify-between text-sm mb-1"> <div className="flex items-center justify-between mb-1 text-sm">
<p className="text-gray-50">Getting started</p> <p className="text-gray-50">Getting started</p>
{onboarding.data.isComplete && ( {onboarding.data.isComplete && (
<button <button
@ -235,7 +236,7 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
e.stopPropagation() e.stopPropagation()
hideOnboardingWidgetForever() hideOnboardingWidgetForever()
}} }}
className="bg-gray-600 hover:bg-gray-500 rounded p-1" className="p-1 bg-gray-600 rounded hover:bg-gray-500"
> >
Hide Hide
</button> </button>
@ -337,6 +338,8 @@ function DefaultContent({
{onboarding && onboarding} {onboarding && onboarding}
<UpgradePrompt />
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-base"> <div className="text-base">
<p data-testid="user-name">{name ?? ''}</p> <p data-testid="user-name">{name ?? ''}</p>

13
libs/client/features/src/layout/MobileLayout.tsx
View file

@ -12,6 +12,7 @@ import { Button } from '@maybe-finance/design-system'
import { MenuPopover } from './MenuPopover' import { MenuPopover } from './MenuPopover'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { UpgradePrompt } from '../user-billing'
import { ProfileCircle } from '@maybe-finance/client/shared' import { ProfileCircle } from '@maybe-finance/client/shared'
import { usePopoutContext, LayoutContextProvider } from '@maybe-finance/client/shared' import { usePopoutContext, LayoutContextProvider } from '@maybe-finance/client/shared'
import classNames from 'classnames' import classNames from 'classnames'
@ -90,10 +91,10 @@ function NavItem({
className="absolute inset-0" className="absolute inset-0"
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-5 h-1 bg-white rounded-t-lg"></div> <div className="absolute bottom-0 w-5 h-1 -translate-x-1/2 bg-white rounded-t-lg left-1/2"></div>
</motion.div> </motion.div>
)} )}
<Icon className="shrink-0 w-6 h-6" /> <Icon className="w-6 h-6 shrink-0" />
<span className="shrink-0 mt-1.5 text-sm font-medium text-center">{label}</span> <span className="shrink-0 mt-1.5 text-sm font-medium text-center">{label}</span>
</Link> </Link>
</div> </div>
@ -138,7 +139,7 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
> >
<div> <div>
<nav> <nav>
<div className="flex items-center justify-between px-4 h-20"> <div className="flex items-center justify-between h-20 px-4">
<div className="w-10"> <div className="w-10">
<Button variant="icon" onClick={() => setCollapsed(true)}> <Button variant="icon" onClick={() => setCollapsed(true)}>
<RiCloseLine className="w-6 h-6" /> <RiCloseLine className="w-6 h-6" />
@ -156,7 +157,7 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
<ProfileCircle className="!w-10 !h-10" /> <ProfileCircle className="!w-10 !h-10" />
</Link> </Link>
</div> </div>
<ul className="flex items-end justify-center xs:gap-2 border-b border-gray-700"> <ul className="flex items-end justify-center border-b border-gray-700 xs:gap-2">
<NavItem label="Net worth" href="/" icon={RiPieChart2Line} /> <NavItem label="Net worth" href="/" icon={RiPieChart2Line} />
<NavItem label="Accounts" href="/accounts" icon={RiFolderOpenLine} /> <NavItem label="Accounts" href="/accounts" icon={RiFolderOpenLine} />
<NavItem <NavItem
@ -172,7 +173,9 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
{sidebar} {sidebar}
</section> </section>
<div className="shrink-0 pt-6"></div> <div className="pt-6 shrink-0">
<UpgradePrompt />
</div>
</div> </div>
</div> </div>
</motion.aside> </motion.aside>

33
libs/client/features/src/user-billing/BillingPreferences.tsx
View file

@ -4,7 +4,6 @@ import { useState } from 'react'
import { RiExternalLinkLine } from 'react-icons/ri' import { RiExternalLinkLine } from 'react-icons/ri'
import { AiOutlineLoading3Quarters as LoadingIcon } from 'react-icons/ai' import { AiOutlineLoading3Quarters as LoadingIcon } from 'react-icons/ai'
import { UpgradeTakeover } from '.' import { UpgradeTakeover } from '.'
import Link from 'next/link'
export function BillingPreferences() { export function BillingPreferences() {
const { useSubscription, useCreateCustomerPortalSession } = useUserApi() const { useSubscription, useCreateCustomerPortalSession } = useUserApi()
@ -20,16 +19,16 @@ export function BillingPreferences() {
return ( return (
<> <>
<div className="mt-6 max-w-lg text-base"> <div className="max-w-lg mt-6 text-base">
<h4 className="mb-2 text-lg uppercase">Billing</h4> <h4 className="mb-2 text-lg uppercase">Billing</h4>
{isLoading || !data ? ( {isLoading || !data ? (
<div className="flex items-center justify-center w-lg max-w-full py-8"> <div className="flex items-center justify-center max-w-full py-8 w-lg">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
) : ( ) : (
<div className="bg-gray-800 rounded-lg overflow-hidden"> <div className="overflow-hidden bg-gray-800 rounded-lg">
<div className="flex items-center p-4"> <div className="flex items-center p-4">
<div className="grow text-gray-50 pr-4"> <div className="pr-4 grow text-gray-50">
{data.trialing ? ( {data.trialing ? (
<p> <p>
Your free trial will end on{' '} Your free trial will end on{' '}
@ -63,37 +62,21 @@ export function BillingPreferences() {
createCustomerPortalSession.isSuccess ? ( createCustomerPortalSession.isSuccess ? (
<LoadingIcon className="text-gray-100 ml-2.5 mr-1 w-3.5 h-3.5 animate-spin" /> <LoadingIcon className="text-gray-100 ml-2.5 mr-1 w-3.5 h-3.5 animate-spin" />
) : ( ) : (
<RiExternalLinkLine className="ml-2 w-5 h-5" /> <RiExternalLinkLine className="w-5 h-5 ml-2" />
)} )}
</Button> </Button>
) : ( ) : (
<Button <Button variant="primary" onClick={() => setTakeoverOpen(true)}>
variant="primary" Subscribe
disabled
onClick={() => setTakeoverOpen(true)}
>
Subscriptions disabled
</Button> </Button>
)} )}
</div> </div>
</div> </div>
<div className="p-3 text-sm bg-gray-700 text-gray-100"> <div className="p-3 text-sm text-gray-100 bg-gray-700">
You&rsquo;ll be redirected to Stripe to manage billing. You&rsquo;ll be redirected to Stripe to manage billing.
</div> </div>
</div> </div>
)} )}
<div className="mt-8 bg-cyan text-white p-3 rounded">
<p className="">
Maybe will be shutting down on July 31.{' '}
<Link
className="text-white font-bold underline"
href="https://maybefinance.notion.site/To-Investors-Customers-The-Future-of-Maybe-6758bfc0e46f4ec68bf4a7a8f619199f"
>
Details and FAQ
</Link>
</p>
</div>
</div> </div>
<UpgradeTakeover open={takeoverOpen} onClose={() => setTakeoverOpen(false)} /> <UpgradeTakeover open={takeoverOpen} onClose={() => setTakeoverOpen(false)} />
</> </>