@greatapps/common 1.1.671 → 1.1.673
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/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 +27 -24
- 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 +25 -22
- 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/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/messages/en-us.mjs +231 -0
- package/dist/i18n/messages/en-us.mjs.map +1 -1
- package/dist/i18n/messages/es-es.mjs +231 -0
- package/dist/i18n/messages/es-es.mjs.map +1 -1
- package/dist/i18n/messages/pt-br.mjs +239 -0
- package/dist/i18n/messages/pt-br.mjs.map +1 -1
- 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/package.json +1 -1
- 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 +29 -27
- package/src/components/modals/cards/CannotDeleteCardModal.tsx +9 -8
- package/src/components/modals/cards/CardFormFields.tsx +25 -22
- 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/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/messages/en-us.ts +234 -0
- package/src/i18n/messages/es-es.ts +234 -0
- package/src/i18n/messages/pt-br.ts +248 -0
- package/src/modules/cards/hooks/handle-delete-card.hook.ts +8 -3
|
@@ -1 +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 { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';\nimport { useIsDefaultWhitelabel, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { IconInfoCircle, IconX, IconLoader2, IconSparkles } from '@tabler/icons-react';\nimport { useCallback, useEffect, useMemo, useRef } 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 isDefaultWl = useIsDefaultWhitelabel();\n const { isExternalContracting, redirectToExternal } = useExternalContracting();\n const { data: cardsData } = useCards();\n const { data: subscriptionData } = useActiveSubscription();\n const subscription = subscriptionData?.data?.[0] ?? null;\n const defaultCardId =\n cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??\n cardsData?.data?.[0]?.id?.toString() ??\n '';\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: defaultCardId,\n },\n });\n\n const hasInitialized = useRef(false);\n\n useEffect(() => {\n if (!open) {\n hasInitialized.current = false;\n return;\n }\n\n if (hasInitialized.current || !subscription) return;\n hasInitialized.current = true;\n\n form.reset({\n creditOption: currentCredits,\n selectedCardId: defaultCardId,\n });\n\n calculate({\n id_product: 1,\n ...(planId != null && { id_plan: planId }),\n ...(subscriptionId != null && { id_subscription: subscriptionId }),\n plan_extras: [\n { id_addon: ADDON_IDS.AI, quantity: currentCredits },\n ],\n });\n }, [\n open,\n subscription,\n currentCredits,\n defaultCardId,\n form,\n calculate,\n planId,\n subscriptionId,\n ]);\n\n // Sync selectedCardId when cards load after modal opened\n useEffect(() => {\n if (open && defaultCardId && !form.getValues('selectedCardId')) {\n form.setValue('selectedCardId', defaultCardId, { shouldValidate: true });\n }\n }, [open, defaultCardId, form]);\n\n const creditOption = form.watch('creditOption');\n const selectedCardId = form.watch('selectedCardId');\n const { isDirty, isSubmitting, isValid } = form.formState;\n\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: [\n { id_addon: ADDON_IDS.AI, quantity: option.credits, currency: 'BRL' },\n ],\n });\n },\n [form, subscriptionId, planId, calculate]\n );\n\n const calculatedData = calculateData?.data ?? null;\n\n const isIncreasingCredits = creditOption > currentCredits;\n const hasChanged = creditOption !== currentCredits;\n\n const immediateChargeTotal = calculatedData?.target?.immediate_charge?.total ?? 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 }, [openModal]);\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 ? 'Padrão' : formatPrice(totalPrice)}\n </span>\n );\n }\n return <span className=\"paragraph-xlarge-semibold text-zinc-400\">--</span>;\n }, [isCalculatePending, totalPrice, formatPrice]);\n\n if (isExternalContracting) {\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconSparkles size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n Créditos de IA\n </DialogTitle>\n <span className=\"paragraph-small-regular text-zinc-600\">\n Para adquirir créditos de IA, acesse sua área de assinatura.\n </span>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={() => {\n closeModal();\n redirectToExternal('contracting');\n }}\n >\n Acessar área de assinatura\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n }\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 sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[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 {hasChanged && (\n <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950\">\n {isIncreasingCredits\n ? 'O pagamento será processado no momento da confirmação.'\n : 'As alterações entrarão em vigor a partir da sua próxima fatura.'}\n </span>\n </div>\n )}\n </div>\n\n <Separator className=\"bg-zinc-200 hidden lg:block\" />\n\n <div className=\"hidden lg:flex flex-col gap-2\">\n {immediateChargeTotal !== null && immediateChargeTotal > 0 && (\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-xsmall-medium text-zinc-500\">Cobrança imediata</span>\n {isCalculatePending ? (\n <Skeleton className=\"h-5 w-20\" />\n ) : (\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {formatPrice(immediateChargeTotal)}\n </span>\n )}\n </div>\n )}\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 </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 flex-col gap-2\">\n {immediateChargeTotal !== null && immediateChargeTotal > 0 && (\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-xsmall-medium text-zinc-500\">Cobrança imediata</span>\n {isCalculatePending ? (\n <Skeleton className=\"h-5 w-20\" />\n ) : (\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {formatPrice(immediateChargeTotal)}\n </span>\n )}\n </div>\n )}\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 </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":[]}
|
|
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 { getPriceFromCalculatedData } from '../../modules/subscriptions/utils/periodicity';\nimport { useIsDefaultWhitelabel, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { IconInfoCircle, IconX, IconLoader2, IconSparkles } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useCallback, useEffect, useMemo, useRef } 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 translate = useTranslations();\n const { open, closeModal } = useBuyCreditsModal();\n const { openModal } = useModalManager();\n const isDefaultWl = useIsDefaultWhitelabel();\n const { isExternalContracting, redirectToExternal } = useExternalContracting();\n const { data: cardsData } = useCards();\n const { data: subscriptionData } = useActiveSubscription();\n const subscription = subscriptionData?.data?.[0] ?? null;\n const defaultCardId =\n cardsData?.data?.find((card) => card.is_default)?.id?.toString() ??\n cardsData?.data?.[0]?.id?.toString() ??\n '';\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: defaultCardId,\n },\n });\n\n const hasInitialized = useRef(false);\n\n useEffect(() => {\n if (!open) {\n hasInitialized.current = false;\n return;\n }\n\n if (hasInitialized.current || !subscription) return;\n hasInitialized.current = true;\n\n form.reset({\n creditOption: currentCredits,\n selectedCardId: defaultCardId,\n });\n\n calculate({\n id_product: 1,\n ...(planId != null && { id_plan: planId }),\n ...(subscriptionId != null && { id_subscription: subscriptionId }),\n plan_extras: [\n { id_addon: ADDON_IDS.AI, quantity: currentCredits },\n ],\n });\n }, [\n open,\n subscription,\n currentCredits,\n defaultCardId,\n form,\n calculate,\n planId,\n subscriptionId,\n ]);\n\n // Sync selectedCardId when cards load after modal opened\n useEffect(() => {\n if (open && defaultCardId && !form.getValues('selectedCardId')) {\n form.setValue('selectedCardId', defaultCardId, { shouldValidate: true });\n }\n }, [open, defaultCardId, form]);\n\n const creditOption = form.watch('creditOption');\n const selectedCardId = form.watch('selectedCardId');\n const { isDirty, isSubmitting, isValid } = form.formState;\n\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: [\n { id_addon: ADDON_IDS.AI, quantity: option.credits, currency: 'BRL' },\n ],\n });\n },\n [form, subscriptionId, planId, calculate]\n );\n\n const calculatedData = calculateData?.data ?? null;\n\n const isIncreasingCredits = creditOption > currentCredits;\n const hasChanged = creditOption !== currentCredits;\n\n const immediateChargeTotal = calculatedData?.target?.immediate_charge?.total ?? 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 }, [openModal]);\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 {translate('common.credits.buy.creditsOptionLabel', { credits: opt.credits.toLocaleString('pt-BR') })}\n </span>\n <span className=\"paragraph-small-medium text-zinc-500 opacity-70\">{opt.priceLabel}</span>\n </div>\n ),\n displayValue: translate('common.credits.buy.creditsOptionDisplayValue', { credits: opt.credits.toLocaleString('pt-BR') }),\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={translate('common.credits.buy.creditsChangedToast', { credits: 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 ? translate('common.credits.buy.defaultPrice') : formatPrice(totalPrice)}\n </span>\n );\n }\n return <span className=\"paragraph-xlarge-semibold text-zinc-400\">--</span>;\n }, [isCalculatePending, totalPrice, formatPrice]);\n\n if (isExternalContracting) {\n return (\n <Dialog open={open} onOpenChange={handleClose}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconSparkles size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {translate('common.credits.buy.externalTitle')}\n </DialogTitle>\n <span className=\"paragraph-small-regular text-zinc-600\">\n {translate('common.credits.buy.externalDescription')}\n </span>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={() => {\n closeModal();\n redirectToExternal('contracting');\n }}\n >\n {translate('common.credits.buy.externalButton')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n }\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 sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[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 {translate('common.credits.buy.title')}\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 {hasChanged && (\n <div className={`flex items-center gap-3 p-4 rounded-lg ${isDefaultWl ? 'bg-cyan-50' : 'bg-zinc-50'}`}>\n <IconInfoCircle className=\"size-4 text-zinc-950 shrink-0\" />\n <span className=\"paragraph-small-regular text-zinc-950\">\n {isIncreasingCredits\n ? translate('common.credits.buy.paymentOnConfirm')\n : translate('common.credits.buy.nextInvoiceChanges')}\n </span>\n </div>\n )}\n </div>\n\n <Separator className=\"bg-zinc-200 hidden lg:block\" />\n\n <div className=\"hidden lg:flex flex-col gap-2\">\n {immediateChargeTotal !== null && immediateChargeTotal > 0 && (\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('common.credits.buy.immediateCharge')}</span>\n {isCalculatePending ? (\n <Skeleton className=\"h-5 w-20\" />\n ) : (\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {formatPrice(immediateChargeTotal)}\n </span>\n )}\n </div>\n )}\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-medium text-zinc-500\">{translate('common.credits.buy.totalPlanValue')}</span>\n {renderPriceDisplay()}\n </div>\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 {translate('common.credits.buy.confirmAndPay')}\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 flex-col gap-2\">\n {immediateChargeTotal !== null && immediateChargeTotal > 0 && (\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('common.credits.buy.immediateCharge')}</span>\n {isCalculatePending ? (\n <Skeleton className=\"h-5 w-20\" />\n ) : (\n <span className=\"paragraph-small-semibold text-zinc-950\">\n {formatPrice(immediateChargeTotal)}\n </span>\n )}\n </div>\n )}\n <div className=\"flex items-center justify-between\">\n <span className=\"paragraph-small-medium text-zinc-500\">{translate('common.credits.buy.totalPlanValue')}</span>\n {renderPriceDisplay()}\n </div>\n </div>\n <Button type=\"submit\" disabled={isConfirmDisabled} className=\"w-full\">\n {isSubmitting && <IconLoader2 className=\"size-4 animate-spin\" />}\n {translate('common.credits.buy.confirmAndPay')}\n </Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -10,8 +10,10 @@ import {
|
|
|
10
10
|
import { Button } from "../ui/buttons/Button";
|
|
11
11
|
import { Separator } from "../ui/data-display/Separator";
|
|
12
12
|
import { IconAlertTriangle } from "@tabler/icons-react";
|
|
13
|
+
import { useTranslations } from "next-intl";
|
|
13
14
|
import { useCreditsDisabledModal } from "../../store/useCreditsDisabledModal";
|
|
14
15
|
function CreditsDisabledModal() {
|
|
16
|
+
const translate = useTranslations();
|
|
15
17
|
const { open, closeModal } = useCreditsDisabledModal();
|
|
16
18
|
return /* @__PURE__ */ jsx(
|
|
17
19
|
Dialog,
|
|
@@ -29,10 +31,10 @@ function CreditsDisabledModal() {
|
|
|
29
31
|
/* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 text-left p-5", children: [
|
|
30
32
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg", children: /* @__PURE__ */ jsx(IconAlertTriangle, { size: 20, className: "text-gray-950" }) }),
|
|
31
33
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
32
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: "
|
|
34
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.credits.disabled.title") }),
|
|
33
35
|
/* @__PURE__ */ jsx(DialogDescription, { className: "paragraph-small-regular text-zinc-600", asChild: true, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
|
|
34
|
-
/* @__PURE__ */ jsx("p", { children: "
|
|
35
|
-
/* @__PURE__ */ jsx("p", { children: "
|
|
36
|
+
/* @__PURE__ */ jsx("p", { children: translate("common.credits.disabled.descriptionLine1") }),
|
|
37
|
+
/* @__PURE__ */ jsx("p", { children: translate("common.credits.disabled.descriptionLine2") })
|
|
36
38
|
] }) })
|
|
37
39
|
] })
|
|
38
40
|
] }),
|
|
@@ -43,7 +45,7 @@ function CreditsDisabledModal() {
|
|
|
43
45
|
variant: "secondary",
|
|
44
46
|
className: "h-10! transition-colors",
|
|
45
47
|
onClick: () => closeModal(),
|
|
46
|
-
children: "
|
|
48
|
+
children: translate("common.credits.disabled.understood")
|
|
47
49
|
}
|
|
48
50
|
) })
|
|
49
51
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modals/CreditsDisabledModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Button } from '../ui/buttons/Button';\nimport { Separator } from '../ui/data-display/Separator';\nimport { IconAlertTriangle } from '@tabler/icons-react';\nimport { useCreditsDisabledModal } from '../../store/useCreditsDisabledModal';\n\nexport default function CreditsDisabledModal() {\n const { open, closeModal } = useCreditsDisabledModal();\n\n return (\n <Dialog\n open={open}\n onOpenChange={(nextOpen) => {\n if (!nextOpen) closeModal();\n }}\n >\n <DialogContent\n onOpenAutoFocus={(e) => e.preventDefault()}\n className=\"flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!\"\n >\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg\">\n <IconAlertTriangle size={20} className=\"text-gray-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/CreditsDisabledModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { Button } from '../ui/buttons/Button';\nimport { Separator } from '../ui/data-display/Separator';\nimport { IconAlertTriangle } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useCreditsDisabledModal } from '../../store/useCreditsDisabledModal';\n\nexport default function CreditsDisabledModal() {\n const translate = useTranslations();\n const { open, closeModal } = useCreditsDisabledModal();\n\n return (\n <Dialog\n open={open}\n onOpenChange={(nextOpen) => {\n if (!nextOpen) closeModal();\n }}\n >\n <DialogContent\n onOpenAutoFocus={(e) => e.preventDefault()}\n className=\"flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!\"\n >\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-gray-100 rounded-lg\">\n <IconAlertTriangle size={20} className=\"text-gray-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {translate('common.credits.disabled.title')}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-600\" asChild>\n <div className=\"flex flex-col gap-3\">\n <p>{translate('common.credits.disabled.descriptionLine1')}</p>\n <p>{translate('common.credits.disabled.descriptionLine2')}</p>\n </div>\n </DialogDescription>\n </div>\n </DialogHeader>\n\n <Separator />\n\n <div className=\"flex items-center gap-2 p-5\">\n <Button\n variant=\"secondary\"\n className=\"h-10! transition-colors\"\n onClick={() => closeModal()}\n >\n {translate('common.credits.disabled.understood')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":";AAgCY,cAOE,YAPF;AA9BZ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,yBAAyB;AAClC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAEzB,SAAR,uBAAwC;AAC7C,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,MAAM,WAAW,IAAI,wBAAwB;AAErD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAc,CAAC,aAAa;AAC1B,YAAI,CAAC,SAAU,YAAW;AAAA,MAC5B;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB,CAAC,MAAM,EAAE,eAAe;AAAA,UACzC,WAAU;AAAA,UAEV;AAAA,iCAAC,gBAAa,WAAU,uBACtB;AAAA,kCAAC,SAAI,WAAU,qEACb,8BAAC,qBAAkB,MAAM,IAAI,WAAU,iBAAgB,GACzD;AAAA,cACA,qBAAC,SAAI,WAAU,uBACb;AAAA,oCAAC,eAAY,WAAU,2CACpB,oBAAU,+BAA+B,GAC5C;AAAA,gBACA,oBAAC,qBAAkB,WAAU,yCAAwC,SAAO,MAC1E,+BAAC,SAAI,WAAU,uBACb;AAAA,sCAAC,OAAG,oBAAU,0CAA0C,GAAE;AAAA,kBAC1D,oBAAC,OAAG,oBAAU,0CAA0C,GAAE;AAAA,mBAC5D,GACF;AAAA,iBACF;AAAA,eACF;AAAA,YAEA,oBAAC,aAAU;AAAA,YAEX,oBAAC,SAAI,WAAU,+BACb;AAAA,cAAC;AAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAAS,MAAM,WAAW;AAAA,gBAEzB,oBAAU,oCAAoC;AAAA;AAAA,YACjD,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { IconLock } from "@tabler/icons-react";
|
|
4
|
+
import { useTranslations } from "next-intl";
|
|
4
5
|
import { Button } from "../ui/buttons/Button";
|
|
5
6
|
import {
|
|
6
7
|
Dialog,
|
|
@@ -12,13 +13,14 @@ import {
|
|
|
12
13
|
import { useWhitelabelUrls, useExternalContracting } from "../../providers/whitelabel.provider";
|
|
13
14
|
import { useModalManager } from "../../store/useModalManager";
|
|
14
15
|
function PaidPlanRequiredModal() {
|
|
16
|
+
const translate = useTranslations();
|
|
15
17
|
const { activeModal, modalData, closeModal } = useModalManager();
|
|
16
18
|
const isOpen = activeModal === "paidPlanRequiredModal";
|
|
17
19
|
const data = modalData;
|
|
18
20
|
const { accountsUrl } = useWhitelabelUrls();
|
|
19
21
|
const { redirectToExternal } = useExternalContracting();
|
|
20
|
-
const title = data.title ?? "
|
|
21
|
-
const description = data.description ?? "
|
|
22
|
+
const title = data.title ?? translate("common.credits.paidPlanRequired.defaultTitle");
|
|
23
|
+
const description = data.description ?? translate("common.credits.paidPlanRequired.defaultDescription");
|
|
22
24
|
const handleKnowPlans = () => {
|
|
23
25
|
if (redirectToExternal("plans")) return;
|
|
24
26
|
window.location.href = `${accountsUrl}/subscriptions?tab=plans`;
|
|
@@ -36,7 +38,7 @@ function PaidPlanRequiredModal() {
|
|
|
36
38
|
{
|
|
37
39
|
className: "w-fit h-10!",
|
|
38
40
|
onClick: handleKnowPlans,
|
|
39
|
-
children: "
|
|
41
|
+
children: translate("common.credits.paidPlanRequired.knowPlans")
|
|
40
42
|
}
|
|
41
43
|
) })
|
|
42
44
|
] }) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/modals/PaidPlanRequiredModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconLock } from '@tabler/icons-react';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport type { ModalData } from '../../store/useModalManager';\n\nexport default function PaidPlanRequiredModal() {\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'paidPlanRequiredModal';\n const data = modalData as ModalData & { title?: string; description?: string };\n const { accountsUrl } = useWhitelabelUrls();\n const { redirectToExternal } = useExternalContracting();\n\n const title = (data.title as string) ??
|
|
1
|
+
{"version":3,"sources":["../../../src/components/modals/PaidPlanRequiredModal.tsx"],"sourcesContent":["\"use client\";\n\nimport { IconLock } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../ui/buttons/Button';\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n} from '../ui/overlay/Dialog';\nimport { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';\nimport { useModalManager } from '../../store/useModalManager';\nimport type { ModalData } from '../../store/useModalManager';\n\nexport default function PaidPlanRequiredModal() {\n const translate = useTranslations();\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'paidPlanRequiredModal';\n const data = modalData as ModalData & { title?: string; description?: string };\n const { accountsUrl } = useWhitelabelUrls();\n const { redirectToExternal } = useExternalContracting();\n\n const title = (data.title as string) ?? translate('common.credits.paidPlanRequired.defaultTitle');\n const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');\n\n const handleKnowPlans = () => {\n if (redirectToExternal('plans')) return;\n window.location.href = `${accountsUrl}/subscriptions?tab=plans`;\n };\n\n return (\n <Dialog open={isOpen} onOpenChange={() => closeModal()}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconLock size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {title}\n </DialogTitle>\n <DialogDescription className=\"paragraph-small-regular text-zinc-600\">\n {description}\n </DialogDescription>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={handleKnowPlans}\n >\n {translate('common.credits.paidPlanRequired.knowPlans')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":";AAqCwB,cAEJ,YAFI;AAnCxB,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,mBAAmB,8BAA8B;AAC1D,SAAS,uBAAuB;AAGjB,SAAR,wBAAyC;AAC5C,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,aAAa,WAAW,WAAW,IAAI,gBAAgB;AAC/D,QAAM,SAAS,gBAAgB;AAC/B,QAAM,OAAO;AACb,QAAM,EAAE,YAAY,IAAI,kBAAkB;AAC1C,QAAM,EAAE,mBAAmB,IAAI,uBAAuB;AAEtD,QAAM,QAAS,KAAK,SAAoB,UAAU,8CAA8C;AAChG,QAAM,cAAe,KAAK,eAA0B,UAAU,oDAAoD;AAElH,QAAM,kBAAkB,MAAM;AAC1B,QAAI,mBAAmB,OAAO,EAAG;AACjC,WAAO,SAAS,OAAO,GAAG,WAAW;AAAA,EACzC;AAEA,SACI,oBAAC,UAAO,MAAM,QAAQ,cAAc,MAAM,WAAW,GACjD,+BAAC,iBAAc,WAAU,4DACrB;AAAA,yBAAC,gBAAa,WAAU,uBACpB;AAAA,0BAAC,SAAI,WAAU,oEACX,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAClD;AAAA,MACA,qBAAC,SAAI,WAAU,uBACX;AAAA,4BAAC,eAAY,WAAU,2CAClB,iBACL;AAAA,QACA,oBAAC,qBAAkB,WAAU,yCACxB,uBACL;AAAA,SACJ;AAAA,OACJ;AAAA,IACA,oBAAC,SAAI,WAAU,wDACX;AAAA,MAAC;AAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAS;AAAA,QAER,oBAAU,2CAA2C;AAAA;AAAA,IAC1D,GACJ;AAAA,KACJ,GACJ;AAER;","names":[]}
|
|
@@ -16,17 +16,19 @@ import { useForm } from "react-hook-form";
|
|
|
16
16
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
17
17
|
import { CardNumberElement, useElements, useStripe } from "@stripe/react-stripe-js";
|
|
18
18
|
import { toast } from "sonner";
|
|
19
|
+
import { useTranslations } from "next-intl";
|
|
19
20
|
const INITIAL_STRIPE_STATUS = {
|
|
20
21
|
cardNumber: false,
|
|
21
22
|
cardExpiry: false,
|
|
22
23
|
cardCvc: false
|
|
23
24
|
};
|
|
24
|
-
const STEPS = [
|
|
25
|
-
{ number: 1, label: "Cobran\xE7a" },
|
|
26
|
-
{ number: 2, label: "Cart\xE3o" }
|
|
27
|
-
];
|
|
28
25
|
function CardStepper({ currentStep }) {
|
|
29
|
-
|
|
26
|
+
const translate = useTranslations();
|
|
27
|
+
const steps = [
|
|
28
|
+
{ number: 1, label: translate("common.cards.add.stepBilling") },
|
|
29
|
+
{ number: 2, label: translate("common.cards.add.stepCard") }
|
|
30
|
+
];
|
|
31
|
+
return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 border-b border-zinc-200 lg:border-b-0", children: steps.map((step, idx) => {
|
|
30
32
|
const isCompleted = currentStep > step.number;
|
|
31
33
|
const isCurrent = currentStep === step.number;
|
|
32
34
|
const isPending = !isCompleted && !isCurrent;
|
|
@@ -54,11 +56,12 @@ function CardStepper({ currentStep }) {
|
|
|
54
56
|
children: step.label
|
|
55
57
|
}
|
|
56
58
|
),
|
|
57
|
-
idx <
|
|
59
|
+
idx < steps.length - 1 && /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-zinc-300 ml-1" })
|
|
58
60
|
] }, step.number);
|
|
59
61
|
}) });
|
|
60
62
|
}
|
|
61
63
|
function AddCardModal() {
|
|
64
|
+
const translate = useTranslations();
|
|
62
65
|
const { activeModal, modalData, closeModal } = useModalManager();
|
|
63
66
|
const isOpen = activeModal === "addCardModal";
|
|
64
67
|
const { isExternalContracting, redirectToExternal } = useExternalContracting();
|
|
@@ -116,9 +119,9 @@ function AddCardModal() {
|
|
|
116
119
|
}, []);
|
|
117
120
|
async function handleSubmit(data) {
|
|
118
121
|
const newStripeErrors = {};
|
|
119
|
-
if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = "
|
|
120
|
-
if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = "
|
|
121
|
-
if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = "
|
|
122
|
+
if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = translate("common.cards.form.cardNumberRequired");
|
|
123
|
+
if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = translate("common.cards.form.cardExpiryRequired");
|
|
124
|
+
if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = translate("common.cards.form.cardCvcRequired");
|
|
122
125
|
setStripeErrors(newStripeErrors);
|
|
123
126
|
const stripeValid = stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;
|
|
124
127
|
if (!stripeValid) return;
|
|
@@ -135,7 +138,7 @@ function AddCardModal() {
|
|
|
135
138
|
Toast,
|
|
136
139
|
{
|
|
137
140
|
variant: "error",
|
|
138
|
-
message: "
|
|
141
|
+
message: translate("common.cards.add.errorInitAuth"),
|
|
139
142
|
toastId: t
|
|
140
143
|
}
|
|
141
144
|
),
|
|
@@ -155,7 +158,7 @@ function AddCardModal() {
|
|
|
155
158
|
Toast,
|
|
156
159
|
{
|
|
157
160
|
variant: "error",
|
|
158
|
-
message: error.message || "
|
|
161
|
+
message: error.message || translate("common.cards.add.errorAuth"),
|
|
159
162
|
toastId: t
|
|
160
163
|
}
|
|
161
164
|
),
|
|
@@ -169,7 +172,7 @@ function AddCardModal() {
|
|
|
169
172
|
Toast,
|
|
170
173
|
{
|
|
171
174
|
variant: "error",
|
|
172
|
-
message:
|
|
175
|
+
message: translate("common.cards.add.errorAuthStatus", { status: setupIntent?.status ?? translate("common.cards.add.statusUnknown") }),
|
|
173
176
|
toastId: t
|
|
174
177
|
}
|
|
175
178
|
),
|
|
@@ -201,7 +204,7 @@ function AddCardModal() {
|
|
|
201
204
|
onCardAdded?.(cardResult.data.id.toString());
|
|
202
205
|
}
|
|
203
206
|
toast.custom(
|
|
204
|
-
(t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: "
|
|
207
|
+
(t) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translate("common.cards.add.successToast"), toastId: t }),
|
|
205
208
|
{ duration: 5e3 }
|
|
206
209
|
);
|
|
207
210
|
handleClose();
|
|
@@ -211,7 +214,7 @@ function AddCardModal() {
|
|
|
211
214
|
Toast,
|
|
212
215
|
{
|
|
213
216
|
variant: "error",
|
|
214
|
-
message: "
|
|
217
|
+
message: translate("common.cards.add.errorSave"),
|
|
215
218
|
toastId: t
|
|
216
219
|
}
|
|
217
220
|
),
|
|
@@ -231,8 +234,8 @@ function AddCardModal() {
|
|
|
231
234
|
/* @__PURE__ */ jsxs(DialogHeader, { className: "gap-3 text-left p-5", children: [
|
|
232
235
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg", children: /* @__PURE__ */ jsx(IconCreditCard, { size: 24, className: "text-zinc-950" }) }),
|
|
233
236
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
234
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: "
|
|
235
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: "
|
|
237
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.cards.add.externalTitle") }),
|
|
238
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: translate("common.cards.add.externalDescription") })
|
|
236
239
|
] })
|
|
237
240
|
] }),
|
|
238
241
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 p-5 border-t border-zinc-200", children: /* @__PURE__ */ jsx(
|
|
@@ -243,7 +246,7 @@ function AddCardModal() {
|
|
|
243
246
|
handleClose();
|
|
244
247
|
redirectToExternal("contracting");
|
|
245
248
|
},
|
|
246
|
-
children: "
|
|
249
|
+
children: translate("common.cards.add.externalButton")
|
|
247
250
|
}
|
|
248
251
|
) })
|
|
249
252
|
] }) });
|
|
@@ -255,7 +258,7 @@ function AddCardModal() {
|
|
|
255
258
|
className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[502px] 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-y-auto",
|
|
256
259
|
children: [
|
|
257
260
|
/* @__PURE__ */ jsx(DialogHeader, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0", children: [
|
|
258
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: "
|
|
261
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: translate("common.cards.add.title") }),
|
|
259
262
|
/* @__PURE__ */ jsx(
|
|
260
263
|
Button,
|
|
261
264
|
{
|
|
@@ -275,11 +278,11 @@ function AddCardModal() {
|
|
|
275
278
|
className: "flex flex-col flex-1 lg:flex-none",
|
|
276
279
|
children: [
|
|
277
280
|
/* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? "hidden" : ""}`, children: [
|
|
278
|
-
/* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: "
|
|
281
|
+
/* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: translate("common.cards.add.billingHeading") }),
|
|
279
282
|
/* @__PURE__ */ jsx(BillingFormFields, { form })
|
|
280
283
|
] }),
|
|
281
284
|
/* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? "hidden" : ""}`, children: [
|
|
282
|
-
/* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: "
|
|
285
|
+
/* @__PURE__ */ jsx("h2", { className: "font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950", children: translate("common.cards.add.cardHeading") }),
|
|
283
286
|
/* @__PURE__ */ jsx(
|
|
284
287
|
CardFormFields,
|
|
285
288
|
{
|
|
@@ -290,7 +293,7 @@ function AddCardModal() {
|
|
|
290
293
|
)
|
|
291
294
|
] }),
|
|
292
295
|
/* @__PURE__ */ jsx("div", { className: "flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0", children: currentStep === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
293
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleClose, className: "h-10!", children: "
|
|
296
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleClose, className: "h-10!", children: translate("common.actions.cancel") }),
|
|
294
297
|
/* @__PURE__ */ jsx(
|
|
295
298
|
Button,
|
|
296
299
|
{
|
|
@@ -298,11 +301,11 @@ function AddCardModal() {
|
|
|
298
301
|
className: "h-10!",
|
|
299
302
|
onClick: handleContinue,
|
|
300
303
|
disabled: !isBillingValid,
|
|
301
|
-
children: "
|
|
304
|
+
children: translate("common.actions.continue")
|
|
302
305
|
}
|
|
303
306
|
)
|
|
304
307
|
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
305
|
-
/* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleBack, className: "h-10!", children: "
|
|
308
|
+
/* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleBack, className: "h-10!", children: translate("common.actions.back") }),
|
|
306
309
|
/* @__PURE__ */ jsx(
|
|
307
310
|
Button,
|
|
308
311
|
{
|
|
@@ -310,7 +313,7 @@ function AddCardModal() {
|
|
|
310
313
|
className: "h-10!",
|
|
311
314
|
disabled: isSubmitting || isAuthenticating || !isCardValid,
|
|
312
315
|
loading: isAuthenticating || isSubmitting,
|
|
313
|
-
children: isAuthenticating ? "
|
|
316
|
+
children: isAuthenticating ? translate("common.cards.add.authenticating") : isSubmitting ? translate("common.cards.add.submitting") : translate("common.cards.add.submit")
|
|
314
317
|
}
|
|
315
318
|
)
|
|
316
319
|
] }) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { useExternalContracting } from '../../../providers/whitelabel.provider';\nimport { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconX, IconCreditCard, IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport { cn } from '../../../infra/utils/clsx';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\n\nconst INITIAL_STRIPE_STATUS: StripeElementsStatus = {\n cardNumber: false,\n cardExpiry: false,\n cardCvc: false,\n};\n\nconst STEPS = [\n { number: 1, label: 'Cobrança' },\n { number: 2, label: 'Cartão' },\n] as const;\n\nfunction CardStepper({ currentStep }: { readonly currentStep: number }) {\n return (\n <div className=\"flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 border-b border-zinc-200 lg:border-b-0\">\n {STEPS.map((step, idx) => {\n const isCompleted = currentStep > step.number;\n const isCurrent = currentStep === step.number;\n const isPending = !isCompleted && !isCurrent;\n return (\n <div key={step.number} className=\"flex items-center gap-2\">\n <div\n className={cn(\n 'flex items-center justify-center size-6 rounded-full paragraph-xsmall-semibold',\n isCompleted && 'bg-green-50 text-green-600 border border-green-200',\n isCurrent && 'bg-primary text-zinc-950',\n isPending && 'border border-zinc-200 text-zinc-400',\n )}\n >\n {isCompleted ? (\n <IconCheck size={14} stroke={3} />\n ) : (\n step.number\n )}\n </div>\n <span\n className={cn(\n 'paragraph-xsmall-semibold',\n (isCompleted || isCurrent) && 'text-zinc-950',\n isPending && 'text-zinc-400',\n )}\n >\n {step.label}\n </span>\n {idx < STEPS.length - 1 && (\n <IconChevronRight size={16} className=\"text-zinc-300 ml-1\" />\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default function AddCardModal() {\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'addCardModal';\n const { isExternalContracting, redirectToExternal } = useExternalContracting();\n const [currentStep, setCurrentStep] = useState(1);\n const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);\n const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});\n const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n const createSetupIntentMutation = useCreateSetupIntent();\n const createCardMutation = useCreateCard();\n const updateAccountMutation = useUpdateAccount();\n const elements = useElements();\n const stripe = useStripe();\n\n const form = useForm<CardFormData>({\n resolver: zodResolver(cardFormSchema),\n mode: 'onSubmit',\n reValidateMode: 'onChange',\n defaultValues: {\n country: 'BR',\n personType: 'pf',\n },\n });\n\n const handleClose = useCallback(() => {\n form.reset();\n setCurrentStep(1);\n setStripeStatus(INITIAL_STRIPE_STATUS);\n setStripeErrors({});\n setIsAuthenticating(false);\n closeModal();\n }, [form, closeModal]);\n\n const handleStripeChange = useCallback(\n (field: keyof StripeElementsStatus, complete: boolean) => {\n setStripeStatus((prev) => ({ ...prev, [field]: complete }));\n if (complete) {\n setStripeErrors((prev) => ({ ...prev, [field]: undefined }));\n }\n },\n []\n );\n\n const handleContinue = useCallback(async () => {\n const isValid = await form.trigger([\n 'fullName',\n 'cep',\n 'street',\n 'streetNumber',\n 'neighborhood',\n 'city',\n 'state',\n ]);\n if (!isValid) return;\n setCurrentStep(2);\n }, [form]);\n\n const handleBack = useCallback(() => {\n setCurrentStep(1);\n }, []);\n\n async function handleSubmit(data: CardFormData) {\n const newStripeErrors: Record<string, string | undefined> = {};\n if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = 'Número do cartão é obrigatório';\n if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = 'Data de validade é obrigatória';\n if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = 'Código de segurança é obrigatório';\n setStripeErrors(newStripeErrors);\n\n const stripeValid =\n stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n if (!stripeValid) return;\n if (!stripe || !elements) return;\n\n const cardElement = elements.getElement(CardNumberElement);\n if (!cardElement) return;\n\n setIsAuthenticating(true);\n try {\n const intentResult = await createSetupIntentMutation.mutateAsync();\n const intent = intentResult?.data;\n if (!intent?.client_secret || !intent?.setup_intent_id) {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message=\"Não foi possível iniciar a autenticação do cartão, tente novamente.\"\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {\n payment_method: {\n card: cardElement,\n billing_details: { name: data.name },\n },\n });\n\n if (error) {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={error.message || 'Falha na autenticação do cartão.'}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n if (setupIntent?.status !== 'succeeded') {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={`Autenticação não concluída (status: ${setupIntent?.status ?? 'desconhecido'}).`}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n const [cardResult] = await Promise.all([\n createCardMutation.mutateAsync({\n setup_intent_id: intent.setup_intent_id,\n name: data.name,\n set_default: true,\n }),\n updateAccountMutation.mutateAsync({\n financial_document_type: data.personType === 'pf' ? 1 : 2,\n financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,\n financial_name: data.fullName,\n zipcode: data.cep,\n address: data.street,\n address_number: data.streetNumber,\n address_complement: data.complement || '',\n neighborhood: data.neighborhood,\n city: data.city,\n state: data.state,\n country: data.country,\n }),\n ]);\n\n if (cardResult.success && cardResult.data?.id != null) {\n onCardAdded?.(cardResult.data.id.toString());\n }\n\n toast.custom(\n (t) => <Toast variant=\"success\" message=\"Cartão adicionado com sucesso.\" toastId={t} />,\n { duration: 5000 }\n );\n handleClose();\n } catch {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message=\"Não foi possível salvar o seu novo cartão, tente novamente.\"\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n } finally {\n setIsAuthenticating(false);\n }\n }\n\n const isSubmitting =\n createCardMutation.isPending ||\n updateAccountMutation.isPending ||\n form.formState.isSubmitting;\n\n const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);\n const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;\n const isBillingValid =\n !!fullName &&\n !!cep && cep.length >= 9 &&\n !!street &&\n !!streetNumber &&\n !!neighborhood &&\n !!city &&\n !!state;\n const isCardValid =\n !!name &&\n !!country &&\n !!personType &&\n (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&\n stripeStatus.cardNumber &&\n stripeStatus.cardExpiry &&\n stripeStatus.cardCvc;\n\n if (isExternalContracting) {\n return (\n <Dialog open={isOpen} onOpenChange={handleClose}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconCreditCard size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n Gerenciamento de cartões indisponível\n </DialogTitle>\n <span className=\"paragraph-small-regular text-zinc-600\">\n Acesse sua área de assinatura para gerenciar formas de pagamento.\n </span>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={() => {\n handleClose();\n redirectToExternal('contracting');\n }}\n >\n Acessar área de assinatura\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n }\n\n return (\n <Dialog open={isOpen} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[502px] 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-y-auto\"\n >\n <DialogHeader className=\"p-0\">\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n Adicionar cartão\n </DialogTitle>\n <Button\n type=\"button\"\n variant=\"ghost\"\n className=\"size-8! p-0 absolute right-4\"\n onClick={handleClose}\n >\n <IconX size={18} />\n </Button>\n </div>\n </DialogHeader>\n\n <CardStepper currentStep={currentStep} />\n\n <form\n onSubmit={form.handleSubmit(handleSubmit)}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>\n <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n Adicione suas informações de cobrança\n </h2>\n <BillingFormFields form={form} />\n </div>\n <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>\n <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n Adicione informações do seu cartão\n </h2>\n <CardFormFields\n form={form}\n onStripeChange={handleStripeChange}\n stripeErrors={stripeErrors}\n />\n </div>\n\n <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n {currentStep === 1 ? (\n <>\n <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n Cancelar\n </Button>\n <Button\n type=\"button\"\n className=\"h-10!\"\n onClick={handleContinue}\n disabled={!isBillingValid}\n >\n Continuar\n </Button>\n </>\n ) : (\n <>\n <Button variant=\"secondary\" type=\"button\" onClick={handleBack} className=\"h-10!\">\n Voltar\n </Button>\n <Button\n type=\"submit\"\n className=\"h-10!\"\n disabled={isSubmitting || isAuthenticating || !isCardValid}\n loading={isAuthenticating || isSubmitting}\n >\n {isAuthenticating\n ? 'Autenticando...'\n : isSubmitting\n ? 'Adicionando cartão...'\n : 'Adicionar cartão'}\n </Button>\n </>\n )}\n </div>\n </form>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/modals/cards/AddCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCreateCard } from '../../../modules/cards/hooks/create-card.hook';\nimport { useCreateSetupIntent } from '../../../modules/cards/hooks/create-setup-intent.hook';\nimport { useUpdateAccount } from '../../../modules/accounts/hooks/useAccountManagement';\nimport { useExternalContracting } from '../../../providers/whitelabel.provider';\nimport { CardFormFields, BillingFormFields, cardFormSchema } from './CardFormFields';\nimport type { CardFormData, StripeElementsStatus } from './CardFormFields';\nimport { IconX, IconCreditCard, IconCheck, IconChevronRight } from '@tabler/icons-react';\nimport { cn } from '../../../infra/utils/clsx';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { CardNumberElement, useElements, useStripe } from '@stripe/react-stripe-js';\nimport { toast } from 'sonner';\nimport { useTranslations } from 'next-intl';\n\nconst INITIAL_STRIPE_STATUS: StripeElementsStatus = {\n cardNumber: false,\n cardExpiry: false,\n cardCvc: false,\n};\n\nfunction CardStepper({ currentStep }: { readonly currentStep: number }) {\n const translate = useTranslations();\n const steps = [\n { number: 1, label: translate('common.cards.add.stepBilling') },\n { number: 2, label: translate('common.cards.add.stepCard') },\n ];\n return (\n <div className=\"flex items-center justify-start gap-2 px-4 py-3 bg-zinc-50 border-b border-zinc-200 lg:border-b-0\">\n {steps.map((step, idx) => {\n const isCompleted = currentStep > step.number;\n const isCurrent = currentStep === step.number;\n const isPending = !isCompleted && !isCurrent;\n return (\n <div key={step.number} className=\"flex items-center gap-2\">\n <div\n className={cn(\n 'flex items-center justify-center size-6 rounded-full paragraph-xsmall-semibold',\n isCompleted && 'bg-green-50 text-green-600 border border-green-200',\n isCurrent && 'bg-primary text-zinc-950',\n isPending && 'border border-zinc-200 text-zinc-400',\n )}\n >\n {isCompleted ? (\n <IconCheck size={14} stroke={3} />\n ) : (\n step.number\n )}\n </div>\n <span\n className={cn(\n 'paragraph-xsmall-semibold',\n (isCompleted || isCurrent) && 'text-zinc-950',\n isPending && 'text-zinc-400',\n )}\n >\n {step.label}\n </span>\n {idx < steps.length - 1 && (\n <IconChevronRight size={16} className=\"text-zinc-300 ml-1\" />\n )}\n </div>\n );\n })}\n </div>\n );\n}\n\nexport default function AddCardModal() {\n const translate = useTranslations();\n const { activeModal, modalData, closeModal } = useModalManager();\n const isOpen = activeModal === 'addCardModal';\n const { isExternalContracting, redirectToExternal } = useExternalContracting();\n const [currentStep, setCurrentStep] = useState(1);\n const [stripeStatus, setStripeStatus] = useState<StripeElementsStatus>(INITIAL_STRIPE_STATUS);\n const [stripeErrors, setStripeErrors] = useState<Record<string, string | undefined>>({});\n const [isAuthenticating, setIsAuthenticating] = useState(false);\n\n const onCardAdded = modalData.onCardAdded as ((cardId: string) => void) | undefined;\n\n const createSetupIntentMutation = useCreateSetupIntent();\n const createCardMutation = useCreateCard();\n const updateAccountMutation = useUpdateAccount();\n const elements = useElements();\n const stripe = useStripe();\n\n const form = useForm<CardFormData>({\n resolver: zodResolver(cardFormSchema),\n mode: 'onSubmit',\n reValidateMode: 'onChange',\n defaultValues: {\n country: 'BR',\n personType: 'pf',\n },\n });\n\n const handleClose = useCallback(() => {\n form.reset();\n setCurrentStep(1);\n setStripeStatus(INITIAL_STRIPE_STATUS);\n setStripeErrors({});\n setIsAuthenticating(false);\n closeModal();\n }, [form, closeModal]);\n\n const handleStripeChange = useCallback(\n (field: keyof StripeElementsStatus, complete: boolean) => {\n setStripeStatus((prev) => ({ ...prev, [field]: complete }));\n if (complete) {\n setStripeErrors((prev) => ({ ...prev, [field]: undefined }));\n }\n },\n []\n );\n\n const handleContinue = useCallback(async () => {\n const isValid = await form.trigger([\n 'fullName',\n 'cep',\n 'street',\n 'streetNumber',\n 'neighborhood',\n 'city',\n 'state',\n ]);\n if (!isValid) return;\n setCurrentStep(2);\n }, [form]);\n\n const handleBack = useCallback(() => {\n setCurrentStep(1);\n }, []);\n\n async function handleSubmit(data: CardFormData) {\n const newStripeErrors: Record<string, string | undefined> = {};\n if (!stripeStatus.cardNumber) newStripeErrors.cardNumber = translate('common.cards.form.cardNumberRequired');\n if (!stripeStatus.cardExpiry) newStripeErrors.cardExpiry = translate('common.cards.form.cardExpiryRequired');\n if (!stripeStatus.cardCvc) newStripeErrors.cardCvc = translate('common.cards.form.cardCvcRequired');\n setStripeErrors(newStripeErrors);\n\n const stripeValid =\n stripeStatus.cardNumber && stripeStatus.cardExpiry && stripeStatus.cardCvc;\n if (!stripeValid) return;\n if (!stripe || !elements) return;\n\n const cardElement = elements.getElement(CardNumberElement);\n if (!cardElement) return;\n\n setIsAuthenticating(true);\n try {\n const intentResult = await createSetupIntentMutation.mutateAsync();\n const intent = intentResult?.data;\n if (!intent?.client_secret || !intent?.setup_intent_id) {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={translate('common.cards.add.errorInitAuth')}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n const { setupIntent, error } = await stripe.confirmCardSetup(intent.client_secret, {\n payment_method: {\n card: cardElement,\n billing_details: { name: data.name },\n },\n });\n\n if (error) {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={error.message || translate('common.cards.add.errorAuth')}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n if (setupIntent?.status !== 'succeeded') {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={translate('common.cards.add.errorAuthStatus', { status: setupIntent?.status ?? translate('common.cards.add.statusUnknown') })}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n return;\n }\n\n const [cardResult] = await Promise.all([\n createCardMutation.mutateAsync({\n setup_intent_id: intent.setup_intent_id,\n name: data.name,\n set_default: true,\n }),\n updateAccountMutation.mutateAsync({\n financial_document_type: data.personType === 'pf' ? 1 : 2,\n financial_document: data.personType === 'pf' ? data.cpf : data.cnpj,\n financial_name: data.fullName,\n zipcode: data.cep,\n address: data.street,\n address_number: data.streetNumber,\n address_complement: data.complement || '',\n neighborhood: data.neighborhood,\n city: data.city,\n state: data.state,\n country: data.country,\n }),\n ]);\n\n if (cardResult.success && cardResult.data?.id != null) {\n onCardAdded?.(cardResult.data.id.toString());\n }\n\n toast.custom(\n (t) => <Toast variant=\"success\" message={translate('common.cards.add.successToast')} toastId={t} />,\n { duration: 5000 }\n );\n handleClose();\n } catch {\n toast.custom(\n (t) => (\n <Toast\n variant=\"error\"\n message={translate('common.cards.add.errorSave')}\n toastId={t}\n />\n ),\n { duration: 5000 }\n );\n } finally {\n setIsAuthenticating(false);\n }\n }\n\n const isSubmitting =\n createCardMutation.isPending ||\n updateAccountMutation.isPending ||\n form.formState.isSubmitting;\n\n const watchedValues = form.watch(['name', 'country', 'personType', 'cpf', 'cnpj', 'fullName', 'cep', 'street', 'streetNumber', 'neighborhood', 'city', 'state']);\n const [name, country, personType, cpf, cnpj, fullName, cep, street, streetNumber, neighborhood, city, state] = watchedValues;\n const isBillingValid =\n !!fullName &&\n !!cep && cep.length >= 9 &&\n !!street &&\n !!streetNumber &&\n !!neighborhood &&\n !!city &&\n !!state;\n const isCardValid =\n !!name &&\n !!country &&\n !!personType &&\n (personType === 'pf' ? !!cpf && cpf.length >= 14 : !!cnpj && cnpj.length >= 18) &&\n stripeStatus.cardNumber &&\n stripeStatus.cardExpiry &&\n stripeStatus.cardCvc;\n\n if (isExternalContracting) {\n return (\n <Dialog open={isOpen} onOpenChange={handleClose}>\n <DialogContent className=\"flex flex-col p-0 gap-0 w-full md:w-[410px] lg:w-[410px]\">\n <DialogHeader className=\"gap-3 text-left p-5\">\n <div className=\"flex items-center justify-center w-10 h-10 bg-zinc-50 rounded-lg\">\n <IconCreditCard size={24} className=\"text-zinc-950\" />\n </div>\n <div className=\"flex flex-col gap-2\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n {translate('common.cards.add.externalTitle')}\n </DialogTitle>\n <span className=\"paragraph-small-regular text-zinc-600\">\n {translate('common.cards.add.externalDescription')}\n </span>\n </div>\n </DialogHeader>\n <div className=\"flex items-center gap-2 p-5 border-t border-zinc-200\">\n <Button\n className=\"w-fit h-10!\"\n onClick={() => {\n handleClose();\n redirectToExternal('contracting');\n }}\n >\n {translate('common.cards.add.externalButton')}\n </Button>\n </div>\n </DialogContent>\n </Dialog>\n );\n }\n\n return (\n <Dialog open={isOpen} onOpenChange={handleClose}>\n <DialogContent\n showCloseButton={false}\n className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[502px] 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-y-auto\"\n >\n <DialogHeader className=\"p-0\">\n <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n {translate('common.cards.add.title')}\n </DialogTitle>\n <Button\n type=\"button\"\n variant=\"ghost\"\n className=\"size-8! p-0 absolute right-4\"\n onClick={handleClose}\n >\n <IconX size={18} />\n </Button>\n </div>\n </DialogHeader>\n\n <CardStepper currentStep={currentStep} />\n\n <form\n onSubmit={form.handleSubmit(handleSubmit)}\n className=\"flex flex-col flex-1 lg:flex-none\"\n >\n <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 1 ? 'hidden' : ''}`}>\n <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n {translate('common.cards.add.billingHeading')}\n </h2>\n <BillingFormFields form={form} />\n </div>\n <div className={`flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none ${currentStep !== 2 ? 'hidden' : ''}`}>\n <h2 className=\"font-[family-name:var(--font-outfit)] text-[18px] leading-tight font-semibold text-zinc-950\">\n {translate('common.cards.add.cardHeading')}\n </h2>\n <CardFormFields\n form={form}\n onStripeChange={handleStripeChange}\n stripeErrors={stripeErrors}\n />\n </div>\n\n <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 gap-2 mt-auto lg:mt-0\">\n {currentStep === 1 ? (\n <>\n <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n {translate('common.actions.cancel')}\n </Button>\n <Button\n type=\"button\"\n className=\"h-10!\"\n onClick={handleContinue}\n disabled={!isBillingValid}\n >\n {translate('common.actions.continue')}\n </Button>\n </>\n ) : (\n <>\n <Button variant=\"secondary\" type=\"button\" onClick={handleBack} className=\"h-10!\">\n {translate('common.actions.back')}\n </Button>\n <Button\n type=\"submit\"\n className=\"h-10!\"\n disabled={isSubmitting || isAuthenticating || !isCardValid}\n loading={isAuthenticating || isSubmitting}\n >\n {isAuthenticating\n ? translate('common.cards.add.authenticating')\n : isSubmitting\n ? translate('common.cards.add.submitting')\n : translate('common.cards.add.submit')}\n </Button>\n </>\n )}\n </div>\n </form>\n </DialogContent>\n </Dialog>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -11,7 +11,9 @@ import { useModalManager } from "../../../store/useModalManager";
|
|
|
11
11
|
import { useCards } from "../../../modules/cards/hooks/cards.hook";
|
|
12
12
|
import { useActiveSubscription } from "../../../modules/subscriptions/hooks/find-active-subscription.hook";
|
|
13
13
|
import { useUpdateSubscriptionPayment } from "../../../modules/subscriptions/hooks/update-subscription-payment.hook";
|
|
14
|
+
import { useTranslations } from "next-intl";
|
|
14
15
|
function CannotDeleteCardModal() {
|
|
16
|
+
const translate = useTranslations();
|
|
15
17
|
const { activeModal, modalData, closeModal, openModal } = useModalManager();
|
|
16
18
|
const { data: cardsData } = useCards();
|
|
17
19
|
const { mutateAsync: updatePayment } = useUpdateSubscriptionPayment();
|
|
@@ -40,7 +42,7 @@ function CannotDeleteCardModal() {
|
|
|
40
42
|
Toast,
|
|
41
43
|
{
|
|
42
44
|
variant: "error",
|
|
43
|
-
message: error instanceof Error ? error.message : "
|
|
45
|
+
message: error instanceof Error ? error.message : translate("common.cards.cannotDelete.errorUpdateCard"),
|
|
44
46
|
toastId: t
|
|
45
47
|
}
|
|
46
48
|
),
|
|
@@ -55,17 +57,17 @@ function CannotDeleteCardModal() {
|
|
|
55
57
|
openModal("addCardModal", { showDefaultToggle: true });
|
|
56
58
|
}, [openModal, closeModal]);
|
|
57
59
|
return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: (open) => !open && closeModal(), children: [
|
|
58
|
-
/* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "
|
|
60
|
+
/* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: translate("common.cards.cannotDelete.title") }),
|
|
59
61
|
/* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-0 bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-[436px] 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", children: [
|
|
60
62
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 p-4 lg:p-5", children: [
|
|
61
63
|
/* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-10 bg-red-50 rounded-lg", children: /* @__PURE__ */ jsx(IconAlertTriangle, { className: "size-6 text-red-500" }) }),
|
|
62
64
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
|
|
63
|
-
/* @__PURE__ */ jsx("h2", { className: "paragraph-medium-semibold text-zinc-950", children: "
|
|
64
|
-
/* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600", children: "
|
|
65
|
+
/* @__PURE__ */ jsx("h2", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.cards.cannotDelete.title") }),
|
|
66
|
+
/* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600", children: translate("common.cards.cannotDelete.description") })
|
|
65
67
|
] })
|
|
66
68
|
] }),
|
|
67
69
|
availableCards.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 px-4 lg:px-5 pb-4 lg:pb-5 overflow-y-auto max-h-[200px] flex-1 lg:flex-none", children: [
|
|
68
|
-
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600", children: "
|
|
70
|
+
/* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600", children: translate("common.cards.cannotDelete.selectDefault") }),
|
|
69
71
|
availableCards.map((card) => /* @__PURE__ */ jsx(
|
|
70
72
|
CardItem,
|
|
71
73
|
{
|
|
@@ -79,7 +81,7 @@ function CannotDeleteCardModal() {
|
|
|
79
81
|
/* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0", children: [
|
|
80
82
|
/* @__PURE__ */ jsxs(Button, { onClick: handleAddCard, className: "h-10! flex-1", children: [
|
|
81
83
|
/* @__PURE__ */ jsx(IconPlus, { size: 20 }),
|
|
82
|
-
"
|
|
84
|
+
translate("common.cards.cannotDelete.addNewCard")
|
|
83
85
|
] }),
|
|
84
86
|
/* @__PURE__ */ jsx(
|
|
85
87
|
Button,
|
|
@@ -87,7 +89,7 @@ function CannotDeleteCardModal() {
|
|
|
87
89
|
variant: "secondary",
|
|
88
90
|
onClick: () => closeModal(),
|
|
89
91
|
className: "h-10! flex-1",
|
|
90
|
-
children: "
|
|
92
|
+
children: translate("common.actions.cancel")
|
|
91
93
|
}
|
|
92
94
|
)
|
|
93
95
|
] })
|