Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 306bf1e

Browse files
tomer-shvadrontomer-shvadron
authoredMar 2, 2025··
feat(case-creation): enhance button functionality with tooltip support (#3122)
* feat(case-creation): enhance button functionality with tooltip support - Update button state management with demo flag - Integrate tooltips to inform users on demo account limitations - Refactor withCaseCreation to use arrow function syntax for consistency * refactor(case-creation): improve demo status handling - Update demo status determination to include demo account check - Refactor report data processing to simplify mapping logic
1 parent 6524497 commit 306bf1e

File tree

7 files changed

+86
-46
lines changed

7 files changed

+86
-46
lines changed
 

‎apps/backoffice-v2/src/common/components/atoms/Button/Button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { cva, VariantProps } from 'class-variance-authority';
44
import { ctw } from '../../../utils/ctw/ctw';
55

66
export const buttonVariants = cva(
7-
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:text-primary-foreground disabled:bg-slate-400 disabled:opacity-50 disabled:pointer-events-none disabled:shadow-none ring-offset-background',
7+
'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-30 disabled:pointer-events-none disabled:shadow-none ring-offset-background',
88
{
99
variants: {
1010
variant: {

‎apps/backoffice-v2/src/pages/Entities/components/CaseCreation/CaseCreation.tsx

+30-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
1-
import { Button } from '@/common/components/atoms/Button/Button';
2-
import { SheetContent, SheetTrigger } from '@/common/components/atoms/Sheet';
3-
import { Sheet } from '@/common/components/atoms/Sheet/Sheet';
4-
import { CaseCreationForm } from '@/pages/Entities/components/CaseCreation/components/CaseCreationForm';
5-
import { withCaseCreation } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/hocs/withCaseCreation';
6-
import { useCaseCreationContext } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/hooks/useCaseCreationContext';
7-
import { useCaseCreationWorkflowDefinition } from '@/pages/Entities/components/CaseCreation/hooks/useCaseCreationWorkflowDefinition';
81
import { Plus } from 'lucide-react';
92
import { valueOrNA } from '@ballerine/common';
3+
104
import { ctw } from '@/common/utils/ctw/ctw';
11-
import { titleCase } from 'string-ts';
5+
import { Sheet } from '@/common/components/atoms/Sheet/Sheet';
6+
import { Button } from '@/common/components/atoms/Button/Button';
7+
import { Tooltip } from '@/common/components/atoms/Tooltip/Tooltip';
8+
import { SheetContent, SheetTrigger } from '@/common/components/atoms/Sheet';
129
import { ScrollArea } from '@/common/components/molecules/ScrollArea/ScrollArea';
10+
import { TooltipContent } from '@/common/components/atoms/Tooltip/Tooltip.Content';
11+
import { TooltipTrigger } from '@/common/components/atoms/Tooltip/Tooltip.Trigger';
12+
import { CaseCreationForm } from '@/pages/Entities/components/CaseCreation/components/CaseCreationForm';
13+
import { withCaseCreation } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/hocs/withCaseCreation';
14+
import { useCaseCreationLogic } from '@/pages/Entities/components/CaseCreation/hooks/useCaseCreationLogic/useCaseCreationLogic';
1315

1416
export const CaseCreation = withCaseCreation(() => {
15-
const { workflowDefinition, isLoading, error } = useCaseCreationWorkflowDefinition();
16-
const { isOpen, setIsOpen: setOpen } = useCaseCreationContext();
17-
const workflowDefinitionName =
18-
workflowDefinition?.displayName || titleCase(workflowDefinition?.name ?? '');
17+
const { isDemo, isOpen, setOpen, error, workflowDefinition, workflowDefinitionName, isLoading } =
18+
useCaseCreationLogic();
1919

2020
return (
2121
<Sheet open={isOpen} onOpenChange={setOpen}>
2222
<SheetTrigger asChild>
23-
<Button
24-
variant="outline"
25-
className="flex w-full items-center justify-start gap-2 font-semibold"
26-
onClick={() => setOpen(true)}
27-
>
28-
<Plus />
29-
<span>Add case manually</span>
30-
</Button>
23+
<Tooltip delayDuration={100}>
24+
<TooltipTrigger asChild>
25+
<Button
26+
variant="outline"
27+
disabled={isDemo}
28+
className="flex w-full items-center justify-start gap-2 font-semibold disabled:!pointer-events-auto"
29+
onClick={() => setOpen(true)}
30+
>
31+
<Plus />
32+
<span>Add case manually</span>
33+
</Button>
34+
</TooltipTrigger>
35+
<TooltipContent align="center" side="top" hidden={!isDemo}>
36+
This feature is not available for trial accounts.
37+
<br />
38+
Talk to us to get full access.
39+
</TooltipContent>
40+
</Tooltip>
3141
</SheetTrigger>
3242
<SheetContent
3343
side="right"

‎apps/backoffice-v2/src/pages/Entities/components/CaseCreation/context/case-creation-context/hocs/withCaseCreation/withCaseCreation.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { CaseCreationContextProvider } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/Provider';
22

3-
export function withCaseCreation<TComponentProps extends object>(
3+
export const withCaseCreation = <TComponentProps extends object>(
44
Component: React.ComponentType<TComponentProps>,
5-
): React.ComponentType<TComponentProps> {
6-
function Wrapper(props: TComponentProps) {
5+
): React.ComponentType<TComponentProps> => {
6+
const Wrapper = (props: TComponentProps) => {
77
return (
88
<CaseCreationContextProvider>
99
<Component {...props} />
1010
</CaseCreationContextProvider>
1111
);
12-
}
12+
};
1313

1414
Wrapper.displayName = `withCaseCreation(${Component.displayName})`;
1515

1616
return Wrapper;
17-
}
17+
};

‎apps/backoffice-v2/src/pages/Entities/components/CaseCreation/hooks/useCaseCreationLogic/useCaseCreationLogic.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { titleCase } from 'string-ts';
2+
3+
import { useCustomerQuery } from '@/domains/customer/hooks/queries/useCustomerQuery/useCustomerQuery';
4+
import { useCaseCreationWorkflowDefinition } from '@/pages/Entities/components/CaseCreation/hooks/useCaseCreationWorkflowDefinition';
5+
import { useCaseCreationContext } from '@/pages/Entities/components/CaseCreation/context/case-creation-context/hooks/useCaseCreationContext';
6+
7+
export const useCaseCreationLogic = () => {
8+
const { data: customer } = useCustomerQuery();
9+
const { isOpen, setIsOpen: setOpen } = useCaseCreationContext();
10+
const { workflowDefinition, isLoading, error } = useCaseCreationWorkflowDefinition();
11+
12+
return {
13+
error,
14+
isOpen,
15+
setOpen,
16+
isLoading,
17+
workflowDefinition,
18+
isDemo: customer?.config?.isDemo || customer?.config?.isDemoAccount,
19+
workflowDefinitionName:
20+
workflowDefinition?.displayName || titleCase(workflowDefinition?.name ?? ''),
21+
};
22+
};

‎apps/backoffice-v2/src/pages/Entity/components/Case/components/CaseOptions/CaseOptions.tsx

+22-9
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ import { DropdownMenuItem } from '@/common/components/molecules/DropdownMenu/Dro
55
import { DropdownMenuTrigger } from '@/common/components/molecules/DropdownMenu/DropdownMenu.Trigger';
66
import { useCaseOptionsLogic } from '@/pages/Entity/components/Case/components/CaseOptions/hooks/useCaseOptionsLogic/useCaseOptionsLogic';
77
import { FileText, Link, MoreVertical } from 'lucide-react';
8+
import { TooltipTrigger } from '@/common/components/atoms/Tooltip/Tooltip.Trigger';
9+
import { TooltipContent } from '@/common/components/atoms/Tooltip/Tooltip.Content';
10+
import { Tooltip } from '@/common/components/atoms/Tooltip/Tooltip';
811

912
export const CaseOptions = () => {
1013
const {
14+
isDemo,
1115
isGeneratingPDF,
1216
generateAndOpenPDFInNewTab,
1317
isCopyingCollectionFlowLink,
@@ -23,15 +27,24 @@ export const CaseOptions = () => {
2327
</DropdownMenuTrigger>
2428
<DropdownMenuContent align="end">
2529
<DropdownMenuItem className="w-full px-8 py-1" asChild>
26-
<Button
27-
onClick={() => generateAndOpenPDFInNewTab()}
28-
// disabled={isGeneratingPDF}
29-
disabled
30-
variant={'ghost'}
31-
className="justify-start"
32-
>
33-
<FileText size={18} className="mr-2" /> Open PDF Certificate
34-
</Button>
30+
<Tooltip delayDuration={100}>
31+
<TooltipTrigger asChild>
32+
<Button
33+
onClick={() => generateAndOpenPDFInNewTab()}
34+
// disabled={isGeneratingPDF}
35+
disabled
36+
variant={'ghost'}
37+
className="w-full justify-start px-8 py-1 disabled:!pointer-events-auto"
38+
>
39+
<FileText size={18} className="mr-2" /> Open PDF Certificate
40+
</Button>
41+
</TooltipTrigger>
42+
<TooltipContent align="center" side="top" hidden={!isDemo}>
43+
This feature is not available for trial accounts.
44+
<br />
45+
Talk to us to get full access.
46+
</TooltipContent>
47+
</Tooltip>
3548
</DropdownMenuItem>
3649
<DropdownMenuItem
3750
className={`w-full px-8 py-1 ${isCopyingCollectionFlowLink ? 'hidden' : ''}`}

‎apps/backoffice-v2/src/pages/Entity/components/Case/components/CaseOptions/hooks/useCaseOptionsLogic/useCaseOptionsLogic.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -22,5 +22,6 @@ export const useCaseOptionsLogic = () => {
2222
generateAndOpenPDFInNewTab,
2323
isCopyingCollectionFlowLink,
2424
copyCollectionFlowLink,
25+
isDemo: customer?.config?.isDemo || customer?.config?.isDemoAccount,
2526
};
2627
};

‎services/workflows-service/src/business-report/business-report.controller.external.ts

+5-11
Original file line numberDiff line numberDiff line change
@@ -152,20 +152,14 @@ export class BusinessReportControllerExternal {
152152
...(search ? { searchQuery: search } : {}),
153153
});
154154

155-
const reports = await Promise.all(
156-
data.map(async report => {
157-
return {
158-
...report,
159-
monitoringStatus:
160-
report.customer.ongoingMonitoringEnabled && !report.business.unsubscribedMonitoringAt,
161-
};
162-
}),
163-
);
164-
165155
return {
166156
totalPages,
167157
totalItems,
168-
data: reports,
158+
data: data.map(report => ({
159+
...report,
160+
monitoringStatus:
161+
report.customer.ongoingMonitoringEnabled && !report.business.unsubscribedMonitoringAt,
162+
})),
169163
};
170164
}
171165

0 commit comments

Comments
 (0)
Please sign in to comment.