remixed v0

app/routes/__app/settings/account.tsx

@@ -0,0 +1,15 @@
+import ProfileInformations from "~/features/settings/components/account/profile-informations";
+import UpdatePassword from "~/features/settings/components/account/update-password";
+import DangerZone from "~/features/settings/components/account/danger-zone";
+
+export default function Account() {
+	return (
+		<div className="flex flex-col space-y-6">
+			<ProfileInformations />
+
+			<UpdatePassword />
+
+			<DangerZone />
+		</div>
+	);
+}

app/routes/__app/settings/billing.tsx

@@ -0,0 +1,68 @@
+import { SubscriptionStatus } from "@prisma/client";
+
+import usePaymentsHistory from "~/features/settings/hooks/use-payments-history";
+import SettingsSection from "~/features/settings/components/settings-section";
+import BillingHistory from "~/features/settings/components/billing/billing-history";
+import Divider from "~/features/settings/components/divider";
+import Plans from "~/features/settings/components/billing/plans";
+import PaddleLink from "~/features/settings/components/billing/paddle-link";
+
+function useSubscription() {
+	return {
+		subscription: null as any,
+		cancelSubscription: () => void 0,
+		updatePaymentMethod: () => void 0,
+	};
+}
+
+function Billing() {
+	const { count: paymentsCount } = usePaymentsHistory();
+	const { subscription, cancelSubscription, updatePaymentMethod } = useSubscription();
+
+	return (
+		<>
+			{subscription ? (
+				<SettingsSection>
+					{subscription.status === SubscriptionStatus.deleted ? (
+						<p>
+							Your {plansName[subscription.paddlePlanId]?.toLowerCase()} subscription is cancelled and
+							will expire on {subscription.cancellationEffectiveDate!.toLocaleDateString()}.
+						</p>
+					) : (
+						<>
+							<p>Current plan: {subscription.paddlePlanId}</p>
+							<PaddleLink
+								onClick={() => updatePaymentMethod(/*{ updateUrl: subscription.updateUrl }*/)}
+								text="Update payment method"
+							/>
+							<PaddleLink
+								onClick={() => cancelSubscription(/*{ cancelUrl: subscription.cancelUrl }*/)}
+								text="Cancel subscription"
+							/>
+						</>
+					)}
+				</SettingsSection>
+			) : null}
+
+			{paymentsCount > 0 ? (
+				<>
+					<BillingHistory />
+
+					<div className="hidden lg:block lg:py-3">
+						<Divider />
+					</div>
+				</>
+			) : null}
+
+			<Plans />
+			<p className="text-sm text-gray-500">Prices include all applicable sales taxes.</p>
+		</>
+	);
+}
+
+const plansName: Record<number, string> = {
+	727544: "Yearly",
+	727540: "Monthly",
+};
+
+export default Billing;

app/routes/__app/settings/index.tsx

@@ -0,0 +1,4 @@
+import type { LoaderFunction } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
+
+export const loader: LoaderFunction = () => redirect("/settings/account");

app/routes/__app/settings/notifications.tsx

@@ -0,0 +1,7 @@
+function Notifications() {
+	return (
+		<div>Coming soon</div>
+	);
+}
+
+export default Notifications;

app/routes/__app/settings/phone.tsx

@@ -0,0 +1,13 @@
+import TwilioApiForm from "~/features/settings/components/phone/twilio-api-form";
+import PhoneNumberForm from "~/features/settings/components/phone/phone-number-form";
+
+function PhoneSettings() {
+	return (
+		<div className="flex flex-col space-y-6">
+			<TwilioApiForm />
+			<PhoneNumberForm />
+		</div>
+	);
+}
+
+export default PhoneSettings;