get rid of onboarding requirements

app/settings/components/account/danger-zone.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 
 import Button from "../button";
 import SettingsSection from "../settings-section";
-import Modal, { ModalTitle } from "../modal";
+import Modal, { ModalTitle } from "app/core/components/modal";
 import deleteUser from "../../mutations/delete-user";
 
 export default function DangerZone() {

app/settings/components/modal.tsx

@@ -1,61 +0,0 @@
-import type { FunctionComponent, MutableRefObject } from "react";
-import { Fragment } from "react";
-import { Transition, Dialog } from "@headlessui/react";
-
-type Props = {
-	initialFocus?: MutableRefObject<HTMLElement | null> | undefined;
-	isOpen: boolean;
-	onClose: () => void;
-};
-
-const Modal: FunctionComponent<Props> = ({ children, initialFocus, isOpen, onClose }) => {
-	return (
-		<Transition.Root show={isOpen} as={Fragment}>
-			<Dialog
-				className="fixed z-30 inset-0 overflow-y-auto"
-				initialFocus={initialFocus}
-				onClose={onClose}
-				open={isOpen}
-				static
-			>
-				<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center md:block md:p-0">
-					<Transition.Child
-						as={Fragment}
-						enter="ease-out duration-300"
-						enterFrom="opacity-0"
-						enterTo="opacity-100"
-						leave="ease-in duration-200"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-					</Transition.Child>
-
-					{/* This element is to trick the browser into centering the modal contents. */}
-					<span className="hidden md:inline-block md:align-middle md:h-screen">&#8203;</span>
-					<Transition.Child
-						as={Fragment}
-						enter="ease-out duration-300"
-						enterFrom="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
-						enterTo="opacity-100 translate-y-0 md:scale-100"
-						leave="ease-in duration-200"
-						leaveFrom="opacity-100 translate-y-0 md:scale-100"
-						leaveTo="opacity-0 translate-y-4 md:translate-y-0 md:scale-95"
-					>
-						<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all md:my-8 md:align-middle md:max-w-lg md:w-full md:p-6">
-							{children}
-						</div>
-					</Transition.Child>
-				</div>
-			</Dialog>
-		</Transition.Root>
-	);
-};
-
-export const ModalTitle: FunctionComponent = ({ children }) => (
-	<Dialog.Title as="h3" className="text-lg leading-6 font-medium text-gray-900">
-		{children}
-	</Dialog.Title>
-);
-
-export default Modal;

app/settings/components/settings-layout.tsx

@@ -6,6 +6,7 @@ import {
 	IoLogOutOutline,
 	IoNotificationsOutline,
 	IoCardOutline,
+	IoCallOutline,
 	IoPersonCircleOutline,
 } from "react-icons/io5";
 
@@ -15,6 +16,7 @@ import Divider from "./divider";
 
 const subNavigation = [
 	{ name: "Account", href: Routes.Account(), icon: IoPersonCircleOutline },
+	{ name: "Phone", href: Routes.PhoneSettings(), icon: IoCallOutline },
 	{ name: "Billing", href: Routes.Billing(), icon: IoCardOutline },
 	{ name: "Notifications", href: Routes.Notifications(), icon: IoNotificationsOutline },
 ];
@@ -36,7 +38,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 			<main className="flex flex-col flex-grow mx-auto w-full max-w-7xl pb-10 lg:py-12 lg:px-8">
 				<div className="flex flex-col flex-grow lg:grid lg:grid-cols-12 lg:gap-x-5">
 					<aside className="py-6 px-2 sm:px-6 lg:py-0 lg:px-0 lg:col-span-3">
-						<nav className="h-full flex flex-col">
+						<nav className="space-y-1 h-full flex flex-col">
 							{subNavigation.map((item) => {
 								const isCurrentPage = item.href.pathname === router.pathname;
 
@@ -47,7 +49,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 												isCurrentPage
 													? "bg-gray-50 text-primary-600 hover:bg-white"
 													: "text-gray-900 hover:text-gray-900 hover:bg-gray-50",
-												"mb-1 group rounded-md px-3 py-2 flex items-center text-sm font-medium",
+												"group rounded-md px-3 py-2 flex items-center text-sm font-medium",
 											)}
 											aria-current={isCurrentPage ? "page" : undefined}
 										>
@@ -66,7 +68,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 								);
 							})}
 
-							<Divider className="mt-auto mb-1" />
+							<Divider />
 							<button
 								onClick={() => logoutMutation()}
 								className="group text-gray-900 hover:text-gray-900 hover:bg-gray-50 rounded-md px-3 py-2 flex items-center text-sm font-medium"

app/settings/pages/settings/billing.tsx

@@ -3,7 +3,6 @@ import { GetServerSideProps, getSession, Routes } from "blitz";
 
 import db, { Subscription, SubscriptionStatus } from "db";
 import useSubscription from "../../hooks/use-subscription";
-import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
 import usePaymentsHistory from "../../hooks/use-payments-history";
 import SettingsLayout from "../../components/settings-layout";
 import SettingsSection from "../../components/settings-section";
@@ -27,7 +26,6 @@ const Billing: BlitzPage<Props> = (props) => {
 		- resubscribe (message like "your subscription expired, would you like to renew ?")
 	*/
 
-	useRequireOnboarding();
 	const { count: paymentsCount } = usePaymentsHistory();
 	const { subscription, cancelSubscription, updatePaymentMethod } = useSubscription({
 		initialData: props.subscription,

app/settings/pages/settings/index.tsx

@@ -5,11 +5,8 @@ import SettingsLayout from "../../components/settings-layout";
 import ProfileInformations from "../../components/account/profile-informations";
 import UpdatePassword from "../../components/account/update-password";
 import DangerZone from "../../components/account/danger-zone";
-import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
 
 const Account: BlitzPage = () => {
-	useRequireOnboarding();
-
 	return (
 		<div className="flex flex-col space-y-6">
 			<ProfileInformations />

app/settings/pages/settings/phone.tsx

@@ -0,0 +1,14 @@
+import type { BlitzPage } from "blitz";
+import { Routes } from "blitz";
+
+import SettingsLayout from "../../components/settings-layout";
+
+const PhoneSettings: BlitzPage = () => {
+	return <div>Coming soon</div>;
+};
+
+PhoneSettings.getLayout = (page) => <SettingsLayout>{page}</SettingsLayout>;
+
+PhoneSettings.authenticate = { redirectTo: Routes.SignIn() };
+
+export default PhoneSettings;