@greatapps/common 1.1.565 → 1.1.567

package/dist/components/modals/cards/CannotDeleteCardModal.mjs

@@ -0,0 +1,100 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Dialog, DialogContent, DialogTitle } from "../../ui/overlay/Dialog";
+import { Button } from "../../ui/buttons/Button";
+import { Toast } from "../../ui/feedback/Toast";
+import { CardItem } from "../../ui/data-display/CardItem";
+import { IconAlertTriangle, IconPlus } from "@tabler/icons-react";
+import { toast } from "sonner";
+import { useModalManager } from "../../../store/useModalManager";
+import { useCards } from "../../../modules/cards/hooks/cards.hook";
+import { useActiveSubscription } from "../../../modules/subscriptions/hooks/find-active-subscription.hook";
+import { useUpdateSubscriptionPayment } from "../../../modules/subscriptions/hooks/update-subscription-payment.hook";
+function CannotDeleteCardModal() {
+  const { activeModal, modalData, closeModal, openModal } = useModalManager();
+  const { data: cardsData } = useCards();
+  const { mutateAsync: updatePayment } = useUpdateSubscriptionPayment();
+  const { data: subscriptionData } = useActiveSubscription();
+  const activeSubscription = subscriptionData?.data?.[0] ?? null;
+  const isOpen = activeModal === "cannotDeleteCardModal";
+  const cardToDeleteId = modalData.cardId;
+  const allCards = cardsData?.data ?? [];
+  const cardToDelete = allCards.find((c) => c.id.toString() === cardToDeleteId);
+  const availableCards = allCards.filter((c) => c.id.toString() !== cardToDeleteId);
+  const handleSelectCard = useCallback(
+    async (card) => {
+      if (!activeSubscription || !cardToDelete) return;
+      try {
+        await updatePayment({
+          subscriptionId: activeSubscription.id,
+          data: { id_card: card.id.toString(), payment_method: 1 }
+        });
+        closeModal();
+        openModal("deleteCardModal", {
+          cardId: cardToDelete.id.toString()
+        });
+      } catch (error) {
+        toast.custom(
+          (t) => /* @__PURE__ */ jsx(
+            Toast,
+            {
+              variant: "error",
+              message: error instanceof Error ? error.message : "Erro ao atualizar cart\xE3o da assinatura",
+              toastId: t
+            }
+          ),
+          { duration: 5e3 }
+        );
+      }
+    },
+    [updatePayment, activeSubscription, closeModal, openModal, cardToDelete]
+  );
+  const handleAddCard = useCallback(() => {
+    closeModal();
+    openModal("addCardModal", { showDefaultToggle: true });
+  }, [openModal, closeModal]);
+  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: (open) => !open && closeModal(), children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "N\xE3o \xE9 poss\xEDvel excluir este cart\xE3o" }),
+    /* @__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: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 p-4 lg:p-5", children: [
+        /* @__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" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("h2", { className: "paragraph-medium-semibold text-zinc-950", children: "N\xE3o \xE9 poss\xEDvel excluir este cart\xE3o" }),
+          /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-600", children: "Este cart\xE3o est\xE1 em uso e tem uma assinatura ativa vinculada a ele. Selecione outro cart\xE3o como padr\xE3o ou adicione um novo." })
+        ] })
+      ] }),
+      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: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600", children: "Selecione um cart\xE3o como padr\xE3o:" }),
+        availableCards.map((card) => /* @__PURE__ */ jsx(
+          CardItem,
+          {
+            card,
+            onSelect: () => handleSelectCard(card),
+            showMenu: false
+          },
+          card.id
+        ))
+      ] }),
+      /* @__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: [
+        /* @__PURE__ */ jsxs(Button, { onClick: handleAddCard, className: "h-10! flex-1", children: [
+          /* @__PURE__ */ jsx(IconPlus, { size: 20 }),
+          "Adicionar novo cart\xE3o"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => closeModal(),
+            className: "h-10! flex-1",
+            children: "Cancelar"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  CannotDeleteCardModal
+};
+//# sourceMappingURL=CannotDeleteCardModal.mjs.map

package/dist/components/modals/cards/CannotDeleteCardModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/CannotDeleteCardModal.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\nimport { Dialog, DialogContent, DialogTitle } from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { CardItem } from '../../ui/data-display/CardItem';\nimport { IconAlertTriangle, IconPlus } from '@tabler/icons-react';\nimport { toast } from 'sonner';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useActiveSubscription } from '../../../modules/subscriptions/hooks/find-active-subscription.hook';\nimport { useUpdateSubscriptionPayment } from '../../../modules/subscriptions/hooks/update-subscription-payment.hook';\nimport type { Card } from '../../../modules/cards/types';\n\nexport function CannotDeleteCardModal() {\n  const { activeModal, modalData, closeModal, openModal } = useModalManager();\n  const { data: cardsData } = useCards();\n  const { mutateAsync: updatePayment } = useUpdateSubscriptionPayment();\n  const { data: subscriptionData } = useActiveSubscription();\n  const activeSubscription = subscriptionData?.data?.[0] ?? null;\n\n  const isOpen = activeModal === 'cannotDeleteCardModal';\n  const cardToDeleteId = modalData.cardId as string | undefined;\n\n  const allCards = cardsData?.data ?? [];\n  const cardToDelete = allCards.find((c) => c.id.toString() === cardToDeleteId);\n  const availableCards = allCards.filter((c) => c.id.toString() !== cardToDeleteId);\n\n  const handleSelectCard = useCallback(\n    async (card: Card) => {\n      if (!activeSubscription || !cardToDelete) return;\n\n      try {\n        await updatePayment({\n          subscriptionId: activeSubscription.id,\n          data: { id_card: card.id.toString(), payment_method: 1 },\n        });\n\n        closeModal();\n        openModal('deleteCardModal', {\n          cardId: cardToDelete.id.toString(),\n        });\n      } catch (error) {\n        toast.custom(\n          (t) => (\n            <Toast\n              variant=\"error\"\n              message={\n                error instanceof Error\n                  ? error.message\n                  : 'Erro ao atualizar cartão da assinatura'\n              }\n              toastId={t}\n            />\n          ),\n          { duration: 5000 },\n        );\n      }\n    },\n    [updatePayment, activeSubscription, closeModal, openModal, cardToDelete],\n  );\n\n  const handleAddCard = useCallback(() => {\n    closeModal();\n    openModal('addCardModal', { showDefaultToggle: true });\n  }, [openModal, closeModal]);\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>\n      <DialogTitle className=\"sr-only\">\n        Não é possível excluir este cartão\n      </DialogTitle>\n      <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\">\n        <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n          <div className=\"flex items-center justify-center size-10 bg-red-50 rounded-lg\">\n            <IconAlertTriangle className=\"size-6 text-red-500\" />\n          </div>\n\n          <div className=\"flex flex-col gap-2\">\n            <h2 className=\"paragraph-medium-semibold text-zinc-950\">\n              Não é possível excluir este cartão\n            </h2>\n            <p className=\"paragraph-small-regular text-zinc-600\">\n              Este cartão está em uso e tem uma assinatura ativa vinculada a ele.\n              Selecione outro cartão como padrão ou adicione um novo.\n            </p>\n          </div>\n        </div>\n\n        {availableCards.length > 0 && (\n          <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\">\n            <span className=\"paragraph-xsmall-semibold text-zinc-600\">\n              Selecione um cartão como padrão:\n            </span>\n            {availableCards.map((card) => (\n              <CardItem\n                key={card.id}\n                card={card}\n                onSelect={() => handleSelectCard(card)}\n                showMenu={false}\n              />\n            ))}\n          </div>\n        )}\n\n        <div className=\"flex flex-row gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0\">\n          <Button onClick={handleAddCard} className=\"h-10! flex-1\">\n            <IconPlus size={20} />\n            Adicionar novo cartão\n          </Button>\n          <Button\n            variant=\"secondary\"\n            onClick={() => closeModal()}\n            className=\"h-10! flex-1\"\n          >\n            Cancelar\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/modals/cards/DeleteCardModal.mjs

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription
+} from "../../ui/overlay/Dialog";
+import { Button } from "../../ui/buttons/Button";
+import { Separator } from "../../ui/data-display/Separator";
+import { Toast } from "../../ui/feedback/Toast";
+import { FormField } from "../../ui/form/FormField";
+import { IconTrash } from "@tabler/icons-react";
+import { toast } from "sonner";
+import { useModalManager } from "../../../store/useModalManager";
+import { useDeleteConfirmation } from "../../../modules/cards/hooks/delete-confirmation.hook";
+import { useDeleteCard } from "../../../modules/cards/hooks/delete-card.hook";
+import { useCards } from "../../../modules/cards/hooks/cards.hook";
+function DeleteCardModal() {
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();
+  const deleteCard = useDeleteCard();
+  const { data: cardsData } = useCards();
+  const isOpen = activeModal === "deleteCardModal";
+  const cardId = modalData.cardId;
+  const onSuccess = modalData.onSuccess;
+  const card = cardsData?.data?.find((c) => c.id.toString() === cardId);
+  const cardLastDigits = (card?.number ?? "").replaceAll(/\D/g, "").slice(-4);
+  const handleClose = () => {
+    resetConfirmation();
+    closeModal();
+  };
+  const onSubmit = async () => {
+    if (!cardId) return;
+    try {
+      await deleteCard.mutateAsync(cardId);
+    } catch (error) {
+      toast.custom(
+        (t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            toastId: t,
+            variant: "error",
+            message: error instanceof Error ? error.message : "N\xE3o foi poss\xEDvel excluir o cart\xE3o"
+          }
+        ),
+        { duration: 5e3 }
+      );
+      return;
+    }
+    onSuccess?.();
+    resetConfirmation();
+    closeModal();
+    toast.custom(
+      (t) => /* @__PURE__ */ jsx(
+        Toast,
+        {
+          variant: "success",
+          message: `O cart\xE3o \u2022\u2022\u2022\u2022 ${cardLastDigits} foi exclu\xEDdo com sucesso`,
+          toastId: t
+        }
+      ),
+      { duration: 5e3 }
+    );
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsx(DialogContent, { className: "flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border", children: /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5", children: /* @__PURE__ */ jsx(IconTrash, { size: 20, className: "text-red-500" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: "Excluir cart\xE3o" }),
+        /* @__PURE__ */ jsxs(DialogDescription, { className: "paragraph-small-regular text-zinc-600", children: [
+          "Deseja realmente excluir o cart\xE3o:",
+          " ",
+          /* @__PURE__ */ jsxs("span", { className: "font-semibold text-zinc-950", children: [
+            "\u2022\u2022\u2022\u2022 ",
+            cardLastDigits
+          ] }),
+          "?"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-4 lg:px-5 py-5", children: /* @__PURE__ */ jsx(
+      FormField,
+      {
+        label: "Digite EXCLUIR abaixo",
+        required: true,
+        placeholder: "EXCLUIR",
+        ...form.register("confirmText")
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 p-4 lg:p-5", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          disabled: !isValidConfirmation,
+          loading: form.formState.isSubmitting,
+          className: "h-10!",
+          children: form.formState.isSubmitting ? "Excluindo..." : "Excluir"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          className: "h-10!",
+          onClick: handleClose,
+          disabled: form.formState.isSubmitting,
+          children: "Cancelar"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+export {
+  DeleteCardModal
+};
+//# sourceMappingURL=DeleteCardModal.mjs.map

package/dist/components/modals/cards/DeleteCardModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/modals/cards/DeleteCardModal.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n} from '../../ui/overlay/Dialog';\nimport { Button } from '../../ui/buttons/Button';\nimport { Separator } from '../../ui/data-display/Separator';\nimport { Toast } from '../../ui/feedback/Toast';\nimport { FormField } from '../../ui/form/FormField';\nimport { IconTrash } from '@tabler/icons-react';\nimport { toast } from 'sonner';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useDeleteConfirmation } from '../../../modules/cards/hooks/delete-confirmation.hook';\nimport { useDeleteCard } from '../../../modules/cards/hooks/delete-card.hook';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\n\nexport function DeleteCardModal() {\n  const { activeModal, modalData, closeModal } = useModalManager();\n  const { form, isValidConfirmation, resetConfirmation } = useDeleteConfirmation();\n  const deleteCard = useDeleteCard();\n  const { data: cardsData } = useCards();\n\n  const isOpen = activeModal === 'deleteCardModal';\n  const cardId = modalData.cardId as string | undefined;\n  const onSuccess = modalData.onSuccess as (() => void) | undefined;\n\n  const card = cardsData?.data?.find((c) => c.id.toString() === cardId);\n  const cardLastDigits = (card?.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n\n  const handleClose = () => {\n    resetConfirmation();\n    closeModal();\n  };\n\n  const onSubmit = async () => {\n    if (!cardId) return;\n\n    try {\n      await deleteCard.mutateAsync(cardId);\n    } catch (error) {\n      toast.custom(\n        (t) => (\n          <Toast\n            toastId={t}\n            variant=\"error\"\n            message={\n              error instanceof Error\n                ? error.message\n                : 'Não foi possível excluir o cartão'\n            }\n          />\n        ),\n        { duration: 5000 },\n      );\n      return;\n    }\n\n    onSuccess?.();\n    resetConfirmation();\n    closeModal();\n\n    toast.custom(\n      (t) => (\n        <Toast\n          variant=\"success\"\n          message={`O cartão •••• ${cardLastDigits} foi excluído com sucesso`}\n          toastId={t}\n        />\n      ),\n      { duration: 5000 },\n    );\n  };\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>\n      <DialogContent className=\"flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-[400px]! lg:max-w-[410px]! rounded-lg border\">\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col\">\n          <DialogHeader className=\"gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0\">\n            <div className=\"flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5\">\n              <IconTrash size={20} className=\"text-red-500\" />\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                Excluir cartão\n              </DialogTitle>\n              <DialogDescription className=\"paragraph-small-regular text-zinc-600\">\n                Deseja realmente excluir o cartão:{' '}\n                <span className=\"font-semibold text-zinc-950\">\n                  •••• {cardLastDigits}\n                </span>\n                ?\n              </DialogDescription>\n            </div>\n          </DialogHeader>\n\n          <div className=\"px-4 lg:px-5 py-5\">\n            <FormField\n              label=\"Digite EXCLUIR abaixo\"\n              required\n              placeholder=\"EXCLUIR\"\n              {...form.register('confirmText')}\n            />\n          </div>\n          <Separator />\n          <div className=\"flex flex-row items-center gap-2 p-4 lg:p-5\">\n            <Button\n              type=\"submit\"\n              disabled={!isValidConfirmation}\n              loading={form.formState.isSubmitting}\n              className=\"h-10!\"\n            >\n              {form.formState.isSubmitting ? 'Excluindo...' : 'Excluir'}\n            </Button>\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              className=\"h-10!\"\n              onClick={handleClose}\n              disabled={form.formState.isSubmitting}\n            >\n              Cancelar\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/ui/data-display/CardItem.mjs

@@ -1,19 +1,56 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { IconDotsVertical, IconTrash } from "@tabler/icons-react";
+import { toast } from "sonner";
+import { IconDotsVertical, IconStar, IconTrash } from "@tabler/icons-react";
 import { Popover, PopoverContent, PopoverTrigger } from "../overlay/Popover";
 import { NavBarItem } from "../../layouts/NavBarItem";
+import { Toast } from "../feedback/Toast";
 import { CardBrandIcon } from "./CardBrandIcons";
+import { useSetDefaultCard } from "../../../modules/cards/hooks/set-default-card.hook";
+import { useHandleDeleteCard } from "../../../modules/cards/hooks/handle-delete-card.hook";
 function CardItem({
   card,
   isSelected,
   onSelect,
-  showMenu = false,
-  canDelete = true,
-  onDelete
+  showMenu = true,
+  hideDelete = false,
+  hideSetDefault = false,
+  onAfterDelete,
+  onAfterSetDefault
 }) {
   const [popoverOpen, setPopoverOpen] = useState(false);
+  const setDefaultCardMutation = useSetDefaultCard();
+  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });
+  const handleSetDefault = () => {
+    setDefaultCardMutation.mutate(card.id.toString(), {
+      onSuccess: () => {
+        toast.custom((t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "success",
+            message: "Cart\xE3o definido como padr\xE3o",
+            toastId: t
+          }
+        ));
+        onAfterSetDefault?.(card);
+      },
+      onError: () => {
+        toast.custom((t) => /* @__PURE__ */ jsx(
+          Toast,
+          {
+            variant: "error",
+            message: "Erro ao definir cart\xE3o padr\xE3o",
+            toastId: t
+          }
+        ));
+      }
+    });
+  };
+  const menuHasSetDefault = !hideSetDefault && !card.is_default;
+  const menuHasDelete = !hideDelete;
+  const hasMenuItems = menuHasSetDefault || menuHasDelete;
+  const renderMenu = showMenu && hasMenuItems;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -27,8 +64,9 @@ function CardItem({
             (card.number ?? "").replaceAll(/\D/g, "").slice(-4)
           ] })
         ] }),
+        card.is_default && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap", children: "Padr\xE3o" }),
         /* @__PURE__ */ jsx(CardBrandIcon, { brand: card.brand }),
-        showMenu && /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
+        renderMenu && /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "button",
             {
@@ -37,23 +75,36 @@ function CardItem({
               children: /* @__PURE__ */ jsx(IconDotsVertical, { className: "size-5 text-zinc-500" })
             }
           ) }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             PopoverContent,
             {
               align: "end",
-              className: "w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200",
+              className: "w-[180px] p-2 bg-white rounded-2xl border border-zinc-200",
               onClick: (e) => e.stopPropagation(),
-              children: canDelete && /* @__PURE__ */ jsx(
-                NavBarItem,
-                {
-                  icon: /* @__PURE__ */ jsx(IconTrash, { size: 20, className: "text-zinc-400" }),
-                  label: "Excluir",
-                  onClick: () => {
-                    setPopoverOpen(false);
-                    onDelete?.();
+              children: [
+                menuHasSetDefault && /* @__PURE__ */ jsx(
+                  NavBarItem,
+                  {
+                    icon: /* @__PURE__ */ jsx(IconStar, { size: 18, className: "text-zinc-400" }),
+                    label: "Tornar padr\xE3o",
+                    onClick: () => {
+                      setPopoverOpen(false);
+                      handleSetDefault();
+                    }
                   }
-                }
-              )
+                ),
+                menuHasDelete && /* @__PURE__ */ jsx(
+                  NavBarItem,
+                  {
+                    icon: /* @__PURE__ */ jsx(IconTrash, { size: 18, className: "text-zinc-400" }),
+                    label: "Excluir",
+                    onClick: () => {
+                      setPopoverOpen(false);
+                      handleDeleteCard(card);
+                    }
+                  }
+                )
+              ]
             }
           )
         ] })

package/dist/components/ui/data-display/CardItem.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconDotsVertical, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport type { Card } from '../../../modules/cards/types';\n\ntype CardItemProps = {\n  card: Card;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  showMenu?: boolean;\n  canDelete?: boolean;\n  onDelete?: () => void;\n};\n\nexport function CardItem({\n  card,\n  isSelected,\n  onSelect,\n  showMenu = false,\n  canDelete = true,\n  onDelete,\n}: CardItemProps) {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  return (\n    <div\n      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'\n      }`}\n      onClick={onSelect}\n    >\n      <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n        <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n          {card.name}\n        </span>\n        <span className=\"paragraph-small-medium text-zinc-950\">\n          •••• {(card.number ?? '').replaceAll(/\\D/g, '').slice(-4)}\n        </span>\n      </div>\n      <CardBrandIcon brand={card.brand} />\n      {showMenu && (\n        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n          <PopoverTrigger asChild>\n            <button\n              className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <IconDotsVertical className=\"size-5 text-zinc-500\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"end\"\n            className=\"w-[140px] p-2 bg-white rounded-2xl shadow-md border border-zinc-200\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {canDelete && (\n              <NavBarItem\n                icon={<IconTrash size={20} className=\"text-zinc-400\" />}\n                label=\"Excluir\"\n                onClick={() => {\n                  setPopoverOpen(false);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,cAGA,YAHA;AAlCR,SAAS,gBAAgB;AACzB,SAAS,kBAAkB,iBAAiB;AAC5C,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAYvB,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAkB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kFACT,aAAa,+BAA+B,2CAC9C;AAAA,MACA,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,UAAK,WAAU,mDACb,eAAK,MACR;AAAA,UACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,aAC9C,KAAK,UAAU,IAAI,WAAW,OAAO,EAAE,EAAE,MAAM,EAAE;AAAA,aAC1D;AAAA,WACF;AAAA,QACA,oBAAC,iBAAc,OAAO,KAAK,OAAO;AAAA,QACjC,YACC,qBAAC,WAAQ,MAAM,aAAa,cAAc,gBACxC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAElC,8BAAC,oBAAiB,WAAU,wBAAuB;AAAA;AAAA,UACrD,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC,uBACC;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,kBACrD,OAAM;AAAA,kBACN,SAAS,MAAM;AACb,mCAAe,KAAK;AACpB,+BAAW;AAAA,kBACb;AAAA;AAAA,cACF;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/data-display/CardItem.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { toast } from 'sonner';\nimport { IconDotsVertical, IconStar, IconTrash } from '@tabler/icons-react';\nimport { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';\nimport { NavBarItem } from '../../layouts/NavBarItem';\nimport { Toast } from '../feedback/Toast';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { useSetDefaultCard } from '../../../modules/cards/hooks/set-default-card.hook';\nimport { useHandleDeleteCard } from '../../../modules/cards/hooks/handle-delete-card.hook';\nimport type { Card } from '../../../modules/cards/types';\n\ntype CardItemProps = {\n  card: Card;\n  isSelected?: boolean;\n  onSelect?: () => void;\n  showMenu?: boolean;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n  onAfterDelete?: (card: Card) => void;\n  onAfterSetDefault?: (card: Card) => void;\n};\n\nexport function CardItem({\n  card,\n  isSelected,\n  onSelect,\n  showMenu = true,\n  hideDelete = false,\n  hideSetDefault = false,\n  onAfterDelete,\n  onAfterSetDefault,\n}: CardItemProps) {\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const setDefaultCardMutation = useSetDefaultCard();\n\n  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });\n\n  const handleSetDefault = () => {\n    setDefaultCardMutation.mutate(card.id.toString(), {\n      onSuccess: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"success\"\n            message=\"Cartão definido como padrão\"\n            toastId={t}\n          />\n        ));\n        onAfterSetDefault?.(card);\n      },\n      onError: () => {\n        toast.custom((t) => (\n          <Toast\n            variant=\"error\"\n            message=\"Erro ao definir cartão padrão\"\n            toastId={t}\n          />\n        ));\n      },\n    });\n  };\n\n  const menuHasSetDefault = !hideSetDefault && !card.is_default;\n  const menuHasDelete = !hideDelete;\n  const hasMenuItems = menuHasSetDefault || menuHasDelete;\n  const renderMenu = showMenu && hasMenuItems;\n\n  return (\n    <div\n      className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${\n        isSelected\n          ? 'bg-zinc-50 border-zinc-950'\n          : 'bg-white border-zinc-200 hover:bg-zinc-50'\n      }`}\n      onClick={onSelect}\n    >\n      <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n        <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n          {card.name}\n        </span>\n        <span className=\"paragraph-small-medium text-zinc-950\">\n          •••• {(card.number ?? '').replaceAll(/\\D/g, '').slice(-4)}\n        </span>\n      </div>\n      {card.is_default && (\n        <span className=\"paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap\">\n          Padrão\n        </span>\n      )}\n      <CardBrandIcon brand={card.brand} />\n      {renderMenu && (\n        <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n          <PopoverTrigger asChild>\n            <button\n              className=\"size-10 flex items-center justify-center rounded-lg hover:bg-zinc-100 cursor-pointer\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <IconDotsVertical className=\"size-5 text-zinc-500\" />\n            </button>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"end\"\n            className=\"w-[180px] p-2 bg-white rounded-2xl border border-zinc-200\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {menuHasSetDefault && (\n              <NavBarItem\n                icon={<IconStar size={18} className=\"text-zinc-400\" />}\n                label=\"Tornar padrão\"\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleSetDefault();\n                }}\n              />\n            )}\n            {menuHasDelete && (\n              <NavBarItem\n                icon={<IconTrash size={18} className=\"text-zinc-400\" />}\n                label=\"Excluir\"\n                onClick={() => {\n                  setPopoverOpen(false);\n                  handleDeleteCard(card);\n                }}\n              />\n            )}\n          </PopoverContent>\n        </Popover>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA4CU,cAsCF,YAtCE;AA1CV,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,kBAAkB,UAAU,iBAAiB;AACtD,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AAc7B,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB;AAAA,EACA;AACF,GAAkB;AAChB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,yBAAyB,kBAAkB;AAEjD,QAAM,mBAAmB,oBAAoB,EAAE,cAAc,CAAC;AAE9D,QAAM,mBAAmB,MAAM;AAC7B,2BAAuB,OAAO,KAAK,GAAG,SAAS,GAAG;AAAA,MAChD,WAAW,MAAM;AACf,cAAM,OAAO,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX,CACD;AACD,4BAAoB,IAAI;AAAA,MAC1B;AAAA,MACA,SAAS,MAAM;AACb,cAAM,OAAO,CAAC,MACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,SAAS;AAAA;AAAA,QACX,CACD;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,oBAAoB,CAAC,kBAAkB,CAAC,KAAK;AACnD,QAAM,gBAAgB,CAAC;AACvB,QAAM,eAAe,qBAAqB;AAC1C,QAAM,aAAa,YAAY;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,kFACT,aACI,+BACA,2CACN;AAAA,MACA,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,wCACb;AAAA,8BAAC,UAAK,WAAU,mDACb,eAAK,MACR;AAAA,UACA,qBAAC,UAAK,WAAU,wCAAuC;AAAA;AAAA,aAC9C,KAAK,UAAU,IAAI,WAAW,OAAO,EAAE,EAAE,MAAM,EAAE;AAAA,aAC1D;AAAA,WACF;AAAA,QACC,KAAK,cACJ,oBAAC,UAAK,WAAU,gGAA+F,uBAE/G;AAAA,QAEF,oBAAC,iBAAc,OAAO,KAAK,OAAO;AAAA,QACjC,cACC,qBAAC,WAAQ,MAAM,aAAa,cAAc,gBACxC;AAAA,8BAAC,kBAAe,SAAO,MACrB;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAElC,8BAAC,oBAAiB,WAAU,wBAAuB;AAAA;AAAA,UACrD,GACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,WAAU;AAAA,cACV,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,cAEjC;AAAA,qCACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM,oBAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB;AAAA,oBACpD,OAAM;AAAA,oBACN,SAAS,MAAM;AACb,qCAAe,KAAK;AACpB,uCAAiB;AAAA,oBACnB;AAAA;AAAA,gBACF;AAAA,gBAED,iBACC;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAM,oBAAC,aAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,oBACrD,OAAM;AAAA,oBACN,SAAS,MAAM;AACb,qCAAe,KAAK;AACpB,uCAAiB,IAAI;AAAA,oBACvB;AAAA;AAAA,gBACF;AAAA;AAAA;AAAA,UAEJ;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/ui/data-display/PaymentInfoCard.mjs

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
 import { IconChevronDown, IconPlus } from "@tabler/icons-react";
 import { CardBrandIcon } from "./CardBrandIcons";
 import { CardItem } from "./CardItem";
 import useIsMobile from "../../../hooks/useIsMobile";
 import { useCards } from "../../../modules/cards/hooks/cards.hook";
-import { useCallback, useState } from "react";
 import { useModalManager } from "../../../store/useModalManager";
 import { useIsDefaultWhitelabel } from "../../../providers/whitelabel.provider";
 function PaymentInfoCard({
@@ -13,7 +13,9 @@ function PaymentInfoCard({
   selectedCardId,
   onCardSelect,
   onManageCards,
-  onOpenAddCard
+  onOpenAddCard,
+  hideDelete,
+  hideSetDefault
 }) {
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
@@ -21,8 +23,10 @@ function PaymentInfoCard({
   const [isExpanded, setIsExpanded] = useState(false);
   const { data: cardsData } = useCards();
   const cards = cardsData?.data ?? [];
-  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());
-  const canDeleteCards = cards.length > 1;
+  const selectedCard = cards.find(
+    (card) => card.id.toString() === selectedCardId.toString()
+  );
+  const onlyOneCard = cards.length <= 1;
   const hasCards = cards.length > 0;
   const hasMoreThan3Cards = cards.length > 3;
   const shouldShowManageButton = isMobile && hasMoreThan3Cards;
@@ -36,25 +40,6 @@ function PaymentInfoCard({
       onCardAdded: (cardId) => onCardSelect(cardId)
     });
   }, [openModal, onOpenAddCard, onCardSelect]);
-  const handleDeleteCard = useCallback(
-    (card) => {
-      if (canDeleteCards) {
-        openModal("deleteCardModal", {
-          cardId: card.id.toString(),
-          cardLastDigits: (card.number ?? "").replaceAll(/\D/g, "").slice(-4),
-          onSuccess: () => {
-            if (card.id === selectedCardId && cards.length > 1) {
-              const remainingCards = cards.filter((c) => c.id !== card.id);
-              if (remainingCards.length > 0) {
-                onCardSelect(remainingCards[0].id.toString());
-              }
-            }
-          }
-        });
-      }
-    },
-    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]
-  );
   const handleSelectCard = useCallback(
     (cardId) => {
       onCardSelect(cardId);
@@ -62,6 +47,17 @@ function PaymentInfoCard({
     },
     [onCardSelect]
   );
+  const handleAfterDelete = useCallback(
+    (card) => {
+      if (card.id.toString() === selectedCardId.toString()) {
+        const remaining = cards.filter((c) => c.id !== card.id);
+        if (remaining.length > 0) {
+          onCardSelect(remaining[0].id.toString());
+        }
+      }
+    },
+    [cards, selectedCardId, onCardSelect]
+  );
   if (!hasCards) {
     return /* @__PURE__ */ jsxs("div", { className: "border border-zinc-200 rounded-lg overflow-hidden", children: [
       email && /* @__PURE__ */ jsxs("div", { className: "flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3", children: [
@@ -124,9 +120,9 @@ function PaymentInfoCard({
                 card,
                 isSelected: card.id.toString() === selectedCardId.toString(),
                 onSelect: () => handleSelectCard(card.id.toString()),
-                showMenu: true,
-                canDelete: canDeleteCards,
-                onDelete: () => handleDeleteCard(card)
+                hideDelete: hideDelete || onlyOneCard,
+                hideSetDefault,
+                onAfterDelete: handleAfterDelete
               },
               card.id
             )),

package/dist/components/ui/data-display/PaymentInfoCard.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useCallback, useState } from 'react';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n  email?: string;\n  selectedCardId: string;\n  onCardSelect: (cardId: string) => void;\n  onManageCards?: () => void;\n  onOpenAddCard?: () => void;\n};\n\nexport function PaymentInfoCard({\n  email,\n  selectedCardId,\n  onCardSelect,\n  onManageCards,\n  onOpenAddCard,\n}: PaymentInfoCardProps) {\n  const isMobile = useIsMobile();\n  const { openModal } = useModalManager();\n  const isDefaultWl = useIsDefaultWhitelabel();\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const cards = cardsData?.data ?? [];\n\n  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());\n\n  const canDeleteCards = cards.length > 1;\n  const hasCards = cards.length > 0;\n\n  const hasMoreThan3Cards = cards.length > 3;\n  const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n  const handleOpenAddCardModal = useCallback(() => {\n    if (onOpenAddCard) {\n      onOpenAddCard();\n      return;\n    }\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => onCardSelect(cardId),\n    });\n  }, [openModal, onOpenAddCard, onCardSelect]);\n\n  const handleDeleteCard = useCallback(\n    (card: Card) => {\n      if (canDeleteCards) {\n        openModal('deleteCardModal', {\n          cardId: card.id.toString(),\n          cardLastDigits: (card.number ?? '').replaceAll(/\\D/g, '').slice(-4),\n          onSuccess: () => {\n            if (card.id === selectedCardId && cards.length > 1) {\n              const remainingCards = cards.filter((c) => c.id !== card.id);\n              if (remainingCards.length > 0) {\n                onCardSelect(remainingCards[0].id.toString());\n              }\n            }\n          },\n        });\n      }\n    },\n    [canDeleteCards, openModal, selectedCardId, cards, onCardSelect]\n  );\n\n  const handleSelectCard = useCallback(\n    (cardId: string) => {\n      onCardSelect(cardId);\n      setIsExpanded(false);\n    },\n    [onCardSelect]\n  );\n\n  if (!hasCards) {\n    return (\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n        <div className=\"flex items-center h-[60px] px-4 gap-3\">\n          <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n          <button\n            type=\"button\"\n            onClick={handleOpenAddCardModal}\n            className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n          >\n            <IconPlus className=\"size-[18px]\" />\n            <span className=\"px-1.5\">Adicionar cartão</span>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n\n        <div\n          className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n        >\n          {!isExpanded ? (\n            <>\n              <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n              <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n                <span className=\"paragraph-small-semibold text-zinc-950 truncate\">{selectedCard?.name}</span>\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n                </span>\n              </div>\n              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n              </div>\n            </>\n          ) : (\n            <>\n              <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n                Selecione a forma de pagamento\n              </span>\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n              </div>\n            </>\n          )}\n        </div>\n\n        <div\n          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n          }`}\n        >\n          {displayedCards.map((card) => (\n            <CardItem\n              key={card.id}\n              card={card}\n              isSelected={card.id.toString() === selectedCardId.toString()}\n              onSelect={() => handleSelectCard(card.id.toString())}\n              showMenu\n              canDelete={canDeleteCards}\n              onDelete={() => handleDeleteCard(card)}\n            />\n          ))}\n          {shouldShowManageButton && onManageCards && (\n            <button\n              type=\"button\"\n              onClick={onManageCards}\n              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${\n                isDefaultWl\n                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'\n                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'\n              }`}\n            >\n              Gerenciar cartões\n            </button>\n          )}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleOpenAddCardModal}\n        className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n      >\n        <IconPlus className=\"size-[18px]\" />\n        <span className=\"px-1.5\">\n          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/data-display/PaymentInfoCard.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useState } from 'react';\nimport { IconChevronDown, IconPlus } from '@tabler/icons-react';\nimport { CardBrandIcon } from './CardBrandIcons';\nimport { CardItem } from './CardItem';\nimport useIsMobile from '../../../hooks/useIsMobile';\nimport { useCards } from '../../../modules/cards/hooks/cards.hook';\nimport { useModalManager } from '../../../store/useModalManager';\nimport { useIsDefaultWhitelabel } from '../../../providers/whitelabel.provider';\nimport type { Card } from '../../../modules/cards/types';\n\ntype PaymentInfoCardProps = {\n  email?: string;\n  selectedCardId: string;\n  onCardSelect: (cardId: string) => void;\n  onManageCards?: () => void;\n  onOpenAddCard?: () => void;\n  hideDelete?: boolean;\n  hideSetDefault?: boolean;\n};\n\nexport function PaymentInfoCard({\n  email,\n  selectedCardId,\n  onCardSelect,\n  onManageCards,\n  onOpenAddCard,\n  hideDelete,\n  hideSetDefault,\n}: PaymentInfoCardProps) {\n  const isMobile = useIsMobile();\n  const { openModal } = useModalManager();\n  const isDefaultWl = useIsDefaultWhitelabel();\n\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const cards = cardsData?.data ?? [];\n\n  const selectedCard = cards.find(\n    (card) => card.id.toString() === selectedCardId.toString(),\n  );\n\n  const onlyOneCard = cards.length <= 1;\n  const hasCards = cards.length > 0;\n\n  const hasMoreThan3Cards = cards.length > 3;\n  const shouldShowManageButton = isMobile && hasMoreThan3Cards;\n  const displayedCards = shouldShowManageButton ? cards.slice(0, 3) : cards;\n\n  const handleOpenAddCardModal = useCallback(() => {\n    if (onOpenAddCard) {\n      onOpenAddCard();\n      return;\n    }\n    openModal('addCardModal', {\n      onCardAdded: (cardId: string) => onCardSelect(cardId),\n    });\n  }, [openModal, onOpenAddCard, onCardSelect]);\n\n  const handleSelectCard = useCallback(\n    (cardId: string) => {\n      onCardSelect(cardId);\n      setIsExpanded(false);\n    },\n    [onCardSelect],\n  );\n\n  const handleAfterDelete = useCallback(\n    (card: Card) => {\n      if (card.id.toString() === selectedCardId.toString()) {\n        const remaining = cards.filter((c) => c.id !== card.id);\n        if (remaining.length > 0) {\n          onCardSelect(remaining[0].id.toString());\n        }\n      }\n    },\n    [cards, selectedCardId, onCardSelect],\n  );\n\n  if (!hasCards) {\n    return (\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n        <div className=\"flex items-center h-[60px] px-4 gap-3\">\n          <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n          <button\n            type=\"button\"\n            onClick={handleOpenAddCardModal}\n            className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n          >\n            <IconPlus className=\"size-[18px]\" />\n            <span className=\"px-1.5\">Adicionar cartão</span>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-3\">\n      <div className=\"border border-zinc-200 rounded-lg overflow-hidden\">\n        {email && (\n          <div className=\"flex items-center h-[60px] px-4 border-b border-zinc-200 gap-3\">\n            <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">E-mail</span>\n            <span className=\"paragraph-small-medium text-zinc-950 flex-1\">{email}</span>\n          </div>\n        )}\n\n        <div\n          className=\"flex items-center px-4 py-4 cursor-pointer gap-3\"\n          onClick={() => setIsExpanded((prev) => !prev)}\n        >\n          {!isExpanded ? (\n            <>\n              <span className=\"paragraph-small-medium text-zinc-500 w-[100px]\">Pagamento</span>\n              <div className=\"flex flex-col gap-0.5 flex-1 min-w-0\">\n                <span className=\"paragraph-small-semibold text-zinc-950 truncate\">\n                  {selectedCard?.name}\n                </span>\n                <span className=\"paragraph-small-medium text-zinc-950\">\n                  •••• {selectedCard?.number?.replaceAll(/\\D/g, '')?.slice(-4)}\n                </span>\n              </div>\n              {selectedCard && <CardBrandIcon brand={selectedCard.brand} />}\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500\" />\n              </div>\n            </>\n          ) : (\n            <>\n              <span className=\"paragraph-small-semibold text-zinc-950 flex-1\">\n                Selecione a forma de pagamento\n              </span>\n              <div className=\"size-8 flex items-center justify-center rounded-lg\">\n                <IconChevronDown className=\"size-[18px] text-zinc-500 rotate-180\" />\n              </div>\n            </>\n          )}\n        </div>\n\n        <div\n          className={`flex flex-col gap-2 px-4 overflow-hidden transition-all duration-300 ease-in-out ${\n            isExpanded ? 'max-h-[500px] pb-4 opacity-100' : 'max-h-0 pb-0 opacity-0'\n          }`}\n        >\n          {displayedCards.map((card) => (\n            <CardItem\n              key={card.id}\n              card={card}\n              isSelected={card.id.toString() === selectedCardId.toString()}\n              onSelect={() => handleSelectCard(card.id.toString())}\n              hideDelete={hideDelete || onlyOneCard}\n              hideSetDefault={hideSetDefault}\n              onAfterDelete={handleAfterDelete}\n            />\n          ))}\n          {shouldShowManageButton && onManageCards && (\n            <button\n              type=\"button\"\n              onClick={onManageCards}\n              className={`flex items-center justify-center h-10 px-4 paragraph-small-semibold rounded-lg transition-colors cursor-pointer mt-2 ${\n                isDefaultWl\n                  ? 'text-cyan-600 border border-cyan-200 hover:bg-cyan-50'\n                  : 'text-zinc-600 border border-zinc-200 hover:bg-zinc-50'\n              }`}\n            >\n              Gerenciar cartões\n            </button>\n          )}\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        onClick={handleOpenAddCardModal}\n        className=\"flex items-center h-8 px-2 paragraph-small-semibold text-zinc-950 border border-zinc-200 rounded-md hover:border-zinc-400 transition-colors cursor-pointer w-fit\"\n      >\n        <IconPlus className=\"size-[18px]\" />\n        <span className=\"px-1.5\">\n          {isExpanded ? 'Adicionar cartão' : 'Nova forma de pagamento'}\n        </span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -54,11 +54,14 @@ import { usePlanById } from "./modules/plans/hooks/use-plan-by-id.hook";
 import { useHasPlanAddon } from "./modules/plans/hooks/use-has-plan-addon.hook";
 import { useCalculateSubscription } from "./modules/subscriptions/hooks/calculate-subscription.hook";
 import { useUpdateSubscriptionPlan } from "./modules/subscriptions/hooks/update-subscription-plan.hook";
+import { useUpdateSubscriptionPayment } from "./modules/subscriptions/hooks/update-subscription-payment.hook";
 import { useCards, CARDS_QUERY_KEY } from "./modules/cards/hooks/cards.hook";
 import { useCardById } from "./modules/cards/hooks/card-by-id.hook";
 import { useCreateCard } from "./modules/cards/hooks/create-card.hook";
 import { useSetDefaultCard } from "./modules/cards/hooks/set-default-card.hook";
 import { useDeleteCard } from "./modules/cards/hooks/delete-card.hook";
+import { useDeleteConfirmation } from "./modules/cards/hooks/delete-confirmation.hook";
+import { useHandleDeleteCard } from "./modules/cards/hooks/handle-delete-card.hook";
 import { useIaCredits } from "./modules/ia-credits/hooks/ia-credits.hook";
 import {
   SubscriptionSchema,
@@ -97,6 +100,8 @@ import { usePaidPlanRequiredModal } from "./store/usePaidPlanRequiredModal";
 import { default as default2 } from "./components/modals/BuyCreditsModal";
 import { default as default3 } from "./components/modals/PaidPlanRequiredModal";
 import { default as default4 } from "./components/modals/cards/AddCardModal";
+import { DeleteCardModal } from "./components/modals/cards/DeleteCardModal";
+import { CannotDeleteCardModal } from "./components/modals/cards/CannotDeleteCardModal";
 import {
   CardFormFields,
   cardFormSchema
@@ -396,6 +401,7 @@ export {
   CalendarDayButton,
   default8 as CancelButton,
   CancelledSubscriptionBanner,
+  CannotDeleteCardModal,
   Card,
   CardAction,
   CardBrandIcon,
@@ -429,6 +435,7 @@ export {
   DatePicker,
   DateRangePicker,
   default10 as DefaultCircularProgress,
+  DeleteCardModal,
   Dialog,
   DialogClose,
   DialogContent,
@@ -623,8 +630,10 @@ export {
   useDeleteAccount,
   useDeleteAccountUser,
   useDeleteCard,
+  useDeleteConfirmation,
   useDeleteProject,
   useDesktopSidebarStore,
+  useHandleDeleteCard,
   useHasPlanAddon,
   useIaCredits,
   useImageUpload,
@@ -652,6 +661,7 @@ export {
   useUpdateAccountUser,
   useUpdateAccountUserById,
   useUpdateProject,
+  useUpdateSubscriptionPayment,
   useUpdateSubscriptionPlan,
   useUserQuery,
   useUserValidateSession,