Skip to content

Commit 52b3e0a

Browse files
tomaszpaciortomaszpacior
authored
Feature/add tooltip coming soon to mocked buttons (#57)
* feat: implement services in api-harmonization and mocked integration * feat: add products module * feat: implement ServiceList frontend component * feat: implement services page * feat: services - code review fixes * feat: implement service details page * feat: add tooltip coming soon to mocked buttons * feat: update npm packages
1 parent 3da4e3e commit 52b3e0a

File tree

20 files changed

+234
-81
lines changed

20 files changed

+234
-81
lines changed

‎.changeset/warm-toys-kneel.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@o2s/integrations.strapi-cms': minor
3+
'@o2s/integrations.mocked': minor
4+
'@o2s/api-harmonization': minor
5+
'@o2s/framework': minor
6+
'@o2s/frontend': minor
7+
'@o2s/ui': minor
8+
---
9+
10+
add tooltips to mocked buttons

‎apps/api-harmonization/src/blocks/faq/faq.model.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,5 @@ export class FaqBlock extends Block.Block {
66
title!: CMS.Model.FaqBlock.FaqBlock['title'];
77
subtitle!: CMS.Model.FaqBlock.FaqBlock['subtitle'];
88
items!: CMS.Model.FaqBlock.FaqBlock['items'];
9-
banner?: CMS.Model.FaqBlock.FaqBoxWithButtons;
9+
banner?: CMS.Model.FaqBlock.FaqBoxWithButton;
1010
}

‎apps/frontend/src/app/[locale]/layout.tsx

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import { SessionProvider } from 'next-auth/react';
2-
import { setRequestLocale } from 'next-intl/server';
2+
import { NextIntlClientProvider } from 'next-intl';
3+
import { getMessages, setRequestLocale } from 'next-intl/server';
34
import { Inter } from 'next/font/google';
45
import { headers } from 'next/headers';
56
import { notFound } from 'next/navigation';
67
import React from 'react';
78

9+
import { TooltipProvider } from '@o2s/ui/components/tooltip';
10+
811
import { sdk } from '@/api/sdk';
912

1013
import { auth } from '@/auth';
@@ -50,20 +53,26 @@ export default async function RootLayout({ children, params }: Props) {
5053

5154
setRequestLocale(locale);
5255

56+
const messages = await getMessages();
57+
5358
return (
5459
<html lang={locale} className={inter.className}>
5560
<body>
5661
{/*@see https://github.com/nextauthjs/next-auth/issues/9504#issuecomment-2516665386*/}
5762
<SessionProvider key={session?.user?.id} session={session} refetchOnWindowFocus={false}>
58-
<GlobalProvider config={init} locale={locale}>
59-
<div className="flex flex-col min-h-dvh">
60-
<Header headerData={init.common.header} />
61-
62-
<div className="flex flex-col grow">{children}</div>
63-
64-
<Footer data={init.common.footer} />
65-
</div>
66-
</GlobalProvider>
63+
<NextIntlClientProvider messages={messages}>
64+
<GlobalProvider config={init} locale={locale}>
65+
<TooltipProvider>
66+
<div className="flex flex-col min-h-dvh">
67+
<Header headerData={init.common.header} />
68+
69+
<div className="flex flex-col grow">{children}</div>
70+
71+
<Footer data={init.common.footer} />
72+
</div>
73+
</TooltipProvider>
74+
</GlobalProvider>
75+
</NextIntlClientProvider>
6776
</SessionProvider>
6877
</body>
6978
</html>

‎apps/frontend/src/blocks/Faq/Faq.client.tsx

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
1-
import React from 'react';
1+
'use client';
2+
3+
import { useTranslations } from 'next-intl';
4+
import React, { useState } from 'react';
25

36
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@o2s/ui/components/accordion';
47
import { Button } from '@o2s/ui/components/button';
8+
import { TooltipContent, TooltipTrigger } from '@o2s/ui/components/tooltip';
9+
import { Tooltip } from '@o2s/ui/components/tooltip';
510
import { Typography } from '@o2s/ui/components/typography';
611

712
import { Container } from '@/components/Container/Container';
@@ -12,6 +17,9 @@ import { FaqPureProps } from './Faq.types';
1217
export const FaqPure: React.FC<FaqPureProps> = ({ ...component }) => {
1318
const { title, subtitle, items, banner } = component;
1419

20+
const t = useTranslations();
21+
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
22+
1523
return (
1624
<Container variant="narrow">
1725
<div className="w-full flex flex-col gap-6">
@@ -50,7 +58,18 @@ export const FaqPure: React.FC<FaqPureProps> = ({ ...component }) => {
5058
</Typography>
5159
<RichText content={banner?.description} className="text-muted-foreground" />
5260
</div>
53-
{banner?.buttons?.map((button) => <Button key={button.label}>{button.label}</Button>)}
61+
{banner?.button && (
62+
<Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
63+
<TooltipTrigger asChild>
64+
<Button key={banner?.button?.label} onClick={() => setIsTooltipOpen(true)}>
65+
{banner?.button?.label}
66+
</Button>
67+
</TooltipTrigger>
68+
<TooltipContent>
69+
<p>{t('general.comingSoon')}</p>
70+
</TooltipContent>
71+
</Tooltip>
72+
)}
5473
</div>
5574
)}
5675
</div>

‎apps/frontend/src/blocks/PaymentsSummary/PaymentCard/PaymentCard.tsx

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
import { ArrowUpRight, CircleAlert, CreditCard } from 'lucide-react';
2+
import { useTranslations } from 'next-intl';
3+
import { useState } from 'react';
24
import reactStringReplace from 'react-string-replace';
35

46
import { Models } from '@o2s/framework/modules';
57

68
import { Button } from '@o2s/ui/components/button';
79
import { Card } from '@o2s/ui/components/card';
10+
import { Tooltip } from '@o2s/ui/components/tooltip';
11+
import { TooltipContent } from '@o2s/ui/components/tooltip';
12+
import { TooltipTrigger } from '@o2s/ui/components/tooltip';
813
import { Typography } from '@o2s/ui/components/typography';
914
import { cn } from '@o2s/ui/lib/utils';
1015

@@ -15,6 +20,9 @@ import { PaymentCardProps } from './PaymentCard.types';
1520
export const PaymentCard: React.FC<PaymentCardProps> = ({ data, variant = 'default' }) => {
1621
const { title, amount, message, noPaymentsMessage, buttonLabel, overdueDays, currency } = data;
1722

23+
const t = useTranslations();
24+
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
25+
1826
const activeState = amount.value > 0;
1927

2028
const destructiveIconMap = activeState ? <CircleAlert className="h-6 w-6 text-destructive" /> : null;
@@ -61,15 +69,22 @@ export const PaymentCard: React.FC<PaymentCardProps> = ({ data, variant = 'defau
6169
)}
6270
</div>
6371
{activeState && buttonLabel && (
64-
<Button
65-
variant={variant === 'destructive' ? 'destructive' : 'secondary'}
66-
size="sm"
67-
onClick={() => console.log('clicked')}
68-
className="flex items-center gap-2"
69-
>
70-
<ArrowUpRight className="h-4 w-4" />
71-
{buttonLabel}
72-
</Button>
72+
<Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
73+
<TooltipTrigger asChild>
74+
<Button
75+
variant={variant === 'destructive' ? 'destructive' : 'secondary'}
76+
size="sm"
77+
onClick={() => setIsTooltipOpen(true)}
78+
className="flex items-center gap-2"
79+
>
80+
<ArrowUpRight className="h-4 w-4" />
81+
{buttonLabel}
82+
</Button>
83+
</TooltipTrigger>
84+
<TooltipContent>
85+
<p>{t('general.comingSoon')}</p>
86+
</TooltipContent>
87+
</Tooltip>
7388
)}
7489
</div>
7590
</div>

‎apps/frontend/src/blocks/ServiceDetails/ServiceDetails.client.tsx

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
'use client';
22

33
import { Repeat2, Settings } from 'lucide-react';
4-
import React from 'react';
4+
import { useTranslations } from 'next-intl';
5+
import React, { useState } from 'react';
56

67
import { Badge } from '@o2s/ui/components/badge';
78
import { Button } from '@o2s/ui/components/button';
89
import { Separator } from '@o2s/ui/components/separator';
910
import { TextItem } from '@o2s/ui/components/text-item';
11+
import { Tooltip, TooltipContent, TooltipTrigger } from '@o2s/ui/components/tooltip';
1012
import { Typography } from '@o2s/ui/components/typography';
1113

1214
import { statusBadgeVariants } from '@/utils/mappings/services-badge';
@@ -20,6 +22,10 @@ import { ServiceDetailsPureProps } from './ServiceDetails.types';
2022
export const ServiceDetailsPure: React.FC<ServiceDetailsPureProps> = ({ ...component }) => {
2123
const { data: service } = component;
2224

25+
const t = useTranslations();
26+
const [isSettingsTooltipOpen, setIsSettingsTooltipOpen] = useState(false);
27+
const [isRenewTooltipOpen, setIsRenewTooltipOpen] = useState(false);
28+
2329
return (
2430
<div className="w-full">
2531
<div className="flex flex-col gap-6">
@@ -39,17 +45,31 @@ export const ServiceDetailsPure: React.FC<ServiceDetailsPureProps> = ({ ...compo
3945
<Price price={service.price.value} />
4046
</Typography>
4147

42-
<Button onClick={() => console.log('settings')}>
43-
<Settings className="w-4 h-4" />
44-
{service.labels.settings}
45-
</Button>
48+
<Tooltip open={isSettingsTooltipOpen} onOpenChange={setIsSettingsTooltipOpen}>
49+
<TooltipTrigger asChild>
50+
<Button onClick={() => setIsSettingsTooltipOpen(true)}>
51+
<Settings className="w-4 h-4" />
52+
{service.labels.settings}
53+
</Button>
54+
</TooltipTrigger>
55+
<TooltipContent>
56+
<p>{t('general.comingSoon')}</p>
57+
</TooltipContent>
58+
</Tooltip>
4659

4760
{service.status.value === 'INACTIVE' ||
4861
(service.status.value === 'EXPIRED' && (
49-
<Button variant="destructive" onClick={() => console.log('renew')}>
50-
<Repeat2 className="w-4 h-4" />
51-
{service.labels.renew}
52-
</Button>
62+
<Tooltip open={isRenewTooltipOpen} onOpenChange={setIsRenewTooltipOpen}>
63+
<TooltipTrigger asChild>
64+
<Button variant="destructive" onClick={() => setIsRenewTooltipOpen(true)}>
65+
<Repeat2 className="w-4 h-4" />
66+
{service.labels.renew}
67+
</Button>
68+
</TooltipTrigger>
69+
<TooltipContent>
70+
<p>{t('general.comingSoon')}</p>
71+
</TooltipContent>
72+
</Tooltip>
5373
))}
5474
</div>
5575
</div>

‎apps/frontend/src/blocks/UserAccount/UserAccount.client.tsx

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
'use client';
22

3-
import React from 'react';
3+
import { useTranslations } from 'next-intl';
4+
import React, { useState } from 'react';
45

56
import { Button } from '@o2s/ui/components/button';
67
import { Separator } from '@o2s/ui/components/separator';
78
import { TextItem } from '@o2s/ui/components/text-item';
9+
import { Tooltip, TooltipContent, TooltipTrigger } from '@o2s/ui/components/tooltip';
810
import { Typography } from '@o2s/ui/components/typography';
911

1012
import { Container } from '@/components/Container/Container';
@@ -15,6 +17,9 @@ import { UserAccountPureProps } from './UserAccount.types';
1517
export const UserAccountPure: React.FC<UserAccountPureProps> = (component) => {
1618
const { fields, labels, basicInformationTitle, basicInformationDescription, user, title } = component;
1719

20+
const t = useTranslations();
21+
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
22+
1823
return (
1924
<div className="w-full">
2025
<div className="flex flex-col gap-6">
@@ -42,9 +47,20 @@ export const UserAccountPure: React.FC<UserAccountPureProps> = (component) => {
4247
{basicInformationDescription}
4348
</Typography>
4449
</div>
45-
<Button variant="outline" className="w-full md:w-fit" onClick={() => {}}>
46-
{labels.edit}
47-
</Button>
50+
<Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
51+
<TooltipTrigger asChild>
52+
<Button
53+
variant="outline"
54+
className="w-full md:w-fit"
55+
onClick={() => setIsTooltipOpen(true)}
56+
>
57+
{labels.edit}
58+
</Button>
59+
</TooltipTrigger>
60+
<TooltipContent>
61+
<p>{t('general.comingSoon')}</p>
62+
</TooltipContent>
63+
</Tooltip>
4864
</div>
4965

5066
<Separator className="mt-6" />

‎apps/frontend/src/containers/Header/ContextSwitcher/ContextSwitcher.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import { Building2, ChevronDown } from 'lucide-react';
2+
import { useTranslations } from 'next-intl';
23
import { useState } from 'react';
34

45
import { Alert } from '@o2s/ui/components/alert';
56
import { Button } from '@o2s/ui/components/button';
67
import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@o2s/ui/components/sheet';
8+
import { TooltipContent } from '@o2s/ui/components/tooltip';
9+
import { TooltipTrigger } from '@o2s/ui/components/tooltip';
10+
import { Tooltip } from '@o2s/ui/components/tooltip';
711
import { Typography } from '@o2s/ui/components/typography';
812

913
import { ContextSwitcherProps } from './ContextSwitcher.types';
1014

1115
export const ContextSwitcher = ({ context }: ContextSwitcherProps) => {
16+
const t = useTranslations();
17+
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
1218
const [isCompanyMenuOpen, setIsCompanyMenuOpen] = useState(false);
1319

1420
if (!context) {
@@ -46,9 +52,16 @@ export const ContextSwitcher = ({ context }: ContextSwitcherProps) => {
4652
<Alert>Option to switch user organizations is coming soon!</Alert>
4753

4854
<SheetFooter>
49-
<Button variant="default" onClick={() => console.log('apply')}>
50-
{context.apply}
51-
</Button>
55+
<Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen} defaultOpen={false}>
56+
<TooltipTrigger asChild>
57+
<Button variant="default" onClick={() => setIsTooltipOpen(true)}>
58+
{context.apply}
59+
</Button>
60+
</TooltipTrigger>
61+
<TooltipContent>
62+
<p>{t('general.comingSoon')}</p>
63+
</TooltipContent>
64+
</Tooltip>
5265
</SheetFooter>
5366
</div>
5467
</SheetContent>

‎apps/frontend/src/i18n/messages/de.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"general": {
3+
"comingSoon": "Diese Funktion ist in Kürze verfügbar!"
4+
}
5+
}

‎apps/frontend/src/i18n/messages/en.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"general": {
3+
"comingSoon": "This feature is coming soon!"
4+
}
5+
}

0 commit comments

Comments
 (0)