@greatapps/common 1.1.329 → 1.1.331
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/layouts/SideBarNavigation.mjs +1 -1
- package/dist/components/layouts/SideBarNavigation.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/account/ConfigurationsMyAccountModal.tsx +11 -115
- package/src/components/account/sections/PreferencesSection.tsx +4 -46
- package/src/components/layouts/SideBarNavigation.tsx +1 -1
|
@@ -26,7 +26,7 @@ function SideBarNavigation({
|
|
|
26
26
|
"div",
|
|
27
27
|
{
|
|
28
28
|
"data-slot": "sidebar-navigation",
|
|
29
|
-
className: "relative hidden lg:block h-screen overflow-visible
|
|
29
|
+
className: "relative hidden lg:block h-screen overflow-visible z-30",
|
|
30
30
|
children: [
|
|
31
31
|
/* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
32
32
|
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { isExpanded, collapse } = useDesktopSidebarStore()\n const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n React.useEffect(() => {\n const mql = window.matchMedia('(min-width: 1351px)')\n const handler = (e: MediaQueryListEvent) => {\n if (e.matches) collapseMd()\n }\n if (mql.matches) collapseMd()\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [collapseMd])\n\n return (\n <div\n data-slot=\"sidebar-navigation\"\n className=\"relative hidden lg:block h-screen overflow-visible
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n className,\n children,\n ...props\n}: React.ComponentProps<\"div\">) {\n const { isExpanded, collapse } = useDesktopSidebarStore()\n const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n React.useEffect(() => {\n const mql = window.matchMedia('(min-width: 1351px)')\n const handler = (e: MediaQueryListEvent) => {\n if (e.matches) collapseMd()\n }\n if (mql.matches) collapseMd()\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }, [collapseMd])\n\n return (\n <div\n data-slot=\"sidebar-navigation\"\n className=\"relative hidden lg:block h-screen overflow-visible z-30\"\n >\n <Tooltip>\n <TooltipTrigger asChild>\n <button\n onClick={collapse}\n className={cn(\n \"absolute top-[60px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-all duration-300 z-[999]\",\n isExpanded ? \"opacity-100 scale-100\" : \"opacity-0 scale-0 pointer-events-none\",\n )}\n >\n <IconChevronLeft size={16} className=\"text-gray-500\" />\n </button>\n </TooltipTrigger>\n {isExpanded && <TooltipContent side=\"right\">Recolher menu</TooltipContent>}\n </Tooltip>\n <div\n className={cn(\n \"h-full transition-[width] duration-300 ease-in-out overflow-hidden\",\n isExpanded ? \"w-[273px] border-r border-gray-200\" : \"w-0\",\n )}\n {...props}\n >\n <div className={cn(\"flex flex-col h-full min-w-[273px] w-[273px] p-4\", className)}>\n {children}\n </div>\n </div>\n </div>\n )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAgCY,SASY,KATZ;AA9BZ,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,uBAAuB;AACxD,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,QAAQ;AAEtD,QAAM,UAAU,MAAM;AAClB,UAAM,MAAM,OAAO,WAAW,qBAAqB;AACnD,UAAM,UAAU,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAS,YAAW;AAAA,IAC9B;AACA,QAAI,IAAI,QAAS,YAAW;AAC5B,QAAI,iBAAiB,UAAU,OAAO;AACtC,WAAO,MAAM,IAAI,oBAAoB,UAAU,OAAO;AAAA,EAC1D,GAAG,CAAC,UAAU,CAAC;AAEf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,gBACP;AAAA,gBACA,aAAa,0BAA0B;AAAA,cAC3C;AAAA,cAEA,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACzD,GACJ;AAAA,UACC,cAAc,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC7D;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA,aAAa,uCAAuC;AAAA,YACxD;AAAA,YACC,GAAG;AAAA,YAEJ,8BAAC,SAAI,WAAW,GAAG,oDAAoD,SAAS,GAC3E,UACL;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AAER;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,78 +1,35 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import { IconX } from '@tabler/icons-react';
|
|
4
4
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';
|
|
5
|
-
import { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';
|
|
6
|
-
import { Button } from '../ui/buttons/Button';
|
|
7
5
|
import { cn } from '../../infra/utils/clsx';
|
|
8
|
-
import { AccountSectionType } from '../../enums/AccountSectionType';
|
|
9
|
-
import { MyProfileSection } from './sections/MyProfileSection';
|
|
10
6
|
import { PreferencesSection } from './sections/PreferencesSection';
|
|
11
|
-
import { ChangePasswordSection } from './sections/ChangePasswordSection';
|
|
12
|
-
import { SecuritySection } from './sections/SecuritySection';
|
|
13
|
-
import useConfigurationsModal from './hooks/useConfigurationsModal';
|
|
14
7
|
import useIsMobile from '../../hooks/useIsMobile';
|
|
15
8
|
import { useAccountModals } from '../../store/useAccountModals';
|
|
16
9
|
|
|
17
10
|
export default function ConfigurationsMyAccountModal() {
|
|
18
|
-
const {
|
|
19
|
-
activeModal,
|
|
20
|
-
config,
|
|
21
|
-
initialSection,
|
|
22
|
-
openDeleteAccount,
|
|
23
|
-
openIsntPossibleDelete,
|
|
24
|
-
close,
|
|
25
|
-
} = useAccountModals();
|
|
11
|
+
const { activeModal, close } = useAccountModals();
|
|
26
12
|
|
|
27
13
|
const open = activeModal === 'configurations';
|
|
28
|
-
const { hasActiveSubscription } = config;
|
|
29
|
-
|
|
30
14
|
const isMobile = useIsMobile();
|
|
31
|
-
const { activeSection, setActiveSection } = useConfigurationsModal({
|
|
32
|
-
isOpen: open,
|
|
33
|
-
initialSection,
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
const handleDeleteAccount = () => {
|
|
37
|
-
close();
|
|
38
|
-
if (hasActiveSubscription) {
|
|
39
|
-
openIsntPossibleDelete();
|
|
40
|
-
} else {
|
|
41
|
-
openDeleteAccount();
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const tabTriggerClasses = cn(
|
|
46
|
-
'border-0! px-0 py-0',
|
|
47
|
-
|
|
48
|
-
'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',
|
|
49
|
-
'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',
|
|
50
|
-
'lg:data-[state=active]:bg-gray-50',
|
|
51
|
-
|
|
52
|
-
'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',
|
|
53
|
-
'border-b-2 border-transparent',
|
|
54
|
-
'data-[state=active]:bg-gray-50 rounded-lg',
|
|
55
|
-
|
|
56
|
-
'text-gray-500 data-[state=active]:text-gray-950',
|
|
57
|
-
'hover:text-gray-900 transition-colors'
|
|
58
|
-
);
|
|
59
15
|
|
|
60
16
|
return (
|
|
61
17
|
<Dialog open={open} onOpenChange={close}>
|
|
62
18
|
<DialogContent
|
|
63
19
|
showCloseButton={!isMobile}
|
|
64
20
|
overlayClassName="bg-black/20 lg:bg-black/50"
|
|
65
|
-
className=
|
|
66
|
-
flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0
|
|
67
|
-
rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0
|
|
68
|
-
lg:
|
|
69
|
-
lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
|
|
21
|
+
className={cn(
|
|
22
|
+
"flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0",
|
|
23
|
+
"rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0",
|
|
24
|
+
"lg:w-[700px] lg:max-w-[700px] lg:h-auto lg:rounded-lg lg:border",
|
|
25
|
+
"lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]"
|
|
26
|
+
)}
|
|
70
27
|
>
|
|
71
28
|
<DialogHeader className="sr-only">
|
|
72
|
-
<DialogTitle>
|
|
29
|
+
<DialogTitle>Preferências</DialogTitle>
|
|
73
30
|
</DialogHeader>
|
|
74
31
|
<div className="md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200">
|
|
75
|
-
<span className="text-gray-950 paragraph-medium-semibold">
|
|
32
|
+
<span className="text-gray-950 paragraph-medium-semibold">Preferências</span>
|
|
76
33
|
<button
|
|
77
34
|
type="button"
|
|
78
35
|
className="size-8 flex items-center justify-center text-gray-500 cursor-pointer"
|
|
@@ -81,68 +38,7 @@ export default function ConfigurationsMyAccountModal() {
|
|
|
81
38
|
<IconX size={18} />
|
|
82
39
|
</button>
|
|
83
40
|
</div>
|
|
84
|
-
<
|
|
85
|
-
value={activeSection}
|
|
86
|
-
onValueChange={(value) => setActiveSection(value as AccountSectionType)}
|
|
87
|
-
orientation="vertical"
|
|
88
|
-
className="flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0"
|
|
89
|
-
>
|
|
90
|
-
<TabsList
|
|
91
|
-
className={cn(
|
|
92
|
-
'flex gap-0 bg-transparent border-b-0',
|
|
93
|
-
|
|
94
|
-
'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',
|
|
95
|
-
'lg:border-r lg:border-gray-200 lg:pl-5 lg:pr-5 lg:pt-5 lg:gap-5 lg:overflow-x-visible lg:self-stretch',
|
|
96
|
-
|
|
97
|
-
'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',
|
|
98
|
-
'px-4 py-3',
|
|
99
|
-
'[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'
|
|
100
|
-
)}
|
|
101
|
-
>
|
|
102
|
-
<span className="hidden lg:block paragraph-medium-semibold text-gray-950 mb-0">
|
|
103
|
-
Configurações
|
|
104
|
-
</span>
|
|
105
|
-
|
|
106
|
-
<div className="lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full">
|
|
107
|
-
<TabsTrigger value={AccountSectionType.MY_PROFILE} className={tabTriggerClasses}>
|
|
108
|
-
<IconUser size={20} className="shrink-0" />
|
|
109
|
-
<span className="paragraph-small-medium">Meu perfil</span>
|
|
110
|
-
</TabsTrigger>
|
|
111
|
-
|
|
112
|
-
<TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>
|
|
113
|
-
<IconSettings2 size={20} className="shrink-0" />
|
|
114
|
-
<span className="paragraph-small-medium">Preferências</span>
|
|
115
|
-
</TabsTrigger>
|
|
116
|
-
|
|
117
|
-
<TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>
|
|
118
|
-
<IconLock size={20} className="shrink-0" />
|
|
119
|
-
<span className="paragraph-small-medium">Segurança</span>
|
|
120
|
-
</TabsTrigger>
|
|
121
|
-
</div>
|
|
122
|
-
</TabsList>
|
|
123
|
-
|
|
124
|
-
<div className="w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col">
|
|
125
|
-
<TabsContent value={AccountSectionType.MY_PROFILE} className="h-full! relative overflow-hidden">
|
|
126
|
-
<MyProfileSection onClose={close} />
|
|
127
|
-
</TabsContent>
|
|
128
|
-
|
|
129
|
-
<TabsContent value={AccountSectionType.SECURITY} className="h-full! relative overflow-hidden">
|
|
130
|
-
<SecuritySection
|
|
131
|
-
setActiveSection={setActiveSection}
|
|
132
|
-
onClose={close}
|
|
133
|
-
onDeleteAccount={handleDeleteAccount}
|
|
134
|
-
/>
|
|
135
|
-
</TabsContent>
|
|
136
|
-
|
|
137
|
-
<TabsContent value={AccountSectionType.CHANGE_PASSWORD} className="h-full! relative overflow-hidden">
|
|
138
|
-
<ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />
|
|
139
|
-
</TabsContent>
|
|
140
|
-
|
|
141
|
-
<TabsContent value={AccountSectionType.PREFERENCES} className="h-full! relative overflow-hidden">
|
|
142
|
-
<PreferencesSection onClose={close} />
|
|
143
|
-
</TabsContent>
|
|
144
|
-
</div>
|
|
145
|
-
</Tabs>
|
|
41
|
+
<PreferencesSection onClose={close} />
|
|
146
42
|
</DialogContent>
|
|
147
43
|
</Dialog>
|
|
148
44
|
);
|
|
@@ -3,13 +3,12 @@
|
|
|
3
3
|
import { useState, useEffect } from 'react';
|
|
4
4
|
import { useForm } from 'react-hook-form';
|
|
5
5
|
import { toast } from 'sonner';
|
|
6
|
-
import { IconLock
|
|
6
|
+
import { IconLock } from '@tabler/icons-react';
|
|
7
7
|
import { Button } from '../../ui/buttons/Button';
|
|
8
8
|
import { Separator } from '../../ui/data-display/Separator';
|
|
9
9
|
import { Toast } from '../../ui/feedback/Toast';
|
|
10
10
|
import { ComboboxField } from '../../ui/form/ComboboxField';
|
|
11
11
|
import { SelectField } from '../../ui/form/SelectField';
|
|
12
|
-
import SwitchOptionFieldWithIcon from '../../ui/form/SwitchOptionFieldWithIcon';
|
|
13
12
|
import ConfirmGlobalPreferencesModal from '../ConfirmGlobalPreferencesModal';
|
|
14
13
|
import { useAuth } from '../../../providers/auth.provider';
|
|
15
14
|
import { UserProfile } from '../../../modules/users/schema';
|
|
@@ -21,7 +20,6 @@ import {
|
|
|
21
20
|
import {
|
|
22
21
|
LANGUAGE_OPTIONS,
|
|
23
22
|
TIME_FORMAT_OPTIONS,
|
|
24
|
-
NOTIFICATION_TYPES,
|
|
25
23
|
} from '../constants';
|
|
26
24
|
import { useTimezones } from '../../../modules/accounts/hooks/useTimezones';
|
|
27
25
|
import { useCurrencies } from '../../../modules/accounts/hooks/useCurrencies';
|
|
@@ -80,9 +78,6 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
|
|
|
80
78
|
});
|
|
81
79
|
}, [user, account, reset]);
|
|
82
80
|
|
|
83
|
-
const receiveSms = watch('receive_sms');
|
|
84
|
-
const receiveEmail = watch('receive_email');
|
|
85
|
-
|
|
86
81
|
const doSave = async (data: PreferencesFormValues, accountFields: UpdateAccountRequest) => {
|
|
87
82
|
setIsSaving(true);
|
|
88
83
|
try {
|
|
@@ -145,8 +140,8 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
|
|
|
145
140
|
|
|
146
141
|
return (
|
|
147
142
|
<>
|
|
148
|
-
<form onSubmit={handleSubmit(onSubmit)} className="
|
|
149
|
-
<div className="
|
|
143
|
+
<form onSubmit={handleSubmit(onSubmit)} className="flex flex-col">
|
|
144
|
+
<div className="overflow-y-auto overscroll-contain px-4 pb-4 lg:p-5 flex flex-col gap-5 lg:gap-6">
|
|
150
145
|
<span className="paragraph-medium-semibold text-gray-950">Preferências</span>
|
|
151
146
|
<div className="flex flex-col gap-8">
|
|
152
147
|
<div className="flex flex-col lg:flex-row items-center gap-3">
|
|
@@ -204,47 +199,10 @@ export function PreferencesSection({ onClose }: PreferencesSectionProps) {
|
|
|
204
199
|
</div>
|
|
205
200
|
</div>
|
|
206
201
|
|
|
207
|
-
<Separator />
|
|
208
|
-
|
|
209
|
-
<div className="flex flex-col gap-4">
|
|
210
|
-
<span className="paragraph-medium-semibold text-gray-600">Notificações</span>
|
|
211
|
-
<div className="flex flex-col gap-3">
|
|
212
|
-
<div className="flex flex-col border border-gray-200 rounded-lg">
|
|
213
|
-
<SwitchOptionFieldWithIcon
|
|
214
|
-
icon={IconMessageCircle}
|
|
215
|
-
label="WhatsApp"
|
|
216
|
-
description="Receber notificações importantes por WhatsApp"
|
|
217
|
-
checked={receiveSms}
|
|
218
|
-
onCheckedChange={(val: boolean) => setValue('receive_sms', val, { shouldDirty: true })}
|
|
219
|
-
/>
|
|
220
|
-
<SwitchOptionFieldWithIcon
|
|
221
|
-
icon={IconMail}
|
|
222
|
-
label="E-mail"
|
|
223
|
-
description="Receber notificações e atualizações por email"
|
|
224
|
-
checked={receiveEmail}
|
|
225
|
-
onCheckedChange={(val: boolean) => setValue('receive_email', val, { shouldDirty: true })}
|
|
226
|
-
hideBorderBottom={true}
|
|
227
|
-
/>
|
|
228
|
-
</div>
|
|
229
|
-
<div className="flex flex-col gap-4 p-5 pb-6 rounded-lg bg-gray-50">
|
|
230
|
-
<span className="paragraph-small-semibold text-gray-950">
|
|
231
|
-
Tipos de notificações incluem:
|
|
232
|
-
</span>
|
|
233
|
-
<div className="flex flex-col">
|
|
234
|
-
{NOTIFICATION_TYPES.map((type) => (
|
|
235
|
-
<div key={type} className="flex items-center gap-2">
|
|
236
|
-
<div className="size-1 rounded-full bg-gray-600" />
|
|
237
|
-
<span className="paragraph-small-medium text-gray-600">{type}</span>
|
|
238
|
-
</div>
|
|
239
|
-
))}
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
</div>
|
|
244
202
|
</div>
|
|
245
203
|
</div>
|
|
246
204
|
|
|
247
|
-
<div className="
|
|
205
|
+
<div className="flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white">
|
|
248
206
|
<Button
|
|
249
207
|
variant="secondary"
|
|
250
208
|
className="h-10!"
|
|
@@ -28,7 +28,7 @@ function SideBarNavigation({
|
|
|
28
28
|
return (
|
|
29
29
|
<div
|
|
30
30
|
data-slot="sidebar-navigation"
|
|
31
|
-
className="relative hidden lg:block h-screen overflow-visible
|
|
31
|
+
className="relative hidden lg:block h-screen overflow-visible z-30"
|
|
32
32
|
>
|
|
33
33
|
<Tooltip>
|
|
34
34
|
<TooltipTrigger asChild>
|