@greatapps/common 1.1.401 → 1.1.403
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/modals/PaidPlanRequiredModal.mjs +1 -1
- package/dist/components/modals/PaidPlanRequiredModal.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +2 -16
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +33 -39
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/modules/plans/hooks/use-has-plan-addon.hook.mjs +2 -4
- package/dist/modules/plans/hooks/use-has-plan-addon.hook.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +34 -31
|
@@ -20,7 +20,7 @@ function PaidPlanRequiredModal() {
|
|
|
20
20
|
const description = data.description ?? "Para acessar este recurso, fa\xE7a upgrade para um plano pago";
|
|
21
21
|
const handleKnowPlans = () => {
|
|
22
22
|
closeModal();
|
|
23
|
-
window.open(`${accountsUrl}/
|
|
23
|
+
window.open(`${accountsUrl}/subscriptions?tab=plans`, "_blank");
|
|
24
24
|
};
|
|
25
25
|
return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: () => closeModal(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]", children: [
|
|
26
26
|
/* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 text-left p-5", children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modals/PaidPlanRequiredModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { useWhitelabelUrls } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport type { ModalData } from '../../store/useModalManager';\n\nexport default function PaidPlanRequiredModal() {\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'paidPlanRequiredModal';\n const data = modalData as ModalData & { title?: string; description?: string };\n const { accountsUrl } = useWhitelabelUrls();\n\n const title = (data.title as string) ?? \"Recurso disponível em planos pagos\";\n const description = (data.description as string) ?? \"Para acessar este recurso, faça upgrade para um plano pago\";\n\n const handleKnowPlans = () => {\n closeModal();\n window.open(`${accountsUrl}/
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/PaidPlanRequiredModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { useWhitelabelUrls } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport type { ModalData } from '../../store/useModalManager';\n\nexport default function PaidPlanRequiredModal() {\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'paidPlanRequiredModal';\n const data = modalData as ModalData & { title?: string; description?: string };\n const { accountsUrl } = useWhitelabelUrls();\n\n const title = (data.title as string) ?? \"Recurso disponível em planos pagos\";\n const description = (data.description as string) ?? \"Para acessar este recurso, faça upgrade para um plano pago\";\n\n const handleKnowPlans = () => {\n closeModal();\n window.open(`${accountsUrl}/subscriptions?tab=plans`, '_blank');\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconLock size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {title}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-600\">\n {description}\n </DialogDescription>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={handleKnowPlans}\n >\n Conhecer planos\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":";AAkCwB,cAEJ,YAFI;AAhCxB,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAGjB,SAAR,wBAAyC;AAC5C,QAAM,EAAE,aAAa,WAAW,WAAW,IAAI,gBAAgB;AAC/D,QAAM,SAAS,gBAAgB;AAC/B,QAAM,OAAO;AACb,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAE1C,QAAM,QAAS,KAAK,SAAoB;AACxC,QAAM,cAAe,KAAK,eAA0B;AAEpD,QAAM,kBAAkB,MAAM;AAC1B,eAAW;AACX,WAAO,KAAK,GAAG,WAAW,4BAA4B,QAAQ;AAAA,EAClE;AAEA,SACI,oBAAC,UAAO,MAAM,QAAQ,cAAc,MAAM,WAAW,GACjD,+BAAC,iBAAc,WAAU,4DACrB;AAAA,yBAAC,gBAAa,WAAU,uBACpB;AAAA,0BAAC,SAAI,WAAU,oEACX,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAClD;AAAA,MACA,qBAAC,SAAI,WAAU,uBACX;AAAA,4BAAC,eAAY,WAAU,2CAClB,iBACL;AAAA,QACA,oBAAC,qBAAkB,WAAU,yCACxB,uBACL;AAAA,SACJ;AAAA,OACJ;AAAA,IACA,oBAAC,SAAI,WAAU,wDACX;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAS;AAAA,QACZ;AAAA;AAAA,IAED,GACJ;AAAA,KACJ,GACJ;AAER;","names":[]}
|
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
PopoverTrigger,
|
|
14
14
|
UserAvatar
|
|
15
15
|
} from "../../index";
|
|
16
|
-
import { IconCheck, IconChevronDown, IconFolderOpen
|
|
16
|
+
import { IconCheck, IconChevronDown, IconFolderOpen } from "@tabler/icons-react";
|
|
17
17
|
function ProjectItemSkeleton() {
|
|
18
18
|
return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 gap-2", children: [
|
|
19
19
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
|
|
@@ -67,21 +67,7 @@ function ProjectSelectorPopover({
|
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
69
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
|
|
70
|
-
/* @__PURE__ */
|
|
71
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }),
|
|
72
|
-
(onAddProject || onManageProjects) && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5", children: onAddProject && /* @__PURE__ */ jsxs(
|
|
73
|
-
Button,
|
|
74
|
-
{
|
|
75
|
-
variant: "secondary",
|
|
76
|
-
className: "h-8! paragraph-small-semibold text-gray-950",
|
|
77
|
-
onClick: onAddProject,
|
|
78
|
-
children: [
|
|
79
|
-
/* @__PURE__ */ jsx(IconPlus, { size: 16 }),
|
|
80
|
-
"Adicionar"
|
|
81
|
-
]
|
|
82
|
-
}
|
|
83
|
-
) })
|
|
84
|
-
] }),
|
|
70
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }) }),
|
|
85
71
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
|
|
86
72
|
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
|
|
87
73
|
/* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport {\n Button,\n Command,\n CommandEmpty,\n CommandInput,\n CommandItem,\n CommandList,\n Popover,\n PopoverContent,\n PopoverTrigger,\n UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n open: boolean;\n setOpen: Dispatch<SetStateAction<boolean>>;\n titleRef?: RefObject<HTMLSpanElement | null>;\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center justify-between px-2 py-2 gap-2\">\n <div className=\"flex items-center gap-2 flex-1\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n <div className=\"skeleton size-4 rounded-full shrink-0\" />\n </div>\n );\n}\n\nexport function ProjectSelectorPopover({\n open,\n setOpen,\n titleRef,\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onAddProject,\n onManageProjects,\n children,\n}: ProjectSelectorPopoverProps) {\n const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }, [hasNextPage, isFetchingNextPage, onLoadMore]);\n\n return (\n <Popover open={open} onOpenChange={setOpen}>\n <PopoverTrigger asChild>\n {children ?? (\n <button className=\"cursor-pointer\">\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </button>\n )}\n </PopoverTrigger>\n <PopoverContent\n className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n align=\"start\"\n sideOffset={8}\n onOpenAutoFocus={(e: Event) => e.preventDefault()}\n onInteractOutside={(event: Event) => {\n if (titleRef?.current?.contains(event.target as Node)) {\n event.preventDefault();\n }\n }}\n >\n <div className=\"flex flex-col p-3 gap-2\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={handleListScroll}\n >\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : projects.length === 0 ? (\n <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n <IconFolderOpen size={28} className=\"text-gray-300\" />\n <span className=\"paragraph-small-medium text-center text-gray-500\">\n Nenhum projeto encontrado.\n <br />\n Crie um projeto para começar.\n </span>\n </div>\n ) : (\n <>\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {projects.map((project) => {\n const isSelected = selectedProject?.id === project.id;\n return (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => onSelectProject(project)}\n >\n <div className=\"flex items-center justify-between w-full cursor-pointer\">\n <div className=\"flex items-center gap-2 w-full\">\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </div>\n {isSelected && (\n <IconCheck className=\"size-4 text-gray-950\" />\n )}\n </div>\n </CommandItem>\n );\n })}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </>\n )}\n </CommandList>\n </Command>\n {onManageProjects && (\n <>\n <div className=\"border-t border-gray-200\" />\n <Button\n variant=\"ghost\"\n className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n onClick={onManageProjects}\n >\n Gerenciar projetos\n </Button>\n </>\n )}\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -6,8 +6,8 @@ import { useHasPlanAddon } from "../../../modules/plans/hooks/use-has-plan-addon
|
|
|
6
6
|
import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
|
|
7
7
|
import { useAppNavigationContext } from "../AppNavigationContext";
|
|
8
8
|
import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
|
|
9
|
-
import {
|
|
10
|
-
import { IconChevronDown
|
|
9
|
+
import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, Separator, UserAvatar } from "../../../index";
|
|
10
|
+
import { IconChevronDown } from "@tabler/icons-react";
|
|
11
11
|
function ProjectItemSkeleton() {
|
|
12
12
|
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-[8.8px]", children: [
|
|
13
13
|
/* @__PURE__ */ jsx("div", { className: "skeleton size-9 rounded-lg shrink-0" }),
|
|
@@ -38,33 +38,36 @@ function ProjectSelector({
|
|
|
38
38
|
}
|
|
39
39
|
}, [openProjectList, breakpoint, clearProjectList]);
|
|
40
40
|
if (breakpoint === "desktop" || breakpoint === "md") {
|
|
41
|
-
return /* @__PURE__ */
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-[6.5px]", children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center h-7", children: /* @__PURE__ */ jsx(
|
|
43
|
+
ProjectSelectorPopover,
|
|
44
|
+
{
|
|
45
|
+
open: isPopoverOpen,
|
|
46
|
+
setOpen: setIsPopoverOpen,
|
|
47
|
+
titleRef,
|
|
48
|
+
projects,
|
|
49
|
+
selectedProject,
|
|
50
|
+
isLoading,
|
|
51
|
+
isFetchingNextPage,
|
|
52
|
+
hasNextPage,
|
|
53
|
+
onLoadMore,
|
|
54
|
+
onSelectProject,
|
|
55
|
+
onAddProject,
|
|
56
|
+
onManageProjects,
|
|
57
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate select-none cursor-pointer", ref: titleRef, children: [
|
|
58
|
+
isLoading ? /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-32 rounded" }) : /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block", children: selectedProject?.title }),
|
|
59
|
+
/* @__PURE__ */ jsx(
|
|
60
|
+
IconChevronDown,
|
|
61
|
+
{
|
|
62
|
+
size: 20,
|
|
63
|
+
className: `transition-transform duration-200 ${isPopoverOpen ? "rotate-180 text-gray-950" : "text-gray-400"}`
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] })
|
|
67
|
+
}
|
|
68
|
+
) }),
|
|
69
|
+
/* @__PURE__ */ jsx(Separator, { className: "mt-[7.5px]" })
|
|
70
|
+
] });
|
|
68
71
|
}
|
|
69
72
|
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
|
|
70
73
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
|
|
@@ -85,16 +88,7 @@ function ProjectSelector({
|
|
|
85
88
|
}
|
|
86
89
|
) }),
|
|
87
90
|
activeSection === "projects" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400", children: [
|
|
88
|
-
/* @__PURE__ */
|
|
89
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }),
|
|
90
|
-
(onAddProject || onManageProjects) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
91
|
-
canAddProject && onAddProject && /* @__PURE__ */ jsxs(Button, { variant: "secondary", className: "h-8! paragraph-small-semibold text-gray-950", onClick: onAddProject, children: [
|
|
92
|
-
/* @__PURE__ */ jsx(IconPlus, { size: 16 }),
|
|
93
|
-
"Adicionar"
|
|
94
|
-
] }),
|
|
95
|
-
onManageProjects && /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "p-0 size-8", onClick: onManageProjects, children: /* @__PURE__ */ jsx(IconSettings, { size: 18 }) })
|
|
96
|
-
] })
|
|
97
|
-
] }),
|
|
91
|
+
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }) }),
|
|
98
92
|
/* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
|
|
99
93
|
/* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
|
|
100
94
|
/* @__PURE__ */ jsxs(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { breakpoint } = useAppNavigationContext();\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className=\"flex items-center justify-between\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={setIsPopoverOpen}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n isLoading={isLoading}\n isFetchingNextPage={isFetchingNextPage}\n hasNextPage={hasNextPage}\n onLoadMore={onLoadMore}\n onSelectProject={onSelectProject}\n onAddProject={onAddProject}\n onManageProjects={onManageProjects}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n {(onAddProject || onManageProjects) && (\n <div className=\"flex items-center gap-1.5\">\n {canAddProject && onAddProject && (\n <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\n <IconPlus size={16} />\n Adicionar\n </Button>\n )}\n {onManageProjects && (\n <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\n <IconSettings size={18} />\n </Button>\n )}\n </div>\n )}\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={(event) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }}\n >\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { ADDON_IDS } from '../../../modules/subscriptions/constants/addons.constants';\nimport { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon.hook';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, Separator, UserAvatar } from '../../../index';\nimport { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n projects: NavigationProject[];\n selectedProject: NavigationProject | null;\n isLoading?: boolean;\n isFetchingNextPage?: boolean;\n hasNextPage?: boolean;\n onLoadMore?: () => void | Promise<unknown>;\n onSelectProject: (project: NavigationProject) => void;\n onAddProject?: () => void;\n onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n return (\n <div className=\"flex items-center gap-2 p-[8.8px]\">\n <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n <div className=\"skeleton h-4 w-36 rounded\" />\n </div>\n );\n}\n\nexport function ProjectSelector({\n projects,\n selectedProject,\n isLoading,\n isFetchingNextPage,\n hasNextPage,\n onLoadMore,\n onSelectProject,\n onAddProject,\n onManageProjects,\n}: ProjectSelectorProps) {\n const { breakpoint } = useAppNavigationContext();\n const { hasAddon: canAddProject } = useHasPlanAddon(ADDON_IDS.PROJECTS);\n const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n const titleRef = useRef<HTMLDivElement>(null);\n const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n useEffect(() => {\n if (openProjectList && breakpoint === 'mobile') {\n setActiveSection('projects');\n clearProjectList();\n }\n }, [openProjectList, breakpoint, clearProjectList]);\n\n // Desktop and md: title + popover (aligned with NavBar logo + separator)\n if (breakpoint === 'desktop' || breakpoint === 'md') {\n return (\n <div className=\"flex flex-col gap-4 mt-[6.5px]\">\n <div className=\"flex items-center h-7\">\n <ProjectSelectorPopover\n open={isPopoverOpen}\n setOpen={setIsPopoverOpen}\n titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n projects={projects}\n selectedProject={selectedProject}\n isLoading={isLoading}\n isFetchingNextPage={isFetchingNextPage}\n hasNextPage={hasNextPage}\n onLoadMore={onLoadMore}\n onSelectProject={onSelectProject}\n onAddProject={onAddProject}\n onManageProjects={onManageProjects}\n >\n <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n {isLoading ? (\n <div className=\"skeleton h-4 w-32 rounded\" />\n ) : (\n <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n {selectedProject?.title}\n </span>\n )}\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n />\n </div>\n </ProjectSelectorPopover>\n </div>\n <Separator className=\"mt-[7.5px]\" />\n </div>\n );\n }\n\n // Mobile: inline collapsible accordion\n return (\n <div className=\"flex flex-col gap-2.5\">\n <div className=\"flex items-center justify-between\">\n <div\n className=\"flex items-center gap-1 cursor-pointer\"\n onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n >\n <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n <IconChevronDown\n size={20}\n className={`transition-transform duration-200 ${\n activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n }`}\n />\n </div>\n </div>\n {activeSection === 'projects' && (\n <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-semibold\">Projetos</span>\n </div>\n <Command className=\"gap-2\">\n <CommandInput placeholder=\"Busque aqui\" />\n <CommandList\n className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n onScroll={(event) => {\n if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n const target = event.currentTarget;\n const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n if (distanceToBottom <= 80) {\n onLoadMore();\n }\n }}\n >\n <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n {isLoading ? (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n ) : (\n projects.map((project) => (\n <CommandItem\n key={project.id}\n value={`${project.title}-${project.id}`}\n keywords={[project.title]}\n className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n >\n <UserAvatar\n photo={project.photo}\n name={project.title}\n size={36}\n />\n {project.title}\n </CommandItem>\n ))\n )}\n {isFetchingNextPage && (\n <>\n <ProjectItemSkeleton />\n <ProjectItemSkeleton />\n </>\n )}\n </CommandList>\n </Command>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useActiveSubscription } from "../../subscriptions/hooks/find-active-subscription.hook";
|
|
3
|
-
import { usePlanById } from "./use-plan-by-id.hook";
|
|
4
3
|
function useHasPlanAddon(addonId) {
|
|
5
4
|
const { data: subscriptionData, isLoading: isLoadingSubscription } = useActiveSubscription();
|
|
6
5
|
const activeSubscription = subscriptionData?.data?.[0] ?? null;
|
|
7
|
-
const
|
|
8
|
-
const
|
|
9
|
-
const isLoading = isLoadingSubscription || isLoadingPlan;
|
|
6
|
+
const hasAddon = !!activeSubscription?.items?.find((i) => i.id_addon === addonId);
|
|
7
|
+
const isLoading = isLoadingSubscription;
|
|
10
8
|
return { hasAddon, isLoading };
|
|
11
9
|
}
|
|
12
10
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/modules/plans/hooks/use-has-plan-addon.hook.ts"],"sourcesContent":["'use client';\n\nimport type { AddonKindEnum } from '../../subscriptions/constants/addons.constants';\nimport { useActiveSubscription } from '../../subscriptions/hooks/find-active-subscription.hook';\
|
|
1
|
+
{"version":3,"sources":["../../../../src/modules/plans/hooks/use-has-plan-addon.hook.ts"],"sourcesContent":["'use client';\n\nimport type { AddonKindEnum } from '../../subscriptions/constants/addons.constants';\nimport { useActiveSubscription } from '../../subscriptions/hooks/find-active-subscription.hook';\n\nexport function useHasPlanAddon(addonId: AddonKindEnum) {\n const { data: subscriptionData, isLoading: isLoadingSubscription } = useActiveSubscription();\n const activeSubscription = subscriptionData?.data?.[0] ?? null;\n\n const hasAddon = !!activeSubscription?.items?.find((i) => i.id_addon === addonId);\n const isLoading = isLoadingSubscription;\n\n return { hasAddon, isLoading };\n}\n"],"mappings":";AAGA,SAAS,6BAA6B;AAE/B,SAAS,gBAAgB,SAAwB;AACtD,QAAM,EAAE,MAAM,kBAAkB,WAAW,sBAAsB,IAAI,sBAAsB;AAC3F,QAAM,qBAAqB,kBAAkB,OAAO,CAAC,KAAK;AAE1D,QAAM,WAAW,CAAC,CAAC,oBAAoB,OAAO,KAAK,CAAC,MAAM,EAAE,aAAa,OAAO;AAChF,QAAM,YAAY;AAElB,SAAO,EAAE,UAAU,UAAU;AAC/B;","names":[]}
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import { useHasPlanAddon } from '../../../modules/plans/hooks/use-has-plan-addon
|
|
|
6
6
|
import { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';
|
|
7
7
|
import { useAppNavigationContext } from '../AppNavigationContext';
|
|
8
8
|
import { ProjectSelectorPopover } from '../ProjectSelectorPopover';
|
|
9
|
-
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';
|
|
9
|
+
import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList, Separator, UserAvatar } from '../../../index';
|
|
10
10
|
import { IconChevronDown, IconPlus, IconSettings } from '@tabler/icons-react';
|
|
11
11
|
import type { NavigationProject } from '../types';
|
|
12
12
|
|
|
@@ -56,38 +56,41 @@ export function ProjectSelector({
|
|
|
56
56
|
}
|
|
57
57
|
}, [openProjectList, breakpoint, clearProjectList]);
|
|
58
58
|
|
|
59
|
-
// Desktop and md: title + popover
|
|
59
|
+
// Desktop and md: title + popover (aligned with NavBar logo + separator)
|
|
60
60
|
if (breakpoint === 'desktop' || breakpoint === 'md') {
|
|
61
61
|
return (
|
|
62
|
-
<div className="flex
|
|
63
|
-
<
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
62
|
+
<div className="flex flex-col gap-4 mt-[6.5px]">
|
|
63
|
+
<div className="flex items-center h-7">
|
|
64
|
+
<ProjectSelectorPopover
|
|
65
|
+
open={isPopoverOpen}
|
|
66
|
+
setOpen={setIsPopoverOpen}
|
|
67
|
+
titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}
|
|
68
|
+
projects={projects}
|
|
69
|
+
selectedProject={selectedProject}
|
|
70
|
+
isLoading={isLoading}
|
|
71
|
+
isFetchingNextPage={isFetchingNextPage}
|
|
72
|
+
hasNextPage={hasNextPage}
|
|
73
|
+
onLoadMore={onLoadMore}
|
|
74
|
+
onSelectProject={onSelectProject}
|
|
75
|
+
onAddProject={onAddProject}
|
|
76
|
+
onManageProjects={onManageProjects}
|
|
77
|
+
>
|
|
78
|
+
<div className="flex items-center gap-2 truncate select-none cursor-pointer" ref={titleRef}>
|
|
79
|
+
{isLoading ? (
|
|
80
|
+
<div className="skeleton h-4 w-32 rounded" />
|
|
81
|
+
) : (
|
|
82
|
+
<span className="paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block">
|
|
83
|
+
{selectedProject?.title}
|
|
84
|
+
</span>
|
|
85
|
+
)}
|
|
86
|
+
<IconChevronDown
|
|
87
|
+
size={20}
|
|
88
|
+
className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}
|
|
89
|
+
/>
|
|
90
|
+
</div>
|
|
91
|
+
</ProjectSelectorPopover>
|
|
92
|
+
</div>
|
|
93
|
+
<Separator className="mt-[7.5px]" />
|
|
91
94
|
</div>
|
|
92
95
|
);
|
|
93
96
|
}
|