Merge pull request #58 from guillermoscript/52-implement-renewal-flow

"Refactor and Add UI Components for Improved User Experience"

Author: guillermoscript

actions/dashboard/studentActions.ts

@@ -2,6 +2,7 @@
 
 import { revalidatePath } from 'next/cache'
 
+import { updateUserProfileSchema } from '@/components/dashboards/student/account/EditProfileForm'
 import { createResponse } from '@/utils/functions'
 import { createClient } from '@/utils/supabase/server'
 
@@ -34,3 +35,58 @@ export async function studentSubmitLessonComment (state: {
     revalidatePath('/dashboard/student/courses/[courseId]/lessons/[lessonId]', 'layout')
     return createResponse('success', 'Lesson updated successfully', null, null)
 }
+
+export async function cancelSubscription ({
+    userId,
+    planId
+}: {
+    userId: string
+    planId: number
+}) {
+    console.log('Cancel subscription')
+    const supabase = createClient()
+    const cancelSubscription = await supabase
+        .rpc('cancel_subscription', {
+            _user_id: userId,
+            _plan_id: planId
+        })
+
+    if (cancelSubscription.error != null) {
+        console.log(cancelSubscription.error)
+        return createResponse('error', 'Error cancelling subscription', null, 'Error cancelling subscription')
+    }
+
+    console.log(cancelSubscription)
+
+    revalidatePath('/dashboard/student/account/subscriptions', 'layout')
+    return createResponse('success', 'Subscription cancelled successfully', null, null)
+}
+
+export async function updateUserProfile ({
+    fullName,
+    bio,
+    avatarUrl
+}: updateUserProfileSchema) {
+    const supabase = createClient()
+    const userData = await supabase.auth.getUser()
+
+    if (userData.error) {
+        return createResponse('error', 'Error updating profile', null, 'Error updating profile')
+    }
+
+    const profileUpdate = await supabase
+        .from('profiles')
+        .update({
+            full_name: fullName,
+            bio,
+            avatar_url: avatarUrl
+        })
+        .eq('id', userData.data.user?.id)
+
+    if (profileUpdate.error) {
+        return createResponse('error', 'Error updating profile', null, 'Error updating profile')
+    }
+
+    revalidatePath('/dashboard/student/account/profile', 'layout')
+    return createResponse('success', 'Profile updated successfully', null, null)
+}

app/auth/layout.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
 import Header from '@/components/Header'
@@ -15,28 +14,12 @@ export default function LoginLayout ({
             <Header>
                 <></>
             </Header>
-            <div className="md:hidden">
-                <Image
-                    src="/examples/authentication-light.png"
-                    width={1280}
-                    height={843}
-                    alt="Authentication"
-                    className="block dark:hidden"
-                />
-                <Image
-                    src="/examples/authentication-dark.png"
-                    width={1280}
-                    height={843}
-                    alt="Authentication"
-                    className="hidden dark:block"
-                />
-            </div>
-            <div className="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
+            <div className="container relative min-h-screen flex-col py-8 items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
                 <Link
                     href="/examples/authentication"
                     className={cn(
                         buttonVariants({ variant: 'ghost' }),
-                        'absolute right-4 top-4 md:right-8 md:top-8'
+                        'absolute right-4 top-4 md:right-8 md:top-8 hidden md:flex'
                     )}
                 >
                     Login
@@ -56,7 +39,7 @@ export default function LoginLayout ({
                         >
                             <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
                         </svg>
-                        Acme Inc
+                        LMS Inc
                     </div>
                     <div className="relative z-20 mt-auto">
                         <blockquote className="space-y-2">

app/auth/login/page.tsx

@@ -31,11 +31,14 @@ export default function Login ({
                 >
                     Forgot your password?
                 </Link>
+                <p className="text-center text-sm text-muted-foreground">
+                    Don't have an account?
+                </p>
                 <Link
                     href="/auth/signup"
                     className={buttonVariants({ variant: 'secondary' })}
                 >
-                    Don't have an account? Sign up
+                    Sign up
                 </Link>
             </div>
         </>

app/dashboard/account/orders/columns.tsx

@@ -20,7 +20,7 @@ export default function Error ({
         <GenericError
             retry={reset}
             title="An error occurred"
-            description="An unexpected error occurred. Please try again."
+            description={error.message}
         />
     )
 }

app/dashboard/account/page.tsx

@@ -0,0 +1,26 @@
+'use client' // Error components must be Client Components
+
+import { useEffect } from 'react'
+
+import GenericError from '@/components/GenericError'
+
+export default function Error ({
+    error,
+    reset
+}: {
+    error: Error & { digest?: string }
+    reset: () => void
+}) {
+    useEffect(() => {
+    // Log the error to an error reporting service
+        console.error(error)
+    }, [error])
+
+    return (
+        <GenericError
+            retry={reset}
+            title="Oh no! An error occurred"
+            description={error.message}
+        />
+    )
+}