diff --git a/app/settings/pages/settings/billing.tsx b/app/settings/pages/settings/billing.tsx index d971030..7b20bfb 100644 --- a/app/settings/pages/settings/billing.tsx +++ b/app/settings/pages/settings/billing.tsx @@ -1,5 +1,5 @@ import type { BlitzPage } from "blitz"; -import { GetServerSideProps, Routes } from "blitz"; +import { GetServerSideProps, Link, Routes } from "blitz"; import useSubscription from "../../hooks/use-subscription"; import useRequireOnboarding from "../../../core/hooks/use-require-onboarding"; @@ -8,9 +8,56 @@ import appLogger from "../../../../integrations/logger"; import PaddleLink from "../../components/paddle-link"; import SettingsSection from "../../components/settings-section"; import Divider from "../../components/divider"; +import { HiCheck } from "react-icons/hi"; +import * as Panelbear from "@panelbear/panelbear-js"; +import clsx from "clsx"; const logger = appLogger.child({ page: "/account/settings/billing" }); +const paidFeatures = [ + "SMS", + "MMS (coming soon)", + "Calls", + "SMS forwarding (coming soon)", + "Call forwarding (coming soon)", + "Voicemail (coming soon)", + "Call recording (coming soon)", +]; +const pricing = { + tiers: [ + { + title: "Free", + price: 0, + frequency: "", + description: "The essentials to let you try Shellphone.", + features: ["SMS (send only)"], + unavailableFeatures: paidFeatures.slice(1), + cta: "Current tier", + yearly: false, + }, + { + title: "Monthly", + price: 15, + frequency: "/month", + description: "Text and call anyone, anywhere in the world.", + features: paidFeatures, + unavailableFeatures: [], + cta: "Subscribe", + yearly: false, + }, + { + title: "Yearly", + price: 12.5, + frequency: "/month", + description: "Text and call anyone, anywhere in the world, all year long.", + features: paidFeatures, + unavailableFeatures: [], + cta: "Subscribe", + yearly: true, + }, + ], +}; + const Billing: BlitzPage = () => { /* TODO: I want to be able to @@ -28,7 +75,88 @@ const Billing: BlitzPage = () => { console.log("subscription", subscription); if (!subscription) { - return {/**/}; + return ( +
+
+
+
+

+ Subscribe +

+

+ Update your billing information. Please note that updating your location could affect + your tax rates. +

+
+ +
+ {pricing.tiers.map((tier) => ( +
+
+

+ {tier.title} +

+ {tier.yearly ? ( +

+ Get 2 months free! +

+ ) : null} +

+ + {tier.price}€ + + {tier.frequency} +

+ {tier.yearly ? ( +

Billed yearly ({tier.price * 12}€)

+ ) : null} +

{tier.description}

+ +
    + {tier.features.map((feature) => ( +
  • +
  • + ))} + {tier.unavailableFeatures.map((feature) => ( +
  • + + {~feature.indexOf("(coming soon)") + ? feature.slice(0, feature.indexOf("(coming soon)")) + : feature} + +
  • + ))} +
+
+ + + Panelbear.track("redirect-to-join-waitlist")} + className={clsx( + tier.yearly + ? "bg-primary-500 text-white hover:bg-primary-600" + : "bg-primary-50 text-primary-700 hover:bg-primary-100", + "mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium", + )} + > + {tier.cta} + + +
+ ))} +
+
+
+
+ ); } return ( @@ -58,6 +186,88 @@ const Billing: BlitzPage = () => { text="Cancel subscription on Paddle" /> + +
+
+
+

+ Billing history +

+
+
+
+
+
+ + + + + + + {/* + `relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile. + */} + + + + + {[ + { + id: 1, + date: new Date(), + description: "", + amount: "340 USD", + href: "", + }, + ].map((payment) => ( + + + + + + + ))} + +
+ Date + + Description + + Amount + + View receipt +
+ + + {payment.description} + + {payment.amount} + + + View receipt + +
+
+
+
+
+
+
); };