keypad and settings pages

2021-08-01 01:22:48 +08:00 · 2021-08-01 01:22:48 +08:00 · cd83f0c78e
commit cd83f0c78e
parent 079241ddb0
23 changed files with 1081 additions and 15 deletions
--- a/app/api/newsletter/_mailchimp.ts
+++ b/app/api/newsletter/_mailchimp.ts
@ -1,4 +1,4 @@
-import getConfig from "next/config";
+import { getConfig } from "blitz";
 import got from "got";

 const { serverRuntimeConfig } = getConfig();
--- a/app/api/newsletter/subscribe.ts
+++ b/app/api/newsletter/subscribe.ts
@ -1,4 +1,4 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import type { BlitzApiRequest, BlitzApiResponse } from "blitz";
 import zod from "zod";

 import type { ApiError } from "../_types";
@ -14,8 +14,8 @@ const bodySchema = zod.object({
 });

 export default async function subscribeToNewsletter(
-	req: NextApiRequest,
-	res: NextApiResponse<Response>
+	req: BlitzApiRequest,
+	res: BlitzApiResponse<Response>
 ) {
 	if (req.method !== "POST") {
 		const statusCode = 405;
--- a/app/core/layouts/layout/footer.tsx
+++ b/app/core/layouts/layout/footer.tsx
@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
+import { Link, useRouter } from "blitz";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 	faPhoneAlt as fasPhone,
--- a/app/core/layouts/layout/index.tsx
+++ b/app/core/layouts/layout/index.tsx
@ -1,8 +1,7 @@
 import type { ErrorInfo, FunctionComponent } from "react";
 import { Component } from "react";
-import Head from "next/head";
+import { Head, withRouter } from "blitz";
 import type { WithRouterProps } from "next/dist/client/with-router";
-import { withRouter } from "next/router";

 import appLogger from "../../../../integrations/logger";

--- a/app/keypad/pages/keypad.tsx
+++ b/app/keypad/pages/keypad.tsx
@ -0,0 +1,126 @@
+import type { BlitzPage } from "blitz";
+import type { FunctionComponent } from "react";
+import { atom, useAtom } from "jotai";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
+
+import Layout from "../../core/layouts/layout";
+import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
+
+const pageTitle = "Keypad";
+
+const Keypad: BlitzPage = () => {
+	useRequireOnboarding();
+	const phoneNumber = useAtom(phoneNumberAtom)[0];
+	const pressBackspace = useAtom(pressBackspaceAtom)[1];
+
+	return (
+		<Layout title={pageTitle}>
+			<div className="w-96 h-full flex flex-col justify-around py-5 mx-auto text-center text-black bg-white">
+				<div className="h-16 text-3xl text-gray-700">
+					<span>{phoneNumber}</span>
+				</div>
+
+				<section>
+					<Row>
+						<Digit digit="1" />
+						<Digit digit="2">
+							<DigitLetters>ABC</DigitLetters>
+						</Digit>
+						<Digit digit="3">
+							<DigitLetters>DEF</DigitLetters>
+						</Digit>
+					</Row>
+					<Row>
+						<Digit digit="4">
+							<DigitLetters>GHI</DigitLetters>
+						</Digit>
+						<Digit digit="5">
+							<DigitLetters>JKL</DigitLetters>
+						</Digit>
+						<Digit digit="6">
+							<DigitLetters>MNO</DigitLetters>
+						</Digit>
+					</Row>
+					<Row>
+						<Digit digit="7">
+							<DigitLetters>PQRS</DigitLetters>
+						</Digit>
+						<Digit digit="8">
+							<DigitLetters>TUV</DigitLetters>
+						</Digit>
+						<Digit digit="9">
+							<DigitLetters>WXYZ</DigitLetters>
+						</Digit>
+					</Row>
+					<Row>
+						<Digit digit="*" />
+						<ZeroDigit />
+						<Digit digit="#" />
+					</Row>
+					<Row>
+						<div className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full">
+							<FontAwesomeIcon icon={faPhone} color="white" size="lg" />
+						</div>
+						<div
+							className="cursor-pointer select-none my-auto"
+							onClick={pressBackspace}
+						>
+							<FontAwesomeIcon icon={faBackspace} size="lg" />
+						</div>
+					</Row>
+				</section>
+			</div>
+		</Layout>
+	);
+};
+
+const ZeroDigit: FunctionComponent = () => {
+	// TODO: long press, convert + to 0
+	const pressDigit = useAtom(pressDigitAtom)[1];
+	const onClick = () => pressDigit("0");
+
+	return (
+		<div onClick={onClick} className="text-3xl cursor-pointer select-none">
+			0 <DigitLetters>+</DigitLetters>
+		</div>
+	);
+};
+
+const Row: FunctionComponent = ({ children }) => (
+	<div className="grid grid-cols-3 p-4 my-0 mx-auto text-black">{children}</div>
+);
+
+const Digit: FunctionComponent<{ digit: string }> = ({ children, digit }) => {
+	const pressDigit = useAtom(pressDigitAtom)[1];
+	const onClick = () => pressDigit(digit);
+
+	return (
+		<div onClick={onClick} className="text-3xl cursor-pointer select-none">
+			{digit}
+			{children}
+		</div>
+	);
+};
+
+const DigitLetters: FunctionComponent = ({ children }) => (
+	<div className="text-xs text-gray-600">{children}</div>
+);
+
+const phoneNumberAtom = atom("");
+const pressDigitAtom = atom(null, (get, set, digit) => {
+	if (get(phoneNumberAtom).length > 17) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState + digit);
+});
+const pressBackspaceAtom = atom(null, (get, set) => {
+	if (get(phoneNumberAtom).length === 0) {
+		return;
+	}
+
+	set(phoneNumberAtom, (prevState) => prevState.slice(0, -1));
+});
+
+export default Keypad;
--- a/app/messages/api/webhook/incoming-message.ts
+++ b/app/messages/api/webhook/incoming-message.ts
@ -1,4 +1,4 @@
-import type { NextApiRequest, NextApiResponse } from "next";
+import type { BlitzApiRequest, BlitzApiResponse } from "blitz";
 import twilio from "twilio";

 import type { ApiError } from "../../../api/_types";
@ -9,7 +9,7 @@ import { MessageInstance } from "twilio/lib/rest/api/v2010/account/message";

 const logger = appLogger.child({ route: "/api/webhook/incoming-message" });

-export default async function incomingMessageHandler(req: NextApiRequest, res: NextApiResponse) {
+export default async function incomingMessageHandler(req: BlitzApiRequest, res: BlitzApiResponse) {
 	if (req.method !== "POST") {
 		const statusCode = 405;
 		const apiError: ApiError = {
--- a/app/onboarding/pages/welcome/step-one.tsx
+++ b/app/onboarding/pages/welcome/step-one.tsx
@ -1,7 +1,9 @@
-import type { BlitzPage } from "blitz";
+import type { BlitzPage, GetServerSideProps } from "blitz";
+import { getSession, Routes } from "blitz";

 import OnboardingLayout from "../../components/onboarding-layout";
 import useCurrentCustomer from "../../../core/hooks/use-current-customer";
+import db from "../../../../db";

 const StepOne: BlitzPage = () => {
 	useCurrentCustomer(); // preload for step two
@ -20,4 +22,29 @@ const StepOne: BlitzPage = () => {

 StepOne.authenticate = true;

+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+	const session = await getSession(req, res);
+	if (!session.userId) {
+		await session.$revoke();
+		return {
+			redirect: {
+				destination: Routes.Home().pathname,
+				permanent: false,
+			},
+		};
+	}
+
+	const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId: session.userId } });
+	if (!phoneNumber) {
+		return { props: {} };
+	}
+
+	return {
+		redirect: {
+			destination: Routes.Messages().pathname,
+			permanent: false,
+		},
+	};
+};
+
 export default StepOne;
--- a/app/onboarding/pages/welcome/step-three.tsx
+++ b/app/onboarding/pages/welcome/step-three.tsx
@ -89,7 +89,27 @@ StepThree.authenticate = true;

 export const getServerSideProps: GetServerSideProps<Props> = async ({ req, res }) => {
 	const session = await getSession(req, res);
-	const customer = await db.customer.findFirst({ where: { id: session.userId! } });
+	if (!session.userId) {
+		await session.$revoke();
+		return {
+			redirect: {
+				destination: Routes.Home().pathname,
+				permanent: false,
+			},
+		};
+	}
+
+	const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId: session.userId } });
+	if (phoneNumber) {
+		return {
+			redirect: {
+				destination: Routes.Messages().pathname,
+				permanent: false,
+			},
+		};
+	}
+
+	const customer = await db.customer.findFirst({ where: { id: session.userId } });
 	if (!customer) {
 		return {
 			redirect: {
--- a/app/onboarding/pages/welcome/step-two.tsx
+++ b/app/onboarding/pages/welcome/step-two.tsx
@ -1,12 +1,13 @@
-import type { BlitzPage } from "blitz";
-import { Routes, useMutation, useRouter } from "blitz";
+import type { BlitzPage, GetServerSideProps } from "blitz";
+import { getSession, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";

+import db from "db";
+import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
 import OnboardingLayout from "../../components/onboarding-layout";
 import useCurrentCustomer from "../../../core/hooks/use-current-customer";
-import setTwilioApiFields from "../../mutations/set-twilio-api-fields";

 type Form = {
 	twilioAccountSid: string;
@ -100,4 +101,29 @@ const StepTwo: BlitzPage = () => {

 StepTwo.authenticate = true;

+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+	const session = await getSession(req, res);
+	if (!session.userId) {
+		await session.$revoke();
+		return {
+			redirect: {
+				destination: Routes.Home().pathname,
+				permanent: false,
+			},
+		};
+	}
+
+	const phoneNumber = await db.phoneNumber.findFirst({ where: { customerId: session.userId } });
+	if (!phoneNumber) {
+		return { props: {} };
+	}
+
+	return {
+		redirect: {
+			destination: Routes.Messages().pathname,
+			permanent: false,
+		},
+	};
+};
+
 export default StepTwo;
--- a/app/settings/components/alert.tsx
+++ b/app/settings/components/alert.tsx
@ -0,0 +1,97 @@
+import type { ReactElement } from "react";
+
+type AlertVariant = "error" | "success" | "info" | "warning";
+
+type AlertVariantProps = {
+	backgroundColor: string;
+	icon: ReactElement;
+	titleTextColor: string;
+	messageTextColor: string;
+};
+
+type Props = {
+	title: string;
+	message: string;
+	variant: AlertVariant;
+};
+
+const ALERT_VARIANTS: Record<AlertVariant, AlertVariantProps> = {
+	error: {
+		backgroundColor: "bg-red-50",
+		icon: (
+			<svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+				<path
+					fillRule="evenodd"
+					d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+					clipRule="evenodd"
+				/>
+			</svg>
+		),
+		titleTextColor: "text-red-800",
+		messageTextColor: "text-red-700",
+	},
+	success: {
+		backgroundColor: "bg-green-50",
+		icon: (
+			<svg className="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
+				<path
+					fillRule="evenodd"
+					d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+					clipRule="evenodd"
+				/>
+			</svg>
+		),
+		titleTextColor: "text-green-800",
+		messageTextColor: "text-green-700",
+	},
+	info: {
+		backgroundColor: "bg-primary-50",
+		icon: (
+			<svg className="h-5 w-5 text-primary-400" viewBox="0 0 20 20" fill="currentColor">
+				<path
+					fillRule="evenodd"
+					d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+					clipRule="evenodd"
+				/>
+			</svg>
+		),
+		titleTextColor: "text-primary-800",
+		messageTextColor: "text-primary-700",
+	},
+	warning: {
+		backgroundColor: "bg-yellow-50",
+		icon: (
+			<svg className="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
+				<path
+					fillRule="evenodd"
+					d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+					clipRule="evenodd"
+				/>
+			</svg>
+		),
+		titleTextColor: "text-yellow-800",
+		messageTextColor: "text-yellow-700",
+	},
+};
+
+export default function Alert({ title, message, variant }: Props) {
+	const variantProperties = ALERT_VARIANTS[variant];
+
+	return (
+		<div className={`rounded-md p-4 ${variantProperties.backgroundColor}`}>
+			<div className="flex">
+				<div className="flex-shrink-0">{variantProperties.icon}</div>
+				<div className="ml-3">
+					<h3
+						className={`text-sm leading-5 font-medium ${variantProperties.titleTextColor}`}
+					>
+						{title}
+					</h3>
+					<div className={`mt-2 text-sm leading-5 ${variantProperties.messageTextColor}`}>
+						{message}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
--- a/app/settings/components/button.tsx
+++ b/app/settings/components/button.tsx
@ -0,0 +1,48 @@
+import type { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from "react";
+import clsx from "clsx";
+
+type Props = {
+	variant: Variant;
+	onClick?: MouseEventHandler;
+	isDisabled?: boolean;
+	type: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+};
+
+const Button: FunctionComponent<Props> = ({ children, type, variant, onClick, isDisabled }) => {
+	return (
+		<button
+			onClick={onClick}
+			type={type}
+			className={clsx(
+				"inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2",
+				{
+					[VARIANTS_STYLES[variant].base]: !isDisabled,
+					[VARIANTS_STYLES[variant].disabled]: isDisabled,
+				}
+			)}
+			disabled={isDisabled}
+		>
+			{children}
+		</button>
+	);
+};
+
+export default Button;
+
+type Variant = "error" | "default";
+
+type VariantStyle = {
+	base: string;
+	disabled: string;
+};
+
+const VARIANTS_STYLES: Record<Variant, VariantStyle> = {
+	error: {
+		base: "bg-red-600 hover:bg-red-700 focus:ring-red-500",
+		disabled: "bg-red-400 cursor-not-allowed focus:ring-red-500",
+	},
+	default: {
+		base: "bg-primary-600 hover:bg-primary-700 focus:ring-primary-500",
+		disabled: "bg-primary-400 cursor-not-allowed focus:ring-primary-500",
+	},
+};
--- a/app/settings/components/danger-zone.tsx
+++ b/app/settings/components/danger-zone.tsx
@ -0,0 +1,101 @@
+import { useRef, useState } from "react";
+import clsx from "clsx";
+
+import Button from "./button";
+import SettingsSection from "./settings-section";
+import Modal, { ModalTitle } from "./modal";
+import useCurrentCustomer from "../../core/hooks/use-current-customer";
+
+export default function DangerZone() {
+	const customer = useCurrentCustomer();
+	const [isDeletingUser, setIsDeletingUser] = useState(false);
+	const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false);
+	const modalCancelButtonRef = useRef<HTMLButtonElement>(null);
+
+	const closeModal = () => {
+		if (isDeletingUser) {
+			return;
+		}
+
+		setIsConfirmationModalOpen(false);
+	};
+	const onConfirm = () => {
+		setIsDeletingUser(true);
+		// user.deleteUser();
+	};
+
+	return (
+		<SettingsSection title="Danger Zone" description="Highway to the Danger Zone 𝅘𝅥𝅮">
+			<div className="shadow border border-red-300 sm:rounded-md sm:overflow-hidden">
+				<div className="flex justify-between items-center flex-row px-4 py-5 bg-white sm:p-6">
+					<p>
+						Once you delete your account, all of its data will be permanently deleted.
+					</p>
+
+					<span className="text-base font-medium">
+						<Button
+							variant="error"
+							type="button"
+							onClick={() => setIsConfirmationModalOpen(true)}
+						>
+							Delete my account
+						</Button>
+					</span>
+				</div>
+			</div>
+
+			<Modal
+				initialFocus={modalCancelButtonRef}
+				isOpen={isConfirmationModalOpen}
+				onClose={closeModal}
+			>
+				<div className="md:flex md:items-start">
+					<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
+						<ModalTitle>Delete my account</ModalTitle>
+						<div className="mt-2 text-sm text-gray-500">
+							<p>
+								Are you sure you want to delete your account? Your subscription will
+								be cancelled and your data permanently deleted.
+							</p>
+							<p>
+								You are free to create a new account with the same email address if
+								you ever wish to come back.
+							</p>
+						</div>
+					</div>
+				</div>
+				<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
+					<button
+						type="button"
+						className={clsx(
+							"transition-colors duration-150 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 md:ml-3 md:w-auto md:text-sm",
+							{
+								"bg-red-400 cursor-not-allowed": isDeletingUser,
+								"bg-red-600 hover:bg-red-700": !isDeletingUser,
+							}
+						)}
+						onClick={onConfirm}
+						disabled={isDeletingUser}
+					>
+						Delete my account
+					</button>
+					<button
+						ref={modalCancelButtonRef}
+						type="button"
+						className={clsx(
+							"transition-colors duration-150 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto md:text-sm",
+							{
+								"bg-gray-50 cursor-not-allowed": isDeletingUser,
+								"hover:bg-gray-50": !isDeletingUser,
+							}
+						)}
+						onClick={closeModal}
+						disabled={isDeletingUser}
+					>
+						Cancel
+					</button>
+				</div>
+			</Modal>
+		</SettingsSection>
+	);
+}
--- a/app/settings/components/divider.tsx
+++ b/app/settings/components/divider.tsx
@ -0,0 +1,9 @@
+export default function Divider() {
+	return (
+		<div className="relative">
+			<div className="absolute inset-0 flex items-center">
+				<div className="w-full border-t border-gray-300" />
+			</div>
+		</div>
+	);
+}
--- a/app/settings/components/modal.tsx
+++ b/app/settings/components/modal.tsx
@ -0,0 +1,63 @@
+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;
--- a/app/settings/components/profile-informations.tsx
+++ b/app/settings/components/profile-informations.tsx
@ -0,0 +1,134 @@
+import type { FunctionComponent } from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "blitz";
+import { useForm } from "react-hook-form";
+
+import Alert from "./alert";
+import Button from "./button";
+import SettingsSection from "./settings-section";
+import useCurrentCustomer from "../../core/hooks/use-current-customer";
+
+import appLogger from "../../../integrations/logger";
+
+type Form = {
+	name: string;
+	email: string;
+};
+
+const logger = appLogger.child({ module: "profile-settings" });
+
+const ProfileInformations: FunctionComponent = () => {
+	const { customer } = useCurrentCustomer();
+	const router = useRouter();
+	const {
+		register,
+		handleSubmit,
+		setValue,
+		formState: { isSubmitting, isSubmitSuccessful },
+	} = useForm<Form>();
+	const [errorMessage, setErrorMessage] = useState("");
+
+	useEffect(() => {
+		setValue("name", customer?.user.name ?? "");
+		setValue("email", customer?.user.email ?? "");
+	}, [setValue, customer]);
+
+	const onSubmit = handleSubmit(async ({ name, email }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		try {
+			// TODO
+			// await customer.updateUser({ email, data: { name } });
+		} catch (error) {
+			logger.error(error.response, "error updating user infos");
+
+			if (error.response.status === 401) {
+				logger.error("session expired, redirecting to sign in page");
+				return router.push("/auth/sign-in");
+			}
+
+			setErrorMessage(error.response.data.errorMessage);
+		}
+	});
+
+	return (
+		<SettingsSection
+			title="Profile Information"
+			description="Update your account's profile information and email address."
+		>
+			<form onSubmit={onSubmit}>
+				{errorMessage ? (
+					<div className="mb-8">
+						<Alert
+							title="Oops, there was an issue"
+							message={errorMessage}
+							variant="error"
+						/>
+					</div>
+				) : null}
+
+				{isSubmitSuccessful ? (
+					<div className="mb-8">
+						<Alert
+							title="Saved successfully"
+							message="Your changes have been saved."
+							variant="success"
+						/>
+					</div>
+				) : null}
+
+				<div className="shadow sm:rounded-md sm:overflow-hidden">
+					<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
+						<div className="col-span-3 sm:col-span-2">
+							<label
+								htmlFor="name"
+								className="block text-sm font-medium leading-5 text-gray-700"
+							>
+								Name
+							</label>
+							<div className="mt-1 rounded-md shadow-sm">
+								<input
+									id="name"
+									type="text"
+									tabIndex={1}
+									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+									{...register("name")}
+									required
+								/>
+							</div>
+						</div>
+
+						<div>
+							<label
+								htmlFor="email"
+								className="block text-sm font-medium leading-5 text-gray-700"
+							>
+								Email address
+							</label>
+							<div className="mt-1 rounded-md shadow-sm">
+								<input
+									id="email"
+									type="email"
+									tabIndex={2}
+									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+									{...register("email")}
+									required
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					</div>
+				</div>
+			</form>
+		</SettingsSection>
+	);
+};
+
+export default ProfileInformations;
--- a/app/settings/components/settings-layout.tsx
+++ b/app/settings/components/settings-layout.tsx
@ -0,0 +1,28 @@
+import type { FunctionComponent } from "react";
+import { useRouter } from "blitz";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
+
+import Layout from "../../core/layouts/layout";
+
+const pageTitle = "User Settings";
+
+const SettingsLayout: FunctionComponent = ({ children }) => {
+	const router = useRouter();
+
+	return (
+		<Layout title={pageTitle}>
+			<header className="px-4 sm:px-6 md:px-0">
+				<header className="flex">
+					<span className="flex items-center cursor-pointer" onClick={router.back}>
+						<FontAwesomeIcon className="h-8 w-8 mr-2" icon={faChevronLeft} /> Back
+					</span>
+				</header>
+			</header>
+
+			<main>{children}</main>
+		</Layout>
+	);
+};
+
+export default SettingsLayout;
--- a/app/settings/components/settings-section.tsx
+++ b/app/settings/components/settings-section.tsx
@ -0,0 +1,18 @@
+import type { FunctionComponent, ReactNode } from "react";
+
+type Props = {
+	title: string;
+	description?: ReactNode;
+};
+
+const SettingsSection: FunctionComponent<Props> = ({ children, title, description }) => (
+	<div className="px-4 sm:px-6 md:px-0 lg:grid lg:grid-cols-4 lg:gap-6">
+		<div className="lg:col-span-1">
+			<h3 className="text-lg font-medium leading-6 text-gray-900">{title}</h3>
+			{description ? <p className="mt-1 text-sm text-gray-600">{description}</p> : null}
+		</div>
+		<div className="mt-5 lg:mt-0 lg:col-span-3">{children}</div>
+	</div>
+);
+
+export default SettingsSection;
--- a/app/settings/components/update-password.tsx
+++ b/app/settings/components/update-password.tsx
@ -0,0 +1,133 @@
+import type { FunctionComponent } from "react";
+import { useState } from "react";
+import { useRouter } from "blitz";
+import { useForm } from "react-hook-form";
+
+import Alert from "./alert";
+import Button from "./button";
+import SettingsSection from "./settings-section";
+import useCurrentCustomer from "../../core/hooks/use-current-customer";
+
+import appLogger from "../../../integrations/logger";
+
+const logger = appLogger.child({ module: "update-password" });
+
+type Form = {
+	newPassword: string;
+	newPasswordConfirmation: string;
+};
+
+const UpdatePassword: FunctionComponent = () => {
+	const customer = useCurrentCustomer();
+	const router = useRouter();
+	const {
+		register,
+		handleSubmit,
+		formState: { isSubmitting, isSubmitSuccessful },
+	} = useForm<Form>();
+	const [errorMessage, setErrorMessage] = useState("");
+
+	const onSubmit = handleSubmit(async ({ newPassword, newPasswordConfirmation }) => {
+		if (isSubmitting) {
+			return;
+		}
+
+		if (newPassword !== newPasswordConfirmation) {
+			setErrorMessage("New passwords don't match");
+			return;
+		}
+
+		try {
+			// TODO
+			// await customer.updateUser({ password: newPassword });
+		} catch (error) {
+			logger.error(error.response, "error updating user infos");
+
+			if (error.response.status === 401) {
+				logger.error("session expired, redirecting to sign in page");
+				return router.push("/auth/sign-in");
+			}
+
+			setErrorMessage(error.response.data.errorMessage);
+		}
+	});
+
+	return (
+		<SettingsSection
+			title="Update Password"
+			description="Make sure you are using a long, random password to stay secure."
+		>
+			<form onSubmit={onSubmit}>
+				{errorMessage ? (
+					<div className="mb-8">
+						<Alert
+							title="Oops, there was an issue"
+							message={errorMessage}
+							variant="error"
+						/>
+					</div>
+				) : null}
+
+				{isSubmitSuccessful ? (
+					<div className="mb-8">
+						<Alert
+							title="Saved successfully"
+							message="Your changes have been saved."
+							variant="success"
+						/>
+					</div>
+				) : null}
+
+				<div className="shadow sm:rounded-md sm:overflow-hidden">
+					<div className="px-4 py-5 bg-white space-y-6 sm:p-6">
+						<div>
+							<label
+								htmlFor="newPassword"
+								className="flex justify-between text-sm font-medium leading-5 text-gray-700"
+							>
+								<div>New password</div>
+							</label>
+							<div className="mt-1 rounded-md shadow-sm">
+								<input
+									id="newPassword"
+									type="password"
+									tabIndex={3}
+									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+									{...register("newPassword")}
+									required
+								/>
+							</div>
+						</div>
+
+						<div>
+							<label
+								htmlFor="newPasswordConfirmation"
+								className="flex justify-between text-sm font-medium leading-5 text-gray-700"
+							>
+								<div>Confirm new password</div>
+							</label>
+							<div className="mt-1 rounded-md shadow-sm">
+								<input
+									id="newPasswordConfirmation"
+									type="password"
+									tabIndex={4}
+									className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:shadow-outline-primary focus:border-primary-300 transition duration-150 ease-in-out sm:text-sm sm:leading-5"
+									{...register("newPasswordConfirmation")}
+									required
+								/>
+							</div>
+						</div>
+					</div>
+
+					<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
+						<Button variant="default" type="submit" isDisabled={isSubmitting}>
+							{isSubmitting ? "Saving..." : "Save"}
+						</Button>
+					</div>
+				</div>
+			</form>
+		</SettingsSection>
+	);
+};
+
+export default UpdatePassword;
--- a/app/settings/pages/settings.tsx
+++ b/app/settings/pages/settings.tsx
@ -0,0 +1,58 @@
+import type { BlitzPage } from "blitz";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons";
+
+import Layout from "../../core/layouts/layout";
+
+import appLogger from "../../../integrations/logger";
+import useRequireOnboarding from "../../core/hooks/use-require-onboarding";
+
+const logger = appLogger.child({ page: "/settings" });
+
+/* eslint-disable react/display-name */
+const navigation = [
+	{
+		name: "Account",
+		href: "/settings/account",
+		icon: ({ className = "w-8 h-8" }) => (
+			<FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />
+		),
+	},
+	{
+		name: "Billing",
+		href: "/settings/billing",
+		icon: ({ className = "w-8 h-8" }) => (
+			<FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />
+		),
+	},
+];
+/* eslint-enable react/display-name */
+
+const Settings: BlitzPage = () => {
+	useRequireOnboarding();
+
+	return (
+		<Layout title="Settings">
+			<div className="flex flex-col space-y-6 p-6">
+				<aside className="py-6 lg:col-span-3">
+					<nav className="space-y-1">
+						{navigation.map((item) => (
+							<a
+								key={item.name}
+								href={item.href}
+								className="border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-3 py-2 flex items-center text-sm font-medium"
+							>
+								<item.icon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6" />
+								<span className="truncate">{item.name}</span>
+							</a>
+						))}
+					</nav>
+				</aside>
+			</div>
+		</Layout>
+	);
+};
+
+Settings.authenticate = true;
+
+export default Settings;
--- a/app/settings/pages/settings/account.tsx
+++ b/app/settings/pages/settings/account.tsx
@ -0,0 +1,36 @@
+import type { BlitzPage } from "blitz";
+
+import SettingsLayout from "../../components/settings-layout";
+import ProfileInformations from "../../components/profile-informations";
+import Divider from "../../components/divider";
+import UpdatePassword from "../../components/update-password";
+import DangerZone from "../../components/danger-zone";
+import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+
+const Account: BlitzPage = () => {
+	useRequireOnboarding();
+
+	return (
+		<SettingsLayout>
+			<div className="flex flex-col space-y-6 p-6">
+				<ProfileInformations />
+
+				<div className="hidden lg:block">
+					<Divider />
+				</div>
+
+				<UpdatePassword />
+
+				<div className="hidden lg:block">
+					<Divider />
+				</div>
+
+				<DangerZone />
+			</div>
+		</SettingsLayout>
+	);
+};
+
+Account.authenticate = true;
+
+export default Account;
--- a/app/settings/pages/settings/billing.tsx
+++ b/app/settings/pages/settings/billing.tsx
@ -0,0 +1,132 @@
+/* TODO
+import type { FunctionComponent, MouseEventHandler } from "react";
+import type { BlitzPage } from "blitz";
+import { ExternalLinkIcon } from "@heroicons/react/outline";
+
+import SettingsLayout from "../../components/settings/settings-layout";
+import SettingsSection from "../../components/settings/settings-section";
+import BillingPlans from "../../components/billing/billing-plans";
+import Divider from "../../components/divider";
+
+import useSubscription from "../../hooks/use-subscription";
+
+import { withPageOnboardingRequired } from "../../../lib/session-helpers";
+import type { Subscription } from "../../database/subscriptions";
+import { findUserSubscription } from "../../database/subscriptions";
+
+import appLogger from "../../../lib/logger";
+import ConnectedLayout from "../../components/connected-layout";
+
+const logger = appLogger.child({ page: "/account/settings/billing" });
+
+type Props = {
+	subscription: Subscription | null;
+};
+
+const Billing: BlitzPage<Props> = ({ subscription }) => {
+	/!*
+	TODO: I want to be able to
+	   - renew subscription (after pause/cancel for example) (message like "your subscription expired, would you like to renew ?")
+	   - know when is the last time I paid and for how much
+	   - know when is the next time I will pay and for how much
+	 *!/
+	const { cancelSubscription, updatePaymentMethod } = useSubscription();
+
+	return (
+		<ConnectedLayout>
+			<SettingsLayout>
+				<div className="flex flex-col space-y-6 p-6">
+					{subscription ? (
+						<>
+							<SettingsSection title="Payment method">
+								<PaddleLink
+									onClick={() =>
+										updatePaymentMethod({
+											updateUrl: subscription.updateUrl,
+										})
+									}
+									text="Update payment method on Paddle"
+								/>
+							</SettingsSection>
+
+							<div className="hidden lg:block">
+								<Divider />
+							</div>
+
+							<SettingsSection title="Plan">
+								<BillingPlans activePlanId={subscription?.planId} />
+							</SettingsSection>
+
+							<div className="hidden lg:block">
+								<Divider />
+							</div>
+
+							<SettingsSection title="Cancel subscription">
+								<PaddleLink
+									onClick={() =>
+										cancelSubscription({
+											cancelUrl: subscription.cancelUrl,
+										})
+									}
+									text="Cancel subscription on Paddle"
+								/>
+							</SettingsSection>
+						</>
+					) : (
+						<SettingsSection title="Plan">
+							<BillingPlans />
+						</SettingsSection>
+					)}
+				</div>
+			</SettingsLayout>
+		</ConnectedLayout>
+	);
+};
+
+export default Billing;
+
+type PaddleLinkProps = {
+	onClick: MouseEventHandler<HTMLButtonElement>;
+	text: string;
+};
+
+const PaddleLink: FunctionComponent<PaddleLinkProps> = ({ onClick, text }) => (
+	<button className="flex space-x-2 items-center text-left" onClick={onClick}>
+		<ExternalLinkIcon className="w-6 h-6 flex-shrink-0" />
+		<span className="transition-colors duration-150 border-b border-transparent hover:border-primary-500">
+			{text}
+		</span>
+	</button>
+);
+
+export const getServerSideProps = withPageOnboardingRequired<Props>(
+	async (context, user) => {
+		// const subscription = await findUserSubscription({ userId: user.id });
+
+		return {
+			props: { subscription: null },
+		};
+	},
+);
+*/
+
+import type { BlitzPage } from "blitz";
+import { useRouter } from "blitz";
+import { useEffect } from "react";
+
+import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
+
+const Billing: BlitzPage = () => {
+	useRequireOnboarding();
+	const router = useRouter();
+
+	useEffect(() => {
+		router.push("/messages");
+	});
+
+	return null;
+};
+
+Billing.authenticate = true;
+
+export default Billing;
--- a/package-lock.json
+++ b/package-lock.json
@ -1034,6 +1034,11 @@
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.0.tgz",
 			"integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug=="
 		},
+		"@headlessui/react": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.4.0.tgz",
+			"integrity": "sha512-C+FmBVF6YGvqcEI5fa2dfVbEaXr2RGR6Kw1E5HXIISIZEfsrH/yuCgsjWw5nlRF9vbCxmQ/EKs64GAdKeb8gCw=="
+		},
 		"@heroicons/react": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.3.tgz",
@ -9023,6 +9028,11 @@
 			"resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.15.0.tgz",
 			"integrity": "sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc="
 		},
+		"jotai": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/jotai/-/jotai-1.2.2.tgz",
+			"integrity": "sha512-iqkkUdWsH2Mk4HY1biba/8kA77+8liVBy8E0d8Nce29qow4h9mzdDhpTasAruuFYPycw6JvfZgL5RB0JJuIZjw=="
+		},
 		"joycon": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/joycon/-/joycon-3.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -39,6 +39,7 @@
 		"@fortawesome/pro-regular-svg-icons": "file:./fontawesome/fortawesome-pro-regular-svg-icons-5.15.3.tgz",
 		"@fortawesome/pro-solid-svg-icons": "file:./fontawesome/fortawesome-pro-solid-svg-icons-5.15.3.tgz",
 		"@fortawesome/react-fontawesome": "0.1.14",
+		"@headlessui/react": "1.4.0",
 		"@heroicons/react": "1.0.3",
 		"@hookform/resolvers": "2.6.1",
 		"@prisma/client": "2.27.0",
@ -49,6 +50,7 @@
 		"clsx": "1.1.1",
 		"concurrently": "6.2.0",
 		"got": "11.8.2",
+		"jotai": "1.2.2",
 		"pino": "6.13.0",
 		"pino-pretty": "5.1.2",
 		"postcss": "8.3.6",