@greatapps/common 1.1.237 → 1.1.238
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/modals/BuyCreditsModal.mjs +277 -0
- package/dist/components/modals/BuyCreditsModal.mjs.map +1 -0
- package/dist/components/ui/data-display/CardBrandIcons.mjs +484 -0
- package/dist/components/ui/data-display/CardBrandIcons.mjs.map +1 -0
- package/dist/components/ui/data-display/CardItem.mjs +67 -0
- package/dist/components/ui/data-display/CardItem.mjs.map +1 -0
- package/dist/components/ui/data-display/PaymentInfoCard.mjs +161 -0
- package/dist/components/ui/data-display/PaymentInfoCard.mjs.map +1 -0
- package/dist/components/ui/feedback/Skeleton.mjs +9 -0
- package/dist/components/ui/feedback/Skeleton.mjs.map +1 -0
- package/dist/index.mjs +57 -29
- package/dist/index.mjs.map +1 -1
- package/dist/modules/cards/actions/list-cards.action.mjs +10 -0
- package/dist/modules/cards/actions/list-cards.action.mjs.map +1 -0
- package/dist/modules/cards/hooks/cards.hook.mjs +16 -0
- package/dist/modules/cards/hooks/cards.hook.mjs.map +1 -0
- package/dist/modules/cards/services/cards.service.mjs +29 -0
- package/dist/modules/cards/services/cards.service.mjs.map +1 -0
- package/dist/modules/cards/types.mjs +27 -0
- package/dist/modules/cards/types.mjs.map +1 -0
- package/dist/modules/subscriptions/actions/calculate-subscription.action.mjs +27 -0
- package/dist/modules/subscriptions/actions/calculate-subscription.action.mjs.map +1 -0
- package/dist/modules/subscriptions/actions/update-subscription-plan.action.mjs +21 -0
- package/dist/modules/subscriptions/actions/update-subscription-plan.action.mjs.map +1 -0
- package/dist/modules/subscriptions/constants/addons.constants.mjs +13 -1
- package/dist/modules/subscriptions/constants/addons.constants.mjs.map +1 -1
- package/dist/modules/subscriptions/hooks/calculate-subscription.hook.mjs +13 -0
- package/dist/modules/subscriptions/hooks/calculate-subscription.hook.mjs.map +1 -0
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs +22 -0
- package/dist/modules/subscriptions/hooks/update-subscription-plan.hook.mjs.map +1 -0
- package/dist/modules/subscriptions/services/subscriptions.service.mjs +36 -0
- package/dist/modules/subscriptions/services/subscriptions.service.mjs.map +1 -1
- package/dist/modules/subscriptions/types/billing-period.type.mjs +1 -0
- package/dist/modules/subscriptions/types/billing-period.type.mjs.map +1 -0
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs +72 -0
- package/dist/modules/subscriptions/types/calculate-subscription.type.mjs.map +1 -0
- package/dist/modules/subscriptions/utils/build-plan-extras.mjs +34 -0
- package/dist/modules/subscriptions/utils/build-plan-extras.mjs.map +1 -0
- package/dist/modules/subscriptions/utils/periodicity.mjs +48 -0
- package/dist/modules/subscriptions/utils/periodicity.mjs.map +1 -0
- package/dist/modules/subscriptions/utils/resolve-plan-extras-prices.mjs +14 -0
- package/dist/modules/subscriptions/utils/resolve-plan-extras-prices.mjs.map +1 -0
- package/dist/server.mjs +10 -0
- package/dist/server.mjs.map +1 -1
- package/dist/store/useBuyCreditsModal.mjs +18 -0
- package/dist/store/useBuyCreditsModal.mjs.map +1 -0
- package/package.json +1 -1
- package/src/components/modals/BuyCreditsModal.tsx +304 -0
- package/src/components/ui/data-display/CardBrandIcons.tsx +336 -0
- package/src/components/ui/data-display/CardItem.tsx +75 -0
- package/src/components/ui/data-display/PaymentInfoCard.tsx +186 -0
- package/src/components/ui/feedback/Skeleton.tsx +5 -0
- package/src/index.ts +21 -2
- package/src/modules/cards/actions/list-cards.action.ts +8 -0
- package/src/modules/cards/hooks/cards.hook.ts +14 -0
- package/src/modules/cards/services/cards.service.ts +32 -0
- package/src/modules/cards/types.ts +32 -0
- package/src/modules/subscriptions/actions/calculate-subscription.action.ts +32 -0
- package/src/modules/subscriptions/actions/update-subscription-plan.action.ts +26 -0
- package/src/modules/subscriptions/constants/addons.constants.ts +18 -0
- package/src/modules/subscriptions/hooks/calculate-subscription.hook.ts +13 -0
- package/src/modules/subscriptions/hooks/update-subscription-plan.hook.ts +25 -0
- package/src/modules/subscriptions/services/subscriptions.service.ts +52 -1
- package/src/modules/subscriptions/types/billing-period.type.ts +1 -0
- package/src/modules/subscriptions/types/calculate-subscription.type.ts +75 -0
- package/src/modules/subscriptions/utils/build-plan-extras.ts +53 -0
- package/src/modules/subscriptions/utils/periodicity.ts +52 -0
- package/src/modules/subscriptions/utils/resolve-plan-extras-prices.ts +23 -0
- package/src/server.ts +5 -0
- package/src/store/useBuyCreditsModal.ts +25 -0
|
@@ -0,0 +1,277 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import {
|
|
4
|
+
Dialog,
|
|
5
|
+
DialogContent,
|
|
6
|
+
DialogHeader,
|
|
7
|
+
DialogTitle
|
|
8
|
+
} from "../ui/overlay/Dialog";
|
|
9
|
+
import { Button } from "../ui/buttons/Button";
|
|
10
|
+
import { Separator } from "../ui/data-display/Separator";
|
|
11
|
+
import { Toast } from "../ui/feedback/Toast";
|
|
12
|
+
import { SelectField } from "../ui/form/SelectField";
|
|
13
|
+
import { Skeleton } from "../ui/feedback/Skeleton";
|
|
14
|
+
import { PaymentInfoCard } from "../ui/data-display/PaymentInfoCard";
|
|
15
|
+
import { ADDON_IDS } from "../../modules/subscriptions/constants/addons.constants";
|
|
16
|
+
import {
|
|
17
|
+
AI_CREDIT_OPTIONS,
|
|
18
|
+
AI_CREDIT_VALUES
|
|
19
|
+
} from "../../modules/subscriptions/constants/addons.constants";
|
|
20
|
+
import { useBuyCreditsModal } from "../../store/useBuyCreditsModal";
|
|
21
|
+
import { useModalManager } from "../../store/useModalManager";
|
|
22
|
+
import { useCards } from "../../modules/cards/hooks/cards.hook";
|
|
23
|
+
import { useActiveSubscription } from "../../modules/subscriptions/hooks/find-active-subscription.hook";
|
|
24
|
+
import { useCalculateSubscription } from "../../modules/subscriptions/hooks/calculate-subscription.hook";
|
|
25
|
+
import { useUpdateSubscriptionPlan } from "../../modules/subscriptions/hooks/update-subscription-plan.hook";
|
|
26
|
+
import { buildPlanExtras } from "../../modules/subscriptions/utils/build-plan-extras";
|
|
27
|
+
import { getPriceFromCalculatedData } from "../../modules/subscriptions/utils/periodicity";
|
|
28
|
+
import { IconInfoCircle, IconX, IconLoader2 } from "@tabler/icons-react";
|
|
29
|
+
import { useCallback, useEffect, useMemo } from "react";
|
|
30
|
+
import { useForm } from "react-hook-form";
|
|
31
|
+
import { zodResolver } from "@hookform/resolvers/zod";
|
|
32
|
+
import z from "zod";
|
|
33
|
+
import { toast } from "sonner";
|
|
34
|
+
const buyCreditSchema = z.object({
|
|
35
|
+
creditOption: z.number().refine((val) => AI_CREDIT_VALUES.has(val), {
|
|
36
|
+
message: "Selecione uma op\xE7\xE3o de cr\xE9ditos"
|
|
37
|
+
}),
|
|
38
|
+
selectedCardId: z.string().min(1, "Selecione um cart\xE3o")
|
|
39
|
+
});
|
|
40
|
+
function BuyCreditsModal() {
|
|
41
|
+
const { open, closeModal } = useBuyCreditsModal();
|
|
42
|
+
const { openModal } = useModalManager();
|
|
43
|
+
const { data: cardsData } = useCards();
|
|
44
|
+
const { data: subscriptionData } = useActiveSubscription();
|
|
45
|
+
const subscription = subscriptionData?.data?.[0] ?? null;
|
|
46
|
+
const {
|
|
47
|
+
mutate: calculate,
|
|
48
|
+
isPending: isCalculatePending,
|
|
49
|
+
data: calculateData
|
|
50
|
+
} = useCalculateSubscription();
|
|
51
|
+
const updatePlanMutation = useUpdateSubscriptionPlan();
|
|
52
|
+
const aiItem = useMemo(
|
|
53
|
+
() => subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI),
|
|
54
|
+
[subscription]
|
|
55
|
+
);
|
|
56
|
+
const currentCredits = aiItem?.quantity ?? 0;
|
|
57
|
+
const subscriptionId = subscription?.id;
|
|
58
|
+
const planId = subscription?.id_plan;
|
|
59
|
+
const form = useForm({
|
|
60
|
+
resolver: zodResolver(buyCreditSchema),
|
|
61
|
+
mode: "onChange",
|
|
62
|
+
defaultValues: {
|
|
63
|
+
creditOption: currentCredits,
|
|
64
|
+
selectedCardId: cardsData?.data?.[0]?.id.toString() ?? ""
|
|
65
|
+
}
|
|
66
|
+
});
|
|
67
|
+
useEffect(() => {
|
|
68
|
+
if (open) {
|
|
69
|
+
form.reset({
|
|
70
|
+
creditOption: currentCredits,
|
|
71
|
+
selectedCardId: form.getValues("selectedCardId") || cardsData?.data?.[0]?.id.toString() || ""
|
|
72
|
+
});
|
|
73
|
+
calculate({
|
|
74
|
+
id_product: 1,
|
|
75
|
+
...planId != null && { id_plan: planId },
|
|
76
|
+
...subscriptionId != null && { id_subscription: subscriptionId },
|
|
77
|
+
plan_extras: buildPlanExtras(subscription?.items ?? [], [
|
|
78
|
+
{
|
|
79
|
+
id_addon: ADDON_IDS.AI,
|
|
80
|
+
quantity: currentCredits,
|
|
81
|
+
currency: "BRL"
|
|
82
|
+
}
|
|
83
|
+
])
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
}, [open, subscription, currentCredits, cardsData, form, calculate, planId, subscriptionId]);
|
|
87
|
+
const creditOption = form.watch("creditOption");
|
|
88
|
+
const selectedCardId = form.watch("selectedCardId");
|
|
89
|
+
const { isDirty, isSubmitting, isValid } = form.formState;
|
|
90
|
+
const subscriptionItems = useMemo(() => subscription?.items ?? [], [subscription]);
|
|
91
|
+
const handleCreditOptionChange = useCallback(
|
|
92
|
+
(value) => {
|
|
93
|
+
const credits = Number(value);
|
|
94
|
+
form.setValue("creditOption", credits, {
|
|
95
|
+
shouldValidate: true,
|
|
96
|
+
shouldDirty: true
|
|
97
|
+
});
|
|
98
|
+
const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === credits);
|
|
99
|
+
if (!option) return;
|
|
100
|
+
calculate({
|
|
101
|
+
id_product: 1,
|
|
102
|
+
...planId != null && { id_plan: planId },
|
|
103
|
+
...subscriptionId != null && { id_subscription: subscriptionId },
|
|
104
|
+
plan_extras: buildPlanExtras(subscriptionItems, [
|
|
105
|
+
{
|
|
106
|
+
id_addon: ADDON_IDS.AI,
|
|
107
|
+
quantity: option.credits,
|
|
108
|
+
currency: "BRL"
|
|
109
|
+
}
|
|
110
|
+
])
|
|
111
|
+
});
|
|
112
|
+
},
|
|
113
|
+
[form, subscriptionId, planId, subscriptionItems, calculate]
|
|
114
|
+
);
|
|
115
|
+
const calculatedData = calculateData?.data ?? null;
|
|
116
|
+
const totalPrice = useMemo(() => {
|
|
117
|
+
if (!calculatedData) return null;
|
|
118
|
+
return getPriceFromCalculatedData(calculatedData, subscription?.periodicity);
|
|
119
|
+
}, [calculatedData, subscription]);
|
|
120
|
+
const formatPrice = useCallback((price) => {
|
|
121
|
+
return price.toLocaleString("pt-BR", {
|
|
122
|
+
style: "currency",
|
|
123
|
+
currency: "BRL"
|
|
124
|
+
});
|
|
125
|
+
}, []);
|
|
126
|
+
const isConfirmDisabled = !isDirty || !isValid || isCalculatePending || isSubmitting;
|
|
127
|
+
const handleClose = useCallback(() => {
|
|
128
|
+
form.reset();
|
|
129
|
+
closeModal();
|
|
130
|
+
}, [form, closeModal]);
|
|
131
|
+
const handleOpenAddCardModal = useCallback(() => {
|
|
132
|
+
openModal("addCardModal", {
|
|
133
|
+
returnToBuyCredits: true,
|
|
134
|
+
buyCreditsState: {
|
|
135
|
+
activeCardId: selectedCardId,
|
|
136
|
+
selectedValue: creditOption
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
}, [openModal, selectedCardId, creditOption]);
|
|
140
|
+
const selectOptions = useMemo(() => {
|
|
141
|
+
return AI_CREDIT_OPTIONS.map((opt) => ({
|
|
142
|
+
value: opt.credits,
|
|
143
|
+
label: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 w-full", children: [
|
|
144
|
+
/* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950 flex-1", children: [
|
|
145
|
+
opt.credits.toLocaleString("pt-BR"),
|
|
146
|
+
" cr\xE9ditos de IA"
|
|
147
|
+
] }),
|
|
148
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500 opacity-70", children: opt.priceLabel })
|
|
149
|
+
] }),
|
|
150
|
+
displayValue: `${opt.credits.toLocaleString("pt-BR")} cr\xE9ditos de IA`
|
|
151
|
+
}));
|
|
152
|
+
}, []);
|
|
153
|
+
const onSubmit = useCallback(
|
|
154
|
+
async (data) => {
|
|
155
|
+
if (!subscriptionId) return;
|
|
156
|
+
const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === data.creditOption);
|
|
157
|
+
if (!option) return;
|
|
158
|
+
await updatePlanMutation.mutateAsync({
|
|
159
|
+
subscriptionId,
|
|
160
|
+
data: {
|
|
161
|
+
plan_extras: [
|
|
162
|
+
{
|
|
163
|
+
id_addon: ADDON_IDS.AI,
|
|
164
|
+
quantity: option.credits
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
toast.custom((t) => /* @__PURE__ */ jsx(
|
|
170
|
+
Toast,
|
|
171
|
+
{
|
|
172
|
+
variant: "success",
|
|
173
|
+
message: `Cr\xE9ditos de IA alterados para ${data.creditOption.toLocaleString("pt-BR")}`,
|
|
174
|
+
toastId: t
|
|
175
|
+
}
|
|
176
|
+
));
|
|
177
|
+
form.reset();
|
|
178
|
+
closeModal();
|
|
179
|
+
},
|
|
180
|
+
[subscriptionId, updatePlanMutation, form, closeModal]
|
|
181
|
+
);
|
|
182
|
+
const renderPriceDisplay = useCallback(() => {
|
|
183
|
+
if (isCalculatePending) {
|
|
184
|
+
return /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24" });
|
|
185
|
+
}
|
|
186
|
+
if (totalPrice !== null) {
|
|
187
|
+
return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: totalPrice === 0 ? "Incluso" : formatPrice(totalPrice) });
|
|
188
|
+
}
|
|
189
|
+
return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-400", children: "--" });
|
|
190
|
+
}, [isCalculatePending, totalPrice, formatPrice]);
|
|
191
|
+
return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
|
|
192
|
+
DialogContent,
|
|
193
|
+
{
|
|
194
|
+
showCloseButton: false,
|
|
195
|
+
className: "flex flex-col p-0! gap-0! 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-[433px]! lg:h-auto! lg:max-h-[90vh] 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%]! overflow-hidden lg:overflow-y-auto",
|
|
196
|
+
children: [
|
|
197
|
+
/* @__PURE__ */ jsxs(DialogHeader, { className: "px-4 py-3 border-b border-zinc-200 shrink-0 relative", children: [
|
|
198
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "Comprar cr\xE9ditos de IA" }),
|
|
199
|
+
/* @__PURE__ */ jsx(
|
|
200
|
+
"button",
|
|
201
|
+
{
|
|
202
|
+
type: "button",
|
|
203
|
+
onClick: handleClose,
|
|
204
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors",
|
|
205
|
+
children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-400" })
|
|
206
|
+
}
|
|
207
|
+
)
|
|
208
|
+
] }),
|
|
209
|
+
/* @__PURE__ */ jsxs(
|
|
210
|
+
"form",
|
|
211
|
+
{
|
|
212
|
+
onSubmit: form.handleSubmit(onSubmit),
|
|
213
|
+
className: "flex flex-col flex-1 lg:flex-none overflow-hidden",
|
|
214
|
+
children: [
|
|
215
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none overflow-y-auto", children: [
|
|
216
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
217
|
+
/* @__PURE__ */ jsx(
|
|
218
|
+
SelectField,
|
|
219
|
+
{
|
|
220
|
+
options: selectOptions,
|
|
221
|
+
value: creditOption,
|
|
222
|
+
onChange: handleCreditOptionChange,
|
|
223
|
+
className: "h-12!"
|
|
224
|
+
}
|
|
225
|
+
),
|
|
226
|
+
/* @__PURE__ */ jsx(
|
|
227
|
+
PaymentInfoCard,
|
|
228
|
+
{
|
|
229
|
+
selectedCardId,
|
|
230
|
+
onCardSelect: (cardId) => form.setValue("selectedCardId", cardId, { shouldValidate: true }),
|
|
231
|
+
onOpenAddCard: handleOpenAddCardModal
|
|
232
|
+
}
|
|
233
|
+
),
|
|
234
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4 bg-cyan-50 rounded-lg", children: [
|
|
235
|
+
/* @__PURE__ */ jsx(IconInfoCircle, { className: "size-4 text-zinc-950 shrink-0" }),
|
|
236
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: "As altera\xE7\xF5es entrar\xE3o em vigor a partir da sua pr\xF3xima fatura." })
|
|
237
|
+
] })
|
|
238
|
+
] }),
|
|
239
|
+
/* @__PURE__ */ jsx(Separator, { className: "bg-zinc-200 hidden lg:block" }),
|
|
240
|
+
/* @__PURE__ */ jsxs("div", { className: "hidden lg:flex items-center justify-between", children: [
|
|
241
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: "Valor total do plano" }),
|
|
242
|
+
renderPriceDisplay()
|
|
243
|
+
] }),
|
|
244
|
+
/* @__PURE__ */ jsxs(
|
|
245
|
+
Button,
|
|
246
|
+
{
|
|
247
|
+
type: "submit",
|
|
248
|
+
disabled: isConfirmDisabled,
|
|
249
|
+
className: "w-full hidden lg:inline-flex",
|
|
250
|
+
children: [
|
|
251
|
+
isSubmitting && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
|
|
252
|
+
"Confirmar e pagar"
|
|
253
|
+
]
|
|
254
|
+
}
|
|
255
|
+
)
|
|
256
|
+
] }),
|
|
257
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden", children: [
|
|
258
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
259
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: "Valor total do plano" }),
|
|
260
|
+
renderPriceDisplay()
|
|
261
|
+
] }),
|
|
262
|
+
/* @__PURE__ */ jsxs(Button, { type: "submit", disabled: isConfirmDisabled, className: "w-full", children: [
|
|
263
|
+
isSubmitting && /* @__PURE__ */ jsx(IconLoader2, { className: "size-4 animate-spin" }),
|
|
264
|
+
"Confirmar e pagar"
|
|
265
|
+
] })
|
|
266
|
+
] })
|
|
267
|
+
]
|
|
268
|
+
}
|
|
269
|
+
)
|
|
270
|
+
]
|
|
271
|
+
}
|
|
272
|
+
) });
|
|
273
|
+
}
|
|
274
|
+
export {
|
|
275
|
+
BuyCreditsModal as default
|
|
276
|
+
};
|
|
277
|
+
//# sourceMappingURL=BuyCreditsModal.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/BuyCreditsModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\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 { SelectField } from '../ui/form/SelectField';\nimport { Skeleton } from '../ui/feedback/Skeleton';\nimport { PaymentInfoCard } from '../ui/data-display/PaymentInfoCard';\nimport { ADDON_IDS } from '../../modules/subscriptions/constants/addons.constants';\nimport {\n AI_CREDIT_OPTIONS,\n AI_CREDIT_VALUES,\n} from '../../modules/subscriptions/constants/addons.constants';\nimport { useBuyCreditsModal } from '../../store/useBuyCreditsModal';\nimport { useModalManager } from '../../store/useModalManager';\nimport { useCards } from '../../modules/cards/hooks/cards.hook';\nimport { useActiveSubscription } from '../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { useCalculateSubscription } from '../../modules/subscriptions/hooks/calculate-subscription.hook';\nimport { useUpdateSubscriptionPlan } from '../../modules/subscriptions/hooks/update-subscription-plan.hook';\nimport { buildPlanExtras } from '../../modules/subscriptions/utils/build-plan-extras';\nimport { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';\nimport { IconInfoCircle, IconX, IconLoader2 } from '@tabler/icons-react';\nimport { useCallback, useEffect, useMemo } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport z from 'zod';\nimport { toast } from 'sonner';\n\nconst buyCreditSchema = z.object({\n creditOption: z.number().refine((val) => AI_CREDIT_VALUES.has(val), {\n message: 'Selecione uma opção de créditos',\n }),\n selectedCardId: z.string().min(1, 'Selecione um cartão'),\n});\n\ntype BuyCreditFormData = z.infer<typeof buyCreditSchema>;\n\nexport default function BuyCreditsModal() {\n const { open, closeModal } = useBuyCreditsModal();\n const { openModal } = useModalManager();\n const { data: cardsData } = useCards();\n const { data: subscriptionData } = useActiveSubscription();\n const subscription = subscriptionData?.data?.[0] ?? null;\n\n const {\n mutate: calculate,\n isPending: isCalculatePending,\n data: calculateData,\n } = useCalculateSubscription();\n const updatePlanMutation = useUpdateSubscriptionPlan();\n\n const aiItem = useMemo(\n () => subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AI),\n [subscription]\n );\n\n const currentCredits = aiItem?.quantity ?? 0;\n const subscriptionId = subscription?.id;\n const planId = subscription?.id_plan;\n\n const form = useForm<BuyCreditFormData>({\n resolver: zodResolver(buyCreditSchema),\n mode: 'onChange',\n defaultValues: {\n creditOption: currentCredits,\n selectedCardId: cardsData?.data?.[0]?.id.toString() ?? '',\n },\n });\n\n useEffect(() => {\n if (open) {\n form.reset({\n creditOption: currentCredits,\n selectedCardId:\n form.getValues('selectedCardId') || cardsData?.data?.[0]?.id.toString() || '',\n });\n\n calculate({\n id_product: 1,\n ...(planId != null && { id_plan: planId }),\n ...(subscriptionId != null && { id_subscription: subscriptionId }),\n plan_extras: buildPlanExtras(subscription?.items ?? [], [\n {\n id_addon: ADDON_IDS.AI,\n quantity: currentCredits,\n currency: 'BRL',\n },\n ]),\n });\n }\n }, [open, subscription, currentCredits, cardsData, form, calculate, planId, subscriptionId]);\n\n const creditOption = form.watch('creditOption');\n const selectedCardId = form.watch('selectedCardId');\n const { isDirty, isSubmitting, isValid } = form.formState;\n\n const subscriptionItems = useMemo(() => subscription?.items ?? [], [subscription]);\n\n const handleCreditOptionChange = useCallback(\n (value: string | number | boolean) => {\n const credits = Number(value);\n\n form.setValue('creditOption', credits, {\n shouldValidate: true,\n shouldDirty: true,\n });\n\n const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === credits);\n if (!option) return;\n\n calculate({\n id_product: 1,\n ...(planId != null && { id_plan: planId }),\n ...(subscriptionId != null && { id_subscription: subscriptionId }),\n plan_extras: buildPlanExtras(subscriptionItems, [\n {\n id_addon: ADDON_IDS.AI,\n quantity: option.credits,\n currency: 'BRL',\n },\n ]),\n });\n },\n [form, subscriptionId, planId, subscriptionItems, calculate]\n );\n\n const calculatedData = calculateData?.data ?? null;\n\n const totalPrice = useMemo(() => {\n if (!calculatedData) return null;\n return getPriceFromCalculatedData(calculatedData, subscription?.periodicity);\n }, [calculatedData, subscription]);\n\n const formatPrice = useCallback((price: number) => {\n return price.toLocaleString('pt-BR', {\n style: 'currency',\n currency: 'BRL',\n });\n }, []);\n\n const isConfirmDisabled = !isDirty || !isValid || isCalculatePending || isSubmitting;\n\n const handleClose = useCallback(() => {\n form.reset();\n closeModal();\n }, [form, closeModal]);\n\n const handleOpenAddCardModal = useCallback(() => {\n openModal('addCardModal', {\n returnToBuyCredits: true,\n buyCreditsState: {\n activeCardId: selectedCardId,\n selectedValue: creditOption,\n },\n });\n }, [openModal, selectedCardId, creditOption]);\n\n const selectOptions = useMemo(() => {\n return AI_CREDIT_OPTIONS.map((opt) => ({\n value: opt.credits,\n label: (\n <div className=\"flex items-center justify-between gap-2 w-full\">\n <span className=\"paragraph-small-medium text-zinc-950 flex-1\">\n {opt.credits.toLocaleString('pt-BR')} créditos de IA\n </span>\n <span className=\"paragraph-small-medium text-zinc-500 opacity-70\">{opt.priceLabel}</span>\n </div>\n ),\n displayValue: `${opt.credits.toLocaleString('pt-BR')} créditos de IA`,\n }));\n }, []);\n\n const onSubmit = useCallback(\n async (data: BuyCreditFormData) => {\n if (!subscriptionId) return;\n\n const option = AI_CREDIT_OPTIONS.find((opt) => opt.credits === data.creditOption);\n if (!option) return;\n\n await updatePlanMutation.mutateAsync({\n subscriptionId,\n data: {\n plan_extras: [\n {\n id_addon: ADDON_IDS.AI,\n quantity: option.credits,\n },\n ],\n },\n });\n\n toast.custom((t) => (\n <Toast\n variant=\"success\"\n message={`Créditos de IA alterados para ${data.creditOption.toLocaleString('pt-BR')}`}\n toastId={t}\n />\n ));\n form.reset();\n closeModal();\n },\n [subscriptionId, updatePlanMutation, form, closeModal]\n );\n\n const renderPriceDisplay = useCallback(() => {\n if (isCalculatePending) {\n return <Skeleton className=\"h-7 w-24\" />;\n }\n if (totalPrice !== null) {\n return (\n <span className=\"paragraph-xlarge-semibold text-zinc-950\">\n {totalPrice === 0 ? 'Incluso' : formatPrice(totalPrice)}\n </span>\n );\n }\n return <span className=\"paragraph-xlarge-semibold text-zinc-400\">--</span>;\n }, [isCalculatePending, totalPrice, formatPrice]);\n\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n className=\"flex flex-col p-0! gap-0! 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-[433px]! lg:h-auto! lg:max-h-[90vh] 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%]! overflow-hidden lg:overflow-y-auto\"\n >\n <DialogHeader className=\"px-4 py-3 border-b border-zinc-200 shrink-0 relative\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n Comprar créditos de IA\n </DialogTitle>\n <button\n type=\"button\"\n onClick={handleClose}\n className=\"absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors\"\n >\n <IconX size={18} className=\"text-zinc-400\" />\n </button>\n </DialogHeader>\n\n <form\n onSubmit={form.handleSubmit(onSubmit)}\n className=\"flex flex-col flex-1 lg:flex-none overflow-hidden\"\n >\n <div className=\"flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none overflow-y-auto\">\n <div className=\"flex flex-col gap-4\">\n <SelectField\n options={selectOptions}\n value={creditOption}\n onChange={handleCreditOptionChange}\n className=\"h-12!\"\n />\n\n <PaymentInfoCard\n selectedCardId={selectedCardId}\n onCardSelect={(cardId) =>\n form.setValue('selectedCardId', cardId, { shouldValidate: true })\n }\n onOpenAddCard={handleOpenAddCardModal}\n />\n\n <div className=\"flex items-center gap-3 p-4 bg-cyan-50 rounded-lg\">\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950\">\n As alterações entrarão em vigor a partir da sua próxima fatura.\n </span>\n </div>\n </div>\n\n <Separator className=\"bg-zinc-200 hidden lg:block\" />\n\n <div className=\"hidden lg:flex items-center justify-between\">\n <span className=\"paragraph-small-medium text-zinc-500\">Valor total do plano</span>\n {renderPriceDisplay()}\n </div>\n\n <Button\n type=\"submit\"\n disabled={isConfirmDisabled}\n className=\"w-full hidden lg:inline-flex\"\n >\n {isSubmitting && <IconLoader2 className=\"size-4 animate-spin\" />}\n Confirmar e pagar\n </Button>\n </div>\n\n <div className=\"flex flex-col gap-4 p-4 border-t border-zinc-200 shrink-0 lg:hidden\">\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-medium text-zinc-500\">Valor total do plano</span>\n {renderPriceDisplay()}\n </div>\n <Button type=\"submit\" disabled={isConfirmDisabled} className=\"w-full\">\n {isSubmitting && <IconLoader2 className=\"size-4 animate-spin\" />}\n Confirmar e pagar\n </Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|