@greatapps/common 1.1.565 → 1.1.567

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

@@ -0,0 +1,132 @@
+'use client';
+
+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';
+
+export 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 as string | undefined;
+  const onSuccess = modalData.onSuccess as (() => void) | undefined;
+
+  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) => (
+          <Toast
+            toastId={t}
+            variant="error"
+            message={
+              error instanceof Error
+                ? error.message
+                : 'Não foi possível excluir o cartão'
+            }
+          />
+        ),
+        { duration: 5000 },
+      );
+      return;
+    }
+
+    onSuccess?.();
+    resetConfirmation();
+    closeModal();
+
+    toast.custom(
+      (t) => (
+        <Toast
+          variant="success"
+          message={`O cartão •••• ${cardLastDigits} foi excluído com sucesso`}
+          toastId={t}
+        />
+      ),
+      { duration: 5000 },
+    );
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && handleClose()}>
+      <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">
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col">
+          <DialogHeader className="gap-4 text-left p-4 lg:p-5 pb-0 lg:pb-0">
+            <div className="flex items-center justify-center w-fit bg-red-50 rounded-lg p-2.5">
+              <IconTrash size={20} className="text-red-500" />
+            </div>
+            <div className="flex flex-col gap-2">
+              <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+                Excluir cartão
+              </DialogTitle>
+              <DialogDescription className="paragraph-small-regular text-zinc-600">
+                Deseja realmente excluir o cartão:{' '}
+                <span className="font-semibold text-zinc-950">
+                  •••• {cardLastDigits}
+                </span>
+                ?
+              </DialogDescription>
+            </div>
+          </DialogHeader>
+
+          <div className="px-4 lg:px-5 py-5">
+            <FormField
+              label="Digite EXCLUIR abaixo"
+              required
+              placeholder="EXCLUIR"
+              {...form.register('confirmText')}
+            />
+          </div>
+          <Separator />
+          <div className="flex flex-row items-center gap-2 p-4 lg:p-5">
+            <Button
+              type="submit"
+              disabled={!isValidConfirmation}
+              loading={form.formState.isSubmitting}
+              className="h-10!"
+            >
+              {form.formState.isSubmitting ? 'Excluindo...' : 'Excluir'}
+            </Button>
+            <Button
+              type="button"
+              variant="secondary"
+              className="h-10!"
+              onClick={handleClose}
+              disabled={form.formState.isSubmitting}
+            >
+              Cancelar
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/data-display/CardItem.tsx

