@greatapps/common 1.1.695 → 1.1.697

package/src/components/modals/cards/CannotDeleteCardModal.tsx

@@ -1,124 +1,124 @@
-'use client';
-
-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';
-import type { Card } from '../../../modules/cards/types';
-import { useTranslations } from 'next-intl';
-
-export function CannotDeleteCardModal() {
-  const translate = useTranslations();
-  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 as string | undefined;
-
-  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: 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) => (
-            <Toast
-              variant="error"
-              message={
-                error instanceof Error
-                  ? error.message
-                  : translate('common.cards.cannotDelete.errorUpdateCard')
-              }
-              toastId={t}
-            />
-          ),
-          { duration: 5000 },
-        );
-      }
-    },
-    [updatePayment, activeSubscription, closeModal, openModal, cardToDelete],
-  );
-
-  const handleAddCard = useCallback(() => {
-    closeModal();
-    openModal('addCardModal', { showDefaultToggle: true });
-  }, [openModal, closeModal]);
-
-  return (
-    <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
-      <DialogTitle className="sr-only">
-        {translate('common.cards.cannotDelete.title')}
-      </DialogTitle>
-      <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">
-        <div className="flex flex-col gap-5 p-4 lg:p-5">
-          <div className="flex items-center justify-center size-10 bg-red-50 rounded-lg">
-            <IconAlertTriangle className="size-6 text-red-500" />
-          </div>
-
-          <div className="flex flex-col gap-2">
-            <h2 className="paragraph-medium-semibold text-zinc-950">
-              {translate('common.cards.cannotDelete.title')}
-            </h2>
-            <p className="paragraph-small-regular text-zinc-600">
-              {translate('common.cards.cannotDelete.description')}
-            </p>
-          </div>
-        </div>
-
-        {availableCards.length > 0 && (
-          <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">
-            <span className="paragraph-xsmall-semibold text-zinc-600">
-              {translate('common.cards.cannotDelete.selectDefault')}
-            </span>
-            {availableCards.map((card) => (
-              <CardItem
-                key={card.id}
-                card={card}
-                onSelect={() => handleSelectCard(card)}
-                showMenu={false}
-              />
-            ))}
-          </div>
-        )}
-
-        <div className="flex flex-row gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0">
-          <Button onClick={handleAddCard} className="h-10! flex-1">
-            <IconPlus size={20} />
-            {translate('common.cards.cannotDelete.addNewCard')}
-          </Button>
-          <Button
-            variant="secondary"
-            onClick={() => closeModal()}
-            className="h-10! flex-1"
-          >
-            {translate('common.actions.cancel')}
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
+'use client';
+
+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';
+import type { Card } from '../../../modules/cards/types';
+import { useTranslations } from 'next-intl';
+
+export function CannotDeleteCardModal() {
+  const translate = useTranslations();
+  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 as string | undefined;
+
+  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: 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) => (
+            <Toast
+              variant="error"
+              message={
+                error instanceof Error
+                  ? error.message
+                  : translate('common.cards.cannotDelete.errorUpdateCard')
+              }
+              toastId={t}
+            />
+          ),
+          { duration: 5000 },
+        );
+      }
+    },
+    [updatePayment, activeSubscription, closeModal, openModal, cardToDelete],
+  );
+
+  const handleAddCard = useCallback(() => {
+    closeModal();
+    openModal('addCardModal', { showDefaultToggle: true });
+  }, [openModal, closeModal]);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
+      <DialogTitle className="sr-only">
+        {translate('common.cards.cannotDelete.title')}
+      </DialogTitle>
+      <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">
+        <div className="flex flex-col gap-5 p-4 lg:p-5">
+          <div className="flex items-center justify-center size-10 bg-red-50 rounded-lg">
+            <IconAlertTriangle className="size-6 text-red-500" />
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <h2 className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.cards.cannotDelete.title')}
+            </h2>
+            <p className="paragraph-small-regular text-zinc-600">
+              {translate('common.cards.cannotDelete.description')}
+            </p>
+          </div>
+        </div>
+
+        {availableCards.length > 0 && (
+          <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">
+            <span className="paragraph-xsmall-semibold text-zinc-600">
+              {translate('common.cards.cannotDelete.selectDefault')}
+            </span>
+            {availableCards.map((card) => (
+              <CardItem
+                key={card.id}
+                card={card}
+                onSelect={() => handleSelectCard(card)}
+                showMenu={false}
+              />
+            ))}
+          </div>
+        )}
+
+        <div className="flex flex-row gap-2 p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0">
+          <Button onClick={handleAddCard} className="h-10! flex-1">
+            <IconPlus size={20} />
+            {translate('common.cards.cannotDelete.addNewCard')}
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => closeModal()}
+            className="h-10! flex-1"
+          >
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}