From 9d62a2d86f9c5eed9d4ef5c5c08eb93d5b4ef9dc Mon Sep 17 00:00:00 2001 From: Helena <37183360+helenarebane@users.noreply.github.com> Date: Tue, 2 Sep 2025 12:14:24 +0300 Subject: [PATCH] MED-140: ui fixes (#69) * MED-140: ui fixes * make accountid optional in hook --- .../site-header-account-section.tsx | 2 +- .../(user)/_components/dashboard-cards.tsx | 30 +++---- app/home/(user)/_components/dashboard.tsx | 25 ++++-- .../_components/home-mobile-navigation.tsx | 88 ++++++++++++++----- .../_components/order-analyses-cards.tsx | 2 +- .../_lib/server/load-analysis-packages.ts | 2 +- .../accounts/src/hooks/use-update-account.ts | 6 +- .../auth/src/components/auth-layout.tsx | 2 +- .../components/select-analysis-packages.tsx | 19 ++-- .../ui/src/makerkit/language-selector.tsx | 6 +- packages/ui/src/makerkit/marketing/header.tsx | 19 ++-- packages/ui/src/makerkit/page.tsx | 4 +- styles/theme.css | 1 + 13 files changed, 142 insertions(+), 64 deletions(-) diff --git a/app/(marketing)/_components/site-header-account-section.tsx b/app/(marketing)/_components/site-header-account-section.tsx index b442ab8..c4c388f 100644 --- a/app/(marketing)/_components/site-header-account-section.tsx +++ b/app/(marketing)/_components/site-header-account-section.tsx @@ -69,7 +69,7 @@ function AuthButtons() {
- @@ -33,10 +31,10 @@ export default function DashboardCards() {
- +
- + diff --git a/app/home/(user)/_components/dashboard.tsx b/app/home/(user)/_components/dashboard.tsx index b10238c..65e6970 100644 --- a/app/home/(user)/_components/dashboard.tsx +++ b/app/home/(user)/_components/dashboard.tsx @@ -166,7 +166,7 @@ export default function Dashboard({ return ( <> -
+
{cards({ gender: params?.gender, age: params?.age, @@ -233,8 +233,11 @@ export default function Dashboard({ index, ) => { return ( -
-
+
+
{icon}
-
+
{title} @@ -253,16 +256,24 @@ export default function Dashboard({

-
+

{price}

{href ? ( - ) : ( - )} diff --git a/app/home/(user)/_components/home-mobile-navigation.tsx b/app/home/(user)/_components/home-mobile-navigation.tsx index 7ead53a..21de4e0 100644 --- a/app/home/(user)/_components/home-mobile-navigation.tsx +++ b/app/home/(user)/_components/home-mobile-navigation.tsx @@ -1,12 +1,16 @@ 'use client'; +import { useMemo } from 'react'; + import Link from 'next/link'; import { StoreCart } from '@medusajs/types'; -import { LogOut, Menu, ShoppingCart } from 'lucide-react'; +import { Cross, LogOut, Menu, Shield, ShoppingCart } from 'lucide-react'; +import { usePersonalAccountData } from '@kit/accounts/hooks/use-personal-account-data'; +import { ApplicationRoleEnum } from '@kit/accounts/types/accounts'; import { - featureFlagsConfig, + pathsConfig, personalAccountNavigationConfig, } from '@kit/shared/config'; import { useSignOut } from '@kit/supabase/hooks/use-sign-out'; @@ -15,7 +19,6 @@ import { DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, - DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from '@kit/ui/dropdown-menu'; @@ -23,14 +26,16 @@ import { If } from '@kit/ui/if'; import { Trans } from '@kit/ui/trans'; // home imports -import { HomeAccountSelector } from '../_components/home-account-selector'; import type { UserWorkspace } from '../_lib/server/load-user-workspace'; export function HomeMobileNavigation(props: { workspace: UserWorkspace; cart: StoreCart | null; }) { + const user = props.workspace.user; + const signOut = useSignOut(); + const { data: personalAccountData } = usePersonalAccountData(user.id); const Links = personalAccountNavigationConfig.routes.map((item, index) => { if ('children' in item) { @@ -51,7 +56,29 @@ export function HomeMobileNavigation(props: { } }); - const cartQuantityTotal = props.cart?.items?.reduce((acc, item) => acc + item.quantity, 0) ?? 0; + const hasTotpFactor = useMemo(() => { + const factors = user?.factors ?? []; + return factors.some( + (factor) => factor.factor_type === 'totp' && factor.status === 'verified', + ); + }, [user?.factors]); + + const isSuperAdmin = useMemo(() => { + const hasAdminRole = + personalAccountData?.application_role === ApplicationRoleEnum.SuperAdmin; + + return hasAdminRole && hasTotpFactor; + }, [user, personalAccountData, hasTotpFactor]); + + const isDoctor = useMemo(() => { + const hasDoctorRole = + personalAccountData?.application_role === ApplicationRoleEnum.Doctor; + + return hasDoctorRole && hasTotpFactor; + }, [user, personalAccountData, hasTotpFactor]); + + const cartQuantityTotal = + props.cart?.items?.reduce((acc, item) => acc + item.quantity, 0) ?? 0; const hasCartItems = cartQuantityTotal > 0; return ( @@ -61,22 +88,6 @@ export function HomeMobileNavigation(props: { - - - - - - - - - - - - {Links} + + + + + + + + Super Admin + + + + + + + + + + + + + + + + + signOut.mutateAsync()} /> diff --git a/app/home/(user)/_components/order-analyses-cards.tsx b/app/home/(user)/_components/order-analyses-cards.tsx index 23b88b5..3f2a72e 100644 --- a/app/home/(user)/_components/order-analyses-cards.tsx +++ b/app/home/(user)/_components/order-analyses-cards.tsx @@ -52,7 +52,7 @@ export default function OrderAnalysesCards({ } return ( -
+
{analyses.map(({ title, variant, diff --git a/app/home/(user)/_lib/server/load-analysis-packages.ts b/app/home/(user)/_lib/server/load-analysis-packages.ts index e6d5d7c..ca3fd5b 100644 --- a/app/home/(user)/_lib/server/load-analysis-packages.ts +++ b/app/home/(user)/_lib/server/load-analysis-packages.ts @@ -6,8 +6,8 @@ import { listRegions } from '@lib/data/regions'; import { getAnalysisElementMedusaProductIds } from '@/utils/medusa-product'; import type { StoreProduct } from '@medusajs/types'; import { loadCurrentUserAccount } from './load-user-account'; -import { AnalysisPackageWithVariant } from '~/components/select-analysis-package'; import { AccountWithParams } from '@/packages/features/accounts/src/server/api'; +import { AnalysisPackageWithVariant } from '@kit/shared/components/select-analysis-package'; async function countryCodesLoader() { const countryCodes = await listRegions().then((regions) => diff --git a/packages/features/accounts/src/hooks/use-update-account.ts b/packages/features/accounts/src/hooks/use-update-account.ts index 386efb8..a5c0814 100644 --- a/packages/features/accounts/src/hooks/use-update-account.ts +++ b/packages/features/accounts/src/hooks/use-update-account.ts @@ -5,12 +5,16 @@ import { useSupabase } from '@kit/supabase/hooks/use-supabase'; type UpdateData = Database['medreport']['Tables']['accounts']['Update']; -export function useUpdateAccountData(accountId: string) { +export function useUpdateAccountData(accountId?: string) { const client = useSupabase(); const mutationKey = ['account:data', accountId]; const mutationFn = async (data: UpdateData) => { + if (!accountId) { + return null; + } + const response = await client .schema('medreport') .from('accounts') diff --git a/packages/features/auth/src/components/auth-layout.tsx b/packages/features/auth/src/components/auth-layout.tsx index 26289aa..2d83e61 100644 --- a/packages/features/auth/src/components/auth-layout.tsx +++ b/packages/features/auth/src/components/auth-layout.tsx @@ -7,7 +7,7 @@ export function AuthLayoutShell({ return (
- {analysisPackages.length > 0 ? analysisPackages.map( - (analysisPackage) => ( - - )) : ( +
+ {analysisPackages.length > 0 ? ( + analysisPackages.map((analysisPackage) => ( + + )) + ) : (

diff --git a/packages/ui/src/makerkit/language-selector.tsx b/packages/ui/src/makerkit/language-selector.tsx index 59f07d0..f7542f0 100644 --- a/packages/ui/src/makerkit/language-selector.tsx +++ b/packages/ui/src/makerkit/language-selector.tsx @@ -40,7 +40,7 @@ export function LanguageSelector({ }, [currentLanguage]); const userId = user?.id; - const updateAccountMutation = useUpdateAccountData(userId!); + const updateAccountMutation = useUpdateAccountData(userId); const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery(); const updateLanguagePreference = async ( @@ -52,6 +52,10 @@ export function LanguageSelector({ onChange(locale); } + if (!userId) { + return i18n.changeLanguage(locale); + } + const promise = updateAccountMutation .mutateAsync({ preferred_locale: locale, diff --git a/packages/ui/src/makerkit/marketing/header.tsx b/packages/ui/src/makerkit/marketing/header.tsx index 1489ef2..219c636 100644 --- a/packages/ui/src/makerkit/marketing/header.tsx +++ b/packages/ui/src/makerkit/marketing/header.tsx @@ -1,5 +1,7 @@ -import { cn } from '../../lib/utils'; import { LanguageSelector } from '@kit/ui/language-selector'; + +import { cn } from '../../lib/utils'; + interface HeaderProps extends React.HTMLAttributes { logo?: React.ReactNode; navigation?: React.ReactNode; @@ -22,11 +24,16 @@ export const Header: React.FC = function ({ {...props} >
-
-
{logo}
-
{navigation}
- -
{actions}
+
+
{logo}
+
{navigation}
+ +
+
+ +
+ {actions} +
diff --git a/packages/ui/src/makerkit/page.tsx b/packages/ui/src/makerkit/page.tsx index e089171..7a4ee42 100644 --- a/packages/ui/src/makerkit/page.tsx +++ b/packages/ui/src/makerkit/page.tsx @@ -42,7 +42,7 @@ function PageWithSidebar(props: PageProps) { > {MobileNavigation} -
+
{Children}
@@ -58,7 +58,7 @@ export function PageMobileNavigation( return (
diff --git a/styles/theme.css b/styles/theme.css index 46641c3..e12a584 100644 --- a/styles/theme.css +++ b/styles/theme.css @@ -135,6 +135,7 @@ --animate-accordion-down: accordion-down 0.2s ease-out; --animate-accordion-up: accordion-up 0.2s ease-out; + --breakpoint-2xs: 36rem; --breakpoint-xs: 48rem; --breakpoint-sm: 64rem; --breakpoint-md: 70rem;