mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: switching issues in payments dashboard
This commit is contained in:
swve
parent
bfd27ef6e3
commit
5006b1abad
3 changed files with 43 additions and 52 deletions
|
|
@ -1,10 +1,10 @@
|
|||
'use client'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import BreadCrumbs from '@components/Dashboard/Misc/BreadCrumbs'
|
||||
import Link from 'next/link'
|
||||
import { getUriWithOrg } from '@services/config/config'
|
||||
import { CreditCard, Settings, Repeat, BookOpen, Users, DollarSign, Gem } from 'lucide-react'
|
||||
import { Settings, Users, Gem } from 'lucide-react'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import PaymentsConfigurationPage from '@components/Dashboard/Pages/Payments/PaymentsConfigurationPage'
|
||||
|
|
@ -20,18 +20,37 @@ export type PaymentsParams = {
|
|||
function PaymentsPage({ params }: { params: PaymentsParams }) {
|
||||
const session = useLHSession() as any
|
||||
const org = useOrg() as any
|
||||
const [selectedSubPage, setSelectedSubPage] = useState(params.subpage || 'general')
|
||||
const [H1Label, setH1Label] = useState('')
|
||||
const [H2Label, setH2Label] = useState('')
|
||||
const subpage = params.subpage || 'customers'
|
||||
|
||||
const isPaymentsEnabled = useFeatureFlag({
|
||||
path: ['features', 'payments', 'enabled'],
|
||||
defaultValue: false
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
handleLabels()
|
||||
}, [selectedSubPage])
|
||||
const getPageTitle = () => {
|
||||
switch (subpage) {
|
||||
case 'customers':
|
||||
return {
|
||||
h1: 'Customers',
|
||||
h2: 'View and manage your customer information'
|
||||
}
|
||||
case 'paid-products':
|
||||
return {
|
||||
h1: 'Paid Products',
|
||||
h2: 'Manage your paid products and pricing'
|
||||
}
|
||||
case 'configuration':
|
||||
return {
|
||||
h1: 'Payment Configuration',
|
||||
h2: 'Set up and manage your payment gateway'
|
||||
}
|
||||
default:
|
||||
return {
|
||||
h1: 'Payments',
|
||||
h2: 'Overview of your payment settings and transactions'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!isPaymentsEnabled) {
|
||||
return (
|
||||
|
|
@ -45,66 +64,41 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
|
|||
)
|
||||
}
|
||||
|
||||
function handleLabels() {
|
||||
if (selectedSubPage === 'general') {
|
||||
setH1Label('Payments')
|
||||
setH2Label('Overview of your payment settings and transactions')
|
||||
}
|
||||
if (selectedSubPage === 'configuration') {
|
||||
setH1Label('Payment Configuration')
|
||||
setH2Label('Set up and manage your payment gateway')
|
||||
}
|
||||
if (selectedSubPage === 'subscriptions') {
|
||||
setH1Label('Subscriptions')
|
||||
setH2Label('Manage your subscription plans')
|
||||
}
|
||||
if (selectedSubPage === 'paid-products') {
|
||||
setH1Label('Paid Products')
|
||||
setH2Label('Manage your paid products and pricing')
|
||||
}
|
||||
if (selectedSubPage === 'customers') {
|
||||
setH1Label('Customers')
|
||||
setH2Label('View and manage your customer information')
|
||||
}
|
||||
}
|
||||
const { h1, h2 } = getPageTitle()
|
||||
|
||||
return (
|
||||
<div className="h-screen w-full bg-[#f8f8f8] flex flex-col">
|
||||
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 shadow-[0px_4px_16px_rgba(0,0,0,0.06)]">
|
||||
<div className="pl-10 pr-10 tracking-tight bg-[#fcfbfc] z-10 nice-shadow">
|
||||
<BreadCrumbs type="payments" />
|
||||
<div className="my-2 py-3">
|
||||
<div className="my-2 py-2">
|
||||
<div className="w-100 flex flex-col space-y-1">
|
||||
<div className="pt-3 flex font-bold text-4xl tracking-tighter">
|
||||
{H1Label}
|
||||
{h1}
|
||||
</div>
|
||||
<div className="flex font-medium text-gray-400 text-md">
|
||||
{H2Label}{' '}
|
||||
{h2}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-5 font-black text-sm">
|
||||
<div className="flex space-x-0.5 font-black text-sm">
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/customers')}
|
||||
icon={<Users size={16} />}
|
||||
label="Customers"
|
||||
isActive={selectedSubPage === 'customers'}
|
||||
onClick={() => setSelectedSubPage('customers')}
|
||||
isActive={subpage === 'customers'}
|
||||
/>
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/paid-products')}
|
||||
icon={<Gem size={16} />}
|
||||
label="Products & Subscriptions"
|
||||
isActive={selectedSubPage === 'paid-products'}
|
||||
onClick={() => setSelectedSubPage('paid-products')}
|
||||
isActive={subpage === 'paid-products'}
|
||||
/>
|
||||
<TabLink
|
||||
href={getUriWithOrg(params.orgslug, '/dash/payments/configuration')}
|
||||
icon={<Settings size={16} />}
|
||||
label="Configuration"
|
||||
isActive={selectedSubPage === 'configuration'}
|
||||
onClick={() => setSelectedSubPage('configuration')}
|
||||
isActive={subpage === 'configuration'}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-6"></div>
|
||||
|
|
@ -115,21 +109,18 @@ function PaymentsPage({ params }: { params: PaymentsParams }) {
|
|||
transition={{ duration: 0.1, type: 'spring', stiffness: 80 }}
|
||||
className="flex-1 overflow-y-auto"
|
||||
>
|
||||
{selectedSubPage === 'general' && <div>General</div>}
|
||||
{selectedSubPage === 'configuration' && <PaymentsConfigurationPage />}
|
||||
{selectedSubPage === 'paid-products' && <PaymentsProductPage />}
|
||||
{selectedSubPage === 'customers' && <PaymentsCustomersPage />}
|
||||
{subpage === 'configuration' && <PaymentsConfigurationPage />}
|
||||
{subpage === 'paid-products' && <PaymentsProductPage />}
|
||||
{subpage === 'customers' && <PaymentsCustomersPage />}
|
||||
</motion.div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const TabLink = ({ href, icon, label, isActive, onClick }: { href: string, icon: React.ReactNode, label: string, isActive: boolean, onClick: () => void }) => (
|
||||
const TabLink = ({ href, icon, label, isActive }: { href: string, icon: React.ReactNode, label: string, isActive: boolean }) => (
|
||||
<Link href={href}>
|
||||
<div
|
||||
onClick={onClick}
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${isActive ? 'border-b-4' : 'opacity-50'
|
||||
} cursor-pointer`}
|
||||
className={`py-2 w-fit text-center border-black transition-all ease-linear ${isActive ? 'border-b-4' : 'opacity-50'} cursor-pointer`}
|
||||
>
|
||||
<div className="flex items-center space-x-2.5 mx-2">
|
||||
{icon}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const PaymentsConfigurationPage: React.FC = () => {
|
|||
|
||||
return (
|
||||
<div>
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl nice-shadow px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">Payments Configuration</h1>
|
||||
<h2 className="text-gray-500 text-md">Manage your organization payments configuration</h2>
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ function PaymentsCustomersPage() {
|
|||
if (!customers) return <div>No customer data available</div>
|
||||
|
||||
return (
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
|
||||
<div className="ml-10 mr-10 mx-auto bg-white rounded-xl nice-shadow px-4 py-4">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
|
||||
<h1 className="font-bold text-xl text-gray-800">Customers</h1>
|
||||
<h2 className="text-gray-500 text-md">View and manage your customer information</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue