@greatapps/common 1.1.525 → 1.1.526
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 +10 -4
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs +3 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs +3 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs +3 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs +2 -1
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/account/sections/TokenSection.mjs +72 -0
- package/dist/components/account/sections/TokenSection.mjs.map +1 -0
- package/dist/components/embeds/ClarityEmbed.mjs +55 -0
- package/dist/components/embeds/ClarityEmbed.mjs.map +1 -0
- package/dist/components/embeds/EmbedWidgets.mjs +3 -1
- package/dist/components/embeds/EmbedWidgets.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +3 -1
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/AppNavBar.mjs +4 -8
- package/dist/components/layouts/AppNavBar.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs +10 -9
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs +5 -2
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +4 -2
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/SideBarNavigation.mjs +4 -1
- package/dist/components/layouts/SideBarNavigation.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs +26 -9
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/cards/AddCardModal.mjs +3 -1
- 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 +7 -6
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +39 -19
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/pages/NotFoundPage.mjs +2 -2
- package/dist/components/pages/NotFoundPage.mjs.map +1 -1
- package/dist/components/ui/buttons/Button.mjs +7 -2
- 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 +4 -2
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/dist/components/ui/data-display/UserAvatar.mjs +6 -2
- package/dist/components/ui/data-display/UserAvatar.mjs.map +1 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs +4 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/Toast.mjs +7 -2
- 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 +8 -6
- package/dist/components/ui/overlay/Sheet.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs +11 -37
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageUpload.mjs +2 -1
- package/dist/components/widgets/ImageUpload/ImageUpload.mjs.map +1 -1
- package/dist/components/widgets/notifications/NotificationCard.mjs +4 -1
- package/dist/components/widgets/notifications/NotificationCard.mjs.map +1 -1
- package/dist/enums/AccountSectionType.mjs +1 -0
- package/dist/enums/AccountSectionType.mjs.map +1 -1
- package/dist/hooks/useAuthQueryKey.mjs +23 -0
- package/dist/hooks/useAuthQueryKey.mjs.map +1 -0
- package/dist/index.mjs +90 -8
- package/dist/index.mjs.map +1 -1
- package/dist/infra/utils/array.mjs +34 -0
- package/dist/infra/utils/array.mjs.map +1 -0
- package/dist/modules/accounts/actions/get-account-token.action.mjs +10 -0
- package/dist/modules/accounts/actions/get-account-token.action.mjs.map +1 -0
- package/dist/modules/accounts/hooks/current-account.hook.mjs +5 -2
- package/dist/modules/accounts/hooks/current-account.hook.mjs.map +1 -1
- package/dist/modules/accounts/hooks/use-account-token.hook.mjs +15 -0
- package/dist/modules/accounts/hooks/use-account-token.hook.mjs.map +1 -0
- package/dist/modules/accounts/hooks/useAccountManagement.mjs +19 -9
- package/dist/modules/accounts/hooks/useAccountManagement.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useCurrencies.mjs +3 -1
- package/dist/modules/accounts/hooks/useCurrencies.mjs.map +1 -1
- package/dist/modules/accounts/hooks/useTimezones.mjs +3 -1
- package/dist/modules/accounts/hooks/useTimezones.mjs.map +1 -1
- package/dist/modules/accounts/services/account-token.service.mjs +32 -0
- package/dist/modules/accounts/services/account-token.service.mjs.map +1 -0
- package/dist/modules/auth/hooks/useUserQuery.mjs +15 -6
- package/dist/modules/auth/hooks/useUserQuery.mjs.map +1 -1
- package/dist/modules/cards/actions/delete-card.action.mjs +10 -0
- package/dist/modules/cards/actions/delete-card.action.mjs.map +1 -0
- package/dist/modules/cards/actions/find-card-by-id.action.mjs +10 -0
- package/dist/modules/cards/actions/find-card-by-id.action.mjs.map +1 -0
- package/dist/modules/cards/actions/set-default-card.action.mjs +10 -0
- package/dist/modules/cards/actions/set-default-card.action.mjs.map +1 -0
- package/dist/modules/cards/hooks/card-by-id.hook.mjs +22 -0
- package/dist/modules/cards/hooks/card-by-id.hook.mjs.map +1 -0
- package/dist/modules/cards/hooks/cards.hook.mjs +11 -3
- package/dist/modules/cards/hooks/cards.hook.mjs.map +1 -1
- package/dist/modules/cards/hooks/create-card.hook.mjs +13 -2
- package/dist/modules/cards/hooks/create-card.hook.mjs.map +1 -1
- package/dist/modules/cards/hooks/delete-card.hook.mjs +50 -0
- package/dist/modules/cards/hooks/delete-card.hook.mjs.map +1 -0
- package/dist/modules/cards/hooks/set-default-card.hook.mjs +51 -0
- package/dist/modules/cards/hooks/set-default-card.hook.mjs.map +1 -0
- package/dist/modules/cards/services/cards.service.mjs +45 -4
- package/dist/modules/cards/services/cards.service.mjs.map +1 -1
- package/dist/modules/cards/types.mjs +11 -3
- package/dist/modules/cards/types.mjs.map +1 -1
- package/dist/modules/ia-credits/hooks/ia-credits.hook.mjs +3 -1
- package/dist/modules/ia-credits/hooks/ia-credits.hook.mjs.map +1 -1
- package/dist/modules/plans/hooks/list-plans.hook.mjs +3 -1
- package/dist/modules/plans/hooks/list-plans.hook.mjs.map +1 -1
- package/dist/modules/plans/hooks/use-plan-by-id.hook.mjs +4 -2
- package/dist/modules/plans/hooks/use-plan-by-id.hook.mjs.map +1 -1
- package/dist/modules/plans/services/plans.service.mjs +4 -2
- 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 +20 -10
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs.map +1 -1
- package/dist/modules/projects/actions/create-project.action.mjs +10 -0
- package/dist/modules/projects/actions/create-project.action.mjs.map +1 -0
- package/dist/modules/projects/actions/delete-project.action.mjs +10 -0
- package/dist/modules/projects/actions/delete-project.action.mjs.map +1 -0
- package/dist/modules/projects/actions/find-project.action.mjs +10 -0
- package/dist/modules/projects/actions/find-project.action.mjs.map +1 -0
- package/dist/modules/projects/actions/list-projects.action.mjs +10 -0
- package/dist/modules/projects/actions/list-projects.action.mjs.map +1 -0
- package/dist/modules/projects/actions/update-project.action.mjs +10 -0
- package/dist/modules/projects/actions/update-project.action.mjs.map +1 -0
- package/dist/modules/projects/hooks/add-project-user.hook.mjs +15 -12
- package/dist/modules/projects/hooks/add-project-user.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/create-project.hook.mjs +71 -0
- package/dist/modules/projects/hooks/create-project.hook.mjs.map +1 -0
- package/dist/modules/projects/hooks/delete-project.hook.mjs +53 -0
- package/dist/modules/projects/hooks/delete-project.hook.mjs.map +1 -0
- package/dist/modules/projects/hooks/find-project.hook.mjs +19 -0
- package/dist/modules/projects/hooks/find-project.hook.mjs.map +1 -0
- package/dist/modules/projects/hooks/list-all-account-users.hook.mjs +3 -1
- package/dist/modules/projects/hooks/list-all-account-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-available-users.hook.mjs +3 -1
- package/dist/modules/projects/hooks/list-available-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-infinite-projects.hook.mjs +39 -0
- package/dist/modules/projects/hooks/list-infinite-projects.hook.mjs.map +1 -0
- package/dist/modules/projects/hooks/list-project-users.hook.mjs +3 -1
- package/dist/modules/projects/hooks/list-project-users.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/list-projects.hook.mjs +22 -0
- package/dist/modules/projects/hooks/list-projects.hook.mjs.map +1 -0
- package/dist/modules/projects/hooks/remove-project-user.hook.mjs +15 -12
- package/dist/modules/projects/hooks/remove-project-user.hook.mjs.map +1 -1
- package/dist/modules/projects/hooks/update-project.hook.mjs +70 -0
- package/dist/modules/projects/hooks/update-project.hook.mjs.map +1 -0
- package/dist/modules/projects/services/projects.service.mjs +99 -0
- package/dist/modules/projects/services/projects.service.mjs.map +1 -0
- package/dist/modules/projects/types.mjs +19 -4
- package/dist/modules/projects/types.mjs.map +1 -1
- package/dist/modules/subscriptions/constants/query-keys.constants.mjs +2 -0
- package/dist/modules/subscriptions/constants/query-keys.constants.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/find-active-subscription.hook.mjs +5 -2
- package/dist/modules/subscriptions/hooks/find-active-subscription.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/list-subscriptions.hook.mjs +3 -1
- package/dist/modules/subscriptions/hooks/list-subscriptions.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs +6 -3
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs.map +1 -1
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs +29 -2
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs +7 -0
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/modules/users/action/list-messages.action.mjs +14 -2
- package/dist/modules/users/action/list-messages.action.mjs.map +1 -1
- package/dist/modules/users/hooks/messages.hook.mjs +9 -4
- 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 +6 -4
- 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 +5 -0
- package/dist/providers/whitelabel.provider.mjs.map +1 -1
- package/dist/server.mjs +14 -0
- package/dist/server.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/components/navigation/types.mjs +0 -1
- package/dist/components/navigation/types.mjs.map +0 -1
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { IconLock, IconSettings2, IconX } from "@tabler/icons-react";
|
|
3
|
+
import { IconKey, 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";
|
|
10
11
|
import { SecuritySection } from "./sections/SecuritySection";
|
|
11
12
|
import useConfigurationsModal from "./hooks/useConfigurationsModal";
|
|
12
13
|
import useIsMobile from "../../hooks/useIsMobile";
|
|
@@ -24,7 +25,7 @@ function ConfigurationsMyAccountModal() {
|
|
|
24
25
|
const open = activeModal === "configurations";
|
|
25
26
|
const { hasActiveSubscription } = config;
|
|
26
27
|
const { user } = useAuth();
|
|
27
|
-
const
|
|
28
|
+
const isOwner = user?.profile === UserProfile.owner;
|
|
28
29
|
const isMobile = useIsMobile();
|
|
29
30
|
const { activeSection, setActiveSection } = useConfigurationsModal({
|
|
30
31
|
isOpen: open
|
|
@@ -94,7 +95,11 @@ function ConfigurationsMyAccountModal() {
|
|
|
94
95
|
/* @__PURE__ */ jsx(IconSettings2, { size: 20, className: "shrink-0" }),
|
|
95
96
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Prefer\xEAncias" })
|
|
96
97
|
] }),
|
|
97
|
-
|
|
98
|
+
isOwner && /* @__PURE__ */ jsxs(TabsTrigger, { value: AccountSectionType.TOKEN, className: tabTriggerClasses, children: [
|
|
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: [
|
|
98
103
|
/* @__PURE__ */ jsx(IconLock, { size: 20, className: "shrink-0" }),
|
|
99
104
|
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium", children: "Seguran\xE7a" })
|
|
100
105
|
] })
|
|
@@ -104,7 +109,8 @@ function ConfigurationsMyAccountModal() {
|
|
|
104
109
|
),
|
|
105
110
|
/* @__PURE__ */ jsxs("div", { className: "w-full flex-1 min-h-0 lg:h-full overflow-hidden lg:overflow-visible relative flex flex-col", children: [
|
|
106
111
|
/* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.PREFERENCES, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(PreferencesSection, { onClose: close }) }),
|
|
107
|
-
|
|
112
|
+
isOwner && /* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.TOKEN, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(TokenSection, {}) }),
|
|
113
|
+
isOwner && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
108
114
|
/* @__PURE__ */ jsx(TabsContent, { value: AccountSectionType.SECURITY, className: "h-full! relative overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
109
115
|
SecuritySection,
|
|
110
116
|
{
|
|
@@ -1 +1 @@
|
|
|
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
|
|
1
|
+
{"version":3,"sources":["../../../src/components/account/ConfigurationsMyAccountModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconKey, 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 { TokenSection } from './sections/TokenSection';\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 isOwner = user?.profile === UserProfile.owner;\n\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 {isOwner && (\n <TabsTrigger value={AccountSectionType.TOKEN} className={tabTriggerClasses}>\n <IconKey size={20} className=\"shrink-0\" />\n <span className=\"paragraph-small-medium\">Token da conta</span>\n </TabsTrigger>\n )}\n\n {isOwner && (\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 {isOwner && (\n <TabsContent value={AccountSectionType.TOKEN} className=\"h-full! relative overflow-hidden\">\n <TokenSection />\n </TabsContent>\n )}\n\n {isOwner && (\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,12 +6,14 @@ 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";
|
|
9
10
|
function useDisableTwoFactorAuthForm({
|
|
10
11
|
onClose,
|
|
11
12
|
onSuccess
|
|
12
13
|
}) {
|
|
13
14
|
const [code, setCode] = useState("");
|
|
14
15
|
const queryClient = useQueryClient();
|
|
16
|
+
const userKey = useWlQueryKey([...USER_QUERY_KEY]);
|
|
15
17
|
const isValid = code.length === 6;
|
|
16
18
|
const mutation = useMutation({
|
|
17
19
|
mutationFn: (otpCode) => disableTwoFactorAction(otpCode),
|
|
@@ -20,7 +22,7 @@ function useDisableTwoFactorAuthForm({
|
|
|
20
22
|
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: result.error ?? "C\xF3digo inv\xE1lido", toastId: t }));
|
|
21
23
|
return;
|
|
22
24
|
}
|
|
23
|
-
queryClient.invalidateQueries({ queryKey:
|
|
25
|
+
queryClient.invalidateQueries({ queryKey: userKey });
|
|
24
26
|
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Autentica\xE7\xE3o de dois fatores desabilitada", toastId: t }));
|
|
25
27
|
setCode("");
|
|
26
28
|
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\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:
|
|
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\nimport { useWlQueryKey } from '../../../hooks/useAuthQueryKey';\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 const userKey = useWlQueryKey([...USER_QUERY_KEY]);\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: userKey });\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":";AA8BU;AA5BV,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa,sBAAsB;AAC5C,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAOf,SAAR,4BAA6C;AAAA,EAClD;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,cAAc,eAAe;AACnC,QAAM,UAAU,cAAc,CAAC,GAAG,cAAc,CAAC;AAEjD,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,QAAQ,CAAC;AACnD,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,12 +9,14 @@ 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";
|
|
12
13
|
import { useInvalidateUser } from "../../../modules/auth/hooks/useUserQuery";
|
|
13
14
|
import { confirmEmailChangeAction } from "../../../modules/accounts/actions/account-management.action";
|
|
14
15
|
import useChangeEmailForm from "../hooks/useChangeEmailForm";
|
|
15
16
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
16
17
|
function ChangeEmailModal({ open, onClose }) {
|
|
17
18
|
const { user } = useAuth();
|
|
19
|
+
const isDefaultWl = useIsDefaultWhitelabel();
|
|
18
20
|
const invalidateUser = useInvalidateUser();
|
|
19
21
|
const {
|
|
20
22
|
showVerification,
|
|
@@ -92,7 +94,7 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
92
94
|
)
|
|
93
95
|
] })
|
|
94
96
|
] }),
|
|
95
|
-
/* @__PURE__ */ jsx("div", { className: `${showVerification ? "w-full" : "w-1/2"} h-0.75 bg-cyan-300` }),
|
|
97
|
+
/* @__PURE__ */ jsx("div", { className: `${showVerification ? "w-full" : "w-1/2"} h-0.75 ${isDefaultWl ? "bg-cyan-300" : "bg-zinc-300"}` }),
|
|
96
98
|
showVerification ? /* @__PURE__ */ jsxs(
|
|
97
99
|
"form",
|
|
98
100
|
{
|
|
@@ -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 { 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":[]}
|
|
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":[]}
|
|
@@ -9,12 +9,14 @@ 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";
|
|
12
13
|
import { useInvalidateUser } from "../../../modules/auth/hooks/useUserQuery";
|
|
13
14
|
import { confirmPhoneChangeAction } from "../../../modules/accounts/actions/account-management.action";
|
|
14
15
|
import useChangePhoneForm from "../hooks/useChangePhoneForm";
|
|
15
16
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
16
17
|
function ChangePhoneModal({ open, onClose }) {
|
|
17
18
|
const { user } = useAuth();
|
|
19
|
+
const isDefaultWl = useIsDefaultWhitelabel();
|
|
18
20
|
const invalidateUser = useInvalidateUser();
|
|
19
21
|
const hasExistingPhone = !!user?.phone;
|
|
20
22
|
const currentPhoneDisplay = user?.phone ? formatPhone(
|
|
@@ -104,7 +106,7 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
104
106
|
)
|
|
105
107
|
] })
|
|
106
108
|
] }),
|
|
107
|
-
/* @__PURE__ */ jsx("div", { className: `${showVerification || !hasExistingPhone ? "w-full" : "w-1/2"} h-0.75 bg-cyan-300` }),
|
|
109
|
+
/* @__PURE__ */ jsx("div", { className: `${showVerification || !hasExistingPhone ? "w-full" : "w-1/2"} h-0.75 ${isDefaultWl ? "bg-cyan-300" : "bg-zinc-300"}` }),
|
|
108
110
|
showVerification ? /* @__PURE__ */ jsxs(
|
|
109
111
|
"form",
|
|
110
112
|
{
|
|
@@ -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 { 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":";AAyGU,SAYA,UAVI,KAFJ;AAvGV,SAAS,iBAAiB,OAAO,mBAAmB;AACpD,SAAS,cAAc;AACvB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,iBAAiB;AAC1B,SAAS,UAAU,eAAe,oBAAoB;AACtD,OAAO,gBAAgB;AACvB,SAAS,aAAa,mBAAmB;AACzC,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,mBAAmB,CAAC,CAAC,MAAM;AAEjC,QAAM,sBAAsB,MAAM,QAC9B;AAAA,IACE,KAAK,OAAO,KAAK,MAAM,WAAW,KAAK,GAAG,IAAI,KAAK,MAAM,MAAM,KAAK,IAAI,MAAM,IAAI,KAAK;AAAA,EACzF,IACA;AAEJ,QAAM,4BAA4B,MAAM;AACtC,mBAAe;AACf,YAAQ;AAAA,EACV;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB;AAAA,IACA,uBAAuB;AAAA,EACzB,CAAC;AAED,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,eAAe,OAAO,eAAe,GAAG;AAC7F,aAAO,OAAO;AAAA,IAChB;AAAA,IACA,UAAU,YAAY;AACpB,YAAM,EAAE,yBAAyB,IAAI,MAAM,OAAO,6DAA6D;AAC/G,YAAM,SAAS,MAAM,yBAAyB,eAAe,OAAO,eAAe,GAAG;AACtF,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,8BAEpF;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,eAAa,6BAAmB,qBAAqB,sBAAqB,GAC7E;AAAA,UACA,qBAAC,SAAI,WAAU,8FACb;AAAA,gCAAC,UAAK,WAAU,uDACb,6BAAmB,qBAAqB,sBAC3C;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,oBAAoB,CAAC,mBAAmB,WAAW,OAAO,uBAAuB;AAAA,QAEnG,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,eAAY,MAAM,IAAI,WAAU,iBAAgB,GACnD;AAAA,gBAEA,qBAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,QAAG,WAAU,2CAA0C,0CAAmB;AAAA,kBAC3E,qBAAC,OAAE,WAAU,yCAAwC;AAAA;AAAA,oBACC;AAAA,oBACpD,qBAAC,UAAK,WAAU,+BAA+B;AAAA;AAAA,sBAAoB;AAAA,uBAAC;AAAA,qBACtE;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,oBAChC;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,2CACb,6BAAmB,kCAAkC,iCACxD;AAAA,cACA,oBAAC,UAAK,WAAU,yCACb,6BACG,iEACA,mDACN;AAAA,eACF;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,mBAAmB,mBAAgB;AAAA,gBAC1C,aAAY;AAAA,gBACZ,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,OAAO,CAAC,CAAC;AAAA,gBACT,cAAc;AAAA;AAAA,YAChB;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,yBACI,mBAAmB,gBAAgB,gBACnC,mBAAmB,cAAc,UACxC;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;","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 { 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":[]}
|
|
@@ -6,6 +6,7 @@ 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";
|
|
9
10
|
import { Button } from "../../ui/buttons/Button";
|
|
10
11
|
import { Separator } from "../../ui/data-display/Separator";
|
|
11
12
|
import { Toast } from "../../ui/feedback/Toast";
|
|
@@ -118,7 +119,7 @@ function MyProfileSection({ onClose, storageUrl }) {
|
|
|
118
119
|
{
|
|
119
120
|
ref: fileInputRef,
|
|
120
121
|
type: "file",
|
|
121
|
-
accept:
|
|
122
|
+
accept: ACCEPTED_IMAGE_FORMATS_STRING,
|
|
122
123
|
className: "hidden",
|
|
123
124
|
onChange: handlePhotoChange
|
|
124
125
|
}
|
|
@@ -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 { 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":[]}
|
|
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":[]}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { IconCheck, IconCopy, IconInfoCircle } from "@tabler/icons-react";
|
|
4
|
+
import { toast } from "sonner";
|
|
5
|
+
import { Toast } from "../../ui/feedback/Toast";
|
|
6
|
+
import { Button } from "../../ui/buttons/Button";
|
|
7
|
+
import { FormField } from "../../ui/form/FormField";
|
|
8
|
+
import useCopyToClipboard from "../../../hooks/copy-to-clipboard.hook";
|
|
9
|
+
import { useAccountToken } from "../../../modules/accounts/hooks/use-account-token.hook";
|
|
10
|
+
import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
|
|
11
|
+
function TokenSection() {
|
|
12
|
+
const { data: token = "", isLoading } = useAccountToken();
|
|
13
|
+
const isDefaultWl = useIsDefaultWhitelabel();
|
|
14
|
+
const { isCopied, copy } = useCopyToClipboard({
|
|
15
|
+
onSuccess: () => {
|
|
16
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "Token copiado com sucesso", toastId: t }));
|
|
17
|
+
},
|
|
18
|
+
onError: () => {
|
|
19
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: "N\xE3o foi poss\xEDvel copiar o token", toastId: t }));
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
return /* @__PURE__ */ jsxs("div", { className: "h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto", children: [
|
|
23
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Token da conta" }),
|
|
24
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
|
|
25
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-end gap-3", children: [
|
|
26
|
+
/* @__PURE__ */ jsx(
|
|
27
|
+
FormField,
|
|
28
|
+
{
|
|
29
|
+
label: "Token",
|
|
30
|
+
value: isLoading ? "Carregando..." : token,
|
|
31
|
+
disabled: true,
|
|
32
|
+
readOnly: true,
|
|
33
|
+
classnameContainer: "bg-gray-50 cursor-default opacity-100!",
|
|
34
|
+
className: "text-gray-950/50"
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
/* @__PURE__ */ jsxs(
|
|
38
|
+
Button,
|
|
39
|
+
{
|
|
40
|
+
type: "button",
|
|
41
|
+
variant: "secondary",
|
|
42
|
+
className: "h-10! shrink-0 gap-2",
|
|
43
|
+
onClick: () => copy(token),
|
|
44
|
+
disabled: isLoading || !token,
|
|
45
|
+
children: [
|
|
46
|
+
isCopied ? /* @__PURE__ */ jsx(IconCheck, { size: 16 }) : /* @__PURE__ */ jsx(IconCopy, { size: 16 }),
|
|
47
|
+
isCopied ? "Copiado" : "Copiar"
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
)
|
|
51
|
+
] }),
|
|
52
|
+
/* @__PURE__ */ jsxs("div", { className: `flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? "bg-cyan-50" : "bg-zinc-50"}`, children: [
|
|
53
|
+
/* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-950 shrink-0" }),
|
|
54
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950 max-w-[420px]", children: "Este token \xE9 exclusivo da sua conta e permite acesso \xE0 API. N\xE3o compartilhe com terceiros." })
|
|
55
|
+
] }),
|
|
56
|
+
/* @__PURE__ */ jsx(
|
|
57
|
+
"a",
|
|
58
|
+
{
|
|
59
|
+
href: "https://documenter.getpostman.com/view/4861938/2sAYdoDmj4",
|
|
60
|
+
target: "_blank",
|
|
61
|
+
rel: "noopener noreferrer",
|
|
62
|
+
className: "paragraph-small-medium text-gray-500 underline hover:text-gray-700 transition-colors w-fit",
|
|
63
|
+
children: "Acessar a documenta\xE7\xE3o"
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] })
|
|
67
|
+
] });
|
|
68
|
+
}
|
|
69
|
+
export {
|
|
70
|
+
TokenSection
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=TokenSection.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/TokenSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconCheck, IconCopy, IconInfoCircle } from '@tabler/icons-react';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useCopyToClipboard from '../../../hooks/copy-to-clipboard.hook';\nimport { useAccountToken } from '../../../modules/accounts/hooks/use-account-token.hook';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\n\nexport function TokenSection() {\n const { data: token = '', isLoading } = useAccountToken();\n const isDefaultWl = useIsDefaultWhitelabel();\n\n const { isCopied, copy } = useCopyToClipboard({\n onSuccess: () => {\n toast.custom((t) => (\n <Toast variant=\"success\" message=\"Token copiado com sucesso\" toastId={t} />\n ));\n },\n onError: () => {\n toast.custom((t) => (\n <Toast variant=\"error\" message=\"Não foi possível copiar o token\" toastId={t} />\n ));\n },\n });\n\n return (\n <div className=\"h-full overflow-y-auto overscroll-contain px-4 pb-20 lg:p-5 lg:pt-5 flex flex-col gap-5 lg:gap-6 lg:pb-31 lg:overscroll-auto\">\n <span className=\"paragraph-medium-semibold text-gray-950\">Token da conta</span>\n\n <div className=\"flex flex-col gap-3\">\n <div className=\"flex items-end gap-3\">\n <FormField\n label=\"Token\"\n value={isLoading ? 'Carregando...' : token}\n disabled\n readOnly\n classnameContainer=\"bg-gray-50 cursor-default opacity-100!\"\n className=\"text-gray-950/50\"\n />\n <Button\n type=\"button\"\n variant=\"secondary\"\n className=\"h-10! shrink-0 gap-2\"\n onClick={() => copy(token)}\n disabled={isLoading || !token}\n >\n {isCopied ? <IconCheck size={16} /> : <IconCopy size={16} />}\n {isCopied ? 'Copiado' : 'Copiar'}\n </Button>\n </div>\n\n <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950 max-w-[420px]\">\n Este token é exclusivo da sua conta e permite acesso à API. Não compartilhe com terceiros.\n </span>\n </div>\n\n <a\n href=\"https://documenter.getpostman.com/view/4861938/2sAYdoDmj4\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"paragraph-small-medium text-gray-500 underline hover:text-gray-700 transition-colors w-fit\"\n >\n Acessar a documentação\n </a>\n </div>\n </div>\n );\n}\n"],"mappings":";AAkBQ,cAwBE,YAxBF;AAhBR,SAAS,WAAW,UAAU,sBAAsB;AACpD,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,wBAAwB;AAC/B,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AAEhC,SAAS,eAAe;AAC7B,QAAM,EAAE,MAAM,QAAQ,IAAI,UAAU,IAAI,gBAAgB;AACxD,QAAM,cAAc,uBAAuB;AAE3C,QAAM,EAAE,UAAU,KAAK,IAAI,mBAAmB;AAAA,IAC5C,WAAW,MAAM;AACf,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,WAAU,SAAQ,6BAA4B,SAAS,GAAG,CAC1E;AAAA,IACH;AAAA,IACA,SAAS,MAAM;AACb,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAQ,yCAAkC,SAAS,GAAG,CAC9E;AAAA,IACH;AAAA,EACF,CAAC;AAED,SACE,qBAAC,SAAI,WAAU,gIACb;AAAA,wBAAC,UAAK,WAAU,2CAA0C,4BAAc;AAAA,IAExE,qBAAC,SAAI,WAAU,uBACb;AAAA,2BAAC,SAAI,WAAU,wBACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,OAAO,YAAY,kBAAkB;AAAA,YACrC,UAAQ;AAAA,YACR,UAAQ;AAAA,YACR,oBAAmB;AAAA,YACnB,WAAU;AAAA;AAAA,QACZ;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAAS,MAAM,KAAK,KAAK;AAAA,YACzB,UAAU,aAAa,CAAC;AAAA,YAEvB;AAAA,yBAAW,oBAAC,aAAU,MAAM,IAAI,IAAK,oBAAC,YAAS,MAAM,IAAI;AAAA,cACzD,WAAW,YAAY;AAAA;AAAA;AAAA,QAC1B;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAW,0CAA0C,cAAc,eAAe,YAAY,IACjG;AAAA,4BAAC,kBAAe,WAAU,iCAAgC;AAAA,QAC1D,oBAAC,UAAK,WAAU,uDAAsD,iHAEtE;AAAA,SACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,KAAI;AAAA,UACJ,WAAU;AAAA,UACX;AAAA;AAAA,MAED;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useEffect, useRef } from "react";
|
|
3
|
+
import { useAuth } from "../../providers/auth.provider";
|
|
4
|
+
const CLARITY_PROJECT_ID = "rc99jr00nn";
|
|
5
|
+
const CLARITY_SCRIPT_BASE = "https://www.clarity.ms/tag/";
|
|
6
|
+
const CLARITY_LOAD_DELAY = 800;
|
|
7
|
+
function loadClarityScript() {
|
|
8
|
+
try {
|
|
9
|
+
const win = window;
|
|
10
|
+
win.clarity = win.clarity || function(...args) {
|
|
11
|
+
(win.clarity.q = win.clarity.q || []).push(args);
|
|
12
|
+
};
|
|
13
|
+
const src = CLARITY_SCRIPT_BASE + CLARITY_PROJECT_ID;
|
|
14
|
+
if (document.querySelector(`script[src="${src}"]`)) return;
|
|
15
|
+
const t = document.createElement("script");
|
|
16
|
+
t.async = true;
|
|
17
|
+
t.src = src;
|
|
18
|
+
const y = document.getElementsByTagName("script")[0];
|
|
19
|
+
y?.parentNode?.insertBefore(t, y);
|
|
20
|
+
} catch {
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
function identifyClarityUser(user) {
|
|
24
|
+
try {
|
|
25
|
+
if (!window.clarity) return;
|
|
26
|
+
const fullName = `${user.name ?? ""} ${user.last_name ?? ""}`.trim();
|
|
27
|
+
window.clarity("identify", String(user.id ?? ""), void 0, void 0, fullName || void 0);
|
|
28
|
+
if (user.email) window.clarity("set", "email", user.email);
|
|
29
|
+
} catch {
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
function ClarityEmbed() {
|
|
33
|
+
const { user } = useAuth();
|
|
34
|
+
const scriptLoadedRef = useRef(false);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
if (!user || scriptLoadedRef.current) return;
|
|
37
|
+
const timeout = setTimeout(() => {
|
|
38
|
+
try {
|
|
39
|
+
loadClarityScript();
|
|
40
|
+
scriptLoadedRef.current = true;
|
|
41
|
+
} catch {
|
|
42
|
+
}
|
|
43
|
+
}, CLARITY_LOAD_DELAY);
|
|
44
|
+
return () => clearTimeout(timeout);
|
|
45
|
+
}, [user]);
|
|
46
|
+
useEffect(() => {
|
|
47
|
+
if (!user || !scriptLoadedRef.current) return;
|
|
48
|
+
identifyClarityUser(user);
|
|
49
|
+
}, [user]);
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
export {
|
|
53
|
+
ClarityEmbed
|
|
54
|
+
};
|
|
55
|
+
//# sourceMappingURL=ClarityEmbed.mjs.map
|