@greatapps/common 1.1.546 → 1.1.550

package/dist/components/modals/BuyCreditsModal.mjs

@@ -193,7 +193,7 @@ function BuyCreditsModal() {
       return /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24" });
     }
     if (totalPrice !== null) {
-      return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: totalPrice === 0 ? "Incluso" : formatPrice(totalPrice) });
+      return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: totalPrice === 0 ? "Padr\xE3o" : formatPrice(totalPrice) });
     }
     return /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-400", children: "--" });
   }, [isCalculatePending, totalPrice, formatPrice]);

package/dist/components/modals/BuyCreditsModal.mjs.map

@@ -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 } from '../../providers/whitelabel.provider';\nimport { IconInfoCircle, IconX, IconLoader2 } 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 { 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 ? '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 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":[]}
+{"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 } from '../../providers/whitelabel.provider';\nimport { IconInfoCircle, IconX, IconLoader2 } 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 { 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  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":[]}

package/dist/components/widgets/ImageUpload/ImageCropModal.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import ReactCrop, {
   centerCrop,
   makeAspectCrop
@@ -144,15 +144,45 @@ function ImageCropModal({
   onImageLoad: onImageLoadCallback,
   showCircleGuide,
   minWidth,
-  minHeight
+  minHeight,
+  fileName,
+  onSelectAnother
 }) {
   const imgRef = useRef(null);
   const [crop, setCrop] = useState();
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
-  const onImageLoad = (e) => {
+  const [imageStatus, setImageStatus] = useState("loading");
+  const onImageLoadCallbackRef = useRef(onImageLoadCallback);
+  useEffect(() => {
+    onImageLoadCallbackRef.current = onImageLoadCallback;
+  });
+  useEffect(() => {
+    if (!open || !imageSrc) {
+      setImageStatus("loading");
+      return;
+    }
+    setImageStatus("loading");
+    let cancelled = false;
+    const img = new window.Image();
+    img.onload = () => {
+      if (cancelled) return;
+      const { naturalWidth, naturalHeight } = img;
+      setImageSize({ width: naturalWidth, height: naturalHeight });
+      onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight);
+      const tooSmall = minWidth !== void 0 && naturalWidth < minWidth || minHeight !== void 0 && naturalHeight < minHeight;
+      setImageStatus(tooSmall ? "too-small" : "ok");
+    };
+    img.onerror = () => {
+      if (cancelled) return;
+      setImageStatus("too-small");
+    };
+    img.src = imageSrc;
+    return () => {
+      cancelled = true;
+    };
+  }, [open, imageSrc, minWidth, minHeight]);
+  const onCropImgLoad = (e) => {
     const { naturalWidth, naturalHeight } = e.currentTarget;
-    setImageSize({ width: naturalWidth, height: naturalHeight });
-    onImageLoadCallback?.(naturalWidth, naturalHeight);
     const initialCrop = centerCrop(
       makeAspectCrop(
         { unit: "%", width: 90 },
@@ -186,17 +216,35 @@ function ImageCropModal({
     ] }),
     shouldShowCircle && /* @__PURE__ */ jsx("div", { className: "crop-circle" })
   ] });
+  const dimensionText = minWidth !== void 0 && minHeight !== void 0 ? `${minWidth}x${minHeight}px` : null;
+  const isTooSmall = imageStatus === "too-small";
   return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, children: [
     /* @__PURE__ */ jsx("style", { children: baseCropStyles }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       DialogContent,
       {
-        className: "w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!",
+        className: isTooSmall ? "w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!" : "w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!",
         overlayClassName: "z-[1002]!",
-        children: [
+        children: isTooSmall ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: dimensionText ? `Foto menor que ${dimensionText}` : "Foto muito pequena" }) }),
+          /* @__PURE__ */ jsx("div", { className: "px-5 pb-5", children: /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-zinc-600 text-center", children: [
+            fileName ? `O arquivo "${fileName}"` : "A imagem selecionada",
+            " \xE9 menor",
+            dimensionText ? ` que ${dimensionText}` : " que o tamanho m\xEDnimo exigido",
+            ".",
+            " ",
+            "Fa\xE7a envio de uma imagem ",
+            dimensionText ? `com pelo menos ${dimensionText}` : "maior",
+            " para continuar."
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
+            onSelectAnother && /* @__PURE__ */ jsx(Button, { onClick: onSelectAnother, children: "Enviar outra" }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancelar" })
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(DialogHeader, { className: "p-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-center text-[16px]!", children: "Ajustar imagem" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 px-5 pb-5", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center overflow-hidden rounded-lg min-h-[200px]", children: imageStatus === "ok" && /* @__PURE__ */ jsx(
               ReactCrop,
               {
                 crop,
@@ -213,7 +261,7 @@ function ImageCropModal({
                     ref: imgRef,
                     src: imageSrc,
                     alt: "Crop",
-                    onLoad: onImageLoad,
+                    onLoad: onCropImgLoad,
                     draggable: false,
                     className: "max-h-[50vh] object-contain select-none"
                   }
@@ -223,10 +271,10 @@ function ImageCropModal({
             /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500 text-center", children: "Arraste para ajustar a \xE1rea de corte" })
           ] }),
           /* @__PURE__ */ jsxs(DialogFooter, { className: "flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200", children: [
-            /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, children: "Confirmar" }),
+            /* @__PURE__ */ jsx(Button, { onClick: handleConfirm, disabled: imageStatus !== "ok" || !crop, children: "Confirmar" }),
             /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancelar" })
           ] })
-        ]
+        ] })
       }
     )
   ] });

