@greatapps/common 1.1.674 → 1.1.676
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 +6 -8
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmDeleteAccountModal.mjs +19 -20
- package/dist/components/account/ConfirmDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs +11 -10
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs.map +1 -1
- package/dist/components/account/DeleteAccountModal.mjs +28 -34
- package/dist/components/account/DeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/DisableTwoFactorAuthModal.mjs +5 -7
- package/dist/components/account/DisableTwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs +9 -8
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/TwoFactorAuthModal.mjs +23 -22
- package/dist/components/account/TwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/constants.mjs +4 -4
- package/dist/components/account/constants.mjs.map +1 -1
- package/dist/components/account/hooks/useChangeEmailForm.mjs +3 -5
- package/dist/components/account/hooks/useChangeEmailForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePasswordForm.mjs +3 -26
- package/dist/components/account/hooks/useChangePasswordForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePhoneForm.mjs +9 -18
- package/dist/components/account/hooks/useChangePhoneForm.mjs.map +1 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs +3 -26
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/hooks/useOtpVerification.mjs +3 -19
- package/dist/components/account/hooks/useOtpVerification.mjs.map +1 -1
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs +4 -27
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs +28 -25
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePasswordSection.mjs +6 -8
- package/dist/components/account/sections/ChangePasswordSection.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs +27 -24
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs +22 -37
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/account/sections/PreferencesSection.mjs +24 -48
- package/dist/components/account/sections/PreferencesSection.mjs.map +1 -1
- package/dist/components/account/sections/SecuritySection.mjs +9 -11
- package/dist/components/account/sections/SecuritySection.mjs.map +1 -1
- package/dist/components/account/sections/TokenSection.mjs +8 -24
- package/dist/components/account/sections/TokenSection.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +148 -2
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs +3 -5
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs +3 -5
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +4 -6
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/UsersSelectorPopover.mjs +7 -9
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs +18 -17
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/CreditsDisabledModal.mjs +4 -6
- package/dist/components/modals/CreditsDisabledModal.mjs.map +1 -1
- package/dist/components/modals/PaidPlanRequiredModal.mjs +3 -5
- package/dist/components/modals/PaidPlanRequiredModal.mjs.map +1 -1
- package/dist/components/modals/cards/AddCardModal.mjs +24 -27
- package/dist/components/modals/cards/AddCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs +7 -9
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CardFormFields.mjs +22 -25
- package/dist/components/modals/cards/CardFormFields.mjs.map +1 -1
- package/dist/components/modals/cards/DeleteCardModal.mjs +8 -10
- package/dist/components/modals/cards/DeleteCardModal.mjs.map +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs +2 -4
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map +1 -1
- package/dist/components/navigation/OverdueInvoiceBanner.mjs +2 -4
- package/dist/components/navigation/OverdueInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/PendingCancellationBanner.mjs +6 -4
- package/dist/components/navigation/PendingCancellationBanner.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +6 -8
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs +6 -4
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/BottomLinks.mjs +3 -5
- package/dist/components/navigation/subcomponents/BottomLinks.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/CreditsCard.mjs +1 -3
- package/dist/components/navigation/subcomponents/CreditsCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/PlanCard.mjs +1 -3
- package/dist/components/navigation/subcomponents/PlanCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +3 -5
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/pages/NotFoundPage.mjs +3 -5
- package/dist/components/pages/NotFoundPage.mjs.map +1 -1
- package/dist/components/pages/notifications/Notifications.mjs +10 -13
- package/dist/components/pages/notifications/Notifications.mjs.map +1 -1
- package/dist/components/ui/buttons/CopyButton.mjs +5 -9
- package/dist/components/ui/buttons/CopyButton.mjs.map +1 -1
- package/dist/components/ui/data-display/CardItem.mjs +5 -7
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +8 -10
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -1
- package/dist/components/ui/feedback/CircularProgress.mjs.map +1 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs +1 -3
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/form/ComboboxField.mjs +6 -11
- package/dist/components/ui/form/ComboboxField.mjs.map +1 -1
- package/dist/components/ui/form/DatePicker.mjs +2 -5
- package/dist/components/ui/form/DatePicker.mjs.map +1 -1
- package/dist/components/ui/form/DateRangePicker.mjs +2 -5
- package/dist/components/ui/form/DateRangePicker.mjs.map +1 -1
- package/dist/components/ui/form/PhoneInput.mjs +3 -5
- package/dist/components/ui/form/PhoneInput.mjs.map +1 -1
- package/dist/components/ui/form/SelectField.mjs +3 -6
- package/dist/components/ui/form/SelectField.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs +18 -11
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs +15 -6
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map +1 -1
- package/dist/index.mjs +2 -16
- package/dist/index.mjs.map +1 -1
- package/dist/modules/cards/hooks/handle-delete-card.hook.mjs +1 -2
- package/dist/modules/cards/hooks/handle-delete-card.hook.mjs.map +1 -1
- package/dist/modules/images/utils/validate-image.mjs +8 -8
- package/dist/modules/images/utils/validate-image.mjs.map +1 -1
- package/dist/modules/plans/services/plans.service.mjs +1 -1
- package/dist/modules/plans/services/plans.service.mjs.map +1 -1
- package/dist/modules/plans/types/plan.type.mjs +0 -3
- package/dist/modules/plans/types/plan.type.mjs.map +1 -1
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs +34 -56
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs +14 -20
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/providers/auth.provider.mjs +1 -9
- package/dist/providers/auth.provider.mjs.map +1 -1
- package/dist/server.mjs +0 -2
- package/dist/server.mjs.map +1 -1
- package/dist/utils/format/currency.mjs +4 -32
- package/dist/utils/format/currency.mjs.map +1 -1
- package/dist/utils/intl/locales.mjs +2 -3
- package/dist/utils/intl/locales.mjs.map +1 -1
- package/package.json +1 -7
- package/src/components/account/ConfigurationsMyAccountModal.tsx +6 -10
- package/src/components/account/ConfirmDeleteAccountModal.tsx +13 -22
- package/src/components/account/ConfirmGlobalPreferencesModal.tsx +10 -12
- package/src/components/account/DeleteAccountModal.tsx +24 -34
- package/src/components/account/DisableTwoFactorAuthModal.tsx +6 -11
- package/src/components/account/IsntPossibleDeleteAccountModal.tsx +6 -8
- package/src/components/account/TwoFactorAuthModal.tsx +29 -33
- package/src/components/account/constants.ts +5 -8
- package/src/components/account/hooks/useChangeEmailForm.tsx +3 -5
- package/src/components/account/hooks/useChangePasswordForm.tsx +6 -20
- package/src/components/account/hooks/useChangePhoneForm.tsx +10 -16
- package/src/components/account/hooks/useDisableTwoFactorAuthForm.tsx +6 -20
- package/src/components/account/hooks/useOtpVerification.tsx +4 -16
- package/src/components/account/hooks/useTwoFactorAuthForm.tsx +7 -21
- package/src/components/account/sections/ChangeEmailModal.tsx +21 -35
- package/src/components/account/sections/ChangePasswordSection.tsx +6 -10
- package/src/components/account/sections/ChangePhoneModal.tsx +22 -50
- package/src/components/account/sections/MyProfileSection.tsx +23 -37
- package/src/components/account/sections/PreferencesSection.tsx +25 -52
- package/src/components/account/sections/SecuritySection.tsx +10 -19
- package/src/components/account/sections/TokenSection.tsx +10 -22
- package/src/components/layouts/AppMobileNavBar.tsx +154 -1
- package/src/components/layouts/NavBar.tsx +3 -5
- package/src/components/layouts/NotificationsPopover.tsx +3 -5
- package/src/components/layouts/ProfilePopover.tsx +4 -6
- package/src/components/layouts/UsersSelectorPopover.tsx +7 -9
- package/src/components/modals/BuyCreditsModal.tsx +16 -18
- package/src/components/modals/CreditsDisabledModal.tsx +6 -6
- package/src/components/modals/PaidPlanRequiredModal.tsx +3 -5
- package/src/components/modals/cards/AddCardModal.tsx +27 -29
- package/src/components/modals/cards/CannotDeleteCardModal.tsx +8 -9
- package/src/components/modals/cards/CardFormFields.tsx +22 -25
- package/src/components/modals/cards/DeleteCardModal.tsx +8 -10
- package/src/components/navigation/CancelledSubscriptionBanner.tsx +2 -4
- package/src/components/navigation/OverdueInvoiceBanner.tsx +2 -4
- package/src/components/navigation/PendingCancellationBanner.tsx +2 -4
- package/src/components/navigation/ProjectSelectorPopover.tsx +6 -8
- package/src/components/navigation/UpcomingInvoiceBanner.tsx +2 -4
- package/src/components/navigation/subcomponents/BottomLinks.tsx +3 -5
- package/src/components/navigation/subcomponents/CreditsCard.tsx +1 -3
- package/src/components/navigation/subcomponents/PlanCard.tsx +1 -3
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +3 -5
- package/src/components/pages/NotFoundPage.tsx +3 -5
- package/src/components/pages/notifications/Notifications.tsx +10 -13
- package/src/components/ui/buttons/CopyButton.tsx +5 -10
- package/src/components/ui/data-display/CardItem.tsx +5 -7
- package/src/components/ui/data-display/PaymentInfoCard.tsx +8 -10
- package/src/components/ui/feedback/CircularProgress.tsx +0 -4
- package/src/components/ui/feedback/DefaultCircularProgress.tsx +1 -3
- package/src/components/ui/form/ComboboxField.tsx +6 -11
- package/src/components/ui/form/DatePicker.tsx +2 -5
- package/src/components/ui/form/DateRangePicker.tsx +2 -5
- package/src/components/ui/form/PhoneInput.tsx +3 -5
- package/src/components/ui/form/SelectField.tsx +3 -6
- package/src/components/widgets/ImageUpload/ImageCropModal.tsx +11 -19
- package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx +5 -6
- package/src/index.ts +2 -12
- package/src/modules/cards/hooks/handle-delete-card.hook.ts +3 -8
- package/src/modules/images/utils/validate-image.ts +8 -23
- package/src/modules/plans/services/plans.service.ts +1 -1
- package/src/modules/plans/types/plan.type.ts +0 -3
- package/src/modules/plans/utils/map-api-plan-to-ui.ts +46 -103
- package/src/modules/subscriptions/utils/periodicity.ts +12 -29
- package/src/providers/auth.provider.tsx +1 -13
- package/src/server.ts +0 -2
- package/src/utils/format/currency.ts +7 -62
- package/src/utils/intl/locales.ts +2 -3
- package/dist/i18n/config.mjs +0 -13
- package/dist/i18n/config.mjs.map +0 -1
- package/dist/i18n/country-language.mjs +0 -74
- package/dist/i18n/country-language.mjs.map +0 -1
- package/dist/i18n/messages/en-us.mjs +0 -492
- package/dist/i18n/messages/en-us.mjs.map +0 -1
- package/dist/i18n/messages/es-es.mjs +0 -492
- package/dist/i18n/messages/es-es.mjs.map +0 -1
- package/dist/i18n/messages/index.mjs +0 -16
- package/dist/i18n/messages/index.mjs.map +0 -1
- package/dist/i18n/messages/pt-br.mjs +0 -505
- package/dist/i18n/messages/pt-br.mjs.map +0 -1
- package/dist/i18n/normalize.mjs +0 -12
- package/dist/i18n/normalize.mjs.map +0 -1
- package/dist/i18n/resolve-locale.mjs +0 -42
- package/dist/i18n/resolve-locale.mjs.map +0 -1
- package/dist/i18n.mjs +0 -14
- package/dist/i18n.mjs.map +0 -1
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs +0 -20
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs.map +0 -1
- package/dist/utils/intl/cookie-domain.mjs +0 -17
- package/dist/utils/intl/cookie-domain.mjs.map +0 -1
- package/dist/utils/intl/locale-cookie.mjs +0 -13
- package/dist/utils/intl/locale-cookie.mjs.map +0 -1
- package/src/i18n/config.ts +0 -17
- package/src/i18n/country-language.ts +0 -60
- package/src/i18n/messages/en-us.ts +0 -512
- package/src/i18n/messages/es-es.ts +0 -513
- package/src/i18n/messages/index.ts +0 -24
- package/src/i18n/messages/pt-br.ts +0 -536
- package/src/i18n/normalize.ts +0 -15
- package/src/i18n/resolve-locale.ts +0 -77
- package/src/i18n.ts +0 -10
- package/src/modules/accounts/hooks/use-currency-formatter.hook.tsx +0 -32
- package/src/utils/intl/cookie-domain.ts +0 -29
- package/src/utils/intl/locale-cookie.ts +0 -18
|
@@ -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 {
|
|
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 setCode('');\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 setCode('');\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":";AA+BU;AA7BV,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,gBAAQ,EAAE;AACV,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,cAAQ,EAAE;AACV,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":[]}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useCallback } from "react";
|
|
4
|
-
import { useTranslations } from "next-intl";
|
|
5
4
|
import { toast } from "sonner";
|
|
6
5
|
import { Toast } from "../../ui/feedback/Toast";
|
|
7
6
|
import useCountdownTimer from "../../../hooks/useCountdownTimer";
|
|
@@ -13,7 +12,6 @@ function useOtpVerification({
|
|
|
13
12
|
validateFn,
|
|
14
13
|
resendFn
|
|
15
14
|
}) {
|
|
16
|
-
const translate = useTranslations();
|
|
17
15
|
const [code, setCode] = useState("");
|
|
18
16
|
const [isLoading, setIsLoading] = useState(false);
|
|
19
17
|
const [hasError, setHasError] = useState(false);
|
|
@@ -66,26 +64,12 @@ function useOtpVerification({
|
|
|
66
64
|
if (resendFn) {
|
|
67
65
|
await resendFn();
|
|
68
66
|
}
|
|
69
|
-
toast.custom((
|
|
70
|
-
Toast,
|
|
71
|
-
{
|
|
72
|
-
variant: "success",
|
|
73
|
-
message: translate("common.account.twoFactor.codeResent"),
|
|
74
|
-
toastId
|
|
75
|
-
}
|
|
76
|
-
));
|
|
67
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "C\xF3digo reenviado", toastId: t }));
|
|
77
68
|
} catch (error) {
|
|
78
69
|
console.error("Erro ao reenviar c\xF3digo:", error);
|
|
79
|
-
toast.custom((
|
|
80
|
-
Toast,
|
|
81
|
-
{
|
|
82
|
-
variant: "error",
|
|
83
|
-
message: translate("common.account.twoFactor.resendError"),
|
|
84
|
-
toastId
|
|
85
|
-
}
|
|
86
|
-
));
|
|
70
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: "Erro ao reenviar c\xF3digo. Tente novamente.", toastId: t }));
|
|
87
71
|
}
|
|
88
|
-
}, [canResend, resetTimer, resendFn
|
|
72
|
+
}, [canResend, resetTimer, resendFn]);
|
|
89
73
|
const reset = useCallback(() => {
|
|
90
74
|
setCode("");
|
|
91
75
|
setHasError(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/hooks/useOtpVerification.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/hooks/useOtpVerification.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useState, useCallback } from 'react';\r\nimport { toast } from 'sonner';\r\nimport { Toast } from '../../ui/feedback/Toast';\r\nimport useCountdownTimer from '../../../hooks/useCountdownTimer';\r\nimport { OTP_CODE_LENGTH, VALID_OTP_CODE } from '../../../utils/validators/account';\r\nimport { hasExactLength } from '../../../utils/validators/common';\r\n\r\ninterface UseOtpVerificationOptions {\r\n onSuccess: () => void;\r\n successMessage: string;\r\n validateFn?: (code: string) => Promise<boolean>;\r\n resendFn?: () => Promise<void>;\r\n}\r\n\r\nexport default function useOtpVerification({\r\n onSuccess,\r\n successMessage,\r\n validateFn,\r\n resendFn,\r\n}: UseOtpVerificationOptions) {\r\n const [code, setCode] = useState('');\r\n const [isLoading, setIsLoading] = useState(false);\r\n const [hasError, setHasError] = useState(false);\r\n\r\n const {\r\n seconds: timer,\r\n isExpired: canResend,\r\n reset: resetTimer,\r\n } = useCountdownTimer({ initialSeconds: 59 });\r\n\r\n const handleCodeChange = useCallback(\r\n (value: string) => {\r\n setCode(value.toUpperCase());\r\n if (hasError) {\r\n setHasError(false);\r\n }\r\n },\r\n [hasError]\r\n );\r\n\r\n const handleValidate = useCallback(async () => {\r\n if (!hasExactLength(code, OTP_CODE_LENGTH)) return;\r\n\r\n setIsLoading(true);\r\n setHasError(false);\r\n\r\n try {\r\n let isValid: boolean;\r\n\r\n if (validateFn) {\r\n isValid = await validateFn(code);\r\n } else {\r\n await new Promise((resolve) => setTimeout(resolve, 500));\r\n isValid = code === VALID_OTP_CODE;\r\n }\r\n\r\n if (!isValid) {\r\n setHasError(true);\r\n return;\r\n }\r\n\r\n toast.custom((t) => <Toast variant=\"success\" message={successMessage} toastId={t} />);\r\n\r\n setCode('');\r\n onSuccess();\r\n } catch (error) {\r\n console.error('Erro ao validar código:', error);\r\n setHasError(true);\r\n } finally {\r\n setIsLoading(false);\r\n }\r\n }, [code, onSuccess, successMessage, validateFn]);\r\n\r\n const handleResend = useCallback(async () => {\r\n if (!canResend) return;\r\n\r\n try {\r\n resetTimer();\r\n setHasError(false);\r\n setCode('');\r\n\r\n if (resendFn) {\r\n await resendFn();\r\n }\r\n\r\n toast.custom((t) => <Toast variant=\"success\" message=\"Código reenviado\" toastId={t} />);\r\n } catch (error) {\r\n console.error('Erro ao reenviar código:', error);\r\n toast.custom((t) => (\r\n <Toast variant=\"error\" message=\"Erro ao reenviar código. Tente novamente.\" toastId={t} />\r\n ));\r\n }\r\n }, [canResend, resetTimer, resendFn]);\r\n\r\n const reset = useCallback(() => {\r\n setCode('');\r\n setHasError(false);\r\n }, []);\r\n\r\n const isValidLength = hasExactLength(code, OTP_CODE_LENGTH);\r\n\r\n return {\r\n code,\r\n isLoading,\r\n hasError,\r\n timer,\r\n canResend,\r\n isValidLength,\r\n handleCodeChange,\r\n handleValidate,\r\n handleResend,\r\n reset,\r\n };\r\n}\r\n"],"mappings":";AA+D0B;AA7D1B,SAAS,UAAU,mBAAmB;AACtC,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,OAAO,uBAAuB;AAC9B,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,sBAAsB;AAShB,SAAR,mBAAoC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,IACX,OAAO;AAAA,EACT,IAAI,kBAAkB,EAAE,gBAAgB,GAAG,CAAC;AAE5C,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAkB;AACjB,cAAQ,MAAM,YAAY,CAAC;AAC3B,UAAI,UAAU;AACZ,oBAAY,KAAK;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,iBAAiB,YAAY,YAAY;AAC7C,QAAI,CAAC,eAAe,MAAM,eAAe,EAAG;AAE5C,iBAAa,IAAI;AACjB,gBAAY,KAAK;AAEjB,QAAI;AACF,UAAI;AAEJ,UAAI,YAAY;AACd,kBAAU,MAAM,WAAW,IAAI;AAAA,MACjC,OAAO;AACL,cAAM,IAAI,QAAQ,CAAC,YAAY,WAAW,SAAS,GAAG,CAAC;AACvD,kBAAU,SAAS;AAAA,MACrB;AAEA,UAAI,CAAC,SAAS;AACZ,oBAAY,IAAI;AAChB;AAAA,MACF;AAEA,YAAM,OAAO,CAAC,MAAM,oBAAC,SAAM,SAAQ,WAAU,SAAS,gBAAgB,SAAS,GAAG,CAAE;AAEpF,cAAQ,EAAE;AACV,gBAAU;AAAA,IACZ,SAAS,OAAO;AACd,cAAQ,MAAM,8BAA2B,KAAK;AAC9C,kBAAY,IAAI;AAAA,IAClB,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,MAAM,WAAW,gBAAgB,UAAU,CAAC;AAEhD,QAAM,eAAe,YAAY,YAAY;AAC3C,QAAI,CAAC,UAAW;AAEhB,QAAI;AACF,iBAAW;AACX,kBAAY,KAAK;AACjB,cAAQ,EAAE;AAEV,UAAI,UAAU;AACZ,cAAM,SAAS;AAAA,MACjB;AAEA,YAAM,OAAO,CAAC,MAAM,oBAAC,SAAM,SAAQ,WAAU,SAAQ,uBAAmB,SAAS,GAAG,CAAE;AAAA,IACxF,SAAS,OAAO;AACd,cAAQ,MAAM,+BAA4B,KAAK;AAC/C,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAQ,gDAA4C,SAAS,GAAG,CACxF;AAAA,IACH;AAAA,EACF,GAAG,CAAC,WAAW,YAAY,QAAQ,CAAC;AAEpC,QAAM,QAAQ,YAAY,MAAM;AAC9B,YAAQ,EAAE;AACV,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB,eAAe,MAAM,eAAe;AAE1D,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useCallback, useEffect } from "react";
|
|
4
4
|
import { useMutation } from "@tanstack/react-query";
|
|
5
|
-
import { useTranslations } from "next-intl";
|
|
6
5
|
import { toast } from "sonner";
|
|
7
6
|
import { Toast } from "../../ui/feedback/Toast";
|
|
8
7
|
import { copyToClipboard } from "../../../utils/browser/clipboard";
|
|
@@ -12,20 +11,12 @@ import {
|
|
|
12
11
|
} from "../../../modules/accounts/actions/account-management.action";
|
|
13
12
|
import { withAction } from "../../../utils/withAction";
|
|
14
13
|
function useTwoFactorAuthForm({ onSuccess, open } = {}) {
|
|
15
|
-
const translate = useTranslations();
|
|
16
14
|
const [code, setCode] = useState("");
|
|
17
15
|
const [step, setStep] = useState("code");
|
|
18
16
|
const generateMutation = useMutation({
|
|
19
17
|
mutationFn: withAction(generateTwoFactorAction),
|
|
20
18
|
onError: () => {
|
|
21
|
-
toast.custom((
|
|
22
|
-
Toast,
|
|
23
|
-
{
|
|
24
|
-
variant: "error",
|
|
25
|
-
message: translate("common.account.twoFactor.generateError"),
|
|
26
|
-
toastId
|
|
27
|
-
}
|
|
28
|
-
));
|
|
19
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: "Erro ao gerar QR Code. Tente novamente.", toastId: t }));
|
|
29
20
|
}
|
|
30
21
|
});
|
|
31
22
|
const confirmMutation = useMutation({
|
|
@@ -35,14 +26,7 @@ function useTwoFactorAuthForm({ onSuccess, open } = {}) {
|
|
|
35
26
|
},
|
|
36
27
|
onError: () => {
|
|
37
28
|
setCode("");
|
|
38
|
-
toast.custom((
|
|
39
|
-
Toast,
|
|
40
|
-
{
|
|
41
|
-
variant: "error",
|
|
42
|
-
message: translate("common.account.twoFactor.confirmError"),
|
|
43
|
-
toastId
|
|
44
|
-
}
|
|
45
|
-
));
|
|
29
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "error", message: "Erro ao confirmar c\xF3digo. Tente novamente.", toastId: t }));
|
|
46
30
|
}
|
|
47
31
|
});
|
|
48
32
|
const { mutate: triggerGenerate } = generateMutation;
|
|
@@ -65,16 +49,9 @@ function useTwoFactorAuthForm({ onSuccess, open } = {}) {
|
|
|
65
49
|
const codes = generateMutation.data?.backupCodes ?? [];
|
|
66
50
|
const success = await copyToClipboard(codes.join("\n"));
|
|
67
51
|
if (success) {
|
|
68
|
-
toast.custom((
|
|
69
|
-
Toast,
|
|
70
|
-
{
|
|
71
|
-
variant: "success",
|
|
72
|
-
message: translate("common.account.twoFactor.codesCopied"),
|
|
73
|
-
toastId
|
|
74
|
-
}
|
|
75
|
-
));
|
|
52
|
+
toast.custom((t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "C\xF3digos copiados com sucesso", toastId: t }));
|
|
76
53
|
}
|
|
77
|
-
}, [generateMutation.data
|
|
54
|
+
}, [generateMutation.data]);
|
|
78
55
|
const resetForm = () => {
|
|
79
56
|
setCode("");
|
|
80
57
|
setStep("code");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/hooks/useTwoFactorAuthForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useEffect } from 'react';\nimport { useMutation } from '@tanstack/react-query';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/hooks/useTwoFactorAuthForm.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useCallback, useEffect } from 'react';\nimport { useMutation } from '@tanstack/react-query';\nimport { toast } from 'sonner';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { copyToClipboard } from '../../../utils/browser/clipboard';\nimport {\n generateTwoFactorAction,\n confirmTwoFactorAction,\n} from '../../../modules/accounts/actions/account-management.action';\nimport { withAction } from '../../../utils/withAction';\n\ntype Step = 'code' | 'recovery';\n\ninterface UseTwoFactorAuthFormProps {\n onSuccess?: () => void;\n open?: boolean;\n}\n\nexport default function useTwoFactorAuthForm({ onSuccess, open }: UseTwoFactorAuthFormProps = {}) {\n const [code, setCode] = useState('');\n const [step, setStep] = useState<Step>('code');\n\n const generateMutation = useMutation({\n mutationFn: withAction(generateTwoFactorAction),\n onError: () => {\n toast.custom((t) => (\n <Toast variant=\"error\" message=\"Erro ao gerar QR Code. Tente novamente.\" toastId={t} />\n ));\n },\n });\n\n const confirmMutation = useMutation({\n mutationFn: withAction(confirmTwoFactorAction),\n onSuccess: () => {\n setStep('recovery');\n },\n onError: () => {\n setCode('');\n toast.custom((t) => (\n <Toast variant=\"error\" message=\"Erro ao confirmar código. Tente novamente.\" toastId={t} />\n ));\n },\n });\n\n const { mutate: triggerGenerate } = generateMutation;\n\n useEffect(() => {\n if (open) {\n triggerGenerate();\n }\n }, [open, triggerGenerate]);\n\n const generateFailed = generateMutation.isError;\n\n const isCodeComplete = code.length === 6;\n\n const handleSubmit = () => {\n if (!isCodeComplete) return;\n confirmMutation.mutate(code);\n };\n\n const handleFinalize = () => {\n onSuccess?.();\n setTimeout(resetForm, 300);\n };\n\n const handleCopyCodes = useCallback(async () => {\n const codes = generateMutation.data?.backupCodes ?? [];\n const success = await copyToClipboard(codes.join('\\n'));\n if (success) {\n toast.custom((t) => (\n <Toast variant=\"success\" message=\"Códigos copiados com sucesso\" toastId={t} />\n ));\n }\n }, [generateMutation.data]);\n\n const resetForm = () => {\n setCode('');\n setStep('code');\n generateMutation.reset();\n confirmMutation.reset();\n };\n\n return {\n code,\n setCode,\n isCodeComplete,\n isGenerating: generateMutation.isPending,\n isConfirming: confirmMutation.isPending,\n generateFailed,\n retryGenerate: triggerGenerate,\n qrcode: generateMutation.data?.qrcode,\n backupCodes: generateMutation.data?.backupCodes ?? [],\n step,\n handleSubmit,\n handleFinalize,\n handleCopyCodes,\n resetForm,\n };\n}\n"],"mappings":";AA4BQ;AA1BR,SAAS,UAAU,aAAa,iBAAiB;AACjD,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AASZ,SAAR,qBAAsC,EAAE,WAAW,KAAK,IAA+B,CAAC,GAAG;AAChG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAe,MAAM;AAE7C,QAAM,mBAAmB,YAAY;AAAA,IACnC,YAAY,WAAW,uBAAuB;AAAA,IAC9C,SAAS,MAAM;AACb,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAQ,2CAA0C,SAAS,GAAG,CACtF;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,kBAAkB,YAAY;AAAA,IAClC,YAAY,WAAW,sBAAsB;AAAA,IAC7C,WAAW,MAAM;AACf,cAAQ,UAAU;AAAA,IACpB;AAAA,IACA,SAAS,MAAM;AACb,cAAQ,EAAE;AACV,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,SAAQ,SAAQ,iDAA6C,SAAS,GAAG,CACzF;AAAA,IACH;AAAA,EACF,CAAC;AAED,QAAM,EAAE,QAAQ,gBAAgB,IAAI;AAEpC,YAAU,MAAM;AACd,QAAI,MAAM;AACR,sBAAgB;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,MAAM,eAAe,CAAC;AAE1B,QAAM,iBAAiB,iBAAiB;AAExC,QAAM,iBAAiB,KAAK,WAAW;AAEvC,QAAM,eAAe,MAAM;AACzB,QAAI,CAAC,eAAgB;AACrB,oBAAgB,OAAO,IAAI;AAAA,EAC7B;AAEA,QAAM,iBAAiB,MAAM;AAC3B,gBAAY;AACZ,eAAW,WAAW,GAAG;AAAA,EAC3B;AAEA,QAAM,kBAAkB,YAAY,YAAY;AAC9C,UAAM,QAAQ,iBAAiB,MAAM,eAAe,CAAC;AACrD,UAAM,UAAU,MAAM,gBAAgB,MAAM,KAAK,IAAI,CAAC;AACtD,QAAI,SAAS;AACX,YAAM,OAAO,CAAC,MACZ,oBAAC,SAAM,SAAQ,WAAU,SAAQ,mCAA+B,SAAS,GAAG,CAC7E;AAAA,IACH;AAAA,EACF,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,QAAM,YAAY,MAAM;AACtB,YAAQ,EAAE;AACV,YAAQ,MAAM;AACd,qBAAiB,MAAM;AACvB,oBAAgB,MAAM;AAAA,EACxB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,iBAAiB;AAAA,IAC/B,cAAc,gBAAgB;AAAA,IAC9B;AAAA,IACA,eAAe;AAAA,IACf,QAAQ,iBAAiB,MAAM;AAAA,IAC/B,aAAa,iBAAiB,MAAM,eAAe,CAAC;AAAA,IACpD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useTranslations } from "next-intl";
|
|
4
3
|
import { IconChevronLeft, IconX, IconMail } from "@tabler/icons-react";
|
|
5
4
|
import { Button } from "../../ui/buttons/Button";
|
|
6
5
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../ui/overlay/Dialog";
|
|
@@ -15,7 +14,6 @@ import { confirmEmailChangeAction } from "../../../modules/accounts/actions/acco
|
|
|
15
14
|
import useChangeEmailForm from "../hooks/useChangeEmailForm";
|
|
16
15
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
17
16
|
function ChangeEmailModal({ open, onClose }) {
|
|
18
|
-
const translate = useTranslations();
|
|
19
17
|
const { user } = useAuth();
|
|
20
18
|
const invalidateUser = useInvalidateUser();
|
|
21
19
|
const {
|
|
@@ -46,7 +44,7 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
46
44
|
reset: resetOtp
|
|
47
45
|
} = useOtpVerification({
|
|
48
46
|
onSuccess: handleSuccess,
|
|
49
|
-
successMessage:
|
|
47
|
+
successMessage: "E-mail alterado com sucesso",
|
|
50
48
|
validateFn: async (token) => {
|
|
51
49
|
const result = await confirmEmailChangeAction(token, emailToVerify);
|
|
52
50
|
return result.success;
|
|
@@ -77,12 +75,12 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
77
75
|
children: [
|
|
78
76
|
showVerification ? /* @__PURE__ */ jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0", children: [
|
|
79
77
|
/* @__PURE__ */ jsx(Button, { variant: "ghost", className: "size-8! p-0", onClick: handleBackFromVerification, children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 20, className: "text-gray-950" }) }),
|
|
80
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center flex-1", children:
|
|
78
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center flex-1", children: "Alterar e-mail" }),
|
|
81
79
|
/* @__PURE__ */ jsx(Button, { variant: "ghost", className: "size-8! p-0", onClick: handleClose, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-gray-500" }) })
|
|
82
80
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
83
|
-
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children:
|
|
81
|
+
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Alterar e-mail" }) }),
|
|
84
82
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
|
|
85
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children:
|
|
83
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: "Alterar e-mail" }),
|
|
86
84
|
/* @__PURE__ */ jsx(
|
|
87
85
|
Button,
|
|
88
86
|
{
|
|
@@ -107,11 +105,15 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
107
105
|
/* @__PURE__ */ jsxs("div", { className: "px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none", children: [
|
|
108
106
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200", children: /* @__PURE__ */ jsx(IconMail, { size: 20, className: "text-gray-950" }) }),
|
|
109
107
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
110
|
-
/* @__PURE__ */ jsx("h3", { className: "paragraph-medium-semibold text-gray-950", children:
|
|
111
|
-
/* @__PURE__ */
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
108
|
+
/* @__PURE__ */ jsx("h3", { className: "paragraph-medium-semibold text-gray-950", children: "C\xF3digo de valida\xE7\xE3o" }),
|
|
109
|
+
/* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-gray-600", children: [
|
|
110
|
+
"Enviamos um c\xF3digo de valida\xE7\xE3o para o E-mail",
|
|
111
|
+
" ",
|
|
112
|
+
/* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-950 break-all", children: [
|
|
113
|
+
user?.email,
|
|
114
|
+
"."
|
|
115
|
+
] })
|
|
116
|
+
] })
|
|
115
117
|
] }),
|
|
116
118
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
117
119
|
/* @__PURE__ */ jsx(InputOTP, { maxLength: OTP_CODE_LENGTH, pattern: OTP_ALPHANUMERIC_PATTERN, value: code, onChange: handleCodeChange, children: /* @__PURE__ */ jsx(InputOTPGroup, { className: "flex flex-row gap-2", children: [...Array(OTP_CODE_LENGTH)].map((_, i) => /* @__PURE__ */ jsx(
|
|
@@ -122,7 +124,7 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
122
124
|
},
|
|
123
125
|
i
|
|
124
126
|
)) }) }),
|
|
125
|
-
hasError && /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-red-500", children:
|
|
127
|
+
hasError && /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-red-500", children: "C\xF3digo incorreto" })
|
|
126
128
|
] }),
|
|
127
129
|
canResend ? /* @__PURE__ */ jsx(
|
|
128
130
|
"button",
|
|
@@ -130,31 +132,32 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
130
132
|
type: "button",
|
|
131
133
|
onClick: handleResend,
|
|
132
134
|
className: "paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit",
|
|
133
|
-
children:
|
|
135
|
+
children: "Reenviar c\xF3digo"
|
|
134
136
|
}
|
|
135
|
-
) : /* @__PURE__ */
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
) : /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-gray-500", children: [
|
|
138
|
+
"Reenviar em",
|
|
139
|
+
" ",
|
|
140
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: formatTimer(timer) })
|
|
141
|
+
] })
|
|
139
142
|
] }),
|
|
140
143
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
141
144
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0", children: [
|
|
142
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children:
|
|
143
|
-
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: !isValidLength || isLoading, children: isLoading ?
|
|
145
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
|
|
146
|
+
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: !isValidLength || isLoading, children: isLoading ? "Validando..." : "Alterar e-mail" })
|
|
144
147
|
] })
|
|
145
148
|
]
|
|
146
149
|
}
|
|
147
150
|
) : /* @__PURE__ */ jsxs("form", { onSubmit: handleContinue, className: "flex flex-col flex-1 lg:flex-none", children: [
|
|
148
151
|
/* @__PURE__ */ jsxs("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", children: [
|
|
149
152
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
150
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children:
|
|
151
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children:
|
|
153
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Atualizar E-mail de contato" }),
|
|
154
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: "Informe o seu novo E-mail para manter seu contato atualizado." })
|
|
152
155
|
] }),
|
|
153
156
|
/* @__PURE__ */ jsx(
|
|
154
157
|
FormField,
|
|
155
158
|
{
|
|
156
|
-
label:
|
|
157
|
-
placeholder:
|
|
159
|
+
label: "Novo e-mail",
|
|
160
|
+
placeholder: "Digite seu novo e-mail",
|
|
158
161
|
type: "email",
|
|
159
162
|
...register("email"),
|
|
160
163
|
error: !!errors.email,
|
|
@@ -164,8 +167,8 @@ function ChangeEmailModal({ open, onClose }) {
|
|
|
164
167
|
)
|
|
165
168
|
] }),
|
|
166
169
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0", children: [
|
|
167
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children:
|
|
168
|
-
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ?
|
|
170
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
|
|
171
|
+
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ? "Enviando..." : "Continuar" })
|
|
169
172
|
] })
|
|
170
173
|
] })
|
|
171
174
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/sections/ChangeEmailModal.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\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, OTP_ALPHANUMERIC_PATTERN } 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 translate = useTranslations();\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: translate('common.account.changeEmail.emailChanged'),\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 {translate('common.account.changeEmail.title')}\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>{translate('common.account.changeEmail.title')}</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 {translate('common.account.changeEmail.title')}\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-primary`} />\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\">\n {translate('common.account.otp.validationCode')}\n </h3>\n <p className=\"paragraph-small-regular text-gray-600\">\n {translate.rich('common.account.changeEmail.sentCodeTo', {\n email: user?.email ?? '',\n b: (chunks) => (\n <span className=\"font-semibold text-gray-950 break-all\">{chunks}</span>\n ),\n })}\n </p>\n </div>\n\n <div className=\"flex flex-col gap-2\">\n <InputOTP maxLength={OTP_CODE_LENGTH} pattern={OTP_ALPHANUMERIC_PATTERN} 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\">\n {translate('common.account.otp.incorrectCode')}\n </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 {translate('common.account.otp.resend')}\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n {translate.rich('common.account.otp.resendIn', {\n time: formatTimer(timer),\n b: (chunks) => (\n <span className=\"paragraph-small-semibold text-gray-950\">{chunks}</span>\n ),\n })}\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 {translate('common.actions.cancel')}\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading\n ? translate('common.account.otp.validating')\n : translate('common.account.changeEmail.confirm')}\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 {translate('common.account.changeEmail.updateTitle')}\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n {translate('common.account.changeEmail.updateDescription')}\n </span>\n </div>\n\n <FormField\n label={translate('common.account.changeEmail.newEmail')}\n placeholder={translate('common.account.changeEmail.newEmailPlaceholder')}\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 {translate('common.actions.cancel')}\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? translate('common.actions.sending') : translate('common.actions.continue')}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/ChangeEmailModal.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronLeft, IconX, IconMail } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../../ui/form/InputOtp';\nimport { FormField } from '../../ui/form/FormField';\nimport { formatTimer } from '../../../utils/format/masks';\nimport { OTP_CODE_LENGTH, OTP_ALPHANUMERIC_PATTERN } 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-primary`} />\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} pattern={OTP_ALPHANUMERIC_PATTERN} value={code} onChange={handleCodeChange}>\n <InputOTPGroup className=\"flex flex-row gap-2\">\n {[...Array(OTP_CODE_LENGTH)].map((_, i) => (\n <InputOTPSlot\n key={i}\n index={i}\n className={`uppercase text-2xl font-medium w-11 lg:w-12 h-13 lg:h-14 rounded-lg border bg-white shadow-none [&_div.animate-caret-blink]:bg-gray-950 ${hasError ? 'border-red-500' : 'border-gray-200'}`}\n />\n ))}\n </InputOTPGroup>\n </InputOTP>\n {hasError && (\n <p className=\"paragraph-small-regular text-red-500\">Código incorreto</p>\n )}\n </div>\n\n {canResend ? (\n <button\n type=\"button\"\n onClick={handleResend}\n className=\"paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit\"\n >\n Reenviar código\n </button>\n ) : (\n <p className=\"paragraph-small-regular text-gray-500\">\n Reenviar em{' '}\n <span className=\"paragraph-small-semibold text-gray-950\">\n {formatTimer(timer)}\n </span>\n </p>\n )}\n </div>\n\n <Separator />\n\n <div className=\"flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={!isValidLength || isLoading}>\n {isLoading ? 'Validando...' : 'Alterar e-mail'}\n </Button>\n </div>\n </form>\n ) : (\n <form onSubmit={handleContinue} className=\"flex flex-col flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\n <div className=\"flex flex-col gap-1\">\n <span className=\"paragraph-medium-semibold text-gray-950\">\n Atualizar E-mail de contato\n </span>\n <span className=\"paragraph-small-regular text-gray-600\">\n Informe o seu novo E-mail para manter seu contato atualizado.\n </span>\n </div>\n\n <FormField\n label=\"Novo e-mail\"\n placeholder=\"Digite seu novo e-mail\"\n type=\"email\"\n {...register('email')}\n error={!!errors.email}\n errorMessage={errors.email?.message}\n leftIcon={IconMail}\n />\n </div>\n\n <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0\">\n <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\n Cancelar\n </Button>\n <Button className=\"h-10!\" type=\"submit\" disabled={isSubmitting}>\n {isSubmitting ? 'Enviando...' : 'Continuar'}\n </Button>\n </div>\n </form>\n )}\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { IconLock, IconX } from "@tabler/icons-react";
|
|
4
|
-
import { useTranslations } from "next-intl";
|
|
5
4
|
import { Button } from "../../ui/buttons/Button";
|
|
6
5
|
import { FormField } from "../../ui/form/FormField";
|
|
7
6
|
import useChangePasswordForm from "../hooks/useChangePasswordForm";
|
|
8
7
|
import usePasswordVisibility from "../../../hooks/usePasswordVisibility";
|
|
9
8
|
function ChangePasswordSection({ onBack }) {
|
|
10
|
-
const translate = useTranslations();
|
|
11
9
|
const { register, handleSubmit, errors } = useChangePasswordForm({
|
|
12
10
|
onSuccess: onBack
|
|
13
11
|
});
|
|
@@ -20,16 +18,16 @@ function ChangePasswordSection({ onBack }) {
|
|
|
20
18
|
className: "flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6",
|
|
21
19
|
children: [
|
|
22
20
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
23
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children:
|
|
21
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: "Alterar senha" }),
|
|
24
22
|
/* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: "size-8! p-0", onClick: onBack, children: /* @__PURE__ */ jsx(IconX, { size: 18 }) })
|
|
25
23
|
] }),
|
|
26
24
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
27
25
|
/* @__PURE__ */ jsx(
|
|
28
26
|
FormField,
|
|
29
27
|
{
|
|
30
|
-
label:
|
|
28
|
+
label: "Senha atual",
|
|
31
29
|
type: "password",
|
|
32
|
-
placeholder:
|
|
30
|
+
placeholder: "Digite sua senha atual",
|
|
33
31
|
leftIcon: IconLock,
|
|
34
32
|
error: !!errors.currentPassword,
|
|
35
33
|
errorMessage: errors.currentPassword?.message,
|
|
@@ -42,9 +40,9 @@ function ChangePasswordSection({ onBack }) {
|
|
|
42
40
|
/* @__PURE__ */ jsx(
|
|
43
41
|
FormField,
|
|
44
42
|
{
|
|
45
|
-
label:
|
|
43
|
+
label: "Nova senha",
|
|
46
44
|
type: "password",
|
|
47
|
-
placeholder:
|
|
45
|
+
placeholder: "Digite sua nova senha",
|
|
48
46
|
leftIcon: IconLock,
|
|
49
47
|
error: !!errors.newPassword,
|
|
50
48
|
errorMessage: errors.newPassword?.message,
|
|
@@ -55,7 +53,7 @@ function ChangePasswordSection({ onBack }) {
|
|
|
55
53
|
}
|
|
56
54
|
)
|
|
57
55
|
] }),
|
|
58
|
-
/* @__PURE__ */ jsx(Button, { type: "submit", className: "w-fit h-10!", children:
|
|
56
|
+
/* @__PURE__ */ jsx(Button, { type: "submit", className: "w-fit h-10!", children: "Salvar nova senha" })
|
|
59
57
|
]
|
|
60
58
|
}
|
|
61
59
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconX } from '@tabler/icons-react';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconX } from '@tabler/icons-react';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useChangePasswordForm from '../hooks/useChangePasswordForm';\nimport usePasswordVisibility from '../../../hooks/usePasswordVisibility';\n\ninterface ChangePasswordSectionProps {\n onBack: () => void;\n}\n\nexport function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {\n const { register, handleSubmit, errors } = useChangePasswordForm({\n onSuccess: onBack,\n });\n const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();\n const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();\n\n return (\n <form\n onSubmit={handleSubmit}\n className=\"flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6\"\n >\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-medium-semibold text-gray-950\">Alterar senha</span>\n <Button type=\"button\" variant=\"ghost\" className=\"size-8! p-0\" onClick={onBack}>\n <IconX size={18} />\n </Button>\n </div>\n\n <div className=\"flex flex-col gap-4\">\n <FormField\n label=\"Senha atual\"\n type=\"password\"\n placeholder=\"Digite sua senha atual\"\n leftIcon={IconLock}\n error={!!errors.currentPassword}\n errorMessage={errors.currentPassword?.message}\n classnameContainer=\"h-10!\"\n showPassword={showCurrentPw}\n onTogglePassword={toggleCurrentPw}\n {...register('currentPassword')}\n />\n <FormField\n label=\"Nova senha\"\n type=\"password\"\n placeholder=\"Digite sua nova senha\"\n leftIcon={IconLock}\n error={!!errors.newPassword}\n errorMessage={errors.newPassword?.message}\n classnameContainer=\"h-10!\"\n showPassword={showNewPw}\n onTogglePassword={toggleNewPw}\n {...register('newPassword')}\n />\n </div>\n\n <Button type=\"submit\" className=\"w-fit h-10!\">\n Salvar nova senha\n </Button>\n </form>\n );\n}\n"],"mappings":";AAwBM,SACE,KADF;AAtBN,SAAS,UAAU,aAAa;AAChC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAM3B,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC5E,QAAM,EAAE,UAAU,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC/D,WAAW;AAAA,EACb,CAAC;AACD,QAAM,EAAE,cAAc,eAAe,gBAAgB,gBAAgB,IAAI,sBAAsB;AAC/F,QAAM,EAAE,cAAc,WAAW,gBAAgB,YAAY,IAAI,sBAAsB;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,2CAA0C,2BAAa;AAAA,UACvE,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,eAAc,SAAS,QACrE,8BAAC,SAAM,MAAM,IAAI,GACnB;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,iBAAiB;AAAA,cACtC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,iBAAiB;AAAA;AAAA,UAChC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,aAAa;AAAA,cAClC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,WAAU,eAAc,+BAE9C;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useTranslations } from "next-intl";
|
|
4
3
|
import { IconChevronLeft, IconX, IconMessage } from "@tabler/icons-react";
|
|
5
4
|
import { Button } from "../../ui/buttons/Button";
|
|
6
5
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../ui/overlay/Dialog";
|
|
@@ -15,7 +14,6 @@ import { confirmPhoneChangeAction } from "../../../modules/accounts/actions/acco
|
|
|
15
14
|
import useChangePhoneForm from "../hooks/useChangePhoneForm";
|
|
16
15
|
import useOtpVerification from "../hooks/useOtpVerification";
|
|
17
16
|
function ChangePhoneModal({ open, onClose }) {
|
|
18
|
-
const translate = useTranslations();
|
|
19
17
|
const { user } = useAuth();
|
|
20
18
|
const invalidateUser = useInvalidateUser();
|
|
21
19
|
const hasExistingPhone = !!user?.phone;
|
|
@@ -58,7 +56,7 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
58
56
|
reset: resetOtp
|
|
59
57
|
} = useOtpVerification({
|
|
60
58
|
onSuccess: handleSuccess,
|
|
61
|
-
successMessage:
|
|
59
|
+
successMessage: "Telefone alterado",
|
|
62
60
|
validateFn: async (token) => {
|
|
63
61
|
const result = await confirmPhoneChangeAction(token, submittedPhone.local, submittedPhone.ddi);
|
|
64
62
|
return result.success;
|
|
@@ -89,12 +87,12 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
89
87
|
children: [
|
|
90
88
|
showVerification ? /* @__PURE__ */ jsxs(DialogHeader, { className: "flex flex-row items-center justify-between px-4 py-3 border-b border-gray-200 lg:border-b-0", children: [
|
|
91
89
|
/* @__PURE__ */ jsx(Button, { variant: "ghost", className: "size-8! p-0", onClick: handleBackFromVerification, children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 20, className: "text-gray-950" }) }),
|
|
92
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center flex-1", children:
|
|
90
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center flex-1", children: "Alterar telefone" }),
|
|
93
91
|
/* @__PURE__ */ jsx(Button, { variant: "ghost", className: "size-8! p-0", onClick: handleClose, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-gray-500" }) })
|
|
94
92
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
95
|
-
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: hasExistingPhone ?
|
|
93
|
+
/* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: hasExistingPhone ? "Alterar telefone" : "Adicionar telefone" }) }),
|
|
96
94
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
|
|
97
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: hasExistingPhone ?
|
|
95
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: hasExistingPhone ? "Alterar telefone" : "Adicionar telefone" }),
|
|
98
96
|
/* @__PURE__ */ jsx(
|
|
99
97
|
Button,
|
|
100
98
|
{
|
|
@@ -119,11 +117,15 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
119
117
|
/* @__PURE__ */ jsxs("div", { className: "px-4 lg:px-5 py-5 lg:py-6 flex flex-col gap-4 flex-1 lg:flex-none", children: [
|
|
120
118
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-12 bg-white rounded-lg shadow-xs border border-gray-200", children: /* @__PURE__ */ jsx(IconMessage, { size: 20, className: "text-gray-950" }) }),
|
|
121
119
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
122
|
-
/* @__PURE__ */ jsx("h3", { className: "paragraph-medium-semibold text-gray-950", children:
|
|
123
|
-
/* @__PURE__ */
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
120
|
+
/* @__PURE__ */ jsx("h3", { className: "paragraph-medium-semibold text-gray-950", children: "C\xF3digo de valida\xE7\xE3o" }),
|
|
121
|
+
/* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-gray-600", children: [
|
|
122
|
+
"Enviamos um c\xF3digo de valida\xE7\xE3o para o n\xFAmero atual",
|
|
123
|
+
" ",
|
|
124
|
+
/* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-950", children: [
|
|
125
|
+
currentPhoneDisplay,
|
|
126
|
+
"."
|
|
127
|
+
] })
|
|
128
|
+
] })
|
|
127
129
|
] }),
|
|
128
130
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
129
131
|
/* @__PURE__ */ jsx(InputOTP, { maxLength: OTP_CODE_LENGTH, pattern: OTP_ALPHANUMERIC_PATTERN, value: code, onChange: handleCodeChange, children: /* @__PURE__ */ jsx(InputOTPGroup, { className: "flex flex-row gap-2", children: [...Array(OTP_CODE_LENGTH)].map((_, i) => /* @__PURE__ */ jsx(
|
|
@@ -134,7 +136,7 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
134
136
|
},
|
|
135
137
|
i
|
|
136
138
|
)) }) }),
|
|
137
|
-
hasError && /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-red-500", children:
|
|
139
|
+
hasError && /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-red-500", children: "C\xF3digo incorreto" })
|
|
138
140
|
] }),
|
|
139
141
|
canResend ? /* @__PURE__ */ jsx(
|
|
140
142
|
"button",
|
|
@@ -142,30 +144,31 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
142
144
|
type: "button",
|
|
143
145
|
onClick: handleResend,
|
|
144
146
|
className: "paragraph-small-medium text-gray-950 underline cursor-pointer hover:text-gray-700 w-fit",
|
|
145
|
-
children:
|
|
147
|
+
children: "Reenviar c\xF3digo"
|
|
146
148
|
}
|
|
147
|
-
) : /* @__PURE__ */
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
149
|
+
) : /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-gray-500", children: [
|
|
150
|
+
"Reenviar em",
|
|
151
|
+
" ",
|
|
152
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: formatTimer(timer) })
|
|
153
|
+
] })
|
|
151
154
|
] }),
|
|
152
155
|
/* @__PURE__ */ jsx(Separator, {}),
|
|
153
156
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 lg:px-5 py-4 lg:py-5 mt-auto lg:mt-0", children: [
|
|
154
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children:
|
|
155
|
-
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: !isValidLength || isLoading, children: isLoading ?
|
|
157
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
|
|
158
|
+
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: !isValidLength || isLoading, children: isLoading ? "Validando..." : "Alterar telefone" })
|
|
156
159
|
] })
|
|
157
160
|
]
|
|
158
161
|
}
|
|
159
162
|
) : /* @__PURE__ */ jsxs("form", { onSubmit: handleContinue, className: "flex flex-col flex-1 lg:flex-none", children: [
|
|
160
163
|
/* @__PURE__ */ jsxs("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", children: [
|
|
161
164
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
|
|
162
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: hasExistingPhone ?
|
|
163
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: hasExistingPhone ?
|
|
165
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: hasExistingPhone ? "Atualizar telefone de contato" : "Adicionar telefone de contato" }),
|
|
166
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-600", children: hasExistingPhone ? "Informe o novo n\xFAmero para manter seu contato atualizado." : "Informe seu n\xFAmero de telefone para contato." })
|
|
164
167
|
] }),
|
|
165
168
|
/* @__PURE__ */ jsx(
|
|
166
169
|
PhoneInput,
|
|
167
170
|
{
|
|
168
|
-
label: hasExistingPhone ?
|
|
171
|
+
label: hasExistingPhone ? "Novo n\xFAmero" : "N\xFAmero de telefone",
|
|
169
172
|
placeholder: "(00) 0 0000-0000",
|
|
170
173
|
value: phoneValue,
|
|
171
174
|
onChange: handlePhoneChange,
|
|
@@ -175,8 +178,8 @@ function ChangePhoneModal({ open, onClose }) {
|
|
|
175
178
|
)
|
|
176
179
|
] }),
|
|
177
180
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 mt-auto lg:mt-0", children: [
|
|
178
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children:
|
|
179
|
-
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ? hasExistingPhone ?
|
|
181
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
|
|
182
|
+
/* @__PURE__ */ jsx(Button, { className: "h-10!", type: "submit", disabled: isSubmitting, children: isSubmitting ? hasExistingPhone ? "Enviando..." : "Salvando..." : hasExistingPhone ? "Continuar" : "Salvar" })
|
|
180
183
|
] })
|
|
181
184
|
] })
|
|
182
185
|
]
|