@@ -1,10 +1,14 @@
 'use client';
 
 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';
 import type { Card } from '../../../modules/cards/types';
 
 type CardItemProps = {
@@ -12,24 +16,63 @@ type CardItemProps = {
   isSelected?: boolean;
   onSelect?: () => void;
   showMenu?: boolean;
-  canDelete?: boolean;
-  onDelete?: () => void;
+  hideDelete?: boolean;
+  hideSetDefault?: boolean;
+  onAfterDelete?: (card: Card) => void;
+  onAfterSetDefault?: (card: Card) => void;
 };
 
 export function CardItem({
   card,
   isSelected,
   onSelect,
-  showMenu = false,
-  canDelete = true,
-  onDelete,
+  showMenu = true,
+  hideDelete = false,
+  hideSetDefault = false,
+  onAfterDelete,
+  onAfterSetDefault,
 }: CardItemProps) {
   const [popoverOpen, setPopoverOpen] = useState(false);
 
+  const setDefaultCardMutation = useSetDefaultCard();
+
+  const handleDeleteCard = useHandleDeleteCard({ onAfterDelete });
+
+  const handleSetDefault = () => {
+    setDefaultCardMutation.mutate(card.id.toString(), {
+      onSuccess: () => {
+        toast.custom((t) => (
+          <Toast
+            variant="success"
+            message="Cartão definido como padrão"
+            toastId={t}
+          />
+        ));
+        onAfterSetDefault?.(card);
+      },
+      onError: () => {
+        toast.custom((t) => (
+          <Toast
+            variant="error"
+            message="Erro ao definir cartão padrão"
+            toastId={t}
+          />
+        ));
+      },
+    });
+  };
+
+  const menuHasSetDefault = !hideSetDefault && !card.is_default;
+  const menuHasDelete = !hideDelete;
+  const hasMenuItems = menuHasSetDefault || menuHasDelete;
+  const renderMenu = showMenu && hasMenuItems;
+
   return (
     <div
       className={`flex items-center p-4 cursor-pointer transition-colors gap-3 rounded-lg border ${
-        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200 hover:bg-zinc-50'
+        isSelected
+          ? 'bg-zinc-50 border-zinc-950'
+          : 'bg-white border-zinc-200 hover:bg-zinc-50'
       }`}
       onClick={onSelect}
     >
@@ -41,8 +84,13 @@ export function CardItem({
           •••• {(card.number ?? '').replaceAll(/\D/g, '').slice(-4)}
         </span>
       </div>
+      {card.is_default && (
+        <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-100 px-2 py-0.5 rounded-lg whitespace-nowrap">
+          Padrão
+        </span>
+      )}
       <CardBrandIcon brand={card.brand} />
-      {showMenu && (
+      {renderMenu && (
         <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
           <PopoverTrigger asChild>
             <button
@@ -54,16 +102,26 @@ export function CardItem({
           </PopoverTrigger>
           <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()}
           >
-            {canDelete && (
+            {menuHasSetDefault && (
+              <NavBarItem
+                icon={<IconStar size={18} className="text-zinc-400" />}
+                label="Tornar padrão"
+                onClick={() => {
+                  setPopoverOpen(false);
+                  handleSetDefault();
+                }}
+              />
+            )}
+            {menuHasDelete && (
               <NavBarItem
-                icon={<IconTrash size={20} className="text-zinc-400" />}
+                icon={<IconTrash size={18} className="text-zinc-400" />}
                 label="Excluir"
                 onClick={() => {
                   setPopoverOpen(false);
-                  onDelete?.();
+                  handleDeleteCard(card);
                 }}
               />
             )}

package/src/components/ui/data-display/PaymentInfoCard.tsx

@@ -1,11 +1,11 @@
 'use client';
 
+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';
 import type { Card } from '../../../modules/cards/types';
@@ -16,6 +16,8 @@ type PaymentInfoCardProps = {
   onCardSelect: (cardId: string) => void;
   onManageCards?: () => void;
   onOpenAddCard?: () => void;
+  hideDelete?: boolean;
+  hideSetDefault?: boolean;
 };
 
 export function PaymentInfoCard({
@@ -24,6 +26,8 @@ export function PaymentInfoCard({
   onCardSelect,
   onManageCards,
   onOpenAddCard,
+  hideDelete,
+  hideSetDefault,
 }: PaymentInfoCardProps) {
   const isMobile = useIsMobile();
   const { openModal } = useModalManager();
@@ -34,9 +38,11 @@ export function PaymentInfoCard({
   const { data: cardsData } = useCards();
   const cards = cardsData?.data ?? [];
 
-  const selectedCard = cards.find((card) => card.id.toString() === selectedCardId.toString());
+  const selectedCard = cards.find(
+    (card) => card.id.toString() === selectedCardId.toString(),
+  );
 
-  const canDeleteCards = cards.length > 1;
+  const onlyOneCard = cards.length <= 1;
   const hasCards = cards.length > 0;
 
   const hasMoreThan3Cards = cards.length > 3;
@@ -53,32 +59,24 @@ export function PaymentInfoCard({
     });
   }, [openModal, onOpenAddCard, onCardSelect]);
 
-  const handleDeleteCard = useCallback(
-    (card: 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: string) => {
       onCardSelect(cardId);
       setIsExpanded(false);
     },
-    [onCardSelect]
+    [onCardSelect],
+  );
+
+  const handleAfterDelete = useCallback(
+    (card: 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) {
@@ -123,7 +121,9 @@ export function PaymentInfoCard({
             <>
               <span className="paragraph-small-medium text-zinc-500 w-[100px]">Pagamento</span>
               <div className="flex flex-col gap-0.5 flex-1 min-w-0">
-                <span className="paragraph-small-semibold text-zinc-950 truncate">{selectedCard?.name}</span>
+                <span className="paragraph-small-semibold text-zinc-950 truncate">
+                  {selectedCard?.name}
+                </span>
                 <span className="paragraph-small-medium text-zinc-950">
                   •••• {selectedCard?.number?.replaceAll(/\D/g, '')?.slice(-4)}
                 </span>
@@ -156,9 +156,9 @@ export function PaymentInfoCard({
               card={card}
               isSelected={card.id.toString() === selectedCardId.toString()}
               onSelect={() => handleSelectCard(card.id.toString())}
-              showMenu
-              canDelete={canDeleteCards}
-              onDelete={() => handleDeleteCard(card)}
+              hideDelete={hideDelete || onlyOneCard}
+              hideSetDefault={hideSetDefault}
+              onAfterDelete={handleAfterDelete}
             />
           ))}
           {shouldShowManageButton && onManageCards && (

package/src/index.ts

@@ -73,11 +73,15 @@ export { usePlanById } from "./modules/plans/hooks/use-plan-by-id.hook";
 export { useHasPlanAddon } from "./modules/plans/hooks/use-has-plan-addon.hook";
 export { useCalculateSubscription } from "./modules/subscriptions/hooks/calculate-subscription.hook";
 export { useUpdateSubscriptionPlan } from "./modules/subscriptions/hooks/update-subscription-plan.hook";
+export { useUpdateSubscriptionPayment } from "./modules/subscriptions/hooks/update-subscription-payment.hook";
 export { useCards, CARDS_QUERY_KEY } from "./modules/cards/hooks/cards.hook";
 export { useCardById } from "./modules/cards/hooks/card-by-id.hook";
 export { useCreateCard } from "./modules/cards/hooks/create-card.hook";
 export { useSetDefaultCard } from "./modules/cards/hooks/set-default-card.hook";
 export { useDeleteCard } from "./modules/cards/hooks/delete-card.hook";
+export { useDeleteConfirmation } from "./modules/cards/hooks/delete-confirmation.hook";
+export type { DeleteConfirmationFormData } from "./modules/cards/hooks/delete-confirmation.hook";
+export { useHandleDeleteCard } from "./modules/cards/hooks/handle-delete-card.hook";
 export { useIaCredits } from "./modules/ia-credits/hooks/ia-credits.hook";
 export type {
   IaCreditsSummary,
@@ -150,6 +154,8 @@ export { usePaidPlanRequiredModal } from "./store/usePaidPlanRequiredModal";
 export { default as BuyCreditsModal } from "./components/modals/BuyCreditsModal";
 export { default as PaidPlanRequiredModal } from "./components/modals/PaidPlanRequiredModal";
 export { default as AddCardModal } from "./components/modals/cards/AddCardModal";
+export { DeleteCardModal } from "./components/modals/cards/DeleteCardModal";
+export { CannotDeleteCardModal } from "./components/modals/cards/CannotDeleteCardModal";
 export {
   CardFormFields,
   cardFormSchema,

package/src/modules/cards/hooks/delete-confirmation.hook.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import z from 'zod';
+
+type UseDeleteConfirmationProps = {
+  confirmWord?: string;
+};
+
+function createDeleteConfirmationSchema(confirmWord: string) {
+  return z.object({
+    confirmText: z.string().refine((val) => val === confirmWord, {
+      message: `Digite ${confirmWord} para confirmar`,
+    }),
+  });
+}
+
+export type DeleteConfirmationFormData = z.infer<
+  ReturnType<typeof createDeleteConfirmationSchema>
+>;
+
+export function useDeleteConfirmation({
+  confirmWord = 'EXCLUIR',
+}: UseDeleteConfirmationProps = {}) {
+  const schema = createDeleteConfirmationSchema(confirmWord);
+
+  const form = useForm<DeleteConfirmationFormData>({
+    resolver: zodResolver(schema),
+    defaultValues: { confirmText: '' },
+  });
+
+  const confirmText = form.watch('confirmText');
+  const isValidConfirmation = confirmText === confirmWord;
+
+  const resetConfirmation = useCallback(() => {
+    form.reset({ confirmText: '' });
+  }, [form]);
+
+  return { form, confirmText, isValidConfirmation, resetConfirmation };
+}

package/src/modules/cards/hooks/handle-delete-card.hook.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useModalManager } from '../../../store/useModalManager';
+import { useActiveSubscription } from '../../subscriptions/hooks/find-active-subscription.hook';
+import type { Card } from '../types';
+
+type UseHandleDeleteCardOptions = {
+  onAfterDelete?: (card: Card) => void;
+};
+
+export function useHandleDeleteCard({
+  onAfterDelete,
+}: UseHandleDeleteCardOptions = {}) {
+  const { openModal } = useModalManager();
+  const { data: subscriptionData } = useActiveSubscription();
+  const activeSubscription = subscriptionData?.data?.[0] ?? null;
+
+  return useCallback(
+    (card: Card) => {
+      const isCardLinkedToSubscription =
+        !!activeSubscription &&
+        !!activeSubscription.date_cancellation &&
+        (!activeSubscription.date_due ||
+          activeSubscription.date_due < new Date()) &&
+        card.id.toString() === activeSubscription.id_card?.toString();
+
+      if (isCardLinkedToSubscription) {
+        openModal('cannotDeleteCardModal', {
+          cardId: card.id.toString(),
+        });
+        return;
+      }
+
+      openModal('deleteCardModal', {
+        cardId: card.id.toString(),
+        ...(onAfterDelete && { onSuccess: () => onAfterDelete(card) }),
+      });
+    },
+    [activeSubscription, openModal, onAfterDelete],
+  );
+}

package/src/modules/subscriptions/actions/update-subscription-payment.action.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { safeMutationAction } from "../../../utils/safeMutationAction";
+import { subscriptionsService } from "../services/subscriptions.service";
+
+export async function updateSubscriptionPaymentAction(
+  subscriptionId: number | string,
+  data: { id_card: string; payment_method: number },
+) {
+  return safeMutationAction(async () => {
+    return subscriptionsService.updateSubscriptionPayment(subscriptionId, data);
+  });
+}

package/src/modules/subscriptions/hooks/update-subscription-payment.hook.ts

@@ -0,0 +1,25 @@
+'use client';
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { withAction } from '../../../utils/withAction';
+import { updateSubscriptionPaymentAction } from '../actions/update-subscription-payment.action';
+import { SUBSCRIPTIONS_QUERY_KEY } from '../constants/query-keys.constants';
+import { useAuthQueryKey } from '../../../hooks/useAuthQueryKey';
+
+export function useUpdateSubscriptionPayment() {
+  const queryClient = useQueryClient();
+  const subscriptionsKey = useAuthQueryKey([...SUBSCRIPTIONS_QUERY_KEY]);
+
+  return useMutation({
+    mutationFn: ({
+      subscriptionId,
+      data,
+    }: {
+      subscriptionId: number | string;
+      data: { id_card: string; payment_method: number };
+    }) => withAction(updateSubscriptionPaymentAction)(subscriptionId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: subscriptionsKey });
+    },
+  });
+}

package/src/modules/subscriptions/services/subscriptions.service.ts

@@ -104,6 +104,29 @@ class SubscriptionsService {
 
     return { success: true };
   }
+
+  async updateSubscriptionPayment(
+    subscriptionId: number | string,
+    data: { id_card: string; payment_method: number },
+  ): Promise<SuccessResult<void>> {
+    await assertManagementPermission("manage_subscriptions");
+    const { id_account } = await getUserContext();
+
+    const response = await api.apps.put<ApiActionResult<void>>(
+      `/accounts/${id_account}/subscriptions/${subscriptionId}/action/payment`,
+      data,
+    );
+
+    if (response.status === 0) {
+      throw new ApiError(
+        response.message || "Erro ao atualizar método de pagamento",
+        "UPDATE_SUBSCRIPTION_PAYMENT_FAILED",
+        400,
+      );
+    }
+
+    return { success: true };
+  }
 }
 
 export const subscriptionsService = new SubscriptionsService();

package/src/modules/subscriptions/types/subscription.type.ts

@@ -36,7 +36,7 @@ export const SubscriptionSchema = z.object({
   periodicity: z.coerce.number().nullable(),
   value: z.number().nullable(),
   id_product: z.number(),
-  id_plan: z.number(),
+  id_plan: z.number().nullable(),
   plan_name: z.string().nullable().optional(),
   id_gateway: z.union([z.number(), z.string()]).nullable(),
   gateway_account: z.string().nullable(),

package/src/server.ts

@@ -27,6 +27,7 @@ export { findPlanByIdAction } from './modules/plans/actions/find-plan-by-id.acti
 export { listPlansAction } from './modules/plans/actions/list-plans.action';
 export { calculateSubscriptionAction } from './modules/subscriptions/actions/calculate-subscription.action';
 export { updateSubscriptionPlanAction } from './modules/subscriptions/actions/update-subscription-plan.action';
+export { updateSubscriptionPaymentAction } from './modules/subscriptions/actions/update-subscription-payment.action';
 export { listCardsAction } from './modules/cards/actions/list-cards.action';
 export { createCardAction } from './modules/cards/actions/create-card.action';
 export { resolvePlanExtrasPrices } from './modules/subscriptions/utils/resolve-plan-extras-prices';