package/dist/components/widgets/ImageUpload/ImageCropModal.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useRef, useState } from 'react'\nimport ReactCrop, {\n  type Crop,\n  centerCrop,\n  makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n  .custom-crop-area .ReactCrop__crop-selection {\n    border: 2px solid white !important;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n  }\n\n  /* Grid de 9 quadrados - linhas pontilhadas finas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n    position: absolute;\n    background: repeating-linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n    left: 0;\n    right: 0;\n    height: 1px;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n  /* Círculo inscrito */\n  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(255, 255, 255, 0.6);\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  /* Ocultar handles das laterais (manter só os 4 cantos) */\n  .custom-crop-area .ReactCrop__drag-handle.ord-n,\n  .custom-crop-area .ReactCrop__drag-handle.ord-s,\n  .custom-crop-area .ReactCrop__drag-handle.ord-e,\n  .custom-crop-area .ReactCrop__drag-handle.ord-w {\n    display: none !important;\n  }\n\n  /* Estilizar handles dos cantos — indicador preto em L nos cantos */\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw,\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne,\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw,\n  .custom-crop-area .ReactCrop__drag-handle.ord-se {\n    width: 20px;\n    height: 20px;\n    background: transparent !important;\n    border: none !important;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n    content: '';\n    position: absolute;\n    width: 22px;\n    height: 22px;\n    border-color: white;\n    border-style: solid;\n    border-width: 0;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {\n    top: -2px; left: -2px;\n    border-top-width: 4px;\n    border-left-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {\n    top: -2px; right: -2px;\n    border-top-width: 4px;\n    border-right-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {\n    bottom: -2px; left: -2px;\n    border-bottom-width: 4px;\n    border-left-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n    bottom: -2px; right: -2px;\n    border-bottom-width: 4px;\n    border-right-width: 4px;\n  }\n\n  /* Desabilitar drag da imagem de fundo */\n  .custom-crop-area img {\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n`\n\ninterface ImageCropModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  imageSrc: string\n  aspectRatio: number\n  onConfirm: (image: HTMLImageElement, crop: Crop) => void\n  onCancel?: () => void\n  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void\n  showCircleGuide?: boolean\n  minWidth?: number\n  minHeight?: number\n}\n\nexport function ImageCropModal({\n  open,\n  onOpenChange,\n  imageSrc,\n  aspectRatio,\n  onConfirm,\n  onCancel,\n  onImageLoad: onImageLoadCallback,\n  showCircleGuide,\n  minWidth,\n  minHeight,\n}: ImageCropModalProps) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const [crop, setCrop] = useState<Crop>()\n  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n\n  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    const { naturalWidth, naturalHeight } = e.currentTarget\n    setImageSize({ width: naturalWidth, height: naturalHeight })\n\n    // Notifica o hook para verificar dimensões mínimas\n    onImageLoadCallback?.(naturalWidth, naturalHeight)\n\n    const initialCrop = centerCrop(\n      makeAspectCrop(\n        { unit: '%', width: 90 },\n        aspectRatio,\n        naturalWidth,\n        naturalHeight\n      ),\n      naturalWidth,\n      naturalHeight\n    )\n\n    setCrop(initialCrop)\n  }\n\n  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n  const minCropWidth = minWidth && imageSize.width > 0\n    ? Math.min((minWidth / imageSize.width) * 100, 100)\n    : undefined\n  const minCropHeight = minHeight && imageSize.height > 0\n    ? Math.min((minHeight / imageSize.height) * 100, 100)\n    : undefined\n\n  const handleConfirm = () => {\n    if (imgRef.current && crop) {\n      onConfirm(imgRef.current, crop)\n    }\n  }\n\n  const handleCancel = () => {\n    onCancel?.()\n    onOpenChange(false)\n  }\n\n  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n  // Renderiza grid, círculo e bolinhas dentro da área de crop\n  const renderSelectionAddon = () => (\n    <>\n      {/* Grid de 9 quadrados com linhas pontilhadas */}\n      <div className=\"crop-grid\">\n        <div className=\"crop-grid-line horizontal h1\" />\n        <div className=\"crop-grid-line horizontal h2\" />\n        <div className=\"crop-grid-line vertical v1\" />\n        <div className=\"crop-grid-line vertical v2\" />\n      </div>\n      {/* Círculo inscrito */}\n      {shouldShowCircle && <div className=\"crop-circle\" />}\n    </>\n  )\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <style>{baseCropStyles}</style>\n      <DialogContent\n        className=\"w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!\"\n        overlayClassName=\"z-[1002]!\"\n      >\n        <DialogHeader className=\"p-5\">\n          <DialogTitle className=\"text-center text-[16px]!\">\n            Ajustar imagem\n          </DialogTitle>\n        </DialogHeader>\n\n        <div className=\"flex flex-col gap-4 px-5 pb-5\">\n          <div className=\"flex justify-center overflow-hidden rounded-lg\">\n            <ReactCrop\n              crop={crop}\n              onChange={(c) => setCrop(c)}\n              aspect={aspectRatio}\n              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n              keepSelection\n              minWidth={minCropWidth}\n              minHeight={minCropHeight}\n              renderSelectionAddon={renderSelectionAddon}\n            >\n              <img\n                ref={imgRef}\n                src={imageSrc}\n                alt=\"Crop\"\n                onLoad={onImageLoad}\n                draggable={false}\n                className=\"max-h-[50vh] object-contain select-none\"\n              />\n            </ReactCrop>\n          </div>\n\n          <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n            Arraste para ajustar a área de corte\n          </p>\n        </div>\n\n        <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n          <Button onClick={handleConfirm}>Confirmar</Button>\n          <Button variant=\"secondary\" onClick={handleCancel}>\n            Cancelar\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/widgets/ImageUpload/ImageCropModal.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport ReactCrop, {\n  type Crop,\n  centerCrop,\n  makeAspectCrop,\n} from 'react-image-crop'\nimport 'react-image-crop/dist/ReactCrop.css'\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '../../ui/overlay/Dialog'\nimport { Button } from '../../ui/buttons/Button'\n\n// CSS customizado para grid pontilhado fino e círculo\nconst baseCropStyles = `\n  .custom-crop-area .ReactCrop__crop-selection {\n    border: 2px solid white !important;\n    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5) !important;\n  }\n\n  /* Grid de 9 quadrados - linhas pontilhadas finas */\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line {\n    position: absolute;\n    background: repeating-linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.horizontal {\n    left: 0;\n    right: 0;\n    height: 1px;\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.vertical {\n    top: 0;\n    bottom: 0;\n    width: 1px;\n    background: repeating-linear-gradient(\n      to bottom,\n      rgba(255, 255, 255, 0.5) 0,\n      rgba(255, 255, 255, 0.5) 4px,\n      transparent 4px,\n      transparent 8px\n    );\n  }\n\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h1 { top: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.h2 { top: 66.66%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v1 { left: 33.33%; }\n  .custom-crop-area .ReactCrop__crop-selection .crop-grid-line.v2 { left: 66.66%; }\n\n  /* Círculo inscrito */\n  .custom-crop-area.with-circle .ReactCrop__crop-selection .crop-circle {\n    position: absolute;\n    inset: 0;\n    border: 1px dashed rgba(255, 255, 255, 0.6);\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  /* Ocultar handles das laterais (manter só os 4 cantos) */\n  .custom-crop-area .ReactCrop__drag-handle.ord-n,\n  .custom-crop-area .ReactCrop__drag-handle.ord-s,\n  .custom-crop-area .ReactCrop__drag-handle.ord-e,\n  .custom-crop-area .ReactCrop__drag-handle.ord-w {\n    display: none !important;\n  }\n\n  /* Estilizar handles dos cantos — indicador preto em L nos cantos */\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw,\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne,\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw,\n  .custom-crop-area .ReactCrop__drag-handle.ord-se {\n    width: 20px;\n    height: 20px;\n    background: transparent !important;\n    border: none !important;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after,\n  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n    content: '';\n    position: absolute;\n    width: 22px;\n    height: 22px;\n    border-color: white;\n    border-style: solid;\n    border-width: 0;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-nw::after {\n    top: -2px; left: -2px;\n    border-top-width: 4px;\n    border-left-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-ne::after {\n    top: -2px; right: -2px;\n    border-top-width: 4px;\n    border-right-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-sw::after {\n    bottom: -2px; left: -2px;\n    border-bottom-width: 4px;\n    border-left-width: 4px;\n  }\n\n  .custom-crop-area .ReactCrop__drag-handle.ord-se::after {\n    bottom: -2px; right: -2px;\n    border-bottom-width: 4px;\n    border-right-width: 4px;\n  }\n\n  /* Desabilitar drag da imagem de fundo */\n  .custom-crop-area img {\n    pointer-events: none;\n    user-select: none;\n    -webkit-user-drag: none;\n  }\n`\n\ninterface ImageCropModalProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  imageSrc: string\n  aspectRatio: number\n  onConfirm: (image: HTMLImageElement, crop: Crop) => void\n  onCancel?: () => void\n  onImageLoad?: (naturalWidth: number, naturalHeight: number) => void\n  showCircleGuide?: boolean\n  minWidth?: number\n  minHeight?: number\n  /**\n   * Nome do arquivo atual, usado na mensagem da variante \"imagem muito pequena\".\n   * Opcional — se ausente, a mensagem cai num texto genérico.\n   */\n  fileName?: string\n  /**\n   * Callback disparado quando o usuário clica em \"Enviar outra\" na variante\n   * \"imagem muito pequena\". Normalmente abre um file input. Se não for passado,\n   * o botão \"Enviar outra\" é escondido.\n   */\n  onSelectAnother?: () => void\n}\n\ntype ImageStatus = 'loading' | 'too-small' | 'ok'\n\nexport function ImageCropModal({\n  open,\n  onOpenChange,\n  imageSrc,\n  aspectRatio,\n  onConfirm,\n  onCancel,\n  onImageLoad: onImageLoadCallback,\n  showCircleGuide,\n  minWidth,\n  minHeight,\n  fileName,\n  onSelectAnother,\n}: ImageCropModalProps) {\n  const imgRef = useRef<HTMLImageElement>(null)\n  const [crop, setCrop] = useState<Crop>()\n  const [imageSize, setImageSize] = useState({ width: 0, height: 0 })\n  const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')\n\n  // Ref pra callback externo — evita re-rodar o effect de preload toda vez que\n  // a identidade do callback muda.\n  const onImageLoadCallbackRef = useRef(onImageLoadCallback)\n  useEffect(() => {\n    onImageLoadCallbackRef.current = onImageLoadCallback\n  })\n\n  // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar\n  // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a\n  // variante \"imagem muito pequena\" sem flash de UI.\n  useEffect(() => {\n    if (!open || !imageSrc) {\n      setImageStatus('loading')\n      return\n    }\n\n    setImageStatus('loading')\n    let cancelled = false\n\n    const img = new window.Image()\n    img.onload = () => {\n      if (cancelled) return\n      const { naturalWidth, naturalHeight } = img\n      setImageSize({ width: naturalWidth, height: naturalHeight })\n      onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)\n\n      const tooSmall =\n        (minWidth !== undefined && naturalWidth < minWidth) ||\n        (minHeight !== undefined && naturalHeight < minHeight)\n      setImageStatus(tooSmall ? 'too-small' : 'ok')\n    }\n    img.onerror = () => {\n      if (cancelled) return\n      setImageStatus('too-small')\n    }\n    img.src = imageSrc\n\n    return () => {\n      cancelled = true\n    }\n  }, [open, imageSrc, minWidth, minHeight])\n\n  // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em\n  // cache vinda do preload, então carrega instantâneo.\n  const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n    const { naturalWidth, naturalHeight } = e.currentTarget\n    const initialCrop = centerCrop(\n      makeAspectCrop(\n        { unit: '%', width: 90 },\n        aspectRatio,\n        naturalWidth,\n        naturalHeight\n      ),\n      naturalWidth,\n      naturalHeight\n    )\n    setCrop(initialCrop)\n  }\n\n  // Calcula tamanho mínimo em porcentagem baseado nas dimensões mínimas em pixels\n  const minCropWidth = minWidth && imageSize.width > 0\n    ? Math.min((minWidth / imageSize.width) * 100, 100)\n    : undefined\n  const minCropHeight = minHeight && imageSize.height > 0\n    ? Math.min((minHeight / imageSize.height) * 100, 100)\n    : undefined\n\n  const handleConfirm = () => {\n    if (imgRef.current && crop) {\n      onConfirm(imgRef.current, crop)\n    }\n  }\n\n  const handleCancel = () => {\n    onCancel?.()\n    onOpenChange(false)\n  }\n\n  // Determina se deve mostrar círculo (aspect ratio 1:1 por padrão)\n  const shouldShowCircle = showCircleGuide ?? aspectRatio === 1\n\n  // Renderiza grid, círculo e bolinhas dentro da área de crop\n  const renderSelectionAddon = () => (\n    <>\n      {/* Grid de 9 quadrados com linhas pontilhadas */}\n      <div className=\"crop-grid\">\n        <div className=\"crop-grid-line horizontal h1\" />\n        <div className=\"crop-grid-line horizontal h2\" />\n        <div className=\"crop-grid-line vertical v1\" />\n        <div className=\"crop-grid-line vertical v2\" />\n      </div>\n      {/* Círculo inscrito */}\n      {shouldShowCircle && <div className=\"crop-circle\" />}\n    </>\n  )\n\n  const dimensionText =\n    minWidth !== undefined && minHeight !== undefined\n      ? `${minWidth}x${minHeight}px`\n      : null\n\n  const isTooSmall = imageStatus === 'too-small'\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <style>{baseCropStyles}</style>\n      <DialogContent\n        className={\n          isTooSmall\n            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'\n            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'\n        }\n        overlayClassName=\"z-[1002]!\"\n      >\n        {isTooSmall ? (\n          <>\n            <DialogHeader className=\"p-5\">\n              <DialogTitle className=\"text-center text-[16px]!\">\n                {dimensionText ? `Foto menor que ${dimensionText}` : 'Foto muito pequena'}\n              </DialogTitle>\n            </DialogHeader>\n\n            <div className=\"px-5 pb-5\">\n              <p className=\"paragraph-small-regular text-zinc-600 text-center\">\n                {fileName ? `O arquivo \"${fileName}\"` : 'A imagem selecionada'} é menor\n                {dimensionText ? ` que ${dimensionText}` : ' que o tamanho mínimo exigido'}.\n                {' '}Faça envio de uma imagem {dimensionText ? `com pelo menos ${dimensionText}` : 'maior'} para continuar.\n              </p>\n            </div>\n\n            <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n              {onSelectAnother && <Button onClick={onSelectAnother}>Enviar outra</Button>}\n              <Button variant=\"secondary\" onClick={handleCancel}>\n                Cancelar\n              </Button>\n            </DialogFooter>\n          </>\n        ) : (\n          <>\n            <DialogHeader className=\"p-5\">\n              <DialogTitle className=\"text-center text-[16px]!\">\n                Ajustar imagem\n              </DialogTitle>\n            </DialogHeader>\n\n            <div className=\"flex flex-col gap-4 px-5 pb-5\">\n              <div className=\"flex justify-center overflow-hidden rounded-lg min-h-[200px]\">\n                {imageStatus === 'ok' && (\n                  <ReactCrop\n                    crop={crop}\n                    onChange={(c: Crop) => setCrop(c)}\n                    aspect={aspectRatio}\n                    className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}\n                    keepSelection\n                    minWidth={minCropWidth}\n                    minHeight={minCropHeight}\n                    renderSelectionAddon={renderSelectionAddon}\n                  >\n                    <img\n                      ref={imgRef}\n                      src={imageSrc}\n                      alt=\"Crop\"\n                      onLoad={onCropImgLoad}\n                      draggable={false}\n                      className=\"max-h-[50vh] object-contain select-none\"\n                    />\n                  </ReactCrop>\n                )}\n              </div>\n\n              <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n                Arraste para ajustar a área de corte\n              </p>\n            </div>\n\n            <DialogFooter className=\"flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200\">\n              <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>\n                Confirmar\n              </Button>\n              <Button variant=\"secondary\" onClick={handleCancel}>\n                Cancelar\n              </Button>\n            </DialogFooter>\n          </>\n        )}\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/modules/images/hooks/use-image-upload.hook.mjs

@@ -16,6 +16,7 @@ function useImageUpload(options) {
   const [showTooSmallModal, setShowTooSmallModal] = useState(false);
   const [tooSmallError, setTooSmallError] = useState(null);
   const [isProcessing, setIsProcessing] = useState(false);
+  const [fileName, setFileName] = useState("");
   const fileInputRef = useRef(null);
   const currentFileName = useRef("");
   const handleFileSelect = useCallback(
@@ -26,6 +27,7 @@ function useImageUpload(options) {
         return;
       }
       currentFileName.current = file.name;
+      setFileName(file.name);
       const objectUrl = URL.createObjectURL(file);
       setOriginalImage(objectUrl);
       const img = new Image();
@@ -94,6 +96,7 @@ function useImageUpload(options) {
     tooSmallError,
     config,
     isProcessing,
+    fileName,
     fileInputRef,
     handleFileSelect,
     handleCropConfirm,

package/dist/modules/images/hooks/use-image-upload.hook.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport type { Crop } from 'react-image-crop'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\n\nexport interface UseImageUploadOptions {\n  config: ImageConfig\n  onSuccess?: (base64Image: string) => void\n  onError?: (error: string) => void\n}\n\nexport function useImageUpload(options: UseImageUploadOptions) {\n  const { config, onSuccess, onError } = options\n\n  // Refs para manter callbacks sempre atualizados (evita stale closures)\n  const onSuccessRef = useRef(onSuccess)\n  const onErrorRef = useRef(onError)\n  useEffect(() => {\n    onSuccessRef.current = onSuccess\n    onErrorRef.current = onError\n  }, [onSuccess, onError])\n\n  const [originalImage, setOriginalImage] = useState<string | null>(null)\n  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)\n  const [showCropModal, setShowCropModal] = useState(false)\n  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const currentFileName = useRef<string>('')\n\n  const handleFileSelect = useCallback(\n    (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onErrorRef.current?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      currentFileName.current = file.name\n\n      // Usa object URL em vez de base64 — mais eficiente para imagens grandes\n      const objectUrl = URL.createObjectURL(file)\n      setOriginalImage(objectUrl)\n\n      // Carrega imagem em memória para garantir que é válida antes de abrir modal\n      const img = new Image()\n      img.onload = () => {\n        setShowCropModal(true)\n      }\n      img.onerror = () => {\n        URL.revokeObjectURL(objectUrl)\n        setOriginalImage(null)\n        onErrorRef.current?.('Erro ao carregar a imagem. Tente uma imagem menor ou em outro formato.')\n      }\n      img.src = objectUrl\n    },\n    []\n  )\n\n  const handleImageLoadInModal = useCallback(\n    (_naturalWidth: number, _naturalHeight: number) => {\n      // Validação agora é feita antes de abrir a modal\n    },\n    []\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    if (originalImage) URL.revokeObjectURL(originalImage)\n    setOriginalImage(null)\n  }, [originalImage])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        if (originalImage) URL.revokeObjectURL(originalImage)\n        setOriginalImage(null)\n        onSuccessRef.current?.(croppedBase64)\n      } catch {\n        onErrorRef.current?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config]\n  )\n\n  const clear = useCallback(() => {\n    if (originalImage) URL.revokeObjectURL(originalImage)\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [originalImage])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleImageLoadInModal,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/images/hooks/use-image-upload.hook.ts"],"sourcesContent":["'use client'\n\nimport { useState, useCallback, useRef, useEffect } from 'react'\nimport type { Crop } from 'react-image-crop'\nimport { cropImageToCanvas } from '../utils/crop-image'\nimport { validateImage } from '../utils/validate-image'\nimport type { ImageConfig } from '../types/image.type'\n\nexport interface ImageTooSmallError {\n  fileName: string\n  minWidth: number\n  minHeight: number\n}\n\nexport interface UseImageUploadOptions {\n  config: ImageConfig\n  onSuccess?: (base64Image: string) => void\n  onError?: (error: string) => void\n}\n\nexport function useImageUpload(options: UseImageUploadOptions) {\n  const { config, onSuccess, onError } = options\n\n  // Refs para manter callbacks sempre atualizados (evita stale closures)\n  const onSuccessRef = useRef(onSuccess)\n  const onErrorRef = useRef(onError)\n  useEffect(() => {\n    onSuccessRef.current = onSuccess\n    onErrorRef.current = onError\n  }, [onSuccess, onError])\n\n  const [originalImage, setOriginalImage] = useState<string | null>(null)\n  const [croppedPreview, setCroppedPreview] = useState<string | null>(null)\n  const [showCropModal, setShowCropModal] = useState(false)\n  const [showTooSmallModal, setShowTooSmallModal] = useState(false)\n  const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)\n  const [isProcessing, setIsProcessing] = useState(false)\n  const [fileName, setFileName] = useState<string>('')\n  const fileInputRef = useRef<HTMLInputElement>(null)\n  const currentFileName = useRef<string>('')\n\n  const handleFileSelect = useCallback(\n    (file: File) => {\n      const validation = validateImage(file)\n      if (!validation.valid) {\n        onErrorRef.current?.(validation.error || 'Arquivo inválido')\n        return\n      }\n\n      currentFileName.current = file.name\n      setFileName(file.name)\n\n      // Usa object URL em vez de base64 — mais eficiente para imagens grandes\n      const objectUrl = URL.createObjectURL(file)\n      setOriginalImage(objectUrl)\n\n      // Carrega imagem em memória para garantir que é válida antes de abrir modal\n      const img = new Image()\n      img.onload = () => {\n        setShowCropModal(true)\n      }\n      img.onerror = () => {\n        URL.revokeObjectURL(objectUrl)\n        setOriginalImage(null)\n        onErrorRef.current?.('Erro ao carregar a imagem. Tente uma imagem menor ou em outro formato.')\n      }\n      img.src = objectUrl\n    },\n    []\n  )\n\n  const handleImageLoadInModal = useCallback(\n    (_naturalWidth: number, _naturalHeight: number) => {\n      // Validação agora é feita antes de abrir a modal\n    },\n    []\n  )\n\n  const handleSelectAnotherFile = useCallback(() => {\n    setShowTooSmallModal(false)\n    setTooSmallError(null)\n    fileInputRef.current?.click()\n  }, [])\n\n  const handleCancelTooSmall = useCallback(() => {\n    setShowTooSmallModal(false)\n    setShowCropModal(false)\n    setTooSmallError(null)\n    if (originalImage) URL.revokeObjectURL(originalImage)\n    setOriginalImage(null)\n  }, [originalImage])\n\n  const handleCropConfirm = useCallback(\n    async (imageElement: HTMLImageElement, cropArea: Crop) => {\n      setIsProcessing(true)\n      try {\n        // Crop é feito inteiramente no cliente via Canvas\n        // Já produz imagem no tamanho final (config.width x config.height)\n        const croppedBase64 = await cropImageToCanvas(\n          imageElement,\n          cropArea,\n          config.width,\n          config.height\n        )\n\n        setCroppedPreview(croppedBase64)\n        setShowCropModal(false)\n        if (originalImage) URL.revokeObjectURL(originalImage)\n        setOriginalImage(null)\n        onSuccessRef.current?.(croppedBase64)\n      } catch {\n        onErrorRef.current?.('Erro ao aplicar crop')\n      } finally {\n        setIsProcessing(false)\n      }\n    },\n    [config]\n  )\n\n  const clear = useCallback(() => {\n    if (originalImage) URL.revokeObjectURL(originalImage)\n    setOriginalImage(null)\n    setCroppedPreview(null)\n  }, [originalImage])\n\n  return {\n    originalImage,\n    croppedPreview,\n    showCropModal,\n    showTooSmallModal,\n    tooSmallError,\n    config,\n    isProcessing,\n    fileName,\n    fileInputRef,\n    handleFileSelect,\n    handleCropConfirm,\n    handleImageLoadInModal,\n    handleSelectAnotherFile,\n    handleCancelTooSmall,\n    setShowCropModal,\n    setShowTooSmallModal,\n    clear,\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.546",
+  "version": "1.1.550",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/modals/BuyCreditsModal.tsx

@@ -233,7 +233,7 @@ export default function BuyCreditsModal() {
     if (totalPrice !== null) {
       return (
         <span className="paragraph-xlarge-semibold text-zinc-950">
-          {totalPrice === 0 ? 'Incluso' : formatPrice(totalPrice)}
+          {totalPrice === 0 ? 'Padrão' : formatPrice(totalPrice)}
         </span>
       );
     }

package/src/components/widgets/ImageUpload/ImageCropModal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import ReactCrop, {
   type Crop,
   centerCrop,
@@ -149,8 +149,21 @@ interface ImageCropModalProps {
   showCircleGuide?: boolean
   minWidth?: number
   minHeight?: number
+  /**
+   * Nome do arquivo atual, usado na mensagem da variante "imagem muito pequena".
+   * Opcional — se ausente, a mensagem cai num texto genérico.
+   */
+  fileName?: string
+  /**
+   * Callback disparado quando o usuário clica em "Enviar outra" na variante
+   * "imagem muito pequena". Normalmente abre um file input. Se não for passado,
+   * o botão "Enviar outra" é escondido.
+   */
+  onSelectAnother?: () => void
 }
 
+type ImageStatus = 'loading' | 'too-small' | 'ok'
+
 export function ImageCropModal({
   open,
   onOpenChange,
@@ -162,18 +175,60 @@ export function ImageCropModal({
   showCircleGuide,
   minWidth,
   minHeight,
+  fileName,
+  onSelectAnother,
 }: ImageCropModalProps) {
   const imgRef = useRef<HTMLImageElement>(null)
   const [crop, setCrop] = useState<Crop>()
   const [imageSize, setImageSize] = useState({ width: 0, height: 0 })
+  const [imageStatus, setImageStatus] = useState<ImageStatus>('loading')
 
-  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const { naturalWidth, naturalHeight } = e.currentTarget
-    setImageSize({ width: naturalWidth, height: naturalHeight })
+  // Ref pra callback externo — evita re-rodar o effect de preload toda vez que
+  // a identidade do callback muda.
+  const onImageLoadCallbackRef = useRef(onImageLoadCallback)
+  useEffect(() => {
+    onImageLoadCallbackRef.current = onImageLoadCallback
+  })
+
+  // Pre-carrega a imagem fora do DOM pra medir dimensões ANTES de montar
+  // o ReactCrop. Assim conseguimos decidir entre a variante de crop e a
+  // variante "imagem muito pequena" sem flash de UI.
+  useEffect(() => {
+    if (!open || !imageSrc) {
+      setImageStatus('loading')
+      return
+    }
+
+    setImageStatus('loading')
+    let cancelled = false
 
-    // Notifica o hook para verificar dimensões mínimas
-    onImageLoadCallback?.(naturalWidth, naturalHeight)
+    const img = new window.Image()
+    img.onload = () => {
+      if (cancelled) return
+      const { naturalWidth, naturalHeight } = img
+      setImageSize({ width: naturalWidth, height: naturalHeight })
+      onImageLoadCallbackRef.current?.(naturalWidth, naturalHeight)
+
+      const tooSmall =
+        (minWidth !== undefined && naturalWidth < minWidth) ||
+        (minHeight !== undefined && naturalHeight < minHeight)
+      setImageStatus(tooSmall ? 'too-small' : 'ok')
+    }
+    img.onerror = () => {
+      if (cancelled) return
+      setImageStatus('too-small')
+    }
+    img.src = imageSrc
+
+    return () => {
+      cancelled = true
+    }
+  }, [open, imageSrc, minWidth, minHeight])
 
+  // Inicializa o crop quando o <img> do ReactCrop monta. A imagem já está em
+  // cache vinda do preload, então carrega instantâneo.
+  const onCropImgLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { naturalWidth, naturalHeight } = e.currentTarget
     const initialCrop = centerCrop(
       makeAspectCrop(
         { unit: '%', width: 90 },
@@ -184,7 +239,6 @@ export function ImageCropModal({
       naturalWidth,
       naturalHeight
     )
-
     setCrop(initialCrop)
   }
 
@@ -225,53 +279,95 @@ export function ImageCropModal({
     </>
   )
 
+  const dimensionText =
+    minWidth !== undefined && minHeight !== undefined
+      ? `${minWidth}x${minHeight}px`
+      : null
+
+  const isTooSmall = imageStatus === 'too-small'
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <style>{baseCropStyles}</style>
       <DialogContent
-        className="w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!"
+        className={
+          isTooSmall
+            ? 'w-full md:w-[480px]! lg:w-[480px]! max-w-[480px]! max-[480px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
+            : 'w-full md:w-[650px]! lg:w-[650px]! max-w-[650px]! max-[650px]:w-[calc(100%-32px)] p-0 gap-0 z-[1003]!'
+        }
         overlayClassName="z-[1002]!"
       >
-        <DialogHeader className="p-5">
-          <DialogTitle className="text-center text-[16px]!">
-            Ajustar imagem
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col gap-4 px-5 pb-5">
-          <div className="flex justify-center overflow-hidden rounded-lg">
-            <ReactCrop
-              crop={crop}
-              onChange={(c) => setCrop(c)}
-              aspect={aspectRatio}
-              className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
-              keepSelection
-              minWidth={minCropWidth}
-              minHeight={minCropHeight}
-              renderSelectionAddon={renderSelectionAddon}
-            >
-              <img
-                ref={imgRef}
-                src={imageSrc}
-                alt="Crop"
-                onLoad={onImageLoad}
-                draggable={false}
-                className="max-h-[50vh] object-contain select-none"
-              />
-            </ReactCrop>
-          </div>
-
-          <p className="paragraph-small-regular text-zinc-500 text-center">
-            Arraste para ajustar a área de corte
-          </p>
-        </div>
-
-        <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
-          <Button onClick={handleConfirm}>Confirmar</Button>
-          <Button variant="secondary" onClick={handleCancel}>
-            Cancelar
-          </Button>
-        </DialogFooter>
+        {isTooSmall ? (
+          <>
+            <DialogHeader className="p-5">
+              <DialogTitle className="text-center text-[16px]!">
+                {dimensionText ? `Foto menor que ${dimensionText}` : 'Foto muito pequena'}
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="px-5 pb-5">
+              <p className="paragraph-small-regular text-zinc-600 text-center">
+                {fileName ? `O arquivo "${fileName}"` : 'A imagem selecionada'} é menor
+                {dimensionText ? ` que ${dimensionText}` : ' que o tamanho mínimo exigido'}.
+                {' '}Faça envio de uma imagem {dimensionText ? `com pelo menos ${dimensionText}` : 'maior'} para continuar.
+              </p>
+            </div>
+
+            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+              {onSelectAnother && <Button onClick={onSelectAnother}>Enviar outra</Button>}
+              <Button variant="secondary" onClick={handleCancel}>
+                Cancelar
+              </Button>
+            </DialogFooter>
+          </>
+        ) : (
+          <>
+            <DialogHeader className="p-5">
+              <DialogTitle className="text-center text-[16px]!">
+                Ajustar imagem
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="flex flex-col gap-4 px-5 pb-5">
+              <div className="flex justify-center overflow-hidden rounded-lg min-h-[200px]">
+                {imageStatus === 'ok' && (
+                  <ReactCrop
+                    crop={crop}
+                    onChange={(c: Crop) => setCrop(c)}
+                    aspect={aspectRatio}
+                    className={`max-h-[50vh] custom-crop-area ${shouldShowCircle ? 'with-circle' : ''}`}
+                    keepSelection
+                    minWidth={minCropWidth}
+                    minHeight={minCropHeight}
+                    renderSelectionAddon={renderSelectionAddon}
+                  >
+                    <img
+                      ref={imgRef}
+                      src={imageSrc}
+                      alt="Crop"
+                      onLoad={onCropImgLoad}
+                      draggable={false}
+                      className="max-h-[50vh] object-contain select-none"
+                    />
+                  </ReactCrop>
+                )}
+              </div>
+
+              <p className="paragraph-small-regular text-zinc-500 text-center">
+                Arraste para ajustar a área de corte
+              </p>
+            </div>
+
+            <DialogFooter className="flex-row! items-center justify-start! gap-3 p-5 border-t border-zinc-200">
+              <Button onClick={handleConfirm} disabled={imageStatus !== 'ok' || !crop}>
+                Confirmar
+              </Button>
+              <Button variant="secondary" onClick={handleCancel}>
+                Cancelar
+              </Button>
+            </DialogFooter>
+          </>
+        )}
       </DialogContent>
     </Dialog>
   )

package/src/modules/images/hooks/use-image-upload.hook.ts

@@ -35,6 +35,7 @@ export function useImageUpload(options: UseImageUploadOptions) {
   const [showTooSmallModal, setShowTooSmallModal] = useState(false)
   const [tooSmallError, setTooSmallError] = useState<ImageTooSmallError | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
+  const [fileName, setFileName] = useState<string>('')
   const fileInputRef = useRef<HTMLInputElement>(null)
   const currentFileName = useRef<string>('')
 
@@ -47,6 +48,7 @@ export function useImageUpload(options: UseImageUploadOptions) {
       }
 
       currentFileName.current = file.name
+      setFileName(file.name)
 
       // Usa object URL em vez de base64 — mais eficiente para imagens grandes
       const objectUrl = URL.createObjectURL(file)
@@ -129,6 +131,7 @@ export function useImageUpload(options: UseImageUploadOptions) {
     tooSmallError,
     config,
     isProcessing,
+    fileName,
     fileInputRef,
     handleFileSelect,
     handleCropConfirm,