@greatapps/common 1.1.675 → 1.1.677
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 +8 -6
- package/dist/components/account/ConfigurationsMyAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmDeleteAccountModal.mjs +20 -19
- package/dist/components/account/ConfirmDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs +10 -11
- package/dist/components/account/ConfirmGlobalPreferencesModal.mjs.map +1 -1
- package/dist/components/account/DeleteAccountModal.mjs +34 -28
- package/dist/components/account/DeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/DisableTwoFactorAuthModal.mjs +7 -5
- package/dist/components/account/DisableTwoFactorAuthModal.mjs.map +1 -1
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs +8 -9
- package/dist/components/account/IsntPossibleDeleteAccountModal.mjs.map +1 -1
- package/dist/components/account/TwoFactorAuthModal.mjs +22 -23
- 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 +5 -3
- package/dist/components/account/hooks/useChangeEmailForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePasswordForm.mjs +26 -3
- package/dist/components/account/hooks/useChangePasswordForm.mjs.map +1 -1
- package/dist/components/account/hooks/useChangePhoneForm.mjs +18 -9
- package/dist/components/account/hooks/useChangePhoneForm.mjs.map +1 -1
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs +26 -3
- package/dist/components/account/hooks/useDisableTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/hooks/useOtpVerification.mjs +19 -3
- package/dist/components/account/hooks/useOtpVerification.mjs.map +1 -1
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs +27 -4
- package/dist/components/account/hooks/useTwoFactorAuthForm.mjs.map +1 -1
- package/dist/components/account/sections/ChangeEmailModal.mjs +25 -28
- package/dist/components/account/sections/ChangeEmailModal.mjs.map +1 -1
- package/dist/components/account/sections/ChangePasswordSection.mjs +8 -6
- package/dist/components/account/sections/ChangePasswordSection.mjs.map +1 -1
- package/dist/components/account/sections/ChangePhoneModal.mjs +24 -27
- package/dist/components/account/sections/ChangePhoneModal.mjs.map +1 -1
- package/dist/components/account/sections/MyProfileSection.mjs +37 -22
- package/dist/components/account/sections/MyProfileSection.mjs.map +1 -1
- package/dist/components/account/sections/PreferencesSection.mjs +48 -24
- package/dist/components/account/sections/PreferencesSection.mjs.map +1 -1
- package/dist/components/account/sections/SecuritySection.mjs +11 -9
- package/dist/components/account/sections/SecuritySection.mjs.map +1 -1
- package/dist/components/account/sections/TokenSection.mjs +24 -8
- package/dist/components/account/sections/TokenSection.mjs.map +1 -1
- package/dist/components/layouts/AppMobileNavBar.mjs +2 -148
- package/dist/components/layouts/AppMobileNavBar.mjs.map +1 -1
- package/dist/components/layouts/NavBar.mjs +5 -3
- package/dist/components/layouts/NavBar.mjs.map +1 -1
- package/dist/components/layouts/NotificationsPopover.mjs +5 -3
- package/dist/components/layouts/NotificationsPopover.mjs.map +1 -1
- package/dist/components/layouts/ProfilePopover.mjs +6 -4
- package/dist/components/layouts/ProfilePopover.mjs.map +1 -1
- package/dist/components/layouts/UsersSelectorPopover.mjs +9 -7
- package/dist/components/layouts/UsersSelectorPopover.mjs.map +1 -1
- package/dist/components/modals/BuyCreditsModal.mjs +17 -18
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -1
- package/dist/components/modals/CreditsDisabledModal.mjs +6 -4
- package/dist/components/modals/CreditsDisabledModal.mjs.map +1 -1
- package/dist/components/modals/PaidPlanRequiredModal.mjs +5 -3
- package/dist/components/modals/PaidPlanRequiredModal.mjs.map +1 -1
- package/dist/components/modals/cards/AddCardModal.mjs +64 -46
- package/dist/components/modals/cards/AddCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs +9 -7
- package/dist/components/modals/cards/CannotDeleteCardModal.mjs.map +1 -1
- package/dist/components/modals/cards/CardFormFields.mjs +65 -51
- package/dist/components/modals/cards/CardFormFields.mjs.map +1 -1
- package/dist/components/modals/cards/DeleteCardModal.mjs +10 -8
- package/dist/components/modals/cards/DeleteCardModal.mjs.map +1 -1
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs +4 -2
- package/dist/components/navigation/CancelledSubscriptionBanner.mjs.map +1 -1
- package/dist/components/navigation/OverdueInvoiceBanner.mjs +4 -2
- package/dist/components/navigation/OverdueInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/PendingCancellationBanner.mjs +4 -6
- package/dist/components/navigation/PendingCancellationBanner.mjs.map +1 -1
- package/dist/components/navigation/ProjectSelectorPopover.mjs +8 -6
- package/dist/components/navigation/ProjectSelectorPopover.mjs.map +1 -1
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs +4 -6
- package/dist/components/navigation/UpcomingInvoiceBanner.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/BottomLinks.mjs +5 -3
- package/dist/components/navigation/subcomponents/BottomLinks.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/CreditsCard.mjs +3 -1
- package/dist/components/navigation/subcomponents/CreditsCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/PlanCard.mjs +3 -1
- package/dist/components/navigation/subcomponents/PlanCard.mjs.map +1 -1
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs +5 -3
- package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map +1 -1
- package/dist/components/pages/NotFoundPage.mjs +5 -3
- package/dist/components/pages/NotFoundPage.mjs.map +1 -1
- package/dist/components/pages/notifications/Notifications.mjs +13 -10
- package/dist/components/pages/notifications/Notifications.mjs.map +1 -1
- package/dist/components/ui/buttons/CopyButton.mjs +9 -5
- package/dist/components/ui/buttons/CopyButton.mjs.map +1 -1
- package/dist/components/ui/data-display/CardItem.mjs +7 -5
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -1
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +10 -8
- 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 +3 -1
- package/dist/components/ui/feedback/DefaultCircularProgress.mjs.map +1 -1
- package/dist/components/ui/form/ComboboxField.mjs +11 -6
- package/dist/components/ui/form/ComboboxField.mjs.map +1 -1
- package/dist/components/ui/form/DatePicker.mjs +5 -2
- package/dist/components/ui/form/DatePicker.mjs.map +1 -1
- package/dist/components/ui/form/DateRangePicker.mjs +5 -2
- package/dist/components/ui/form/DateRangePicker.mjs.map +1 -1
- package/dist/components/ui/form/PhoneInput.mjs +5 -3
- package/dist/components/ui/form/PhoneInput.mjs.map +1 -1
- package/dist/components/ui/form/SelectField.mjs +6 -3
- package/dist/components/ui/form/SelectField.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs +11 -18
- package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map +1 -1
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs +6 -15
- package/dist/components/widgets/ImageUpload/ImageTooSmallModal.mjs.map +1 -1
- package/dist/i18n/config.mjs +13 -0
- package/dist/i18n/config.mjs.map +1 -0
- package/dist/i18n/country-language.mjs +74 -0
- package/dist/i18n/country-language.mjs.map +1 -0
- package/dist/i18n/messages/en-us.mjs +494 -0
- package/dist/i18n/messages/en-us.mjs.map +1 -0
- package/dist/i18n/messages/es-es.mjs +494 -0
- package/dist/i18n/messages/es-es.mjs.map +1 -0
- package/dist/i18n/messages/index.mjs +16 -0
- package/dist/i18n/messages/index.mjs.map +1 -0
- package/dist/i18n/messages/pt-br.mjs +507 -0
- package/dist/i18n/messages/pt-br.mjs.map +1 -0
- package/dist/i18n/normalize.mjs +12 -0
- package/dist/i18n/normalize.mjs.map +1 -0
- package/dist/i18n/resolve-locale.mjs +42 -0
- package/dist/i18n/resolve-locale.mjs.map +1 -0
- package/dist/i18n.mjs +14 -0
- package/dist/i18n.mjs.map +1 -0
- package/dist/index.mjs +19 -3
- package/dist/index.mjs.map +1 -1
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs +20 -0
- package/dist/modules/accounts/hooks/use-currency-formatter.hook.mjs.map +1 -0
- package/dist/modules/cards/hooks/handle-delete-card.hook.mjs +2 -1
- 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/hooks/list-plans.hook.mjs +2 -2
- package/dist/modules/plans/hooks/list-plans.hook.mjs.map +1 -1
- package/dist/modules/plans/types/plan.type.mjs +5 -1
- package/dist/modules/plans/types/plan.type.mjs.map +1 -1
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs +61 -35
- package/dist/modules/plans/utils/map-api-plan-to-ui.mjs.map +1 -1
- package/dist/modules/projects/services/projects.service.mjs +9 -0
- package/dist/modules/projects/services/projects.service.mjs.map +1 -1
- package/dist/modules/subscriptions/utils/periodicity.mjs +20 -14
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -1
- package/dist/providers/auth.provider.mjs +9 -1
- package/dist/providers/auth.provider.mjs.map +1 -1
- package/dist/server.mjs +2 -0
- package/dist/server.mjs.map +1 -1
- package/dist/utils/format/currency.mjs +32 -4
- package/dist/utils/format/currency.mjs.map +1 -1
- package/dist/utils/intl/cookie-domain.mjs +17 -0
- package/dist/utils/intl/cookie-domain.mjs.map +1 -0
- package/dist/utils/intl/locale-cookie.mjs +13 -0
- package/dist/utils/intl/locale-cookie.mjs.map +1 -0
- package/dist/utils/intl/locales.mjs +3 -2
- package/dist/utils/intl/locales.mjs.map +1 -1
- package/package.json +7 -1
- package/src/components/account/ConfigurationsMyAccountModal.tsx +10 -6
- package/src/components/account/ConfirmDeleteAccountModal.tsx +22 -13
- package/src/components/account/ConfirmGlobalPreferencesModal.tsx +12 -10
- package/src/components/account/DeleteAccountModal.tsx +34 -24
- package/src/components/account/DisableTwoFactorAuthModal.tsx +11 -6
- package/src/components/account/IsntPossibleDeleteAccountModal.tsx +8 -6
- package/src/components/account/TwoFactorAuthModal.tsx +33 -29
- package/src/components/account/constants.ts +8 -5
- package/src/components/account/hooks/useChangeEmailForm.tsx +5 -3
- package/src/components/account/hooks/useChangePasswordForm.tsx +20 -6
- package/src/components/account/hooks/useChangePhoneForm.tsx +16 -10
- package/src/components/account/hooks/useDisableTwoFactorAuthForm.tsx +20 -6
- package/src/components/account/hooks/useOtpVerification.tsx +16 -4
- package/src/components/account/hooks/useTwoFactorAuthForm.tsx +21 -7
- package/src/components/account/sections/ChangeEmailModal.tsx +35 -21
- package/src/components/account/sections/ChangePasswordSection.tsx +10 -6
- package/src/components/account/sections/ChangePhoneModal.tsx +50 -22
- package/src/components/account/sections/MyProfileSection.tsx +37 -23
- package/src/components/account/sections/PreferencesSection.tsx +52 -25
- package/src/components/account/sections/SecuritySection.tsx +19 -10
- package/src/components/account/sections/TokenSection.tsx +22 -10
- package/src/components/layouts/AppMobileNavBar.tsx +1 -154
- package/src/components/layouts/NavBar.tsx +5 -3
- package/src/components/layouts/NotificationsPopover.tsx +5 -3
- package/src/components/layouts/ProfilePopover.tsx +6 -4
- package/src/components/layouts/UsersSelectorPopover.tsx +9 -7
- package/src/components/modals/BuyCreditsModal.tsx +18 -16
- package/src/components/modals/CreditsDisabledModal.tsx +6 -6
- package/src/components/modals/PaidPlanRequiredModal.tsx +5 -3
- package/src/components/modals/cards/AddCardModal.tsx +89 -62
- package/src/components/modals/cards/CannotDeleteCardModal.tsx +9 -8
- package/src/components/modals/cards/CardFormFields.tsx +93 -75
- package/src/components/modals/cards/DeleteCardModal.tsx +10 -8
- package/src/components/navigation/CancelledSubscriptionBanner.tsx +4 -2
- package/src/components/navigation/OverdueInvoiceBanner.tsx +4 -2
- package/src/components/navigation/PendingCancellationBanner.tsx +4 -2
- package/src/components/navigation/ProjectSelectorPopover.tsx +8 -6
- package/src/components/navigation/UpcomingInvoiceBanner.tsx +4 -2
- package/src/components/navigation/subcomponents/BottomLinks.tsx +5 -3
- package/src/components/navigation/subcomponents/CreditsCard.tsx +3 -1
- package/src/components/navigation/subcomponents/PlanCard.tsx +3 -1
- package/src/components/navigation/subcomponents/ProjectSelector.tsx +5 -3
- package/src/components/pages/NotFoundPage.tsx +5 -3
- package/src/components/pages/notifications/Notifications.tsx +13 -10
- package/src/components/ui/buttons/CopyButton.tsx +10 -5
- package/src/components/ui/data-display/CardItem.tsx +7 -5
- package/src/components/ui/data-display/PaymentInfoCard.tsx +10 -8
- package/src/components/ui/feedback/CircularProgress.tsx +4 -0
- package/src/components/ui/feedback/DefaultCircularProgress.tsx +3 -1
- package/src/components/ui/form/ComboboxField.tsx +11 -6
- package/src/components/ui/form/DatePicker.tsx +5 -2
- package/src/components/ui/form/DateRangePicker.tsx +5 -2
- package/src/components/ui/form/PhoneInput.tsx +5 -3
- package/src/components/ui/form/SelectField.tsx +6 -3
- package/src/components/widgets/ImageUpload/ImageCropModal.tsx +19 -11
- package/src/components/widgets/ImageUpload/ImageTooSmallModal.tsx +6 -5
- package/src/i18n/config.ts +17 -0
- package/src/i18n/country-language.ts +60 -0
- package/src/i18n/messages/en-us.ts +514 -0
- package/src/i18n/messages/es-es.ts +515 -0
- package/src/i18n/messages/index.ts +24 -0
- package/src/i18n/messages/pt-br.ts +538 -0
- package/src/i18n/normalize.ts +15 -0
- package/src/i18n/resolve-locale.ts +77 -0
- package/src/i18n.ts +10 -0
- package/src/index.ts +13 -2
- package/src/modules/accounts/hooks/use-currency-formatter.hook.tsx +32 -0
- package/src/modules/cards/hooks/handle-delete-card.hook.ts +8 -3
- package/src/modules/images/utils/validate-image.ts +23 -8
- package/src/modules/plans/hooks/list-plans.hook.ts +2 -2
- package/src/modules/plans/types/plan.type.ts +4 -0
- package/src/modules/plans/utils/map-api-plan-to-ui.ts +109 -47
- package/src/modules/projects/services/projects.service.ts +12 -0
- package/src/modules/subscriptions/utils/periodicity.ts +29 -12
- package/src/providers/auth.provider.tsx +13 -1
- package/src/server.ts +2 -0
- package/src/utils/format/currency.ts +62 -7
- package/src/utils/intl/cookie-domain.ts +29 -0
- package/src/utils/intl/locale-cookie.ts +18 -0
- package/src/utils/intl/locales.ts +3 -2
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
CardExpiryElement,
|
|
16
16
|
CardNumberElement
|
|
17
17
|
} from "@stripe/react-stripe-js";
|
|
18
|
+
import { useTranslations } from "next-intl";
|
|
18
19
|
const stripeElementOptions = {
|
|
19
20
|
style: {
|
|
20
21
|
base: {
|
|
@@ -27,30 +28,35 @@ const stripeElementOptions = {
|
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
};
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
31
|
+
function buildCardFormSchema(isInternational) {
|
|
32
|
+
const base = z.object({
|
|
33
|
+
name: z.string().min(1, "Nome \xE9 obrigat\xF3rio"),
|
|
34
|
+
country: z.string().min(1, "Pa\xEDs \xE9 obrigat\xF3rio"),
|
|
35
|
+
personType: z.enum(["pf", "pj"]).optional(),
|
|
36
|
+
cpf: z.string().optional(),
|
|
37
|
+
cnpj: z.string().optional(),
|
|
38
|
+
fullName: z.string().min(1, "Nome completo \xE9 obrigat\xF3rio"),
|
|
39
|
+
cep: z.string().min(isInternational ? 1 : 9, isInternational ? "C\xF3digo postal \xE9 obrigat\xF3rio" : "CEP \xE9 obrigat\xF3rio"),
|
|
40
|
+
street: z.string().min(1, "Endere\xE7o \xE9 obrigat\xF3rio"),
|
|
41
|
+
streetNumber: isInternational ? z.string().optional() : z.string().min(1, "N\xFAmero \xE9 obrigat\xF3rio"),
|
|
42
|
+
city: z.string().min(1, "Cidade \xE9 obrigat\xF3ria"),
|
|
43
|
+
state: z.string().min(1, "UF \xE9 obrigat\xF3rio"),
|
|
44
|
+
neighborhood: isInternational ? z.string().optional() : z.string().min(1, "Bairro \xE9 obrigat\xF3rio"),
|
|
45
|
+
complement: z.string().optional()
|
|
46
|
+
});
|
|
47
|
+
if (isInternational) return base;
|
|
48
|
+
return base.refine(
|
|
49
|
+
(data) => {
|
|
50
|
+
if (data.personType === "pf") return !!data.cpf && data.cpf.length >= 14;
|
|
51
|
+
return !!data.cnpj && data.cnpj.length >= 18;
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
message: "Documento \xE9 obrigat\xF3rio",
|
|
55
|
+
path: ["cpf"]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
const cardFormSchema = buildCardFormSchema(false);
|
|
54
60
|
const STEP1_FIELDS = [
|
|
55
61
|
"name",
|
|
56
62
|
"country",
|
|
@@ -61,8 +67,10 @@ const STEP1_FIELDS = [
|
|
|
61
67
|
function CardFormFields({
|
|
62
68
|
form,
|
|
63
69
|
onStripeChange,
|
|
64
|
-
stripeErrors
|
|
70
|
+
stripeErrors,
|
|
71
|
+
isInternational = false
|
|
65
72
|
}) {
|
|
73
|
+
const translate = useTranslations();
|
|
66
74
|
const {
|
|
67
75
|
register,
|
|
68
76
|
watch,
|
|
@@ -74,15 +82,15 @@ function CardFormFields({
|
|
|
74
82
|
/* @__PURE__ */ jsx(
|
|
75
83
|
FormField,
|
|
76
84
|
{
|
|
77
|
-
label: "
|
|
78
|
-
placeholder: "
|
|
85
|
+
label: translate("common.cards.form.nameOnCard"),
|
|
86
|
+
placeholder: translate("common.cards.form.typeHere"),
|
|
79
87
|
...register("name"),
|
|
80
88
|
error: !!errors.name,
|
|
81
89
|
errorMessage: errors.name?.message
|
|
82
90
|
}
|
|
83
91
|
),
|
|
84
92
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
85
|
-
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "
|
|
93
|
+
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: translate("common.cards.form.cardNumber") }),
|
|
86
94
|
/* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
|
|
87
95
|
CardNumberElement,
|
|
88
96
|
{
|
|
@@ -94,7 +102,7 @@ function CardFormFields({
|
|
|
94
102
|
] }),
|
|
95
103
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
|
|
96
104
|
/* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
|
|
97
|
-
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "
|
|
105
|
+
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: translate("common.cards.form.cardExpiry") }),
|
|
98
106
|
/* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
|
|
99
107
|
CardExpiryElement,
|
|
100
108
|
{
|
|
@@ -105,7 +113,7 @@ function CardFormFields({
|
|
|
105
113
|
stripeErrors.cardExpiry && /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-semibold text-red-600", children: stripeErrors.cardExpiry })
|
|
106
114
|
] }),
|
|
107
115
|
/* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-1.5", children: [
|
|
108
|
-
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: "
|
|
116
|
+
/* @__PURE__ */ jsx("label", { className: "paragraph-xsmall-semibold text-zinc-600", children: translate("common.cards.form.cardCvc") }),
|
|
109
117
|
/* @__PURE__ */ jsx("div", { className: "h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400", children: /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
|
|
110
118
|
CardCvcElement,
|
|
111
119
|
{
|
|
@@ -119,19 +127,19 @@ function CardFormFields({
|
|
|
119
127
|
/* @__PURE__ */ jsx(
|
|
120
128
|
SelectField,
|
|
121
129
|
{
|
|
122
|
-
label: "
|
|
123
|
-
placeholder: "
|
|
130
|
+
label: translate("common.cards.form.country"),
|
|
131
|
+
placeholder: translate("common.cards.form.select"),
|
|
124
132
|
value: watch("country"),
|
|
125
133
|
onChange: (value) => setValue("country", value),
|
|
126
134
|
options: COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))
|
|
127
135
|
}
|
|
128
136
|
),
|
|
129
|
-
/* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
|
|
137
|
+
!isInternational && /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
|
|
130
138
|
/* @__PURE__ */ jsx(
|
|
131
139
|
SelectField,
|
|
132
140
|
{
|
|
133
|
-
label: "
|
|
134
|
-
placeholder: "
|
|
141
|
+
label: translate("common.cards.form.personType"),
|
|
142
|
+
placeholder: translate("common.cards.form.select"),
|
|
135
143
|
value: personType,
|
|
136
144
|
onChange: (value) => {
|
|
137
145
|
setValue("personType", value);
|
|
@@ -139,8 +147,8 @@ function CardFormFields({
|
|
|
139
147
|
setValue("cnpj", "");
|
|
140
148
|
},
|
|
141
149
|
options: [
|
|
142
|
-
{ value: "pf", label: "
|
|
143
|
-
{ value: "pj", label: "
|
|
150
|
+
{ value: "pf", label: translate("common.cards.form.personTypePf") },
|
|
151
|
+
{ value: "pj", label: translate("common.cards.form.personTypePj") }
|
|
144
152
|
],
|
|
145
153
|
containerClassName: "flex-1"
|
|
146
154
|
}
|
|
@@ -148,7 +156,7 @@ function CardFormFields({
|
|
|
148
156
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children: personType === "pj" ? /* @__PURE__ */ jsx(
|
|
149
157
|
FormField,
|
|
150
158
|
{
|
|
151
|
-
label: "
|
|
159
|
+
label: translate("common.cards.form.cnpj"),
|
|
152
160
|
placeholder: "__.___.___/____-__",
|
|
153
161
|
...register("cnpj", {
|
|
154
162
|
onChange: (e) => {
|
|
@@ -161,7 +169,7 @@ function CardFormFields({
|
|
|
161
169
|
) : /* @__PURE__ */ jsx(
|
|
162
170
|
FormField,
|
|
163
171
|
{
|
|
164
|
-
label: "
|
|
172
|
+
label: translate("common.cards.form.cpf"),
|
|
165
173
|
placeholder: "___.___.___-__",
|
|
166
174
|
...register("cpf", {
|
|
167
175
|
onChange: (e) => {
|
|
@@ -175,7 +183,8 @@ function CardFormFields({
|
|
|
175
183
|
] })
|
|
176
184
|
] });
|
|
177
185
|
}
|
|
178
|
-
function BillingFormFields({ form }) {
|
|
186
|
+
function BillingFormFields({ form, isInternational = false }) {
|
|
187
|
+
const translate = useTranslations();
|
|
179
188
|
const {
|
|
180
189
|
register,
|
|
181
190
|
setValue,
|
|
@@ -183,6 +192,10 @@ function BillingFormFields({ form }) {
|
|
|
183
192
|
} = form;
|
|
184
193
|
const { mutateAsync: lookupCep } = useViaCep();
|
|
185
194
|
const handleCepChange = (rawValue) => {
|
|
195
|
+
if (isInternational) {
|
|
196
|
+
setValue("cep", rawValue);
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
186
199
|
const masked = formatPostalCode(rawValue);
|
|
187
200
|
setValue("cep", masked);
|
|
188
201
|
const digits = rawValue.replace(/\D/g, "");
|
|
@@ -200,8 +213,8 @@ function BillingFormFields({ form }) {
|
|
|
200
213
|
/* @__PURE__ */ jsx(
|
|
201
214
|
FormField,
|
|
202
215
|
{
|
|
203
|
-
label: "
|
|
204
|
-
placeholder: "
|
|
216
|
+
label: translate("common.cards.form.fullName"),
|
|
217
|
+
placeholder: translate("common.cards.form.typeHere"),
|
|
205
218
|
...register("fullName"),
|
|
206
219
|
error: !!errors.fullName,
|
|
207
220
|
errorMessage: errors.fullName?.message
|
|
@@ -210,8 +223,8 @@ function BillingFormFields({ form }) {
|
|
|
210
223
|
/* @__PURE__ */ jsx(
|
|
211
224
|
FormField,
|
|
212
225
|
{
|
|
213
|
-
label: "
|
|
214
|
-
placeholder: "_____-___",
|
|
226
|
+
label: isInternational ? translate("common.cards.form.postalCode") : translate("common.cards.form.cep"),
|
|
227
|
+
placeholder: isInternational ? "" : "_____-___",
|
|
215
228
|
...register("cep", {
|
|
216
229
|
onChange: (e) => handleCepChange(e.target.value)
|
|
217
230
|
}),
|
|
@@ -223,7 +236,7 @@ function BillingFormFields({ form }) {
|
|
|
223
236
|
/* @__PURE__ */ jsx("div", { className: "flex-[4]", children: /* @__PURE__ */ jsx(
|
|
224
237
|
FormField,
|
|
225
238
|
{
|
|
226
|
-
label: "
|
|
239
|
+
label: translate("common.cards.form.street"),
|
|
227
240
|
placeholder: "",
|
|
228
241
|
...register("street"),
|
|
229
242
|
error: !!errors.street,
|
|
@@ -233,7 +246,7 @@ function BillingFormFields({ form }) {
|
|
|
233
246
|
/* @__PURE__ */ jsx("div", { className: "flex-[1]", children: /* @__PURE__ */ jsx(
|
|
234
247
|
FormField,
|
|
235
248
|
{
|
|
236
|
-
label: "
|
|
249
|
+
label: translate("common.cards.form.streetNumber"),
|
|
237
250
|
placeholder: "",
|
|
238
251
|
...register("streetNumber"),
|
|
239
252
|
error: !!errors.streetNumber,
|
|
@@ -245,7 +258,7 @@ function BillingFormFields({ form }) {
|
|
|
245
258
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
|
|
246
259
|
FormField,
|
|
247
260
|
{
|
|
248
|
-
label: "
|
|
261
|
+
label: translate("common.cards.form.city"),
|
|
249
262
|
placeholder: "",
|
|
250
263
|
...register("city"),
|
|
251
264
|
error: !!errors.city,
|
|
@@ -255,7 +268,7 @@ function BillingFormFields({ form }) {
|
|
|
255
268
|
/* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
|
|
256
269
|
FormField,
|
|
257
270
|
{
|
|
258
|
-
label: "
|
|
271
|
+
label: isInternational ? translate("common.cards.form.stateProvince") : translate("common.cards.form.state"),
|
|
259
272
|
placeholder: "",
|
|
260
273
|
...register("state"),
|
|
261
274
|
error: !!errors.state,
|
|
@@ -264,10 +277,10 @@ function BillingFormFields({ form }) {
|
|
|
264
277
|
) })
|
|
265
278
|
] }),
|
|
266
279
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
|
|
267
|
-
/* @__PURE__ */ jsx(
|
|
280
|
+
!isInternational && /* @__PURE__ */ jsx(
|
|
268
281
|
FormField,
|
|
269
282
|
{
|
|
270
|
-
label: "
|
|
283
|
+
label: translate("common.cards.form.neighborhood"),
|
|
271
284
|
placeholder: "",
|
|
272
285
|
...register("neighborhood"),
|
|
273
286
|
error: !!errors.neighborhood,
|
|
@@ -277,7 +290,7 @@ function BillingFormFields({ form }) {
|
|
|
277
290
|
/* @__PURE__ */ jsx(
|
|
278
291
|
FormField,
|
|
279
292
|
{
|
|
280
|
-
label: "
|
|
293
|
+
label: translate("common.cards.form.complement"),
|
|
281
294
|
optional: true,
|
|
282
295
|
placeholder: "",
|
|
283
296
|
...register("complement"),
|
|
@@ -292,6 +305,7 @@ export {
|
|
|
292
305
|
BillingFormFields,
|
|
293
306
|
CardFormFields,
|
|
294
307
|
STEP1_FIELDS,
|
|
308
|
+
buildCardFormSchema,
|
|
295
309
|
cardFormSchema
|
|
296
310
|
};
|
|
297
311
|
//# sourceMappingURL=CardFormFields.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseFormReturn } from \"react-hook-form\";\nimport { useViaCep } from \"../../../modules/accounts/hooks/useViaCep\";\nimport { FormField } from \"../../ui/form/FormField\";\nimport { SelectField } from \"../../ui/form/SelectField\";\nimport { COUNTRIES } from \"../../../utils/countries\";\nimport {\n formatCPF,\n formatCNPJ,\n formatPostalCode,\n} from \"../../../utils/format/masks\";\nimport z from \"zod\";\nimport {\n CardCvcElement,\n CardExpiryElement,\n CardNumberElement,\n} from \"@stripe/react-stripe-js\";\n\nconst stripeElementOptions = {\n style: {\n base: {\n fontSize: \"16px\",\n color: \"#030712\",\n fontFamily: \"Inter, sans-serif\",\n \"::placeholder\": {\n color: \"#9ca3af\",\n },\n },\n },\n};\n\nexport const cardFormSchema = z\n .object({\n name: z.string().min(1, \"Nome é obrigatório\"),\n country: z.string().min(1, \"País é obrigatório\"),\n personType: z.enum([\"pf\", \"pj\"]),\n cpf: z.string().optional(),\n cnpj: z.string().optional(),\n fullName: z.string().min(1, \"Nome completo é obrigatório\"),\n cep: z.string().min(9, \"CEP é obrigatório\"),\n street: z.string().min(1, \"Endereço é obrigatório\"),\n streetNumber: z.string().min(1, \"Número é obrigatório\"),\n city: z.string().min(1, \"Cidade é obrigatória\"),\n state: z.string().min(1, \"UF é obrigatório\"),\n neighborhood: z.string().min(1, \"Bairro é obrigatório\"),\n complement: z.string().optional(),\n })\n .refine(\n (data) => {\n if (data.personType === \"pf\") return !!data.cpf && data.cpf.length >= 14;\n return !!data.cnpj && data.cnpj.length >= 18;\n },\n {\n message: \"Documento é obrigatório\",\n path: [\"cpf\"],\n },\n );\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport type StripeElementsStatus = {\n cardNumber: boolean;\n cardExpiry: boolean;\n cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = [\n \"name\",\n \"country\",\n \"personType\",\n \"cpf\",\n \"cnpj\",\n] as const;\n\ntype CardFormFieldsProps = {\n readonly form: UseFormReturn<CardFormData>;\n readonly onStripeChange: (\n field: keyof StripeElementsStatus,\n complete: boolean,\n ) => void;\n readonly stripeErrors: {\n cardNumber?: string;\n cardExpiry?: string;\n cardCvc?: string;\n };\n};\n\nexport function CardFormFields({\n form,\n onStripeChange,\n stripeErrors,\n}: CardFormFieldsProps) {\n const {\n register,\n watch,\n setValue,\n formState: { errors },\n } = form;\n\n const personType = watch(\"personType\");\n\n return (\n <div className=\"flex flex-col gap-5\">\n <FormField\n label=\"Nome impresso no cartão\"\n placeholder=\"Digite aqui\"\n {...register(\"name\")}\n error={!!errors.name}\n errorMessage={errors.name?.message}\n />\n\n <div className=\"flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n Número do cartão\n </label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative\">\n <div className=\"w-full\">\n <CardNumberElement\n options={{ ...stripeElementOptions, showIcon: true }}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardNumber\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardNumber && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardNumber}\n </p>\n )}\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex-1 flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n Data de validade\n </label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n <div className=\"w-full\">\n <CardExpiryElement\n options={stripeElementOptions}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardExpiry\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardExpiry && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardExpiry}\n </p>\n )}\n </div>\n\n <div className=\"flex-1 flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">CVC</label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n <div className=\"w-full\">\n <CardCvcElement\n options={stripeElementOptions}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardCvc\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardCvc && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardCvc}\n </p>\n )}\n </div>\n </div>\n\n <SelectField\n label=\"País\"\n placeholder=\"Selecione\"\n value={watch(\"country\")}\n onChange={(value) => setValue(\"country\", value as string)}\n options={COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))}\n />\n\n <div className=\"flex gap-4\">\n <SelectField\n label=\"Tipo de pessoa\"\n placeholder=\"Selecione\"\n value={personType}\n onChange={(value) => {\n setValue(\"personType\", value as \"pf\" | \"pj\");\n setValue(\"cpf\", \"\");\n setValue(\"cnpj\", \"\");\n }}\n options={[\n { value: \"pf\", label: \"Pessoa física\" },\n { value: \"pj\", label: \"Pessoa jurídica\" },\n ]}\n containerClassName=\"flex-1\"\n />\n <div className=\"flex-1\">\n {personType === \"pj\" ? (\n <FormField\n label=\"CNPJ\"\n placeholder=\"__.___.___/____-__\"\n {...register(\"cnpj\", {\n onChange: (e) => {\n setValue(\"cnpj\", formatCNPJ(e.target.value));\n },\n })}\n error={!!errors.cpf}\n errorMessage={errors.cpf?.message}\n />\n ) : (\n <FormField\n label=\"CPF\"\n placeholder=\"___.___.___-__\"\n {...register(\"cpf\", {\n onChange: (e) => {\n setValue(\"cpf\", formatCPF(e.target.value));\n },\n })}\n error={!!errors.cpf}\n errorMessage={errors.cpf?.message}\n />\n )}\n </div>\n </div>\n </div>\n );\n}\n\ntype BillingFormFieldsProps = {\n readonly form: UseFormReturn<CardFormData>;\n};\n\nexport function BillingFormFields({ form }: BillingFormFieldsProps) {\n const {\n register,\n setValue,\n formState: { errors },\n } = form;\n\n const { mutateAsync: lookupCep } = useViaCep();\n\n const handleCepChange = (rawValue: string) => {\n const masked = formatPostalCode(rawValue);\n setValue(\"cep\", masked);\n\n const digits = rawValue.replace(/\\D/g, \"\");\n if (digits.length === 8) {\n lookupCep(digits)\n .then((data) => {\n setValue(\"street\", data.logradouro, { shouldValidate: true });\n setValue(\"neighborhood\", data.bairro, { shouldValidate: true });\n setValue(\"city\", data.localidade, { shouldValidate: true });\n setValue(\"state\", data.uf, { shouldValidate: true });\n })\n .catch(() => {\n // silently ignore — user can fill manually\n });\n }\n };\n\n return (\n <div className=\"flex flex-col gap-5\">\n <FormField\n label=\"Nome completo\"\n placeholder=\"Digite aqui\"\n {...register(\"fullName\")}\n error={!!errors.fullName}\n errorMessage={errors.fullName?.message}\n />\n\n <FormField\n label=\"CEP\"\n placeholder=\"_____-___\"\n {...register(\"cep\", {\n onChange: (e) => handleCepChange(e.target.value),\n })}\n error={!!errors.cep}\n errorMessage={errors.cep?.message}\n />\n\n <div className=\"flex gap-4\">\n <div className=\"flex-[4]\">\n <FormField\n label=\"Endereço\"\n placeholder=\"\"\n {...register(\"street\")}\n error={!!errors.street}\n errorMessage={errors.street?.message}\n />\n </div>\n <div className=\"flex-[1]\">\n <FormField\n label=\"Número\"\n placeholder=\"\"\n {...register(\"streetNumber\")}\n error={!!errors.streetNumber}\n errorMessage={errors.streetNumber?.message}\n />\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex-1\">\n <FormField\n label=\"Cidade\"\n placeholder=\"\"\n {...register(\"city\")}\n error={!!errors.city}\n errorMessage={errors.city?.message}\n />\n </div>\n <div className=\"flex-1\">\n <FormField\n label=\"UF\"\n placeholder=\"\"\n {...register(\"state\")}\n error={!!errors.state}\n errorMessage={errors.state?.message}\n />\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <FormField\n label=\"Bairro\"\n placeholder=\"\"\n {...register(\"neighborhood\")}\n error={!!errors.neighborhood}\n errorMessage={errors.neighborhood?.message}\n />\n <FormField\n label=\"Complemento\"\n optional\n placeholder=\"\"\n {...register(\"complement\")}\n error={!!errors.complement}\n errorMessage={errors.complement?.message}\n />\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modals/cards/CardFormFields.tsx"],"sourcesContent":["\"use client\";\n\nimport { UseFormReturn } from \"react-hook-form\";\nimport { useViaCep } from \"../../../modules/accounts/hooks/useViaCep\";\nimport { FormField } from \"../../ui/form/FormField\";\nimport { SelectField } from \"../../ui/form/SelectField\";\nimport { COUNTRIES } from \"../../../utils/countries\";\nimport {\n formatCPF,\n formatCNPJ,\n formatPostalCode,\n} from \"../../../utils/format/masks\";\nimport z from \"zod\";\nimport {\n CardCvcElement,\n CardExpiryElement,\n CardNumberElement,\n} from \"@stripe/react-stripe-js\";\nimport { useTranslations } from \"next-intl\";\n\nconst stripeElementOptions = {\n style: {\n base: {\n fontSize: \"16px\",\n color: \"#030712\",\n fontFamily: \"Inter, sans-serif\",\n \"::placeholder\": {\n color: \"#9ca3af\",\n },\n },\n },\n};\n\nexport function buildCardFormSchema(isInternational: boolean) {\n const base = z.object({\n name: z.string().min(1, \"Nome é obrigatório\"),\n country: z.string().min(1, \"País é obrigatório\"),\n personType: z.enum([\"pf\", \"pj\"]).optional(),\n cpf: z.string().optional(),\n cnpj: z.string().optional(),\n fullName: z.string().min(1, \"Nome completo é obrigatório\"),\n cep: z.string().min(isInternational ? 1 : 9, isInternational ? \"Código postal é obrigatório\" : \"CEP é obrigatório\"),\n street: z.string().min(1, \"Endereço é obrigatório\"),\n streetNumber: isInternational ? z.string().optional() : z.string().min(1, \"Número é obrigatório\"),\n city: z.string().min(1, \"Cidade é obrigatória\"),\n state: z.string().min(1, \"UF é obrigatório\"),\n neighborhood: isInternational ? z.string().optional() : z.string().min(1, \"Bairro é obrigatório\"),\n complement: z.string().optional(),\n });\n if (isInternational) return base;\n return base.refine(\n (data) => {\n if (data.personType === \"pf\") return !!data.cpf && data.cpf.length >= 14;\n return !!data.cnpj && data.cnpj.length >= 18;\n },\n {\n message: \"Documento é obrigatório\",\n path: [\"cpf\"],\n },\n );\n}\n\nexport const cardFormSchema = buildCardFormSchema(false);\n\nexport type CardFormData = z.infer<typeof cardFormSchema>;\n\nexport type StripeElementsStatus = {\n cardNumber: boolean;\n cardExpiry: boolean;\n cardCvc: boolean;\n};\n\nexport const STEP1_FIELDS = [\n \"name\",\n \"country\",\n \"personType\",\n \"cpf\",\n \"cnpj\",\n] as const;\n\ntype CardFormFieldsProps = {\n readonly form: UseFormReturn<CardFormData>;\n readonly onStripeChange: (\n field: keyof StripeElementsStatus,\n complete: boolean,\n ) => void;\n readonly stripeErrors: {\n cardNumber?: string;\n cardExpiry?: string;\n cardCvc?: string;\n };\n readonly isInternational?: boolean;\n};\n\nexport function CardFormFields({\n form,\n onStripeChange,\n stripeErrors,\n isInternational = false,\n}: CardFormFieldsProps) {\n const translate = useTranslations();\n const {\n register,\n watch,\n setValue,\n formState: { errors },\n } = form;\n\n const personType = watch(\"personType\");\n\n return (\n <div className=\"flex flex-col gap-5\">\n <FormField\n label={translate('common.cards.form.nameOnCard')}\n placeholder={translate('common.cards.form.typeHere')}\n {...register(\"name\")}\n error={!!errors.name}\n errorMessage={errors.name?.message}\n />\n\n <div className=\"flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n {translate('common.cards.form.cardNumber')}\n </label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400 relative\">\n <div className=\"w-full\">\n <CardNumberElement\n options={{ ...stripeElementOptions, showIcon: true }}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardNumber\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardNumber && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardNumber}\n </p>\n )}\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex-1 flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">\n {translate('common.cards.form.cardExpiry')}\n </label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n <div className=\"w-full\">\n <CardExpiryElement\n options={stripeElementOptions}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardExpiry\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardExpiry && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardExpiry}\n </p>\n )}\n </div>\n\n <div className=\"flex-1 flex flex-col gap-1.5\">\n <label className=\"paragraph-xsmall-semibold text-zinc-600\">{translate('common.cards.form.cardCvc')}</label>\n <div className=\"h-10 px-3 flex items-center w-full border border-zinc-200 rounded-lg bg-white transition-colors focus-within:border-zinc-400\">\n <div className=\"w-full\">\n <CardCvcElement\n options={stripeElementOptions}\n onChange={(e: { complete: boolean }) =>\n onStripeChange(\"cardCvc\", e.complete)\n }\n />\n </div>\n </div>\n {stripeErrors.cardCvc && (\n <p className=\"paragraph-xsmall-semibold text-red-600\">\n {stripeErrors.cardCvc}\n </p>\n )}\n </div>\n </div>\n\n <SelectField\n label={translate('common.cards.form.country')}\n placeholder={translate('common.cards.form.select')}\n value={watch(\"country\")}\n onChange={(value) => setValue(\"country\", value as string)}\n options={COUNTRIES.map((c) => ({ value: c.iso, label: c.name }))}\n />\n\n {!isInternational && (\n <div className=\"flex gap-4\">\n <SelectField\n label={translate('common.cards.form.personType')}\n placeholder={translate('common.cards.form.select')}\n value={personType}\n onChange={(value) => {\n setValue(\"personType\", value as \"pf\" | \"pj\");\n setValue(\"cpf\", \"\");\n setValue(\"cnpj\", \"\");\n }}\n options={[\n { value: \"pf\", label: translate('common.cards.form.personTypePf') },\n { value: \"pj\", label: translate('common.cards.form.personTypePj') },\n ]}\n containerClassName=\"flex-1\"\n />\n <div className=\"flex-1\">\n {personType === \"pj\" ? (\n <FormField\n label={translate('common.cards.form.cnpj')}\n placeholder=\"__.___.___/____-__\"\n {...register(\"cnpj\", {\n onChange: (e) => {\n setValue(\"cnpj\", formatCNPJ(e.target.value));\n },\n })}\n error={!!errors.cpf}\n errorMessage={errors.cpf?.message}\n />\n ) : (\n <FormField\n label={translate('common.cards.form.cpf')}\n placeholder=\"___.___.___-__\"\n {...register(\"cpf\", {\n onChange: (e) => {\n setValue(\"cpf\", formatCPF(e.target.value));\n },\n })}\n error={!!errors.cpf}\n errorMessage={errors.cpf?.message}\n />\n )}\n </div>\n </div>\n )}\n </div>\n );\n}\n\ntype BillingFormFieldsProps = {\n readonly form: UseFormReturn<CardFormData>;\n readonly isInternational?: boolean;\n};\n\nexport function BillingFormFields({ form, isInternational = false }: BillingFormFieldsProps) {\n const translate = useTranslations();\n const {\n register,\n setValue,\n formState: { errors },\n } = form;\n\n const { mutateAsync: lookupCep } = useViaCep();\n\n const handleCepChange = (rawValue: string) => {\n if (isInternational) {\n setValue(\"cep\", rawValue);\n return;\n }\n const masked = formatPostalCode(rawValue);\n setValue(\"cep\", masked);\n\n const digits = rawValue.replace(/\\D/g, \"\");\n if (digits.length === 8) {\n lookupCep(digits)\n .then((data) => {\n setValue(\"street\", data.logradouro, { shouldValidate: true });\n setValue(\"neighborhood\", data.bairro, { shouldValidate: true });\n setValue(\"city\", data.localidade, { shouldValidate: true });\n setValue(\"state\", data.uf, { shouldValidate: true });\n })\n .catch(() => {\n // silently ignore — user can fill manually\n });\n }\n };\n\n return (\n <div className=\"flex flex-col gap-5\">\n <FormField\n label={translate('common.cards.form.fullName')}\n placeholder={translate('common.cards.form.typeHere')}\n {...register(\"fullName\")}\n error={!!errors.fullName}\n errorMessage={errors.fullName?.message}\n />\n\n <FormField\n label={isInternational ? translate('common.cards.form.postalCode') : translate('common.cards.form.cep')}\n placeholder={isInternational ? \"\" : \"_____-___\"}\n {...register(\"cep\", {\n onChange: (e) => handleCepChange(e.target.value),\n })}\n error={!!errors.cep}\n errorMessage={errors.cep?.message}\n />\n\n <div className=\"flex gap-4\">\n <div className=\"flex-[4]\">\n <FormField\n label={translate('common.cards.form.street')}\n placeholder=\"\"\n {...register(\"street\")}\n error={!!errors.street}\n errorMessage={errors.street?.message}\n />\n </div>\n <div className=\"flex-[1]\">\n <FormField\n label={translate('common.cards.form.streetNumber')}\n placeholder=\"\"\n {...register(\"streetNumber\")}\n error={!!errors.streetNumber}\n errorMessage={errors.streetNumber?.message}\n />\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex-1\">\n <FormField\n label={translate('common.cards.form.city')}\n placeholder=\"\"\n {...register(\"city\")}\n error={!!errors.city}\n errorMessage={errors.city?.message}\n />\n </div>\n <div className=\"flex-1\">\n <FormField\n label={isInternational ? translate('common.cards.form.stateProvince') : translate('common.cards.form.state')}\n placeholder=\"\"\n {...register(\"state\")}\n error={!!errors.state}\n errorMessage={errors.state?.message}\n />\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n {!isInternational && (\n <FormField\n label={translate('common.cards.form.neighborhood')}\n placeholder=\"\"\n {...register(\"neighborhood\")}\n error={!!errors.neighborhood}\n errorMessage={errors.neighborhood?.message}\n />\n )}\n <FormField\n label={translate('common.cards.form.complement')}\n optional\n placeholder=\"\"\n {...register(\"complement\")}\n error={!!errors.complement}\n errorMessage={errors.complement?.message}\n />\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -17,7 +17,9 @@ import { useModalManager } from "../../../store/useModalManager";
|
|
|
17
17
|
import { useDeleteConfirmation } from "../../../modules/cards/hooks/delete-confirmation.hook";
|
|
18
18
|
import { useDeleteCard } from "../../../modules/cards/hooks/delete-card.hook";
|
|
19
19
|
import { useCards } from "../../../modules/cards/hooks/cards.hook";
|
|
20
|
+
import { useTranslations } from "next-intl";
|
|
20
21
|
function DeleteCardModal() {
|
|
22
|
+
const translate = useTranslations();
|
|
21
23
|
const { activeModal, modalData, closeModal } = useModalManager();
|
|
22
24
|
const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();
|
|
23
25
|
const deleteCard = useDeleteCard();
|
|
@@ -42,7 +44,7 @@ function DeleteCardModal() {
|
|
|
42
44
|
{
|
|
43
45
|
toastId: t,
|
|
44
46
|
variant: "error",
|
|
45
|
-
message: error instanceof Error ? error.message : "
|
|
47
|
+
message: error instanceof Error ? error.message : translate("common.cards.delete.errorToast")
|
|
46
48
|
}
|
|
47
49
|
),
|
|
48
50
|
{ duration: 5e3 }
|
|
@@ -57,7 +59,7 @@ function DeleteCardModal() {
|
|
|
57
59
|
Toast,
|
|
58
60
|
{
|
|
59
61
|
variant: "success",
|
|
60
|
-
message:
|
|
62
|
+
message: translate("common.cards.delete.successToast", { digits: cardLastDigits }),
|
|
61
63
|
toastId: t
|
|
62
64
|
}
|
|
63
65
|
),
|
|
@@ -68,9 +70,9 @@ function DeleteCardModal() {
|
|
|
68
70
|
/* @__PURE__ */ jsxs(DialogHeader, { className: "gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0", children: [
|
|
69
71
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5", children: /* @__PURE__ */ jsx(IconTrash, { size: 20, className: "text-red-500" }) }),
|
|
70
72
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
71
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: "
|
|
73
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.cards.delete.title") }),
|
|
72
74
|
/* @__PURE__ */ jsxs(DialogDescription, { className: "paragraph-small-regular text-zinc-600", children: [
|
|
73
|
-
"
|
|
75
|
+
translate("common.cards.delete.description"),
|
|
74
76
|
" ",
|
|
75
77
|
/* @__PURE__ */ jsxs("span", { className: "font-semibold text-zinc-950", children: [
|
|
76
78
|
"\u2022\u2022\u2022\u2022 ",
|
|
@@ -83,9 +85,9 @@ function DeleteCardModal() {
|
|
|
83
85
|
/* @__PURE__ */ jsx("div", { className: "px-4 lg:px-5 py-5", children: /* @__PURE__ */ jsx(
|
|
84
86
|
FormField,
|
|
85
87
|
{
|
|
86
|
-
label: "
|
|
88
|
+
label: translate("common.cards.delete.confirmLabel"),
|
|
87
89
|
required: true,
|
|
88
|
-
placeholder: "
|
|
90
|
+
placeholder: translate("common.cards.delete.confirmPlaceholder"),
|
|
89
91
|
...form.register("confirmText")
|
|
90
92
|
}
|
|
91
93
|
) }),
|
|
@@ -98,7 +100,7 @@ function DeleteCardModal() {
|
|
|
98
100
|
disabled: !isValidConfirmation,
|
|
99
101
|
loading: form.formState.isSubmitting,
|
|
100
102
|
className: "h-10!",
|
|
101
|
-
children: form.formState.isSubmitting ? "
|
|
103
|
+
children: form.formState.isSubmitting ? translate("common.cards.delete.deleting") : translate("common.actions.delete")
|
|
102
104
|
}
|
|
103
105
|
),
|
|
104
106
|
/* @__PURE__ */ jsx(
|
|
@@ -109,7 +111,7 @@ function DeleteCardModal() {
|
|
|
109
111
|
className: "h-10!",
|
|
110
112
|
onClick: handleClose,
|
|
111
113
|
disabled: form.formState.isSubmitting,
|
|
112
|
-
children: "
|
|
114
|
+
children: translate("common.actions.cancel")
|
|
113
115
|
}
|
|
114
116
|
)
|
|
115
117
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modals/cards/DeleteCardModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n} from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { IconTrash } from '@tabler/icons-react';\nimport { toast } from 'sonner';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';\nimport { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\n\nexport function DeleteCardModal() {\n const { activeModal, modalData, closeModal } = useModalManager();\n const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();\n const deleteCard = useDeleteCard();\n const { data: cardsData } = useCards();\n\n const isOpen = activeModal === 'deleteCardModal';\n const cardId = modalData.cardId as string | undefined;\n const onSuccess = modalData.onSuccess as (() => void) | undefined;\n\n const card = cardsData?.data?.find((c) => c.id.toString() === cardId);\n const cardLastDigits = (card?.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n\n const handleClose = () => {\n resetConfirmation();\n closeModal();\n };\n\n const onSubmit = async () => {\n if (!cardId) return;\n\n try {\n await deleteCard.mutateAsync(cardId);\n } catch (error) {\n toast.custom(\n (t) => (\n <Toast\n toastId={t}\n variant=\"error\"\n message={\n error instanceof Error\n ? error.message\n : '
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modals/cards/DeleteCardModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogDescription,\n} from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { IconTrash } from '@tabler/icons-react';\nimport { toast } from 'sonner';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';\nimport { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useTranslations } from 'next-intl';\n\nexport function DeleteCardModal() {\n const translate = useTranslations();\n const { activeModal, modalData, closeModal } = useModalManager();\n const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();\n const deleteCard = useDeleteCard();\n const { data: cardsData } = useCards();\n\n const isOpen = activeModal === 'deleteCardModal';\n const cardId = modalData.cardId as string | undefined;\n const onSuccess = modalData.onSuccess as (() => void) | undefined;\n\n const card = cardsData?.data?.find((c) => c.id.toString() === cardId);\n const cardLastDigits = (card?.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n\n const handleClose = () => {\n resetConfirmation();\n closeModal();\n };\n\n const onSubmit = async () => {\n if (!cardId) return;\n\n try {\n await deleteCard.mutateAsync(cardId);\n } catch (error) {\n toast.custom(\n (t) => (\n <Toast\n toastId={t}\n variant=\"error\"\n message={\n error instanceof Error\n ? error.message\n : translate('common.cards.delete.errorToast')\n }\n />\n ),\n { duration: 5000 },\n );\n return;\n }\n\n onSuccess?.();\n resetConfirmation();\n closeModal();\n\n toast.custom(\n (t) => (\n <Toast\n variant=\"success\"\n message={translate('common.cards.delete.successToast', { digits: cardLastDigits })}\n toastId={t}\n />\n ),\n { duration: 5000 },\n );\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n <DialogContent className=\"flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border\">\n <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col\">\n <DialogHeader className=\"gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0\">\n <div className=\"flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5\">\n <IconTrash size={20} className=\"text-red-500\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {translate('common.cards.delete.title')}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-600\">\n {translate('common.cards.delete.description')}{' '}\n <span className=\"font-semibold text-zinc-950\">\n •••• {cardLastDigits}\n </span>\n ?\n </DialogDescription>\n </div>\n </DialogHeader>\n\n <div className=\"px-4 lg:px-5 py-5\">\n <FormField\n label={translate('common.cards.delete.confirmLabel')}\n required\n placeholder={translate('common.cards.delete.confirmPlaceholder')}\n {...form.register('confirmText')}\n />\n </div>\n <Separator />\n <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5\">\n <Button\n type=\"submit\"\n disabled={!isValidConfirmation}\n loading={form.formState.isSubmitting}\n className=\"h-10!\"\n >\n {form.formState.isSubmitting ? translate('common.cards.delete.deleting') : translate('common.actions.delete')}\n </Button>\n <Button\n type=\"button\"\n variant=\"secondary\"\n className=\"h-10!\"\n onClick={handleClose}\n disabled={form.formState.isSubmitting}\n >\n {translate('common.actions.cancel')}\n </Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -5,7 +5,9 @@ import { IconAlertOctagon, IconX } from "@tabler/icons-react";
|
|
|
5
5
|
import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
|
|
6
6
|
import { toCalendarDate } from "../../infra/utils/date";
|
|
7
7
|
import { getSubscriptionExpiryDate } from "../../modules/subscriptions/utils/get-subscription-expiry-date";
|
|
8
|
+
import { useTranslations } from "next-intl";
|
|
8
9
|
function CancelledSubscriptionBanner({ onReactivate }) {
|
|
10
|
+
const translate = useTranslations();
|
|
9
11
|
const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();
|
|
10
12
|
const [visible, setVisible] = useState(true);
|
|
11
13
|
const [animated, setAnimated] = useState(false);
|
|
@@ -27,7 +29,7 @@ function CancelledSubscriptionBanner({ onReactivate }) {
|
|
|
27
29
|
children: [
|
|
28
30
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 w-full sm:w-auto", children: [
|
|
29
31
|
/* @__PURE__ */ jsx(IconAlertOctagon, { size: 16, className: "text-white shrink-0" }),
|
|
30
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: "
|
|
32
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: translate("common.navigation.banners.cancelled.message") })
|
|
31
33
|
] }),
|
|
32
34
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start", children: [
|
|
33
35
|
/* @__PURE__ */ jsx(
|
|
@@ -36,7 +38,7 @@ function CancelledSubscriptionBanner({ onReactivate }) {
|
|
|
36
38
|
type: "button",
|
|
37
39
|
className: "flex items-center justify-center p-1.5 cursor-pointer",
|
|
38
40
|
onClick: onReactivate,
|
|
39
|
-
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white underline", children: "
|
|
41
|
+
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white underline", children: translate("common.navigation.banners.cancelled.choosePlan") })
|
|
40
42
|
}
|
|
41
43
|
),
|
|
42
44
|
/* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer shrink-0", onClick: dismiss, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-red-200" }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/CancelledSubscriptionBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertOctagon, IconX } from '@tabler/icons-react';\nimport { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { toCalendarDate } from '../../infra/utils/date';\nimport { getSubscriptionExpiryDate } from '../../modules/subscriptions/utils/get-subscription-expiry-date';\n\ninterface CancelledSubscriptionBannerProps {\n onReactivate?: () => void;\n}\n\nexport function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {\n const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n if (subscription?.type === 'free' || subscription?.type === 'trial') return null;\n\n const today = toCalendarDate(new Date());\n const expiryDate = getSubscriptionExpiryDate(subscription);\n\n // Só mostra se há cancelamento E o período (com grace, no caso de client) já terminou.\n if (!today || !expiryDate || !subscription?.date_cancellation) return null;\n if (today.getTime() < expiryDate.getTime()) return null;\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertOctagon size={16} className=\"text-white shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-white\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/CancelledSubscriptionBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertOctagon, IconX } from '@tabler/icons-react';\nimport { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { toCalendarDate } from '../../infra/utils/date';\nimport { getSubscriptionExpiryDate } from '../../modules/subscriptions/utils/get-subscription-expiry-date';\nimport { useTranslations } from 'next-intl';\n\ninterface CancelledSubscriptionBannerProps {\n onReactivate?: () => void;\n}\n\nexport function CancelledSubscriptionBanner({ onReactivate }: CancelledSubscriptionBannerProps) {\n const translate = useTranslations();\n const { data: { data: [subscription] = [] } = {} } = useActiveSubscription();\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n if (subscription?.type === 'free' || subscription?.type === 'trial') return null;\n\n const today = toCalendarDate(new Date());\n const expiryDate = getSubscriptionExpiryDate(subscription);\n\n // Só mostra se há cancelamento E o período (com grace, no caso de client) já terminou.\n if (!today || !expiryDate || !subscription?.date_cancellation) return null;\n if (today.getTime() < expiryDate.getTime()) return null;\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-red-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertOctagon size={16} className=\"text-white shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-white\">\n {translate('common.navigation.banners.cancelled.message')}\n </span>\n </div>\n <div className=\"flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start\">\n <button\n type=\"button\"\n className=\"flex items-center justify-center p-1.5 cursor-pointer\"\n onClick={onReactivate}\n >\n <span className=\"paragraph-xsmall-semibold text-white underline\">\n {translate('common.navigation.banners.cancelled.choosePlan')}\n </span>\n </button>\n <button type=\"button\" className=\"cursor-pointer shrink-0\" onClick={dismiss}>\n <IconX size={18} className=\"text-red-200\" />\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";AAyCQ,SACE,KADF;AAvCR,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAS,kBAAkB,aAAa;AACxC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,iCAAiC;AAC1C,SAAS,uBAAuB;AAMzB,SAAS,4BAA4B,EAAE,aAAa,GAAqC;AAC9F,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,MAAM,EAAE,MAAM,CAAC,YAAY,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,sBAAsB;AAC3E,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,IAAI,GAAG,EAAE;AACpD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AAEvD,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI,cAAc,SAAS,UAAU,cAAc,SAAS,QAAS,QAAO;AAE5E,QAAM,QAAQ,eAAe,oBAAI,KAAK,CAAC;AACvC,QAAM,aAAa,0BAA0B,YAAY;AAGzD,MAAI,CAAC,SAAS,CAAC,cAAc,CAAC,cAAc,kBAAmB,QAAO;AACtE,MAAI,MAAM,QAAQ,IAAI,WAAW,QAAQ,EAAG,QAAO;AAEnD,SACE,oBAAC,SAAI,WAAU,wGACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,8NAA8N,WAAW,mCAAmC,mBAAmB;AAAA,MAE1S;AAAA,6BAAC,SAAI,WAAU,mDACb;AAAA,8BAAC,oBAAiB,MAAM,IAAI,WAAU,uBAAsB;AAAA,UAC5D,oBAAC,UAAK,WAAU,wCACb,oBAAU,6CAA6C,GAC1D;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,UAAK,WAAU,kDACb,oBAAU,gDAAgD,GAC7D;AAAA;AAAA,UACF;AAAA,UACA,oBAAC,YAAO,MAAK,UAAS,WAAU,2BAA0B,SAAS,SACjE,8BAAC,SAAM,MAAM,IAAI,WAAU,gBAAe,GAC5C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, useCallback } from "react";
|
|
4
4
|
import { IconAlertTriangle, IconX } from "@tabler/icons-react";
|
|
5
|
+
import { useTranslations } from "next-intl";
|
|
5
6
|
function OverdueInvoiceBanner({ onDetails }) {
|
|
7
|
+
const translate = useTranslations();
|
|
6
8
|
const [visible, setVisible] = useState(true);
|
|
7
9
|
const [animated, setAnimated] = useState(false);
|
|
8
10
|
useEffect(() => {
|
|
@@ -18,7 +20,7 @@ function OverdueInvoiceBanner({ onDetails }) {
|
|
|
18
20
|
children: [
|
|
19
21
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 w-full sm:w-auto", children: [
|
|
20
22
|
/* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, className: "text-white shrink-0" }),
|
|
21
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: "
|
|
23
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: translate("common.navigation.banners.overdue.message") })
|
|
22
24
|
] }),
|
|
23
25
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start", children: [
|
|
24
26
|
/* @__PURE__ */ jsx(
|
|
@@ -27,7 +29,7 @@ function OverdueInvoiceBanner({ onDetails }) {
|
|
|
27
29
|
type: "button",
|
|
28
30
|
className: "flex items-center justify-center p-1.5 cursor-pointer",
|
|
29
31
|
onClick: onDetails,
|
|
30
|
-
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white underline", children: "
|
|
32
|
+
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white underline", children: translate("common.navigation.banners.overdue.details") })
|
|
31
33
|
}
|
|
32
34
|
),
|
|
33
35
|
/* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer shrink-0", onClick: dismiss, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-orange-200" }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/navigation/OverdueInvoiceBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\n\ninterface OverdueInvoiceBannerProps {\n onDetails?: () => void;\n}\n\nexport function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-orange-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-white shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-white\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/navigation/OverdueInvoiceBanner.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { IconAlertTriangle, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\n\ninterface OverdueInvoiceBannerProps {\n onDetails?: () => void;\n}\n\nexport function OverdueInvoiceBanner({ onDetails }: OverdueInvoiceBannerProps) {\n const translate = useTranslations();\n const [visible, setVisible] = useState(true);\n const [animated, setAnimated] = useState(false);\n\n useEffect(() => {\n const timer = setTimeout(() => setAnimated(true), 50);\n return () => clearTimeout(timer);\n }, []);\n\n const dismiss = useCallback(() => setVisible(false), []);\n\n if (!visible) return null;\n\n return (\n <div className=\"fixed top-[80px] md:top-0 left-0 right-0 z-[60] flex justify-center pointer-events-none px-4 lg:px-0\">\n <div\n className={`flex flex-col sm:flex-row items-start sm:items-center justify-between bg-orange-500 rounded-lg px-3 py-2 sm:py-1 w-full lg:w-[805px] max-w-full pointer-events-auto transition-transform duration-500 ease-out gap-2 sm:gap-0 ${animated ? 'translate-y-0 md:translate-y-9' : '-translate-y-full'}`}\n >\n <div className=\"flex items-center gap-2 flex-1 w-full sm:w-auto\">\n <IconAlertTriangle size={16} className=\"text-white shrink-0\" />\n <span className=\"paragraph-xsmall-semibold text-white\">\n {translate('common.navigation.banners.overdue.message')}\n </span>\n </div>\n <div className=\"flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start\">\n <button\n type=\"button\"\n className=\"flex items-center justify-center p-1.5 cursor-pointer\"\n onClick={onDetails}\n >\n <span className=\"paragraph-xsmall-semibold text-white underline\">{translate('common.navigation.banners.overdue.details')}</span>\n </button>\n <button type=\"button\" className=\"cursor-pointer shrink-0\" onClick={dismiss}>\n <IconX size={18} className=\"text-orange-200\" />\n </button>\n </div>\n </div>\n </div>\n );\n}\n"],"mappings":";AA6BQ,SACE,KADF;AA3BR,SAAS,UAAU,WAAW,mBAAmB;AACjD,SAAS,mBAAmB,aAAa;AACzC,SAAS,uBAAuB;AAMzB,SAAS,qBAAqB,EAAE,UAAU,GAA8B;AAC7E,QAAM,YAAY,gBAAgB;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,QAAQ,WAAW,MAAM,YAAY,IAAI,GAAG,EAAE;AACpD,WAAO,MAAM,aAAa,KAAK;AAAA,EACjC,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,YAAY,MAAM,WAAW,KAAK,GAAG,CAAC,CAAC;AAEvD,MAAI,CAAC,QAAS,QAAO;AAErB,SACE,oBAAC,SAAI,WAAU,wGACb;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,iOAAiO,WAAW,mCAAmC,mBAAmB;AAAA,MAE7S;AAAA,6BAAC,SAAI,WAAU,mDACb;AAAA,8BAAC,qBAAkB,MAAM,IAAI,WAAU,uBAAsB;AAAA,UAC7D,oBAAC,UAAK,WAAU,wCACb,oBAAU,2CAA2C,GACxD;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,+EACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,UAAK,WAAU,kDAAkD,oBAAU,2CAA2C,GAAE;AAAA;AAAA,UAC3H;AAAA,UACA,oBAAC,YAAO,MAAK,UAAS,WAAU,2BAA0B,SAAS,SACjE,8BAAC,SAAM,MAAM,IAAI,WAAU,mBAAkB,GAC/C;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
|
|
@@ -3,10 +3,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState, useEffect, useCallback } from "react";
|
|
4
4
|
import { IconAlertTriangle, IconX } from "@tabler/icons-react";
|
|
5
5
|
import { formatShortDate } from "../../infra/utils/date";
|
|
6
|
+
import { useTranslations } from "next-intl";
|
|
6
7
|
function PendingCancellationBanner({
|
|
7
8
|
limitDate,
|
|
8
9
|
onReactivate
|
|
9
10
|
}) {
|
|
11
|
+
const translate = useTranslations();
|
|
10
12
|
const [visible, setVisible] = useState(true);
|
|
11
13
|
const [animated, setAnimated] = useState(false);
|
|
12
14
|
useEffect(() => {
|
|
@@ -23,11 +25,7 @@ function PendingCancellationBanner({
|
|
|
23
25
|
children: [
|
|
24
26
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 w-full sm:w-auto", children: [
|
|
25
27
|
/* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, className: "text-zinc-950 shrink-0" }),
|
|
26
|
-
/* @__PURE__ */
|
|
27
|
-
"Sua assinatura foi cancelada, voc\xEA possui at\xE9 ",
|
|
28
|
-
formattedLimitDate,
|
|
29
|
-
" com suas p\xE1ginas online."
|
|
30
|
-
] })
|
|
28
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950", children: translate("common.navigation.banners.pending.message", { limitDate: formattedLimitDate ?? "" }) })
|
|
31
29
|
] }),
|
|
32
30
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-full sm:w-auto justify-between sm:justify-start", children: [
|
|
33
31
|
/* @__PURE__ */ jsx(
|
|
@@ -36,7 +34,7 @@ function PendingCancellationBanner({
|
|
|
36
34
|
type: "button",
|
|
37
35
|
className: "flex items-center justify-center p-1.5 cursor-pointer",
|
|
38
36
|
onClick: onReactivate,
|
|
39
|
-
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950 underline", children: "
|
|
37
|
+
children: /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950 underline", children: translate("common.navigation.banners.pending.reactivate") })
|
|
40
38
|
}
|
|
41
39
|
),
|
|
42
40
|
/* @__PURE__ */ jsx("button", { type: "button", className: "cursor-pointer shrink-0", onClick: dismiss, children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-700" }) })
|