@greatapps/common 1.1.522 → 1.1.525
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/account/ConfigurationsMyAccountModal.mjs +4 -10
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs +1 -3
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs +1 -3
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs +1 -3
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs +1 -2
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/embeds/EmbedWidgets.mjs +1 -3
- package/dist/components/embeds/EmbedWidgets.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +1 -3
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/AppNavBar.mjs +8 -4
- package/dist/components/layouts/AppNavBar.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs +9 -10
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs +2 -5
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +2 -4
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/SideBarNavigation.mjs +1 -4
- package/dist/components/layouts/SideBarNavigation.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs +9 -26
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/cards/AddCardModal.mjs +1 -3
- package/dist/components/modals/cards/AddCardModal.mjs.map +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +6 -7
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +19 -39
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/navigation/types.mjs +1 -0
- package/dist/components/navigation/types.mjs.map +1 -0
- package/dist/components/pages/NotFoundPage.mjs +2 -2
- package/dist/components/pages/NotFoundPage.mjs.map +1 -1
- package/dist/components/ui/buttons/Button.mjs +2 -7
- package/dist/components/ui/buttons/Button.mjs.map +1 -1
- package/dist/components/ui/data-display/CardItem.mjs +1 -1
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +2 -4
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/dist/components/ui/data-display/UserAvatar.mjs +2 -6
- package/dist/components/ui/data-display/UserAvatar.mjs.map +1 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs +1 -4
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/Toast.mjs +2 -7
- package/dist/components/ui/feedback/Toast.mjs.map +1 -1
- package/dist/components/ui/form/FormField.mjs +1 -1
- package/dist/components/ui/form/FormField.mjs.map +1 -1
- package/dist/components/ui/form/Select.mjs +1 -1
- package/dist/components/ui/form/Select.mjs.map +1 -1
- package/dist/components/ui/overlay/Popover.mjs +1 -1
- package/dist/components/ui/overlay/Popover.mjs.map +1 -1
- package/dist/components/ui/overlay/Sheet.mjs +6 -8
- package/dist/components/ui/overlay/Sheet.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageUpload.mjs +1 -2
- package/dist/components/widgets/ImageUpload/ImageUpload.mjs.map +1 -1
- package/dist/components/widgets/notifications/NotificationCard.mjs +1 -4
- package/dist/components/widgets/notifications/NotificationCard.mjs.map +1 -1
- package/dist/enums/AccountSectionType.mjs +0 -1
- package/dist/enums/AccountSectionType.mjs.map +1 -1
- package/dist/index.mjs +8 -90
- package/dist/index.mjs.map +1 -1
- package/dist/modules/accounts/hooks/current-account.hook.mjs +2 -5
- package/dist/modules/accounts/hooks/current-account.hook.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useAccountManagement.mjs +9 -19
- package/dist/modules/accounts/hooks/useAccountManagement.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useCurrencies.mjs +1 -3
- package/dist/modules/accounts/hooks/useCurrencies.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useTimezones.mjs +1 -3
- package/dist/modules/accounts/hooks/useTimezones.mjs.map +1 -1
- package/dist/modules/auth/hooks/useUserQuery.mjs +6 -15
- package/dist/modules/auth/hooks/useUserQuery.mjs.map +1 -1
- package/dist/modules/cards/hooks/cards.hook.mjs +3 -11
- package/dist/modules/cards/hooks/cards.hook.mjs.map +1 -1
- package/dist/modules/cards/hooks/create-card.hook.mjs +2 -13
- package/dist/modules/cards/hooks/create-card.hook.mjs.map +1 -1
- package/dist/modules/cards/services/cards.service.mjs +4 -45
- package/dist/modules/cards/services/cards.service.mjs.map +1 -1
- package/dist/modules/cards/types.mjs +3 -11
- package/dist/modules/cards/types.mjs.map +1 -1
- package/dist/modules/ia-credits/hooks/ia-credits.hook.mjs +1 -3
- package/dist/modules/ia-credits/hooks/ia-credits.hook.mjs.map +1 -1
- package/dist/modules/plans/hooks/list-plans.hook.mjs +1 -3
- package/dist/modules/plans/hooks/list-plans.hook.mjs.map +1 -1
- package/dist/modules/plans/hooks/use-plan-by-id.hook.mjs +2 -4
- package/dist/modules/plans/hooks/use-plan-by-id.hook.mjs.map +1 -1
- package/dist/modules/plans/services/plans.service.mjs +2 -4
- package/dist/modules/plans/services/plans.service.mjs.map +1 -1
- package/dist/modules/plans/types/plan.type.mjs.map +1 -1
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs +10 -20
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs.map +1 -1
- package/dist/modules/projects/hooks/add-project-user.hook.mjs +12 -15
- package/dist/modules/projects/hooks/add-project-user.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-all-account-users.hook.mjs +1 -3
- package/dist/modules/projects/hooks/list-all-account-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-available-users.hook.mjs +1 -3
- package/dist/modules/projects/hooks/list-available-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-project-users.hook.mjs +1 -3
- package/dist/modules/projects/hooks/list-project-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/remove-project-user.hook.mjs +12 -15
- package/dist/modules/projects/hooks/remove-project-user.hook.mjs.map +1 -1
- package/dist/modules/projects/types.mjs +4 -19
- package/dist/modules/projects/types.mjs.map +1 -1
- package/dist/modules/subscriptions/constants/query-keys.constants.mjs +0 -2
- package/dist/modules/subscriptions/constants/query-keys.constants.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/find-active-subscription.hook.mjs +2 -5
- package/dist/modules/subscriptions/hooks/find-active-subscription.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/list-subscriptions.hook.mjs +1 -3
- package/dist/modules/subscriptions/hooks/list-subscriptions.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs +3 -6
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs +2 -29
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs +0 -7
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/modules/users/action/list-messages.action.mjs +2 -14
- package/dist/modules/users/action/list-messages.action.mjs.map +1 -1
- package/dist/modules/users/hooks/messages.hook.mjs +4 -9
- package/dist/modules/users/hooks/messages.hook.mjs.map +1 -1
- package/dist/modules/users/services/messages.service.mjs.map +1 -1
- package/dist/providers/auth.provider.mjs +4 -6
- package/dist/providers/auth.provider.mjs.map +1 -1
- package/dist/providers/query.provider.mjs +2 -2
- package/dist/providers/query.provider.mjs.map +1 -1
- package/dist/providers/whitelabel.provider.mjs +0 -5
- package/dist/providers/whitelabel.provider.mjs.map +1 -1
- package/dist/server.mjs +0 -14
- package/dist/server.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/widgets/ImageUpload/ImageCropModal.tsx +10 -37
- package/dist/components/account/sections/TokenSection.mjs +0 -72
- package/dist/components/account/sections/TokenSection.mjs.map +0 -1
- package/dist/components/embeds/ClarityEmbed.mjs +0 -55
- package/dist/components/embeds/ClarityEmbed.mjs.map +0 -1
- package/dist/hooks/useAuthQueryKey.mjs +0 -23
- package/dist/hooks/useAuthQueryKey.mjs.map +0 -1
- package/dist/infra/utils/array.mjs +0 -34
- package/dist/infra/utils/array.mjs.map +0 -1
- package/dist/modules/accounts/actions/get-account-token.action.mjs +0 -10
- package/dist/modules/accounts/actions/get-account-token.action.mjs.map +0 -1
- package/dist/modules/accounts/hooks/use-account-token.hook.mjs +0 -15
- package/dist/modules/accounts/hooks/use-account-token.hook.mjs.map +0 -1
- package/dist/modules/accounts/services/account-token.service.mjs +0 -32
- package/dist/modules/accounts/services/account-token.service.mjs.map +0 -1
- package/dist/modules/cards/actions/delete-card.action.mjs +0 -10
- package/dist/modules/cards/actions/delete-card.action.mjs.map +0 -1
- package/dist/modules/cards/actions/find-card-by-id.action.mjs +0 -10
- package/dist/modules/cards/actions/find-card-by-id.action.mjs.map +0 -1
- package/dist/modules/cards/actions/set-default-card.action.mjs +0 -10
- package/dist/modules/cards/actions/set-default-card.action.mjs.map +0 -1
- package/dist/modules/cards/hooks/card-by-id.hook.mjs +0 -22
- package/dist/modules/cards/hooks/card-by-id.hook.mjs.map +0 -1
- package/dist/modules/cards/hooks/delete-card.hook.mjs +0 -50
- package/dist/modules/cards/hooks/delete-card.hook.mjs.map +0 -1
- package/dist/modules/cards/hooks/set-default-card.hook.mjs +0 -51
- package/dist/modules/cards/hooks/set-default-card.hook.mjs.map +0 -1
- package/dist/modules/projects/actions/create-project.action.mjs +0 -10
- package/dist/modules/projects/actions/create-project.action.mjs.map +0 -1
- package/dist/modules/projects/actions/delete-project.action.mjs +0 -10
- package/dist/modules/projects/actions/delete-project.action.mjs.map +0 -1
- package/dist/modules/projects/actions/find-project.action.mjs +0 -10
- package/dist/modules/projects/actions/find-project.action.mjs.map +0 -1
- package/dist/modules/projects/actions/list-projects.action.mjs +0 -10
- package/dist/modules/projects/actions/list-projects.action.mjs.map +0 -1
- package/dist/modules/projects/actions/update-project.action.mjs +0 -10
- package/dist/modules/projects/actions/update-project.action.mjs.map +0 -1
- package/dist/modules/projects/hooks/create-project.hook.mjs +0 -71
- package/dist/modules/projects/hooks/create-project.hook.mjs.map +0 -1
- package/dist/modules/projects/hooks/delete-project.hook.mjs +0 -53
- package/dist/modules/projects/hooks/delete-project.hook.mjs.map +0 -1
- package/dist/modules/projects/hooks/find-project.hook.mjs +0 -19
- package/dist/modules/projects/hooks/find-project.hook.mjs.map +0 -1
- package/dist/modules/projects/hooks/list-infinite-projects.hook.mjs +0 -39
- package/dist/modules/projects/hooks/list-infinite-projects.hook.mjs.map +0 -1
- package/dist/modules/projects/hooks/list-projects.hook.mjs +0 -22
- package/dist/modules/projects/hooks/list-projects.hook.mjs.map +0 -1
- package/dist/modules/projects/hooks/update-project.hook.mjs +0 -70
- package/dist/modules/projects/hooks/update-project.hook.mjs.map +0 -1
- package/dist/modules/projects/services/projects.service.mjs +0 -99
- package/dist/modules/projects/services/projects.service.mjs.map +0 -1
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { IconLock, IconSettings2, IconX } from "@tabler/icons-react";
|
|
4
4
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/overlay/Dialog";
|
|
5
5
|
import { Tabs, TabsList, TabsTrigger, TabsContent } from "../ui/data-display/Tabs";
|
|
6
6
|
import { cn } from "../../infra/utils/clsx";
|
|
7
7
|
import { AccountSectionType } from "../../enums/AccountSectionType";
|
|
8
8
|
import { PreferencesSection } from "./sections/PreferencesSection";
|
|
9
9
|
import { ChangePasswordSection } from "./sections/ChangePasswordSection";
|
|
10
|
-
import { TokenSection } from "./sections/TokenSection";
|
|
11
10
|
import { SecuritySection } from "./sections/SecuritySection";
|
|
12
11
|
import useConfigurationsModal from "./hooks/useConfigurationsModal";
|
|
13
12
|
import useIsMobile from "../../hooks/useIsMobile";
|
|
@@ -25,7 +24,7 @@ function ConfigurationsMyAccountModal() {
|
|
|
25
24
|
const open = activeModal === "configurations";
|
|
26
25
|
const { hasActiveSubscription } = config;
|
|
27
26
|
const { user } = useAuth();
|
|
28
|
-
const
|
|
27
|
+
const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;
|
|
29
28
|
const isMobile = useIsMobile();
|
|
30
29
|
const { activeSection, setActiveSection } = useConfigurationsModal({
|
|
31
30
|
isOpen: open
|
|
@@ -95,11 +94,7 @@ function ConfigurationsMyAccountModal() {
|
|
|
95
94
|
/* @__PURE__ */ jsx(IconSettings2, { size: 20, className: "shrink-0" }),
|
|
96
95
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Prefer\xEAncias" })
|
|
97
96
|
] }),
|
|
98
|
-
|
|
99
|
-
/* @__PURE__ */ jsx(IconKey, { size: 20, className: "shrink-0" }),
|
|
100
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Token da conta" })
|
|
101
|
-
] }),
|
|
102
|
-
isOwner && /* @__PURE__ */ jsxs(TabsTrigger, { value: AccountSectionType.SECURITY, className: tabTriggerClasses, children: [
|
|
97
|
+
isOwnerOrAdmin && /* @__PURE__ */ jsxs(TabsTrigger, { value: AccountSectionType.SECURITY, className: tabTriggerClasses, children: [
|
|
103
98
|
/* @__PURE__ */ jsx(IconLock, { size: 20, className: "shrink-0" }),
|
|
104
99
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Seguran\xE7a" })
|
|
105
100
|
] })
|
|
@@ -109,8 +104,7 @@ function ConfigurationsMyAccountModal() {
|
|
|
109
104
|
),
|
|
110
105
|
/* @__PURE__ */ jsxs("div", { className: "w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col", children: [
|
|
111
106
|
/* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.PREFERENCES, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(PreferencesSection, { onClose: close }) }),
|
|
112
|
-
|
|
113
|
-
isOwner && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
107
|
+
isOwnerOrAdmin && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
114
108
|
/* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.SECURITY, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
115
109
|
SecuritySection,
|
|
116
110
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/account/ConfigurationsMyAccountModal.tsx"],"sourcesContent":["'use client';\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/account/ConfigurationsMyAccountModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconSettings2, IconX } from '@tabler/icons-react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../ui/data-display/Tabs';\nimport { cn } from '../../infra/utils/clsx';\nimport { AccountSectionType } from '../../enums/AccountSectionType';\nimport { PreferencesSection } from './sections/PreferencesSection';\nimport { ChangePasswordSection } from './sections/ChangePasswordSection';\nimport { SecuritySection } from './sections/SecuritySection';\nimport useConfigurationsModal from './hooks/useConfigurationsModal';\nimport useIsMobile from '../../hooks/useIsMobile';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport { useAuth } from '../../providers/auth.provider';\nimport { UserProfile } from '../../modules/users/schema';\n\nexport default function ConfigurationsMyAccountModal() {\n const {\n activeModal,\n config,\n openDeleteAccount,\n openIsntPossibleDelete,\n close,\n } = useAccountModals();\n\n const open = activeModal === 'configurations';\n const { hasActiveSubscription } = config;\n\n const { user } = useAuth();\n const isOwnerOrAdmin = user?.profile === UserProfile.owner || user?.profile === UserProfile.admin;\n const isMobile = useIsMobile();\n const { activeSection, setActiveSection } = useConfigurationsModal({\n isOpen: open,\n });\n\n const handleDeleteAccount = () => {\n close();\n if (hasActiveSubscription) {\n openIsntPossibleDelete();\n } else {\n openDeleteAccount();\n }\n };\n\n const tabTriggerClasses = cn(\n 'border-0! px-0 py-0',\n\n 'lg:rounded-md lg:flex lg:items-center lg:gap-2 lg:p-3 lg:justify-start lg:w-full',\n 'lg:bg-white lg:hover:bg-gray-100 lg:active:bg-gray-50 lg:border-0',\n 'lg:data-[state=active]:bg-gray-50',\n\n 'flex items-center gap-1.5 px-3 py-3 justify-center whitespace-nowrap',\n 'border-b-2 border-transparent',\n 'data-[state=active]:bg-gray-50 rounded-lg',\n\n 'text-gray-500 data-[state=active]:text-gray-950',\n 'hover:text-gray-900 transition-colors'\n );\n\n return (\n <Dialog open={open} onOpenChange={close}>\n <DialogContent\n showCloseButton={!isMobile}\n overlayClassName=\"bg-black/20 lg:bg-black/50\"\n className=\"\n flex flex-col p-0 gap-0 max-w-full sm:max-w-full overflow-x-hidden border-0\n rounded-t-2xl rounded-b-none h-[100dvh] top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0\n lg:flex-row lg:w-[892px] lg:max-w-[892px] lg:h-[626px] lg:rounded-lg lg:border\n lg:top-[50%] lg:bottom-auto lg:left-[50%] lg:right-auto lg:translate-x-[-50%] lg:translate-y-[-50%]\"\n >\n <DialogHeader className=\"sr-only\">\n <DialogTitle>Configurações</DialogTitle>\n </DialogHeader>\n <div className=\"md:hidden flex items-center justify-between px-5 py-3 border-b border-gray-200\">\n <span className=\"text-gray-950 paragraph-medium-semibold\">Configurações</span>\n <button\n type=\"button\"\n className=\"size-8 flex items-center justify-center text-gray-500 cursor-pointer\"\n onClick={close}\n >\n <IconX size={18} />\n </button>\n </div>\n <Tabs\n value={activeSection}\n onValueChange={(value) => setActiveSection(value as AccountSectionType)}\n orientation=\"vertical\"\n className=\"flex lg:flex-row flex-col w-full h-full flex-1 lg:h-full lg:pt-0 lg:gap-0\"\n >\n <TabsList\n className={cn(\n 'flex gap-0 bg-transparent border-b-0',\n\n 'lg:flex-col lg:items-stretch lg:justify-start lg:w-auto lg:min-w-60',\n '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',\n\n 'flex-row items-center justify-start w-full overflow-x-auto scrollbar-hide shrink-0',\n 'px-4 py-3',\n '[mask-image:linear-gradient(to_right,transparent,black_16px,black_calc(100%-24px),transparent)] lg:[mask-image:none]'\n )}\n >\n <span className=\"hidden lg:block paragraph-medium-semibold text-gray-950 mb-0\">\n Configurações\n </span>\n\n <div className=\"lg:flex lg:flex-col flex flex-row lg:gap-0 gap-0 lg:w-full\">\n <TabsTrigger value={AccountSectionType.PREFERENCES} className={tabTriggerClasses}>\n <IconSettings2 size={20} className=\"shrink-0\" />\n <span className=\"paragraph-small-medium\">Preferências</span>\n </TabsTrigger>\n\n {isOwnerOrAdmin && (\n <TabsTrigger value={AccountSectionType.SECURITY} className={tabTriggerClasses}>\n <IconLock size={20} className=\"shrink-0\" />\n <span className=\"paragraph-small-medium\">Segurança</span>\n </TabsTrigger>\n )}\n </div>\n </TabsList>\n\n <div className=\"w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col\">\n <TabsContent value={AccountSectionType.PREFERENCES} className=\"h-full! relative overflow-hidden\">\n <PreferencesSection onClose={close} />\n </TabsContent>\n\n {isOwnerOrAdmin && (\n <>\n <TabsContent value={AccountSectionType.SECURITY} className=\"h-full! relative overflow-hidden\">\n <SecuritySection\n setActiveSection={setActiveSection}\n onClose={close}\n onDeleteAccount={handleDeleteAccount}\n />\n </TabsContent>\n\n <TabsContent value={AccountSectionType.CHANGE_PASSWORD} className=\"h-full! relative overflow-hidden\">\n <ChangePasswordSection onBack={() => setActiveSection(AccountSectionType.SECURITY)} />\n </TabsContent>\n </>\n )}\n </div>\n </Tabs>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -6,14 +6,12 @@ import { toast } from "sonner";
|
|
|
6
6
|
import { Toast } from "../../ui/feedback/Toast";
|
|
7
7
|
import { USER_QUERY_KEY } from "../../../modules/auth/hooks/useUserQuery";
|
|
8
8
|
import { disableTwoFactorAction } from "../../../modules/accounts/actions/account-management.action";
|
|
9
|
-
import { useWlQueryKey } from "../../../hooks/useAuthQueryKey";
|
|
10
9
|
function useDisableTwoFactorAuthForm({
|
|
11
10
|
onClose,
|
|
12
11
|
onSuccess
|
|
13
12
|
}) {
|
|
14
13
|
const [code, setCode] = useState("");
|
|
15
14
|
const queryClient = useQueryClient();
|
|
16
|
-
const userKey = useWlQueryKey([...USER_QUERY_KEY]);
|
|
17
15
|
const isValid = code.length === 6;
|
|
18
16
|
const mutation = useMutation({
|
|
19
17
|
mutationFn: (otpCode) => disableTwoFactorAction(otpCode),
|
|
@@ -22,7 +20,7 @@ function useDisableTwoFactorAuthForm({
|
|
|
22
20
|
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: result.error ?? "C\xF3digo inv\xE1lido", toastId: t }));
|
|
23
21
|
return;
|
|
24
22
|
}
|
|
25
|
-
queryClient.invalidateQueries({ queryKey:
|
|
23
|
+
queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
|
|
26
24
|
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Autentica\xE7\xE3o de dois fatores desabilitada", toastId: t }));
|
|
27
25
|
setCode("");
|
|
28
26
|
onSuccess?.();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/hooks/useDisableTwoFactorAuthForm.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\r\nimport { toast } from 'sonner';\r\nimport { Toast } from '../../ui/feedback/Toast';\r\nimport { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';\r\nimport { disableTwoFactorAction } from '../../../modules/accounts/actions/account-management.action';\r\
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/hooks/useDisableTwoFactorAuthForm.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\nimport { useMutation, useQueryClient } from '@tanstack/react-query';\r\nimport { toast } from 'sonner';\r\nimport { Toast } from '../../ui/feedback/Toast';\r\nimport { USER_QUERY_KEY } from '../../../modules/auth/hooks/useUserQuery';\r\nimport { disableTwoFactorAction } from '../../../modules/accounts/actions/account-management.action';\r\n\r\ninterface UseDisableTwoFactorAuthFormProps {\r\n onClose: () => void;\r\n onSuccess?: () => void;\r\n}\r\n\r\nexport default function useDisableTwoFactorAuthForm({\r\n onClose,\r\n onSuccess,\r\n}: UseDisableTwoFactorAuthFormProps) {\r\n const [code, setCode] = useState('');\r\n const queryClient = useQueryClient();\r\n\r\n const isValid = code.length === 6;\r\n\r\n const mutation = useMutation({\r\n mutationFn: (otpCode: string) => disableTwoFactorAction(otpCode),\r\n onSuccess: (result) => {\r\n if (!result.success) {\r\n toast.custom((t) => (\r\n <Toast variant=\"error\" message={result.error ?? 'Código inválido'} toastId={t} />\r\n ));\r\n return;\r\n }\r\n\r\n queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });\r\n toast.custom((t) => (\r\n <Toast variant=\"success\" message=\"Autenticação de dois fatores desabilitada\" toastId={t} />\r\n ));\r\n setCode('');\r\n onSuccess?.();\r\n },\r\n onError: () => {\r\n toast.custom((t) => (\r\n <Toast variant=\"error\" message=\"Erro ao desabilitar 2FA. Tente novamente.\" toastId={t} />\r\n ));\r\n },\r\n });\r\n\r\n const { mutate, reset } = mutation;\r\n\r\n const handleClose = useCallback(() => {\r\n setCode('');\r\n reset();\r\n onClose();\r\n }, [onClose, reset]);\r\n\r\n const handleSubmit = useCallback(() => {\r\n if (!isValid) return;\r\n mutate(code);\r\n }, [code, isValid, mutate]);\r\n\r\n return {\r\n code,\r\n setCode,\r\n isValid,\r\n isLoading: mutation.isPending,\r\n handleClose,\r\n handleSubmit,\r\n };\r\n}\r\n"],"mappings":";AA4BU;AA1BV,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AAOxB,SAAR,4BAA6C;AAAA,EAClD;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU,KAAK,WAAW;AAEhC,QAAM,WAAW,YAAY;AAAA,IAC3B,YAAY,CAAC,YAAoB,uBAAuB,OAAO;AAAA,IAC/D,WAAW,CAAC,WAAW;AACrB,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAS,OAAO,SAAS,yBAAmB,SAAS,GAAG,CAChF;AACD;AAAA,MACF;AAEA,kBAAY,kBAAkB,EAAE,UAAU,eAAe,CAAC;AAC1D,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,WAAU,SAAQ,mDAA4C,SAAS,GAAG,CAC1F;AACD,cAAQ,EAAE;AACV,kBAAY;AAAA,IACd;AAAA,IACA,SAAS,MAAM;AACb,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAQ,6CAA4C,SAAS,GAAG,CACxF;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,EAAE,QAAQ,MAAM,IAAI;AAE1B,QAAM,cAAc,YAAY,MAAM;AACpC,YAAQ,EAAE;AACV,UAAM;AACN,YAAQ;AAAA,EACV,GAAG,CAAC,SAAS,KAAK,CAAC;AAEnB,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,QAAS;AACd,WAAO,IAAI;AAAA,EACb,GAAG,CAAC,MAAM,SAAS,MAAM,CAAC;AAE1B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW,SAAS;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -9,14 +9,12 @@ import { FormField } from "../../ui/form/FormField";
|
|
|
9
9
|
import { formatTimer } from "../../../utils/format/masks";
|
|
10
10
|
import { OTP_CODE_LENGTH } from "../../../utils/validators/account";
|
|
11
11
|
import { useAuth } from "../../../providers/auth.provider";
|
|
12
|
-
import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
|
|
13
12
|
import { useInvalidateUser } from "../../../modules/auth/hooks/useUserQuery";
|
|
14
13
|
import { confirmEmailChangeAction } from "../../../modules/accounts/actions/account-management.action";
|
|
15
14
|
import useChangeEmailForm from "../hooks/useChangeEmailForm";
|
|
16
15
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
17
16
|
function ChangeEmailModal({ open, onClose }) {
|
|
18
17
|
const { user } = useAuth();
|
|
19
|
-
const isDefaultWl = useIsDefaultWhitelabel();
|
|
20
18
|
const invalidateUser = useInvalidateUser();
|
|
21
19
|
const {
|
|
22
20
|
showVerification,
|
|
@@ -94,7 +92,7 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
94
92
|
)
|
|
95
93
|
] })
|
|
96
94
|
] }),
|
|
97
|
-
/* @__PURE__ */ jsx("div", { className: `${showVerification ? "w-full" : "w-1/2"} h-0.75
|
|
95
|
+
/* @__PURE__ */ jsx("div", { className: `${showVerification ? "w-full" : "w-1/2"} h-0.75 bg-cyan-300` }),
|
|
98
96
|
showVerification ? /* @__PURE__ */ jsxs(
|
|
99
97
|
"form",
|
|
100
98
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/sections/ChangeEmailModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport { FormField } from '../../ui/form/FormField';\nimport { formatTimer } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangeEmailForm from '../hooks/useChangeEmailForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangeEmailModalProps {\n open: boolean;\n onClose: () => void;\n}\n\nexport function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {\n const { user } = useAuth();\n const isDefaultWl = useIsDefaultWhitelabel();\n const invalidateUser = useInvalidateUser();\n\n const {\n showVerification,\n emailToVerify,\n isSubmitting,\n errors,\n register,\n handleContinue,\n handleBack,\n resetForm,\n } = useChangeEmailForm();\n\n const handleSuccess = () => {\n invalidateUser();\n resetForm();\n onClose();\n };\n\n const {\n code,\n isLoading,\n hasError,\n timer,\n canResend,\n isValidLength,\n handleCodeChange,\n handleValidate,\n handleResend,\n reset: resetOtp,\n } = useOtpVerification({\n onSuccess: handleSuccess,\n successMessage: 'E-mail alterado com sucesso',\n validateFn: async (token) => {\n const result = await confirmEmailChangeAction(token, emailToVerify);\n return result.success;\n },\n resendFn: async () => {\n const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n const result = await requestEmailChangeAction(emailToVerify);\n if (!result.success) {\n throw new Error(result.error);\n }\n },\n });\n\n const handleClose = () => {\n resetForm();\n resetOtp();\n onClose();\n };\n\n const handleBackFromVerification = () => {\n resetOtp();\n handleBack();\n };\n\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n overlayClassName=\"z-[1002]\"\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]\"\n >\n {showVerification ? (\n <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n <IconChevronLeft size={20} className=\"text-gray-950\" />\n </Button>\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n Alterar e-mail\n </DialogTitle>\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </DialogHeader>\n ) : (\n <>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>Alterar e-mail</DialogTitle>\n </DialogHeader>\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n Alterar e-mail\n </span>\n <Button\n variant=\"ghost\"\n className=\"absolute right-2 size-8! p-0\"\n onClick={handleClose}\n >\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </div>\n </>\n )}\n\n <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />\n\n {showVerification ? (\n <form\n onSubmit={(e) => {\n e.preventDefault();\n handleValidate();\n }}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n <IconMail size={20} className=\"text-gray-950\" />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n <p className=\"paragraph-small-regular text-gray-600\">\n Enviamos um código de validação para o E-mail{' '}\n <span className=\"font-semibold text-gray-950 break-all\">{user?.email}.</span>\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n <InputOTPGroup className=\"flex flex-row gap-2\">\n {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n <InputOTPSlot\n key={i}\n index={i}\n className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n />\n ))}\n </InputOTPGroup>\n </InputOTP>\n {hasError && (\n <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n )}\n </div>\n\n {canResend ? (\n <button\n type=\"button\"\n onClick={handleResend}\n className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n >\n Reenviar código\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n Reenviar em{' '}\n <span className=\"paragraph-small-semibold text-gray-950\">\n {formatTimer(timer)}\n </span>\n </p>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading ? 'Validando...' : 'Alterar e-mail'}\n </Button>\n </div>\n </form>\n ) : (\n <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"paragraph-medium-semibold text-gray-950\">\n Atualizar E-mail de contato\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n Informe o seu novo E-mail para manter seu contato atualizado.\n </span>\n </div>\n\n <FormField\n label=\"Novo e-mail\"\n placeholder=\"Digite seu novo e-mail\"\n type=\"email\"\n {...register('email')}\n error={!!errors.email}\n errorMessage={errors.email?.message}\n leftIcon={IconMail}\n />\n </div>\n\n <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Enviando...' : 'Continuar'}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/ChangeEmailModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport { FormField } from '../../ui/form/FormField';\nimport { formatTimer } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmEmailChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangeEmailForm from '../hooks/useChangeEmailForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangeEmailModalProps {\n open: boolean;\n onClose: () => void;\n}\n\nexport function ChangeEmailModal({ open, onClose }: ChangeEmailModalProps) {\n const { user } = useAuth();\n const invalidateUser = useInvalidateUser();\n\n const {\n showVerification,\n emailToVerify,\n isSubmitting,\n errors,\n register,\n handleContinue,\n handleBack,\n resetForm,\n } = useChangeEmailForm();\n\n const handleSuccess = () => {\n invalidateUser();\n resetForm();\n onClose();\n };\n\n const {\n code,\n isLoading,\n hasError,\n timer,\n canResend,\n isValidLength,\n handleCodeChange,\n handleValidate,\n handleResend,\n reset: resetOtp,\n } = useOtpVerification({\n onSuccess: handleSuccess,\n successMessage: 'E-mail alterado com sucesso',\n validateFn: async (token) => {\n const result = await confirmEmailChangeAction(token, emailToVerify);\n return result.success;\n },\n resendFn: async () => {\n const { requestEmailChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n const result = await requestEmailChangeAction(emailToVerify);\n if (!result.success) {\n throw new Error(result.error);\n }\n },\n });\n\n const handleClose = () => {\n resetForm();\n resetOtp();\n onClose();\n };\n\n const handleBackFromVerification = () => {\n resetOtp();\n handleBack();\n };\n\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n overlayClassName=\"z-[1002]\"\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]\"\n >\n {showVerification ? (\n <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n <IconChevronLeft size={20} className=\"text-gray-950\" />\n </Button>\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n Alterar e-mail\n </DialogTitle>\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </DialogHeader>\n ) : (\n <>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>Alterar e-mail</DialogTitle>\n </DialogHeader>\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n Alterar e-mail\n </span>\n <Button\n variant=\"ghost\"\n className=\"absolute right-2 size-8! p-0\"\n onClick={handleClose}\n >\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </div>\n </>\n )}\n\n <div className={`${showVerification ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />\n\n {showVerification ? (\n <form\n onSubmit={(e) => {\n e.preventDefault();\n handleValidate();\n }}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n <IconMail size={20} className=\"text-gray-950\" />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n <p className=\"paragraph-small-regular text-gray-600\">\n Enviamos um código de validação para o E-mail{' '}\n <span className=\"font-semibold text-gray-950 break-all\">{user?.email}.</span>\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n <InputOTPGroup className=\"flex flex-row gap-2\">\n {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n <InputOTPSlot\n key={i}\n index={i}\n className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n />\n ))}\n </InputOTPGroup>\n </InputOTP>\n {hasError && (\n <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n )}\n </div>\n\n {canResend ? (\n <button\n type=\"button\"\n onClick={handleResend}\n className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n >\n Reenviar código\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n Reenviar em{' '}\n <span className=\"paragraph-small-semibold text-gray-950\">\n {formatTimer(timer)}\n </span>\n </p>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading ? 'Validando...' : 'Alterar e-mail'}\n </Button>\n </div>\n </form>\n ) : (\n <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"paragraph-medium-semibold text-gray-950\">\n Atualizar E-mail de contato\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n Informe o seu novo E-mail para manter seu contato atualizado.\n </span>\n </div>\n\n <FormField\n label=\"Novo e-mail\"\n placeholder=\"Digite seu novo e-mail\"\n type=\"email\"\n {...register('email')}\n error={!!errors.email}\n errorMessage={errors.email?.message}\n leftIcon={IconMail}\n />\n </div>\n\n <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Enviando...' : 'Continuar'}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":";AAwFU,SAYA,UAVI,KAFJ;AAtFV,SAAS,iBAAiB,OAAO,gBAAgB;AACjD,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe,oBAAoB;AACtD,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAClC,SAAS,gCAAgC;AACzC,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAOxB,SAAS,iBAAiB,EAAE,MAAM,QAAQ,GAA0B;AACzE,QAAM,EAAE,KAAK,IAAI,QAAQ;AACzB,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAEvB,QAAM,gBAAgB,MAAM;AAC1B,mBAAe;AACf,cAAU;AACV,YAAQ;AAAA,EACV;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,EACT,IAAI,mBAAmB;AAAA,IACrB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,YAAY,OAAO,UAAU;AAC3B,YAAM,SAAS,MAAM,yBAAyB,OAAO,aAAa;AAClE,aAAO,OAAO;AAAA,IAChB;AAAA,IACA,UAAU,YAAY;AACpB,YAAM,EAAE,yBAAyB,IAAI,MAAM,OAAO,6DAA6D;AAC/G,YAAM,SAAS,MAAM,yBAAyB,aAAa;AAC3D,UAAI,CAAC,OAAO,SAAS;AACnB,cAAM,IAAI,MAAM,OAAO,KAAK;AAAA,MAC9B;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,cAAc,MAAM;AACxB,cAAU;AACV,aAAS;AACT,YAAQ;AAAA,EACV;AAEA,QAAM,6BAA6B,MAAM;AACvC,aAAS;AACT,eAAW;AAAA,EACb;AAEA,SACE,oBAAC,UAAO,MAAY,cAAc,aAChC;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,kBAAiB;AAAA,MACjB,WAAU;AAAA,MAET;AAAA,2BACC,qBAAC,gBAAa,WAAU,+FACtB;AAAA,8BAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,4BACvD,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB,GACvD;AAAA,UACA,oBAAC,eAAY,WAAU,8DAA6D,4BAEpF;AAAA,UACA,oBAAC,UAAO,SAAQ,SAAQ,WAAU,eAAc,SAAS,aACvD,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,GAC7C;AAAA,WACF,IAEA,iCACE;AAAA,8BAAC,gBAAa,WAAU,WACtB,8BAAC,eAAY,4BAAc,GAC7B;AAAA,UACA,qBAAC,SAAI,WAAU,8FACb;AAAA,gCAAC,UAAK,WAAU,uDAAsD,4BAEtE;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS;AAAA,gBAET,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,YAC7C;AAAA,aACF;AAAA,WACF;AAAA,QAGF,oBAAC,SAAI,WAAW,GAAG,mBAAmB,WAAW,OAAO,uBAAuB;AAAA,QAE9E,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,CAAC,MAAM;AACf,gBAAE,eAAe;AACjB,6BAAe;AAAA,YACjB;AAAA,YACA,WAAU;AAAA,YAEV;AAAA,mCAAC,SAAI,WAAU,qEACb;AAAA,oCAAC,SAAI,WAAU,iGACb,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAChD;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,QAAG,WAAU,2CAA0C,0CAAmB;AAAA,kBAC3E,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,oBACL;AAAA,oBAC9C,qBAAC,UAAK,WAAU,yCAAyC;AAAA,4BAAM;AAAA,sBAAM;AAAA,uBAAC;AAAA,qBACxE;AAAA,mBACF;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,YAAS,WAAW,iBAAiB,OAAO,MAAM,UAAU,kBAC3D,8BAAC,iBAAc,WAAU,uBACtB,WAAC,GAAG,MAAM,eAAe,CAAC,EAAE,IAAI,CAAC,GAAG,MACnC;AAAA,oBAAC;AAAA;AAAA,sBAEC,OAAO;AAAA,sBACP,WAAW,2IAA2I,WAAW,mBAAmB,iBAAiB;AAAA;AAAA,oBAFhM;AAAA,kBAGP,CACD,GACH,GACF;AAAA,kBACC,YACC,oBAAC,OAAE,WAAU,wCAAuC,iCAAgB;AAAA,mBAExE;AAAA,gBAEC,YACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,WAAU;AAAA,oBACX;AAAA;AAAA,gBAED,IAEA,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,kBACvC;AAAA,kBACZ,oBAAC,UAAK,WAAU,0CACb,sBAAY,KAAK,GACpB;AAAA,mBACF;AAAA,iBAEJ;AAAA,cAEA,oBAAC,aAAU;AAAA,cAEX,qBAAC,SAAI,WAAU,+EACb;AAAA,oCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,gBACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,CAAC,iBAAiB,WACjE,sBAAY,iBAAiB,kBAChC;AAAA,iBACF;AAAA;AAAA;AAAA,QACF,IAEA,qBAAC,UAAK,UAAU,gBAAgB,WAAU,qCACxC;AAAA,+BAAC,SAAI,WAAU,8EACb;AAAA,iCAAC,SAAI,WAAU,uBACb;AAAA,kCAAC,UAAK,WAAU,2CAA0C,yCAE1D;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAwC,2EAExD;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,aAAY;AAAA,gBACZ,MAAK;AAAA,gBACJ,GAAG,SAAS,OAAO;AAAA,gBACpB,OAAO,CAAC,CAAC,OAAO;AAAA,gBAChB,cAAc,OAAO,OAAO;AAAA,gBAC5B,UAAU;AAAA;AAAA,YACZ;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,yFACb;AAAA,gCAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,MAAK,UAAS,SAAS,aAAa,sBAElF;AAAA,YACA,oBAAC,UAAO,WAAU,SAAQ,MAAK,UAAS,UAAU,cAC/C,yBAAe,gBAAgB,aAClC;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;","names":[]}
|
|
@@ -9,14 +9,12 @@ import PhoneInput from "../../ui/form/PhoneInput";
|
|
|
9
9
|
import { formatTimer, formatPhone } from "../../../utils/format/masks";
|
|
10
10
|
import { OTP_CODE_LENGTH } from "../../../utils/validators/account";
|
|
11
11
|
import { useAuth } from "../../../providers/auth.provider";
|
|
12
|
-
import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
|
|
13
12
|
import { useInvalidateUser } from "../../../modules/auth/hooks/useUserQuery";
|
|
14
13
|
import { confirmPhoneChangeAction } from "../../../modules/accounts/actions/account-management.action";
|
|
15
14
|
import useChangePhoneForm from "../hooks/useChangePhoneForm";
|
|
16
15
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
17
16
|
function ChangePhoneModal({ open, onClose }) {
|
|
18
17
|
const { user } = useAuth();
|
|
19
|
-
const isDefaultWl = useIsDefaultWhitelabel();
|
|
20
18
|
const invalidateUser = useInvalidateUser();
|
|
21
19
|
const hasExistingPhone = !!user?.phone;
|
|
22
20
|
const currentPhoneDisplay = user?.phone ? formatPhone(
|
|
@@ -106,7 +104,7 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
106
104
|
)
|
|
107
105
|
] })
|
|
108
106
|
] }),
|
|
109
|
-
/* @__PURE__ */ jsx("div", { className: `${showVerification || !hasExistingPhone ? "w-full" : "w-1/2"} h-0.75
|
|
107
|
+
/* @__PURE__ */ jsx("div", { className: `${showVerification || !hasExistingPhone ? "w-full" : "w-1/2"} h-0.75 bg-cyan-300` }),
|
|
110
108
|
showVerification ? /* @__PURE__ */ jsxs(
|
|
111
109
|
"form",
|
|
112
110
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n open: boolean;\n onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n const { user } = useAuth();\n const isDefaultWl = useIsDefaultWhitelabel();\n const invalidateUser = useInvalidateUser();\n\n const hasExistingPhone = !!user?.phone;\n\n const currentPhoneDisplay = user?.phone\n ? formatPhone(\n user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n )\n : '';\n\n const handleDirectUpdateSuccess = () => {\n invalidateUser();\n onClose();\n };\n\n const {\n showVerification,\n phoneValue,\n phoneError,\n isSubmitting,\n submittedPhone,\n handlePhoneChange,\n handleContinue,\n handleBack,\n resetForm,\n } = useChangePhoneForm({\n hasExistingPhone,\n onDirectUpdateSuccess: handleDirectUpdateSuccess,\n });\n\n const handleSuccess = () => {\n invalidateUser();\n resetForm();\n onClose();\n };\n\n const {\n code,\n isLoading,\n hasError,\n timer,\n canResend,\n isValidLength,\n handleCodeChange,\n handleValidate,\n handleResend,\n reset: resetOtp,\n } = useOtpVerification({\n onSuccess: handleSuccess,\n successMessage: 'Telefone alterado',\n validateFn: async (token) => {\n const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);\n return result.success;\n },\n resendFn: async () => {\n const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);\n if (!result.success) {\n throw new Error(result.error);\n }\n },\n });\n\n const handleClose = () => {\n resetForm();\n resetOtp();\n onClose();\n };\n\n const handleBackFromVerification = () => {\n resetOtp();\n handleBack();\n };\n\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n overlayClassName=\"z-[1002]\"\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]\"\n >\n {showVerification ? (\n <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n <IconChevronLeft size={20} className=\"text-gray-950\" />\n </Button>\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n Alterar telefone\n </DialogTitle>\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </DialogHeader>\n ) : (\n <>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>{hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}</DialogTitle>\n </DialogHeader>\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n {hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}\n </span>\n <Button\n variant=\"ghost\"\n className=\"absolute right-2 size-8! p-0\"\n onClick={handleClose}\n >\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </div>\n </>\n )}\n\n <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 ${isDefaultWl ? 'bg-cyan-300' : 'bg-zinc-300'}`} />\n\n {showVerification ? (\n <form\n onSubmit={(e) => {\n e.preventDefault();\n handleValidate();\n }}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n <IconMessage size={20} className=\"text-gray-950\" />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n <p className=\"paragraph-small-regular text-gray-600\">\n Enviamos um código de validação para o número atual{' '}\n <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n <InputOTPGroup className=\"flex flex-row gap-2\">\n {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n <InputOTPSlot\n key={i}\n index={i}\n className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n />\n ))}\n </InputOTPGroup>\n </InputOTP>\n {hasError && (\n <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n )}\n </div>\n\n {canResend ? (\n <button\n type=\"button\"\n onClick={handleResend}\n className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n >\n Reenviar código\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n Reenviar em{' '}\n <span className=\"paragraph-small-semibold text-gray-950\">\n {formatTimer(timer)}\n </span>\n </p>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading ? 'Validando...' : 'Alterar telefone'}\n </Button>\n </div>\n </form>\n ) : (\n <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"paragraph-medium-semibold text-gray-950\">\n {hasExistingPhone ? 'Atualizar telefone de contato' : 'Adicionar telefone de contato'}\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n {hasExistingPhone\n ? 'Informe o novo número para manter seu contato atualizado.'\n : 'Informe seu número de telefone para contato.'}\n </span>\n </div>\n\n <PhoneInput\n label={hasExistingPhone ? 'Novo número' : 'Número de telefone'}\n placeholder=\"(00) 0 0000-0000\"\n value={phoneValue}\n onChange={handlePhoneChange}\n error={!!phoneError}\n errorMessage={phoneError}\n />\n </div>\n\n <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting\n ? (hasExistingPhone ? 'Enviando...' : 'Salvando...')\n : (hasExistingPhone ? 'Continuar' : 'Salvar')}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/ChangePhoneModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMessage } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { formatTimer, formatPhone } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH } from '../../../utils/validators/account';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { useInvalidateUser } from '../../../modules/auth/hooks/useUserQuery';\nimport { confirmPhoneChangeAction } from '../../../modules/accounts/actions/account-management.action';\nimport useChangePhoneForm from '../hooks/useChangePhoneForm';\nimport useOtpVerification from '../hooks/useOtpVerification';\n\ninterface ChangePhoneModalProps {\n open: boolean;\n onClose: () => void;\n}\n\nexport function ChangePhoneModal({ open, onClose }: ChangePhoneModalProps) {\n const { user } = useAuth();\n const invalidateUser = useInvalidateUser();\n\n const hasExistingPhone = !!user?.phone;\n\n const currentPhoneDisplay = user?.phone\n ? formatPhone(\n user.ddi && user.phone.startsWith(user.ddi) ? user.phone.slice(user.ddi.length) : user.phone\n )\n : '';\n\n const handleDirectUpdateSuccess = () => {\n invalidateUser();\n onClose();\n };\n\n const {\n showVerification,\n phoneValue,\n phoneError,\n isSubmitting,\n submittedPhone,\n handlePhoneChange,\n handleContinue,\n handleBack,\n resetForm,\n } = useChangePhoneForm({\n hasExistingPhone,\n onDirectUpdateSuccess: handleDirectUpdateSuccess,\n });\n\n const handleSuccess = () => {\n invalidateUser();\n resetForm();\n onClose();\n };\n\n const {\n code,\n isLoading,\n hasError,\n timer,\n canResend,\n isValidLength,\n handleCodeChange,\n handleValidate,\n handleResend,\n reset: resetOtp,\n } = useOtpVerification({\n onSuccess: handleSuccess,\n successMessage: 'Telefone alterado',\n validateFn: async (token) => {\n const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);\n return result.success;\n },\n resendFn: async () => {\n const { requestPhoneChangeAction } = await import('../../../modules/accounts/actions/account-management.action');\n const result = await requestPhoneChangeAction(submittedPhone.local, submittedPhone.ddi);\n if (!result.success) {\n throw new Error(result.error);\n }\n },\n });\n\n const handleClose = () => {\n resetForm();\n resetOtp();\n onClose();\n };\n\n const handleBackFromVerification = () => {\n resetOtp();\n handleBack();\n };\n\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n overlayClassName=\"z-[1002]\"\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-125 lg:h-auto lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] z-[1003]\"\n >\n {showVerification ? (\n <DialogHeader className=\"flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0\">\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleBackFromVerification}>\n <IconChevronLeft size={20} className=\"text-gray-950\" />\n </Button>\n <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center flex-1\">\n Alterar telefone\n </DialogTitle>\n <Button variant=\"ghost\" className=\"size-8! p-0\" onClick={handleClose}>\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </DialogHeader>\n ) : (\n <>\n <DialogHeader className=\"sr-only\">\n <DialogTitle>{hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}</DialogTitle>\n </DialogHeader>\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\n <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\n {hasExistingPhone ? 'Alterar telefone' : 'Adicionar telefone'}\n </span>\n <Button\n variant=\"ghost\"\n className=\"absolute right-2 size-8! p-0\"\n onClick={handleClose}\n >\n <IconX size={18} className=\"text-gray-500\" />\n </Button>\n </div>\n </>\n )}\n\n <div className={`${showVerification || !hasExistingPhone ? 'w-full' : 'w-1/2'} h-0.75 bg-cyan-300`} />\n\n {showVerification ? (\n <form\n onSubmit={(e) => {\n e.preventDefault();\n handleValidate();\n }}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className=\"px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none\">\n <div className=\"flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200\">\n <IconMessage size={20} className=\"text-gray-950\" />\n </div>\n\n <div className=\"flex flex-col gap-1\">\n <h3 className=\"paragraph-medium-semibold text-gray-950\">Código de validação</h3>\n <p className=\"paragraph-small-regular text-gray-600\">\n Enviamos um código de validação para o número atual{' '}\n <span className=\"font-semibold text-gray-950\">{currentPhoneDisplay}.</span>\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <InputOTP maxLength={OTP_CODE_LENGTH} value={code} onChange={handleCodeChange}>\n <InputOTPGroup className=\"flex flex-row gap-2\">\n {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n <InputOTPSlot\n key={i}\n index={i}\n className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n />\n ))}\n </InputOTPGroup>\n </InputOTP>\n {hasError && (\n <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n )}\n </div>\n\n {canResend ? (\n <button\n type=\"button\"\n onClick={handleResend}\n className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n >\n Reenviar código\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n Reenviar em{' '}\n <span className=\"paragraph-small-semibold text-gray-950\">\n {formatTimer(timer)}\n </span>\n </p>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading ? 'Validando...' : 'Alterar telefone'}\n </Button>\n </div>\n </form>\n ) : (\n <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"paragraph-medium-semibold text-gray-950\">\n {hasExistingPhone ? 'Atualizar telefone de contato' : 'Adicionar telefone de contato'}\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n {hasExistingPhone\n ? 'Informe o novo número para manter seu contato atualizado.'\n : 'Informe seu número de telefone para contato.'}\n </span>\n </div>\n\n <PhoneInput\n label={hasExistingPhone ? 'Novo número' : 'Número de telefone'}\n placeholder=\"(00) 0 0000-0000\"\n value={phoneValue}\n onChange={handlePhoneChange}\n error={!!phoneError}\n errorMessage={phoneError}\n />\n </div>\n\n <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting\n ? (hasExistingPhone ? 'Enviando...' : 'Salvando...')\n : (hasExistingPhone ? 'Continuar' : 'Salvar')}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -6,7 +6,6 @@ import { useForm } from "react-hook-form";
|
|
|
6
6
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
7
7
|
import { toast } from "sonner";
|
|
8
8
|
import { IconUpload, IconTrash } from "@tabler/icons-react";
|
|
9
|
-
import { ACCEPTED_IMAGE_FORMATS_STRING } from "../../../modules/images/constants/image.constants";
|
|
10
9
|
import { Button } from "../../ui/buttons/Button";
|
|
11
10
|
import { Separator } from "../../ui/data-display/Separator";
|
|
12
11
|
import { Toast } from "../../ui/feedback/Toast";
|
|
@@ -119,7 +118,7 @@ function MyProfileSection({ onClose, storageUrl }) {
|
|
|
119
118
|
{
|
|
120
119
|
ref: fileInputRef,
|
|
121
120
|
type: "file",
|
|
122
|
-
accept:
|
|
121
|
+
accept: "image/*",
|
|
123
122
|
className: "hidden",
|
|
124
123
|
onChange: handlePhotoChange
|
|
125
124
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/sections/MyProfileSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef } from 'react';\nimport Image from 'next/image';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { toast } from 'sonner';\nimport { IconUpload, IconTrash } from '@tabler/icons-react';\nimport { ACCEPTED_IMAGE_FORMATS_STRING } from '../../../modules/images/constants/image.constants';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';\nimport {\n useUpdateAccountUser,\n useDeleteAccount,\n useDeleteAccountUser,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport { GENDER_OPTIONS } from '../constants';\nimport { ChangePhoneModal } from './ChangePhoneModal';\nimport { ChangeEmailModal } from './ChangeEmailModal';\n\ninterface MyProfileSectionProps {\n onClose: () => void;\n storageUrl?: string;\n}\n\nexport function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {\n const { user, logout } = useAuth();\n const updateAccountUser = useUpdateAccountUser();\n const deleteAccount = useDeleteAccount();\n const deleteAccountUser = useDeleteAccountUser();\n const fileInputRef = useRef<HTMLInputElement>(null);\n const [selectedPhoto, setSelectedPhoto] = useState<File | null>(null);\n const [photoRemoved, setPhotoRemoved] = useState(false);\n const [changePhoneOpen, setChangePhoneOpen] = useState(false);\n const [changeEmailOpen, setChangeEmailOpen] = useState(false);\n const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);\n\n const isOwner = user?.profile === UserProfile.owner;\n const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;\n\n const form = useForm<MyProfileFormData>({\n resolver: zodResolver(myProfileSchema),\n mode: 'onChange',\n defaultValues: {\n name: user?.name ?? '',\n last_name: user?.last_name ?? '',\n gender: GENDER_OPTIONS.find((g) => g.apiValue === user?.gender)?.value ?? '',\n },\n });\n\n const {\n register,\n handleSubmit,\n watch,\n setValue,\n formState: { errors, isSubmitting },\n } = form;\n\n const baseStorageUrl = storageUrl ?? process.env.NEXT_PUBLIC_STORAGE_URL ?? '';\n\n const avatarPreview = selectedPhoto\n ? URL.createObjectURL(selectedPhoto)\n : !photoRemoved && user?.photo\n ? `${baseStorageUrl}/${user.photo}`\n : null;\n\n const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const file = e.target.files?.[0] ?? null;\n if (file) {\n setSelectedPhoto(file);\n setPhotoRemoved(false);\n }\n };\n\n const handleRemovePhoto = () => {\n setSelectedPhoto(null);\n setPhotoRemoved(true);\n };\n\n const handleDelete = async () => {\n try {\n if (isOwner) {\n await deleteAccount.mutateAsync();\n } else {\n await deleteAccountUser.mutateAsync(user!.id);\n }\n await logout();\n } catch (error) {\n toast.custom((t) => (\n <Toast\n variant=\"error\"\n message={error instanceof Error ? error.message : 'Erro ao excluir. Tente novamente.'}\n toastId={t}\n />\n ));\n setDeleteConfirmOpen(false);\n }\n };\n\n const onSubmit = async (data: MyProfileFormData) => {\n try {\n await updateAccountUser.mutateAsync({\n name: data.name,\n last_name: data.last_name,\n gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,\n ...(selectedPhoto ? { photo: selectedPhoto } : {}),\n ...(photoRemoved ? { photo: '' } : {}),\n });\n\n form.reset(data);\n setSelectedPhoto(null);\n setPhotoRemoved(false);\n toast.custom((t) => (\n <Toast variant=\"success\" message=\"Perfil atualizado com sucesso\" toastId={t} />\n ));\n onClose();\n } catch (error) {\n toast.custom((t) => (\n <Toast\n variant=\"error\"\n message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}\n toastId={t}\n />\n ));\n }\n };\n\n return (\n <>\n <form onSubmit={handleSubmit(onSubmit)} className=\"lg:h-full lg:flex lg:flex-col\">\n <input\n ref={fileInputRef}\n type=\"file\"\n accept={ACCEPTED_IMAGE_FORMATS_STRING}\n className=\"hidden\"\n onChange={handlePhotoChange}\n />\n <div className=\"absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6\">\n <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">\n Meu perfil\n </span>\n <div className=\"flex flex-col gap-5\">\n <div className=\"flex items-center gap-4\">\n {avatarPreview ? (\n <Image\n src={avatarPreview}\n alt=\"Foto do usuário\"\n width={48}\n height={48}\n className=\"size-12 rounded-full object-cover cursor-pointer\"\n onClick={() => fileInputRef.current?.click()}\n />\n ) : (\n <div\n className=\"size-12 rounded-full bg-gray-50 border border-dashed border-gray-200 flex items-center justify-center cursor-pointer\"\n onClick={() => fileInputRef.current?.click()}\n >\n <IconUpload size={20} className=\"text-gray-400\" />\n </div>\n )}\n {avatarPreview ? (\n <div className=\"flex items-center gap-2\">\n <Button\n variant=\"secondary\"\n className=\"w-fit h-8!\"\n type=\"button\"\n onClick={() => fileInputRef.current?.click()}\n >\n Alterar foto\n </Button>\n <Button\n type=\"button\"\n variant=\"ghost\"\n className=\"h-8!\"\n onClick={handleRemovePhoto}\n >\n <IconTrash size={16} className=\"text-gray-500\" />\n </Button>\n </div>\n ) : (\n <Button\n variant=\"secondary\"\n className=\"w-fit h-8!\"\n type=\"button\"\n onClick={() => fileInputRef.current?.click()}\n >\n Alterar foto\n </Button>\n )}\n </div>\n\n <div className=\"flex flex-col gap-8\">\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex gap-4\">\n <FormField\n label=\"Nome\"\n placeholder=\"Digite seu nome\"\n error={!!errors.name}\n errorMessage={errors.name?.message}\n {...register('name')}\n />\n <FormField\n label=\"Sobrenome\"\n placeholder=\"Digite seu sobrenome\"\n error={!!errors.last_name}\n errorMessage={errors.last_name?.message}\n {...register('last_name')}\n />\n </div>\n <SelectField\n label=\"Gênero\"\n placeholder=\"Selecione seu gênero\"\n options={GENDER_OPTIONS}\n value={watch('gender')}\n className=\"h-10!\"\n onChange={(value) => setValue('gender', value as string)}\n />\n <div className=\"relative\">\n <PhoneInput\n label=\"Telefone\"\n value={user?.phone ?? ''}\n disabled\n classnameContainer=\"bg-gray-50 border-0!\"\n />\n <button\n type=\"button\"\n className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\n onClick={() => setChangePhoneOpen(true)}\n >\n Alterar\n </button>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"flex flex-col gap-4\">\n <span className=\"paragraph-medium-semibold text-gray-600\">Dados de acesso</span>\n <div className=\"relative\">\n <div className='cursor-not-allowed'>\n <FormField\n label=\"E-mail\"\n value={user?.email ?? ''}\n disabled\n classnameContainer=\"bg-gray-50 border-0!\"\n />\n </div>\n <button\n type=\"button\"\n className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\n onClick={() => setChangeEmailOpen(true)}\n >\n Alterar\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"fixed bottom-0 left-0 right-0 lg:static flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\n <Button\n variant=\"secondary\"\n className=\"h-10!\"\n type=\"button\"\n disabled={isSubmitting}\n onClick={() => {\n form.reset();\n setSelectedPhoto(null);\n setPhotoRemoved(false);\n onClose();\n }}\n >\n Cancelar\n </Button>\n <Button className=\"h-10! cursor-pointer\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Salvando...' : 'Salvar alterações'}\n </Button>\n </div>\n </form>\n\n <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />\n <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />\n\n <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>\n <DialogContent className=\"max-w-sm! gap-5\">\n <DialogHeader>\n <DialogTitle className=\"paragraph-large-semibold text-gray-950\">\n {isOwner ? 'Excluir conta' : 'Excluir usuário'}\n </DialogTitle>\n </DialogHeader>\n <p className=\"paragraph-small-regular text-gray-600\">\n {isOwner\n ? 'Tem certeza que deseja excluir sua conta? Todos os dados serão apagados permanentemente e essa ação não pode ser desfeita.'\n : 'Tem certeza que deseja excluir seu usuário? Você perderá acesso a esta conta permanentemente.'}\n </p>\n <div className=\"flex items-center gap-3 justify-end\">\n <Button\n type=\"button\"\n variant=\"secondary\"\n className=\"h-10!\"\n disabled={isDeleting}\n onClick={() => setDeleteConfirmOpen(false)}\n >\n Cancelar\n </Button>\n <Button\n type=\"button\"\n className=\"h-10! bg-red-600 hover:bg-red-700 text-white border-0!\"\n disabled={isDeleting}\n onClick={handleDelete}\n >\n {isDeleting ? 'Excluindo...' : 'Confirmar exclusão'}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/MyProfileSection.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef } from 'react';\nimport Image from 'next/image';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { toast } from 'sonner';\nimport { IconUpload, IconTrash } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { FormField } from '../../ui/form/FormField';\nimport { SelectField } from '../../ui/form/SelectField';\nimport PhoneInput from '../../ui/form/PhoneInput';\nimport { useAuth } from '../../../providers/auth.provider';\nimport { UserProfile } from '../../../modules/users/schema';\nimport { myProfileSchema, type MyProfileFormData } from '../../../utils/validators/account';\nimport {\n useUpdateAccountUser,\n useDeleteAccount,\n useDeleteAccountUser,\n} from '../../../modules/accounts/hooks/useAccountManagement';\nimport { GENDER_OPTIONS } from '../constants';\nimport { ChangePhoneModal } from './ChangePhoneModal';\nimport { ChangeEmailModal } from './ChangeEmailModal';\n\ninterface MyProfileSectionProps {\n onClose: () => void;\n storageUrl?: string;\n}\n\nexport function MyProfileSection({ onClose, storageUrl }: MyProfileSectionProps) {\n const { user, logout } = useAuth();\n const updateAccountUser = useUpdateAccountUser();\n const deleteAccount = useDeleteAccount();\n const deleteAccountUser = useDeleteAccountUser();\n const fileInputRef = useRef<HTMLInputElement>(null);\n const [selectedPhoto, setSelectedPhoto] = useState<File | null>(null);\n const [photoRemoved, setPhotoRemoved] = useState(false);\n const [changePhoneOpen, setChangePhoneOpen] = useState(false);\n const [changeEmailOpen, setChangeEmailOpen] = useState(false);\n const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);\n\n const isOwner = user?.profile === UserProfile.owner;\n const isDeleting = deleteAccount.isPending || deleteAccountUser.isPending;\n\n const form = useForm<MyProfileFormData>({\n resolver: zodResolver(myProfileSchema),\n mode: 'onChange',\n defaultValues: {\n name: user?.name ?? '',\n last_name: user?.last_name ?? '',\n gender: GENDER_OPTIONS.find((g) => g.apiValue === user?.gender)?.value ?? '',\n },\n });\n\n const {\n register,\n handleSubmit,\n watch,\n setValue,\n formState: { errors, isSubmitting },\n } = form;\n\n const baseStorageUrl = storageUrl ?? process.env.NEXT_PUBLIC_STORAGE_URL ?? '';\n\n const avatarPreview = selectedPhoto\n ? URL.createObjectURL(selectedPhoto)\n : !photoRemoved && user?.photo\n ? `${baseStorageUrl}/${user.photo}`\n : null;\n\n const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const file = e.target.files?.[0] ?? null;\n if (file) {\n setSelectedPhoto(file);\n setPhotoRemoved(false);\n }\n };\n\n const handleRemovePhoto = () => {\n setSelectedPhoto(null);\n setPhotoRemoved(true);\n };\n\n const handleDelete = async () => {\n try {\n if (isOwner) {\n await deleteAccount.mutateAsync();\n } else {\n await deleteAccountUser.mutateAsync(user!.id);\n }\n await logout();\n } catch (error) {\n toast.custom((t) => (\n <Toast\n variant=\"error\"\n message={error instanceof Error ? error.message : 'Erro ao excluir. Tente novamente.'}\n toastId={t}\n />\n ));\n setDeleteConfirmOpen(false);\n }\n };\n\n const onSubmit = async (data: MyProfileFormData) => {\n try {\n await updateAccountUser.mutateAsync({\n name: data.name,\n last_name: data.last_name,\n gender: GENDER_OPTIONS.find((g) => g.value === data.gender)?.apiValue,\n ...(selectedPhoto ? { photo: selectedPhoto } : {}),\n ...(photoRemoved ? { photo: '' } : {}),\n });\n\n form.reset(data);\n setSelectedPhoto(null);\n setPhotoRemoved(false);\n toast.custom((t) => (\n <Toast variant=\"success\" message=\"Perfil atualizado com sucesso\" toastId={t} />\n ));\n onClose();\n } catch (error) {\n toast.custom((t) => (\n <Toast\n variant=\"error\"\n message={error instanceof Error ? error.message : 'Erro ao atualizar perfil'}\n toastId={t}\n />\n ));\n }\n };\n\n return (\n <>\n <form onSubmit={handleSubmit(onSubmit)} className=\"lg:h-full lg:flex lg:flex-col\">\n <input\n ref={fileInputRef}\n type=\"file\"\n accept=\"image/*\"\n className=\"hidden\"\n onChange={handlePhotoChange}\n />\n <div className=\"absolute inset-0 overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:static lg:flex-1 lg:min-h-0 lg:overscroll-auto flex flex-col gap-5 lg:gap-6\">\n <span className=\"paragraph-medium-semibold text-gray-950 hidden lg:block\">\n Meu perfil\n </span>\n <div className=\"flex flex-col gap-5\">\n <div className=\"flex items-center gap-4\">\n {avatarPreview ? (\n <Image\n src={avatarPreview}\n alt=\"Foto do usuário\"\n width={48}\n height={48}\n className=\"size-12 rounded-full object-cover cursor-pointer\"\n onClick={() => fileInputRef.current?.click()}\n />\n ) : (\n <div\n className=\"size-12 rounded-full bg-gray-50 border border-dashed border-gray-200 flex items-center justify-center cursor-pointer\"\n onClick={() => fileInputRef.current?.click()}\n >\n <IconUpload size={20} className=\"text-gray-400\" />\n </div>\n )}\n {avatarPreview ? (\n <div className=\"flex items-center gap-2\">\n <Button\n variant=\"secondary\"\n className=\"w-fit h-8!\"\n type=\"button\"\n onClick={() => fileInputRef.current?.click()}\n >\n Alterar foto\n </Button>\n <Button\n type=\"button\"\n variant=\"ghost\"\n className=\"h-8!\"\n onClick={handleRemovePhoto}\n >\n <IconTrash size={16} className=\"text-gray-500\" />\n </Button>\n </div>\n ) : (\n <Button\n variant=\"secondary\"\n className=\"w-fit h-8!\"\n type=\"button\"\n onClick={() => fileInputRef.current?.click()}\n >\n Alterar foto\n </Button>\n )}\n </div>\n\n <div className=\"flex flex-col gap-8\">\n <div className=\"flex flex-col gap-4\">\n <div className=\"flex gap-4\">\n <FormField\n label=\"Nome\"\n placeholder=\"Digite seu nome\"\n error={!!errors.name}\n errorMessage={errors.name?.message}\n {...register('name')}\n />\n <FormField\n label=\"Sobrenome\"\n placeholder=\"Digite seu sobrenome\"\n error={!!errors.last_name}\n errorMessage={errors.last_name?.message}\n {...register('last_name')}\n />\n </div>\n <SelectField\n label=\"Gênero\"\n placeholder=\"Selecione seu gênero\"\n options={GENDER_OPTIONS}\n value={watch('gender')}\n className=\"h-10!\"\n onChange={(value) => setValue('gender', value as string)}\n />\n <div className=\"relative\">\n <PhoneInput\n label=\"Telefone\"\n value={user?.phone ?? ''}\n disabled\n classnameContainer=\"bg-gray-50 border-0!\"\n />\n <button\n type=\"button\"\n className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\n onClick={() => setChangePhoneOpen(true)}\n >\n Alterar\n </button>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"flex flex-col gap-4\">\n <span className=\"paragraph-medium-semibold text-gray-600\">Dados de acesso</span>\n <div className=\"relative\">\n <div className='cursor-not-allowed'>\n <FormField\n label=\"E-mail\"\n value={user?.email ?? ''}\n disabled\n classnameContainer=\"bg-gray-50 border-0!\"\n />\n </div>\n <button\n type=\"button\"\n className=\"absolute right-3 top-5.5 h-10 flex items-center paragraph-xsmall-semibold text-gray-950 underline cursor-pointer\"\n onClick={() => setChangeEmailOpen(true)}\n >\n Alterar\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"fixed bottom-0 left-0 right-0 lg:static flex items-center h-20 px-4 lg:px-5 border-t border-gray-200 justify-between bg-white z-10\">\n <Button\n variant=\"secondary\"\n className=\"h-10!\"\n type=\"button\"\n disabled={isSubmitting}\n onClick={() => {\n form.reset();\n setSelectedPhoto(null);\n setPhotoRemoved(false);\n onClose();\n }}\n >\n Cancelar\n </Button>\n <Button className=\"h-10! cursor-pointer\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Salvando...' : 'Salvar alterações'}\n </Button>\n </div>\n </form>\n\n <ChangePhoneModal open={changePhoneOpen} onClose={() => setChangePhoneOpen(false)} />\n <ChangeEmailModal open={changeEmailOpen} onClose={() => setChangeEmailOpen(false)} />\n\n <Dialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>\n <DialogContent className=\"max-w-sm! gap-5\">\n <DialogHeader>\n <DialogTitle className=\"paragraph-large-semibold text-gray-950\">\n {isOwner ? 'Excluir conta' : 'Excluir usuário'}\n </DialogTitle>\n </DialogHeader>\n <p className=\"paragraph-small-regular text-gray-600\">\n {isOwner\n ? 'Tem certeza que deseja excluir sua conta? Todos os dados serão apagados permanentemente e essa ação não pode ser desfeita.'\n : 'Tem certeza que deseja excluir seu usuário? Você perderá acesso a esta conta permanentemente.'}\n </p>\n <div className=\"flex items-center gap-3 justify-end\">\n <Button\n type=\"button\"\n variant=\"secondary\"\n className=\"h-10!\"\n disabled={isDeleting}\n onClick={() => setDeleteConfirmOpen(false)}\n >\n Cancelar\n </Button>\n <Button\n type=\"button\"\n className=\"h-10! bg-red-600 hover:bg-red-700 text-white border-0!\"\n disabled={isDeleting}\n onClick={handleDelete}\n >\n {isDeleting ? 'Excluindo...' : 'Confirmar exclusão'}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n </>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -4,7 +4,6 @@ import { useEffect } from "react";
|
|
|
4
4
|
import { usePathname } from "next/navigation";
|
|
5
5
|
import { FrillEmbed } from "./FrillEmbed";
|
|
6
6
|
import { CrispEmbed } from "./CrispEmbed";
|
|
7
|
-
import { ClarityEmbed } from "./ClarityEmbed";
|
|
8
7
|
const EXCLUDED_ROUTES = ["/login", "/forgot-password", "/register"];
|
|
9
8
|
function getCrisp() {
|
|
10
9
|
try {
|
|
@@ -37,8 +36,7 @@ function EmbedWidgets() {
|
|
|
37
36
|
if (isExcluded) return null;
|
|
38
37
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
39
38
|
/* @__PURE__ */ jsx(FrillEmbed, {}),
|
|
40
|
-
/* @__PURE__ */ jsx(CrispEmbed, {})
|
|
41
|
-
/* @__PURE__ */ jsx(ClarityEmbed, {})
|
|
39
|
+
/* @__PURE__ */ jsx(CrispEmbed, {})
|
|
42
40
|
] });
|
|
43
41
|
}
|
|
44
42
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/embeds/EmbedWidgets.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { FrillEmbed } from './FrillEmbed';\nimport { CrispEmbed } from './CrispEmbed';\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/embeds/EmbedWidgets.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { usePathname } from 'next/navigation';\nimport { FrillEmbed } from './FrillEmbed';\nimport { CrispEmbed } from './CrispEmbed';\n\nconst EXCLUDED_ROUTES = ['/login', '/forgot-password', '/register'];\n\nfunction getCrisp(): unknown[] | null {\n try {\n const key = '$crisp';\n if (!(key in window)) return null;\n const value = window[key];\n return Array.isArray(value) ? value : null;\n } catch {\n return null;\n }\n}\n\nfunction useHideCrispOnExcludedRoutes(isExcluded: boolean) {\n useEffect(() => {\n try {\n const $crisp = getCrisp();\n if (!$crisp) return;\n\n if (isExcluded) {\n $crisp.push(['do', 'chat:hide']);\n } else {\n $crisp.push(['do', 'chat:show']);\n }\n } catch {}\n }, [isExcluded]);\n}\n\nexport function EmbedWidgets() {\n const pathname = usePathname();\n const isExcluded = EXCLUDED_ROUTES.some((route) => pathname.startsWith(route));\n\n useHideCrispOnExcludedRoutes(isExcluded);\n\n if (isExcluded) return null;\n\n return (\n <>\n <FrillEmbed />\n <CrispEmbed />\n </>\n );\n}\n"],"mappings":";AA4CI,mBACE,KADF;AA1CJ,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAE3B,MAAM,kBAAkB,CAAC,UAAU,oBAAoB,WAAW;AAElE,SAAS,WAA6B;AACpC,MAAI;AACF,UAAM,MAAM;AACZ,QAAI,EAAE,OAAO,QAAS,QAAO;AAC7B,UAAM,QAAQ,OAAO,GAAG;AACxB,WAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ;AAAA,EACxC,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,6BAA6B,YAAqB;AACzD,YAAU,MAAM;AACd,QAAI;AACF,YAAM,SAAS,SAAS;AACxB,UAAI,CAAC,OAAQ;AAEb,UAAI,YAAY;AACd,eAAO,KAAK,CAAC,MAAM,WAAW,CAAC;AAAA,MACjC,OAAO;AACL,eAAO,KAAK,CAAC,MAAM,WAAW,CAAC;AAAA,MACjC;AAAA,IACF,QAAQ;AAAA,IAAC;AAAA,EACX,GAAG,CAAC,UAAU,CAAC;AACjB;AAEO,SAAS,eAAe;AAC7B,QAAM,WAAW,YAAY;AAC7B,QAAM,aAAa,gBAAgB,KAAK,CAAC,UAAU,SAAS,WAAW,KAAK,CAAC;AAE7E,+BAA6B,UAAU;AAEvC,MAAI,WAAY,QAAO;AAEvB,SACE,iCACE;AAAA,wBAAC,cAAW;AAAA,IACZ,oBAAC,cAAW;AAAA,KACd;AAEJ;","names":[]}
|
|
@@ -4,7 +4,6 @@ import Image from "next/image";
|
|
|
4
4
|
import { IconMenu2, IconX } from "@tabler/icons-react";
|
|
5
5
|
import { ProfilePopover } from "./ProfilePopover";
|
|
6
6
|
import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
|
|
7
|
-
import { useIsDefaultWhitelabel } from "../../providers/whitelabel.provider";
|
|
8
7
|
function AppMobileNavBar({
|
|
9
8
|
activeApp,
|
|
10
9
|
onAppIconClick,
|
|
@@ -13,14 +12,13 @@ function AppMobileNavBar({
|
|
|
13
12
|
showMenuToggle = true
|
|
14
13
|
}) {
|
|
15
14
|
const { isOpen, toggle } = useMobileNavbarSheet();
|
|
16
|
-
const isDefaultWl = useIsDefaultWhitelabel();
|
|
17
15
|
const isGpagesActive = activeApp === "gpages";
|
|
18
16
|
return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
|
|
19
17
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
20
18
|
/* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
|
|
21
19
|
"div",
|
|
22
20
|
{
|
|
23
|
-
className: `size-10 rounded-lg flex items-center justify-center transition-colors ${isGpagesActive ?
|
|
21
|
+
className: `size-10 rounded-lg flex items-center justify-center transition-colors ${isGpagesActive ? "bg-cyan-100 border-2 border-white ring-2 ring-cyan-300" : onAppIconClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
|
|
24
22
|
onClick: onAppIconClick,
|
|
25
23
|
children: /* @__PURE__ */ jsx(
|
|
26
24
|
Image,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { useMobileNavbarSheet } from \"../../store/useMobileNavbarSheet\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport Image from \"next/image\";\nimport { IconMenu2, IconX } from \"@tabler/icons-react\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { useMobileNavbarSheet } from \"../../store/useMobileNavbarSheet\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppMobileNavBarProps {\n /** Which app is currently active — controls which icon gets the indicator */\n activeApp?: \"gapps\" | \"gpages\";\n /** Called when the app icon (e.g. GreatPages) is clicked */\n onAppIconClick?: () => void;\n /** Extra slot rendered after the app icon (e.g. project selector) */\n extraLeftSlot?: ReactNode;\n menuItems?: ProfileMenuItem[];\n showMenuToggle?: boolean;\n}\n\nexport function AppMobileNavBar({\n activeApp,\n onAppIconClick,\n extraLeftSlot,\n menuItems = [],\n showMenuToggle = true,\n}: AppMobileNavBarProps) {\n const { isOpen, toggle } = useMobileNavbarSheet();\n\n const isGpagesActive = activeApp === \"gpages\";\n\n return (\n <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n <div className=\"flex items-center gap-1.5\">\n <div className=\"relative\">\n <div\n className={`size-10 rounded-lg flex items-center justify-center transition-colors ${\n isGpagesActive\n ? \"bg-cyan-100 border-2 border-white ring-2 ring-cyan-300\"\n : onAppIconClick ? \"cursor-pointer hover:bg-gray-100\" : \"\"\n }`}\n onClick={onAppIconClick}\n >\n <Image\n src=\"/icons/icon-navbar.svg\"\n alt=\"GreatPages\"\n width={24}\n height={24}\n />\n </div>\n </div>\n {extraLeftSlot}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <ProfilePopover\n side=\"bottom\"\n align=\"end\"\n contentClassName=\"\"\n menuItems={menuItems}\n />\n {showMenuToggle && (\n <button\n className=\"size-10 flex items-center justify-center border border-zinc-200 rounded-lg bg-white cursor-pointer\"\n onClick={toggle}\n >\n {isOpen ? (\n <IconX size={18} className=\"text-zinc-950\" />\n ) : (\n <IconMenu2 size={18} className=\"text-zinc-950\" />\n )}\n </button>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";AAiCM,SAUM,KAVN;AA9BN,OAAO,WAAW;AAClB,SAAS,WAAW,aAAa;AACjC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAc9B,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb,iBAAiB;AACnB,GAAyB;AACvB,QAAM,EAAE,QAAQ,OAAO,IAAI,qBAAqB;AAEhD,QAAM,iBAAiB,cAAc;AAErC,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,0BAAC,SAAI,WAAU,YACb;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,yEACT,iBACI,2DACA,iBAAiB,qCAAqC,EAC5D;AAAA,UACA,SAAS;AAAA,UAET;AAAA,YAAC;AAAA;AAAA,cACC,KAAI;AAAA,cACJ,KAAI;AAAA,cACJ,OAAO;AAAA,cACP,QAAQ;AAAA;AAAA,UACV;AAAA;AAAA,MACF,GACF;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB;AAAA;AAAA,MACF;AAAA,MACC,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS;AAAA,UAER,mBACC,oBAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB,IAE3C,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,MAEnD;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1,22 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useRouter } from "next/navigation";
|
|
3
4
|
import { NavBar } from "./NavBar";
|
|
4
5
|
import { ProfilePopover } from "./ProfilePopover";
|
|
5
6
|
import { NotificationsPopover } from "./NotificationsPopover";
|
|
6
7
|
function AppNavBar({
|
|
7
|
-
|
|
8
|
-
appIconHref,
|
|
8
|
+
onLogoClick,
|
|
9
9
|
activeApp,
|
|
10
|
+
appIconHref = "/",
|
|
10
11
|
showExpandButton = false,
|
|
11
12
|
onExpandClick,
|
|
12
13
|
menuItems = [],
|
|
13
14
|
onNotificationsViewAll
|
|
14
15
|
}) {
|
|
16
|
+
const router = useRouter();
|
|
17
|
+
const handleLogoClick = onLogoClick ?? (() => router.push("/"));
|
|
18
|
+
const handleAppIconClick = () => router.push(appIconHref);
|
|
15
19
|
return /* @__PURE__ */ jsxs(
|
|
16
20
|
NavBar,
|
|
17
21
|
{
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
onLogoClick: handleLogoClick,
|
|
23
|
+
onAppIconClick: handleAppIconClick,
|
|
20
24
|
activeApp,
|
|
21
25
|
showExpandButton,
|
|
22
26
|
onExpandClick,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n onLogoClick?: () => void;\n /** Which app is currently active — controls which icon gets the indicator */\n activeApp?: \"gapps\" | \"gpages\";\n appIconHref?: string;\n showExpandButton?: boolean;\n onExpandClick?: () => void;\n menuItems?: ProfileMenuItem[];\n onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n onLogoClick,\n activeApp,\n appIconHref = \"/\",\n showExpandButton = false,\n onExpandClick,\n menuItems = [],\n onNotificationsViewAll,\n}: AppNavBarProps) {\n const router = useRouter();\n\n const handleLogoClick = onLogoClick ?? (() => router.push(\"/\"));\n const handleAppIconClick = () => router.push(appIconHref);\n\n return (\n <NavBar\n onLogoClick={handleLogoClick}\n onAppIconClick={handleAppIconClick}\n activeApp={activeApp}\n showExpandButton={showExpandButton}\n onExpandClick={onExpandClick}\n >\n <NotificationsPopover onViewAll={onNotificationsViewAll} />\n <ProfilePopover menuItems={menuItems} />\n </NavBar>\n );\n}\n"],"mappings":";AAkCI,SAOE,KAPF;AAhCJ,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAc9B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AAEzB,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD,oBAAC,kBAAe,WAAsB;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":[]}
|