mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 07:25:19 +02:00
Re-implemented some of the billing UI/UX
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
parent
2c41c7ea90
commit
2b7924247e
4 changed files with 39 additions and 47 deletions
|
|
@ -1,20 +1,23 @@
|
|||
import { Button } from '@maybe-finance/design-system'
|
||||
import Link from 'next/link'
|
||||
import { UpgradeTakeover } from '@maybe-finance/client/features'
|
||||
import { useUserApi } from '@maybe-finance/client/shared'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
export default function UpgradePage() {
|
||||
const router = useRouter()
|
||||
|
||||
const { useSubscription } = useUserApi()
|
||||
const subscription = useSubscription()
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col justify-center items-center space-y-4">
|
||||
<h3>Signups have been disabled.</h3>
|
||||
<p>
|
||||
Maybe will be shutting down on July 31.{' '}
|
||||
<Link
|
||||
className="text-cyan-500 underline hover:text-cyan-400"
|
||||
href="https://maybefinance.notion.site/To-Investors-Customers-The-Future-of-Maybe-6758bfc0e46f4ec68bf4a7a8f619199f"
|
||||
>
|
||||
Details and FAQ
|
||||
</Link>
|
||||
</p>
|
||||
<Button href="/">Back home</Button>
|
||||
</div>
|
||||
<UpgradeTakeover
|
||||
open
|
||||
onClose={() =>
|
||||
router.push(
|
||||
!subscription.data || subscription.data?.subscribed
|
||||
? '/'
|
||||
: '/settings?tab=billing'
|
||||
)
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
} from 'react-icons/ri'
|
||||
import { Button, Tooltip } from '@maybe-finance/design-system'
|
||||
import { MenuPopover } from './MenuPopover'
|
||||
import { UpgradePrompt } from '../user-billing'
|
||||
import { SidebarOnboarding } from '../onboarding'
|
||||
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"
|
||||
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>
|
||||
{onboarding.data.isComplete && (
|
||||
<button
|
||||
|
|
@ -235,7 +236,7 @@ export function DesktopLayout({ children, sidebar }: DesktopLayoutProps) {
|
|||
e.stopPropagation()
|
||||
hideOnboardingWidgetForever()
|
||||
}}
|
||||
className="bg-gray-600 hover:bg-gray-500 rounded p-1"
|
||||
className="p-1 bg-gray-600 rounded hover:bg-gray-500"
|
||||
>
|
||||
Hide
|
||||
</button>
|
||||
|
|
@ -337,6 +338,8 @@ function DefaultContent({
|
|||
|
||||
{onboarding && onboarding}
|
||||
|
||||
<UpgradePrompt />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-base">
|
||||
<p data-testid="user-name">{name ?? ''}</p>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { Button } from '@maybe-finance/design-system'
|
|||
import { MenuPopover } from './MenuPopover'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { UpgradePrompt } from '../user-billing'
|
||||
import { ProfileCircle } from '@maybe-finance/client/shared'
|
||||
import { usePopoutContext, LayoutContextProvider } from '@maybe-finance/client/shared'
|
||||
import classNames from 'classnames'
|
||||
|
|
@ -90,10 +91,10 @@ function NavItem({
|
|||
className="absolute inset-0"
|
||||
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>
|
||||
)}
|
||||
<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>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -138,7 +139,7 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
|
|||
>
|
||||
<div>
|
||||
<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">
|
||||
<Button variant="icon" onClick={() => setCollapsed(true)}>
|
||||
<RiCloseLine className="w-6 h-6" />
|
||||
|
|
@ -156,7 +157,7 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
|
|||
<ProfileCircle className="!w-10 !h-10" />
|
||||
</Link>
|
||||
</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="Accounts" href="/accounts" icon={RiFolderOpenLine} />
|
||||
<NavItem
|
||||
|
|
@ -172,7 +173,9 @@ export function MobileLayout({ children, sidebar }: MobileLayoutProps) {
|
|||
{sidebar}
|
||||
</section>
|
||||
|
||||
<div className="shrink-0 pt-6"></div>
|
||||
<div className="pt-6 shrink-0">
|
||||
<UpgradePrompt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.aside>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { useState } from 'react'
|
|||
import { RiExternalLinkLine } from 'react-icons/ri'
|
||||
import { AiOutlineLoading3Quarters as LoadingIcon } from 'react-icons/ai'
|
||||
import { UpgradeTakeover } from '.'
|
||||
import Link from 'next/link'
|
||||
|
||||
export function BillingPreferences() {
|
||||
const { useSubscription, useCreateCustomerPortalSession } = useUserApi()
|
||||
|
|
@ -20,16 +19,16 @@ export function BillingPreferences() {
|
|||
|
||||
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>
|
||||
{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 />
|
||||
</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="grow text-gray-50 pr-4">
|
||||
<div className="pr-4 grow text-gray-50">
|
||||
{data.trialing ? (
|
||||
<p>
|
||||
Your free trial will end on{' '}
|
||||
|
|
@ -63,37 +62,21 @@ export function BillingPreferences() {
|
|||
createCustomerPortalSession.isSuccess ? (
|
||||
<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
|
||||
variant="primary"
|
||||
disabled
|
||||
onClick={() => setTakeoverOpen(true)}
|
||||
>
|
||||
Subscriptions disabled
|
||||
<Button variant="primary" onClick={() => setTakeoverOpen(true)}>
|
||||
Subscribe
|
||||
</Button>
|
||||
)}
|
||||
</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’ll be redirected to Stripe to manage billing.
|
||||
</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>
|
||||
<UpgradeTakeover open={takeoverOpen} onClose={() => setTakeoverOpen(false)} />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue