feature(unlock-app): Migrate settings page to app router (#14825)

* settings layout * migrate settings content * migrate settings page
unlock-protocol · Oct 9, 2024 · 8b68966 · 8b68966
1 parent 2fe7027
commit 8b68966
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 16 deletions.
diff --git a/unlock-app/app/settings/layout.tsx b/unlock-app/app/settings/layout.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react'
+
+import DashboardHeader from '~/components/interface/layouts/index/DashboardHeader'
+import DashboardFooter from '~/components/interface/layouts/index/DashboardFooter'
+import TermsOfServiceModal from '~/components/interface/layouts/index/TermsOfServiceModal'
+import { Container } from '~/components/interface/Container'
+import { ConnectModal } from '~/components/interface/connect/ConnectModal'
+
+export default function SettingsLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="overflow-hidden bg-ui-secondary-200">
+      <TermsOfServiceModal />
+      <Container>
+        <ConnectModal />
+
+        <DashboardHeader />
+
+        <div className="flex flex-col gap-10 min-h-screen">{children}</div>
+
+        <DashboardFooter />
+      </Container>
+    </div>
+  )
+}
diff --git a/unlock-app/app/settings/page.tsx b/unlock-app/app/settings/page.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { Metadata } from 'next'
+import SettingsContent from '~/components/content/SettingsContent'
+
+export const metadata: Metadata = {
+  title: 'Account Settings | Unlock Protocol',
+  description:
+    'Manage your account settings and payment methods for Unlock Protocol.',
+}
+
+const SettingsPage: React.FC = () => {
+  return <SettingsContent />
+}
+
+export default SettingsPage
diff --git a/unlock-app/src/components/content/SettingsContent.tsx b/unlock-app/src/components/content/SettingsContent.tsx
@@ -1,15 +1,13 @@
-import React from 'react'
+'use client'
+
 import { useState } from 'react'
-import Head from 'next/head'
-import { pageTitle } from '../../constants'
 import AccountInfo from '../interface/user-account/AccountInfo'
 import EjectAccount from '../interface/user-account/EjectAccount'
 import { loadStripe } from '@stripe/stripe-js'
 import { useConfig } from '~/utils/withConfig'
 import { Card } from '../interface/checkout/Card'
 import { SetupForm } from '../interface/checkout/main/CardPayment'
 import { Button } from '@unlock-protocol/ui'
-import { AppLayout } from '../interface/layouts/AppLayout'
 import {
   usePaymentMethodList,
   useRemovePaymentMethods,
@@ -22,7 +20,7 @@ export const PaymentSettings = () => {
   const { mutateAsync: removePaymentMethods } = useRemovePaymentMethods()
   const {
     data: methods,
-    isInitialLoading: isMethodLoading,
+    isLoading: isMethodLoading,
     refetch: refetchPaymentMethodList,
   } = usePaymentMethodList()
 
@@ -86,14 +84,11 @@ export const PaymentSettings = () => {
 
 export const SettingsContent = () => {
   return (
-    <AppLayout title="Account Settings">
-      <Head>
-        <title>{pageTitle('Account Settings')}</title>
-      </Head>
+    <>
       <AccountInfo />
       <PaymentSettings />
       <EjectAccount />
-    </AppLayout>
+    </>
   )
 }
 

diff --git a/unlock-app/src/pages/settings.tsx b/unlock-app/src/pages/settings.tsx