Fix/reported bugs fixing (#425)

lukasz-hycom · marcinkrasowski · web-flow · commit db5b38165a76 · 2025-12-05T09:16:04.000+01:00
* fix(notification-list): update notification title rendering to use link component

* fix(ticket-list, notification-list): update rendering of titles

* fix(ticket-details): update translation for ticket status 'OPEN'

* style(ticket-details): update card background color and add new card-light variable

* fix(service-details): update page IDs for service details in mocks

* style(notification-list, ticket-list): add text truncation and alignment to button components

* fix(filters): change flex direction to flex-col-reverse on mobile

* feat(toggle-group): enhance ToggleGroupItem to support icons

* fix(order-list): add missing status options in filters

* chore(package-lock): update package versions to latest releases

* feat(header): add sign-in button to desktop and mobile navigation based on user authentication state

* feat(header): added sign-in label into desktop and mobile navigation components

* refactor(Header): add shouldIncludeSignInButton prop to control sign-in button visibility

* chore: restore @o2s/lint-staged-config in package-lock.json

* chore: updating changelog

---------

Co-authored-by: Marcin Krasowski &lt;marcin.krasowski@hycom.pl&gt;
diff --git a/.changeset/gentle-eggs-report.md b/.changeset/gentle-eggs-report.md
@@ -0,0 +1,14 @@
+---
+'@o2s/integrations.contentful-cms': minor
+'@o2s/blocks.notification-list': minor
+'@o2s/integrations.strapi-cms': minor
+'@o2s/blocks.orders-summary': minor
+'@o2s/blocks.ticket-details': minor
+'@o2s/integrations.mocked': minor
+'@o2s/blocks.ticket-list': minor
+'@o2s/framework': minor
+'@o2s/frontend': minor
+'@o2s/ui': minor
+---
+
+fixing various bugs related with blocks and ui components, adding sign-in button in navigation
diff --git a/apps/frontend/src/app/[locale]/(auth)/login/page.tsx b/apps/frontend/src/app/[locale]/(auth)/login/page.tsx
@@ -99,7 +99,7 @@ export default async function LoginPage({ params }: Readonly<Props>) {
             <body>
                 <GlobalProvider config={init} labels={init.labels} locale={locale} themes={init.themes}>
                     <div className="flex flex-col min-h-dvh">
-                        <Header data={init.common.header} />
+                        <Header data={init.common.header} shouldIncludeSignInButton={false} />
                         <div className="flex flex-col grow">
                             <AuthLayout>
                                 <SignInForm
diff --git a/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.tsx b/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.tsx
@@ -1,11 +1,13 @@
 'use client';
 
+import { useSession } from 'next-auth/react';
 import React from 'react';
 
 import { Models } from '@o2s/framework/modules';
 
 import { cn } from '@o2s/ui/lib/utils';
 
+import { Button } from '@o2s/ui/elements/button';
 import {
     NavigationMenu,
     NavigationMenuContent,
@@ -19,6 +21,7 @@ import { Separator } from '@o2s/ui/elements/separator';
 import { Typography } from '@o2s/ui/elements/typography';
 
 import { Link as NextLink, usePathname } from '@/i18n';
+import { LOGIN_PATH } from '@/i18n/routing';
 
 import { DesktopNavigationProps } from './DesktopNavigation.types';
 
@@ -29,9 +32,16 @@ export function DesktopNavigation({
     notificationSlot,
     userSlot,
     items,
+    signInLabel,
+    shouldIncludeSignInButton = true,
 }: DesktopNavigationProps) {
+    const session = useSession();
+    const isSignedIn = !!session.data?.user;
     const pathname = usePathname();
 
+    // Show sign in button if user is not signed in, container allows it, and signInLabel is available
+    const showSignInButton = shouldIncludeSignInButton && !isSignedIn && signInLabel;
+
     const activeNavigationGroup = items.find((item) => {
         if (item.__typename === 'NavigationGroup') {
             return item.items
@@ -174,6 +184,13 @@ export function DesktopNavigation({
                         {/* Language Selector */}
                         {localeSlot}
 
+                        {/* Sign In Button */}
+                        {showSignInButton && (
+                            <Button asChild variant="tertiary">
+                                <NextLink href={LOGIN_PATH}>{signInLabel}</NextLink>
+                            </Button>
+                        )}
+
                         {/* Notification Button */}
                         {notificationSlot}
 
diff --git a/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.types.ts b/apps/frontend/src/containers/Header/DesktopNavigation/DesktopNavigation.types.ts
@@ -9,4 +9,6 @@ export interface DesktopNavigationProps {
     notificationSlot?: ReactNode;
     userSlot?: ReactNode;
     items: CMS.Model.Header.Header['items'];
+    signInLabel?: CMS.Model.Header.Header['signInLabel'];
+    shouldIncludeSignInButton?: boolean;
 }
diff --git a/apps/frontend/src/containers/Header/Header.tsx b/apps/frontend/src/containers/Header/Header.tsx
@@ -20,7 +20,12 @@ import { MobileNavigation } from './MobileNavigation/MobileNavigation';
 import { NotificationInfo } from './NotificationInfo/NotificationInfo';
 import { UserInfo } from './UserInfo/UserInfo';
 
-export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children }) => {
+export const Header: React.FC<HeaderProps> = ({
+    data,
+    alternativeUrls,
+    children,
+    shouldIncludeSignInButton = true,
+}) => {
     const session = useSession();
     const isSignedIn = !!session.data?.user;
 
@@ -82,6 +87,8 @@ export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children
                         notificationSlot={NotificationSlot}
                         userSlot={UserSlot}
                         items={data.items}
+                        signInLabel={data.signInLabel}
+                        shouldIncludeSignInButton={shouldIncludeSignInButton}
                     />
                 </div>
                 <div className="md:hidden">
@@ -94,6 +101,8 @@ export const Header: React.FC<HeaderProps> = ({ data, alternativeUrls, children
                         items={data.items}
                         title={data.title}
                         mobileMenuLabel={data.mobileMenuLabel}
+                        signInLabel={data.signInLabel}
+                        shouldIncludeSignInButton={shouldIncludeSignInButton}
                     />
                 </div>
             </>
diff --git a/apps/frontend/src/containers/Header/Header.types.ts b/apps/frontend/src/containers/Header/Header.types.ts
@@ -8,4 +8,5 @@ export interface HeaderProps {
     alternativeUrls?: {
         [key: string]: string;
     };
+    shouldIncludeSignInButton?: boolean;
 }
diff --git a/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.tsx b/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Menu, X } from 'lucide-react';
+import { useSession } from 'next-auth/react';
 import React, { useEffect, useState } from 'react';
 
 import { Models } from '@o2s/framework/modules';
@@ -16,6 +17,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@o2s
 import { Typography } from '@o2s/ui/elements/typography';
 
 import { Link as NextLink, usePathname } from '@/i18n';
+import { LOGIN_PATH } from '@/i18n/routing';
 
 import { MobileNavigationProps } from './MobileNavigation.types';
 
@@ -28,9 +30,16 @@ export function MobileNavigation({
     items,
     title,
     mobileMenuLabel,
+    signInLabel,
+    shouldIncludeSignInButton = true,
 }: MobileNavigationProps) {
+    const session = useSession();
+    const isSignedIn = !!session.data?.user;
     const pathname = usePathname();
 
+    // Show sign in button if user is not signed in, container allows it, and signInLabel is available
+    const showSignInButton = shouldIncludeSignInButton && !isSignedIn && signInLabel;
+
     const [isMenuOpen, setIsMenuOpen] = useState(false);
 
     useEffect(() => {
@@ -108,6 +117,13 @@ export function MobileNavigation({
 
                 {/* Right Section */}
                 <div className="flex gap-4">
+                    {/* Sign In Button */}
+                    {showSignInButton && (
+                        <Button asChild variant="tertiary">
+                            <NextLink href={LOGIN_PATH}>{signInLabel}</NextLink>
+                        </Button>
+                    )}
+
                     {/* Notification Button */}
                     {notificationSlot}
 
diff --git a/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.types.ts b/apps/frontend/src/containers/Header/MobileNavigation/MobileNavigation.types.ts
@@ -11,4 +11,6 @@ export interface MobileNavigationProps {
     items: CMS.Model.Header.Header['items'];
     title?: CMS.Model.Header.Header['title'];
     mobileMenuLabel: CMS.Model.Header.Header['mobileMenuLabel'];
+    signInLabel?: CMS.Model.Header.Header['signInLabel'];
+    shouldIncludeSignInButton?: boolean;
 }
diff --git a/apps/frontend/src/i18n/routing.ts b/apps/frontend/src/i18n/routing.ts
@@ -3,12 +3,13 @@ import { defineRouting } from 'next-intl/routing';
 
 export const DEFAULT_LOCALE = process.env.NEXT_PUBLIC_DEFAULT_LOCALE as string;
 export const SUPPORTED_LOCALES = process.env.NEXT_PUBLIC_SUPPORTED_LOCALES?.split(',') ?? [];
+export const LOGIN_PATH = '/login';
 
 export const routing = defineRouting({
     locales: SUPPORTED_LOCALES,
     defaultLocale: DEFAULT_LOCALE,
     pathnames: {
-        '/login': {
+        [LOGIN_PATH]: {
             en: '/sign-in',
             de: '/einloggen',
             pl: '/logowanie',
diff --git a/packages/blocks/notification-list/src/frontend/NotificationList.client.tsx b/packages/blocks/notification-list/src/frontend/NotificationList.client.tsx
@@ -85,9 +85,13 @@ export const NotificationListPure: React.FC<NotificationListPureProps> = ({
             case 'title':
                 return {
                     ...column,
-                    type: 'text',
-                    cellClassName: (notification: Model.Notification) =>
-                        cn('max-w-[200px] lg:max-w-md', notification.status.value === 'UNVIEWED' && 'font-semibold'),
+                    type: 'custom',
+                    cellClassName: 'max-w-[200px] lg:max-w-md',
+                    render: (_value: unknown, notification: Model.Notification) => (
+                        <Button asChild variant="link" size="none" className="truncate block text-left">
+                            <LinkComponent href={notification.detailsUrl}>{notification.title}</LinkComponent>
+                        </Button>
+                    ),
                 };
             case 'type':
                 return {
diff --git a/packages/blocks/orders-summary/src/frontend/OrdersSummary.client.tsx b/packages/blocks/orders-summary/src/frontend/OrdersSummary.client.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import dayjs from 'dayjs';
+import { Check } from 'lucide-react';
 import { useLocale } from 'next-intl';
 import dynamic from 'next/dynamic';
 import React, { useState, useTransition } from 'react';
@@ -118,7 +119,11 @@ export const OrdersSummaryPure: React.FC<Readonly<OrdersSummaryPureProps>> = ({
                                     onValueChange={handleFilter}
                                 >
                                     {component.ranges.map((range) => (
-                                        <ToggleGroupItem key={range.value} value={`${range.value}-${range.type}`}>
+                                        <ToggleGroupItem
+                                            key={range.value}
+                                            value={`${range.value}-${range.type}`}
+                                            activeIcon={<Check className="h-4 w-4" />}
+                                        >
                                             {range.label}
                                         </ToggleGroupItem>
                                     ))}
diff --git a/packages/blocks/ticket-details/src/frontend/TicketDetails.client.tsx b/packages/blocks/ticket-details/src/frontend/TicketDetails.client.tsx
@@ -135,7 +135,7 @@ export const TicketDetailsPure: React.FC<Readonly<TicketDetailsPureProps>> = ({
                                                     position={attachment.date}
                                                 />
 
-                                                <div className="flex items-center py-2 px-4 gap-2 border rounded-lg shadow-sm">
+                                                <div className="flex items-center py-2 px-4 gap-2 border rounded-lg shadow-sm bg-card-light">
                                                     <LinkIcon className="w-4 h-4" />
 
                                                     <div className="flex flex-col gap-1 flex-1">
diff --git a/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx b/packages/blocks/ticket-list/src/frontend/TicketList.client.tsx
@@ -70,8 +70,13 @@ export const TicketListPure: React.FC<TicketListPureProps> = ({ locale, accessTo
             case 'topic':
                 return {
                     ...column,
-                    type: 'text',
+                    type: 'custom',
                     cellClassName: 'max-w-[200px] lg:max-w-md',
+                    render: (_value: unknown, ticket: Model.Ticket) => (
+                        <Button asChild variant="link" size="none" className="truncate block text-left">
+                            <LinkComponent href={ticket.detailsUrl}>{ticket.topic.label}</LinkComponent>
+                        </Button>
+                    ),
                 };
             case 'status':
                 return {
diff --git a/packages/framework/src/modules/cms/models/header.model.ts b/packages/framework/src/modules/cms/models/header.model.ts
@@ -14,6 +14,7 @@ export class Header {
         open: string;
         close: string;
     };
+    signInLabel?: string;
     contextSwitcher!: ContextSwitcher;
     items!: (NavigationGroup | NavigationItem)[];
     userInfo?: {
diff --git a/packages/integrations/contentful-cms/src/modules/cms/mappers/blocks/cms.order-list.mapper.ts b/packages/integrations/contentful-cms/src/modules/cms/mappers/blocks/cms.order-list.mapper.ts
@@ -75,6 +75,8 @@ const MOCK_ORDER_LIST_BLOCK_EN: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Delivered', value: 'DELIVERED' },
                     { label: 'Returned', value: 'RETURNED' },
                     { label: 'Training Request', value: 'TRAINING_REQUEST' },
+                    { label: 'Requires Action', value: 'REQUIRES_ACTION' },
+                    { label: 'Archived', value: 'ARCHIVED' },
                     { label: 'Unknown', value: 'UNKNOWN' },
                 ],
             },
@@ -180,6 +182,8 @@ const MOCK_ORDER_LIST_BLOCK_DE: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Geliefert', value: 'DELIVERED' },
                     { label: 'Zurückgegeben', value: 'RETURNED' },
                     { label: 'Schulungsanfrage', value: 'TRAINING_REQUEST' },
+                    { label: 'Aktion erforderlich', value: 'REQUIRES_ACTION' },
+                    { label: 'Archiviert', value: 'ARCHIVED' },
                     { label: 'Unbekannt', value: 'UNKNOWN' },
                 ],
             },
@@ -285,6 +289,8 @@ const MOCK_ORDER_LIST_BLOCK_PL: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Dostarczone', value: 'DELIVERED' },
                     { label: 'Zwrócone', value: 'RETURNED' },
                     { label: 'Wniosek o szkolenie', value: 'TRAINING_REQUEST' },
+                    { label: 'Akcja wymagana', value: 'REQUIRES_ACTION' },
+                    { label: 'Archiwum', value: 'ARCHIVED' },
                     { label: 'Nieznany', value: 'UNKNOWN' },
                 ],
             },
diff --git a/packages/integrations/contentful-cms/src/modules/cms/mappers/blocks/cms.ticket-details.mapper.ts b/packages/integrations/contentful-cms/src/modules/cms/mappers/blocks/cms.ticket-details.mapper.ts
@@ -74,7 +74,7 @@ const MOCK_TICKET_DETAILS_BLOCK_PL: CMS.Model.TicketDetailsBlock.TicketDetailsBl
             LOW_PRIORITY: 'Niski priorytet',
         },
         status: {
-            OPEN: 'W trakcie rozpatrywania',
+            OPEN: 'W rozpatrzeniu',
             CLOSED: 'Rozwiązane',
             IN_PROGRESS: 'Nowa odpowiedź',
         },
diff --git a/packages/integrations/contentful-cms/src/modules/cms/mappers/cms.header.mapper.ts b/packages/integrations/contentful-cms/src/modules/cms/mappers/cms.header.mapper.ts
@@ -46,6 +46,7 @@ export const mapHeader = (data: GetHeaderQuery, baseURL?: string): CMS.Model.Hea
                   }
                 : undefined,
         languageSwitcherLabel: component.languageSwitcherLabel || '',
+        signInLabel: undefined, // TODO: add signInLabel field in CMS
         mobileMenuLabel: {
             open: component.openMobileMenuLabel || '',
             close: component.closeMobileMenuLabel || '',
diff --git a/packages/integrations/contentful-cms/src/modules/cms/mappers/mocks/pages/service-details.page.ts b/packages/integrations/contentful-cms/src/modules/cms/mappers/mocks/pages/service-details.page.ts
@@ -1,7 +1,7 @@
 import { Auth, CMS } from '@o2s/framework/modules';
 
 export const PAGE_SERVICE_DETAILS_EN: CMS.Model.Page.Page = {
-    id: '3',
+    id: '15',
     slug: '/services/(.+)',
     locale: 'en',
     seo: {
@@ -49,7 +49,7 @@ export const PAGE_SERVICE_DETAILS_EN: CMS.Model.Page.Page = {
 };
 
 export const PAGE_SERVICE_DETAILS_DE: CMS.Model.Page.Page = {
-    id: '3',
+    id: '15',
     slug: '/dienstleistungen/(.+)',
     locale: 'de',
     seo: {
@@ -97,7 +97,7 @@ export const PAGE_SERVICE_DETAILS_DE: CMS.Model.Page.Page = {
 };
 
 export const PAGE_SERVICE_DETAILS_PL: CMS.Model.Page.Page = {
-    id: '3',
+    id: '15',
     slug: '/uslugi/(.+)',
     locale: 'pl',
     seo: {
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.order-list.mapper.ts b/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.order-list.mapper.ts
@@ -75,6 +75,8 @@ const MOCK_ORDER_LIST_BLOCK_EN: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Delivered', value: 'DELIVERED' },
                     { label: 'Returned', value: 'RETURNED' },
                     { label: 'Training Request', value: 'TRAINING_REQUEST' },
+                    { label: 'Requires Action', value: 'REQUIRES_ACTION' },
+                    { label: 'Archived', value: 'ARCHIVED' },
                     { label: 'Unknown', value: 'UNKNOWN' },
                 ],
             },
@@ -190,6 +192,8 @@ const MOCK_ORDER_LIST_BLOCK_DE: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Geliefert', value: 'DELIVERED' },
                     { label: 'Zurückgegeben', value: 'RETURNED' },
                     { label: 'Schulungsanfrage', value: 'TRAINING_REQUEST' },
+                    { label: 'Aktion erforderlich', value: 'REQUIRES_ACTION' },
+                    { label: 'Archiviert', value: 'ARCHIVED' },
                     { label: 'Unbekannt', value: 'UNKNOWN' },
                 ],
             },
@@ -305,6 +309,8 @@ const MOCK_ORDER_LIST_BLOCK_PL: CMS.Model.OrderListBlock.OrderListBlock = {
                     { label: 'Dostarczone', value: 'DELIVERED' },
                     { label: 'Zwrócone', value: 'RETURNED' },
                     { label: 'Wniosek o szkolenie', value: 'TRAINING_REQUEST' },
+                    { label: 'Akcja wymagana', value: 'REQUIRES_ACTION' },
+                    { label: 'Archiwum', value: 'ARCHIVED' },
                     { label: 'Nieznany', value: 'UNKNOWN' },
                 ],
             },
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.ticket-details.mapper.ts b/packages/integrations/mocked/src/modules/cms/mappers/blocks/cms.ticket-details.mapper.ts
@@ -74,7 +74,7 @@ const MOCK_TICKET_DETAILS_BLOCK_PL: CMS.Model.TicketDetailsBlock.TicketDetailsBl
             LOW_PRIORITY: 'Niski priorytet',
         },
         status: {
-            OPEN: 'W trakcie rozpatrywania',
+            OPEN: 'W rozpatrzeniu',
             CLOSED: 'Rozwiązane',
             IN_PROGRESS: 'Nowa odpowiedź',
         },
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/cms.header.mapper.ts b/packages/integrations/mocked/src/modules/cms/mappers/cms.header.mapper.ts
@@ -14,6 +14,7 @@ const MOCK_HEADER_LOGON_EN: CMS.Model.Header.Header = {
         open: 'Open menu',
         close: 'Close Menu',
     },
+    signInLabel: 'Sign in',
     userInfo: {
         url: '/user-account',
         label: 'User Profile',
@@ -96,6 +97,7 @@ const MOCK_HEADER_LOGON_DE: CMS.Model.Header.Header = {
         open: 'Menü öffnen',
         close: 'Menü schließen',
     },
+    signInLabel: 'Anmelden',
     userInfo: {
         url: '/user-account',
         label: 'Benutzerprofil',
@@ -178,6 +180,7 @@ const MOCK_HEADER_LOGON_PL: CMS.Model.Header.Header = {
         open: 'Otwórz menu',
         close: 'Zamknij menu',
     },
+    signInLabel: 'Zaloguj się',
     userInfo: {
         url: '/konto-uzytkownika',
         label: 'Profil użytkownika',
diff --git a/packages/integrations/mocked/src/modules/cms/mappers/mocks/pages/service-details.page.ts b/packages/integrations/mocked/src/modules/cms/mappers/mocks/pages/service-details.page.ts
diff --git a/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.header.mapper.ts b/packages/integrations/strapi-cms/src/modules/cms/mappers/cms.header.mapper.ts
diff --git a/packages/ui/src/components/Filters/Filters.tsx b/packages/ui/src/components/Filters/Filters.tsx
diff --git a/packages/ui/src/elements/toggle-group.tsx b/packages/ui/src/elements/toggle-group.tsx
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css

Original file line number	Diff line number	Diff line change
`@@ -9,4 +9,6 @@ export interface DesktopNavigationProps {`
`9`	`9`	`notificationSlot?: ReactNode;`
`10`	`10`	`userSlot?: ReactNode;`
`11`	`11`	`items: CMS.Model.Header.Header['items'];`
	`12`	`+ signInLabel?: CMS.Model.Header.Header['signInLabel'];`
	`13`	`+ shouldIncludeSignInButton?: boolean;`
`12`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -8,4 +8,5 @@ export interface HeaderProps {`
`8`	`8`	`alternativeUrls?: {`
`9`	`9`	`[key: string]: string;`
`10`	`10`	`};`
	`11`	`+ shouldIncludeSignInButton?: boolean;`
`11`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,4 +11,6 @@ export interface MobileNavigationProps {`
`11`	`11`	`items: CMS.Model.Header.Header['items'];`
`12`	`12`	`title?: CMS.Model.Header.Header['title'];`
`13`	`13`	`mobileMenuLabel: CMS.Model.Header.Header['mobileMenuLabel'];`
	`14`	`+ signInLabel?: CMS.Model.Header.Header['signInLabel'];`
	`15`	`+ shouldIncludeSignInButton?: boolean;`
`14`	`16`	`}`