@greatapps/common 1.1.790 → 1.1.791

package/src/components/modals/AccountFrozenModal.tsx

@@ -18,9 +18,11 @@ import {
     DialogTitle,
 } from '../ui/overlay/Dialog';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
-import { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';
+import { useExternalContracting } from '../../providers/whitelabel.provider';
 import { useModalManager } from '../../store/useModalManager';
 import { formatShortDate } from '../../infra/utils/date';
+import { WorkspaceSectionType } from '../../enums/WorkspaceSectionType';
+import useAccountHubActions from '../account/hooks/useAccountHubActions';
 
 const RESOURCE_GROUPS = [
     {
@@ -53,8 +55,8 @@ export default function AccountFrozenModal() {
     const translate = useTranslations();
     const { activeModal, closeModal, modalData } = useModalManager();
     const isOpen = activeModal === 'accountFrozenModal';
-    const { accountsUrl } = useWhitelabelUrls();
     const { redirectToExternal } = useExternalContracting();
+    const { openSection } = useAccountHubActions();
 
     const data = modalData as FrozenModalData | undefined;
     const freezeDate = data?.freezeDate ?? null;
@@ -81,7 +83,8 @@ export default function AccountFrozenModal() {
 
     const handleRegularize = () => {
         if (redirectToExternal('plans')) return;
-        window.location.href = `${accountsUrl}/subscriptions`;
+        closeModal();
+        openSection(WorkspaceSectionType.SUBSCRIPTION);
     };
 
     return (

package/src/components/modals/Modals.tsx

@@ -4,17 +4,20 @@ import { ComponentType, useEffect } from 'react';
 import AccountModals from '../account/AccountModals';
 import { ModalManager } from './ModalManager';
 import { useAccountModals } from '../../store/useAccountModals';
+import type { WorkspaceActions } from '../account/types/workspace-actions.type';
 interface ModalsProps {
   registry: Record<string, ComponentType>;
   onGoToSubscription?: () => void;
+  /** Fluxos do app usados pelas abas do modal Minha conta (ver `WorkspaceActions`). */
+  workspaceActions?: WorkspaceActions;
 }
 
-export function Modals({ registry, onGoToSubscription }: ModalsProps) {
+export function Modals({ registry, onGoToSubscription, workspaceActions }: ModalsProps) {
   const { updateConfig } = useAccountModals();
 
   useEffect(() => {
-    updateConfig({ onGoToSubscription });
-  }, [onGoToSubscription, updateConfig]);
+    updateConfig({ onGoToSubscription, workspaceActions });
+  }, [onGoToSubscription, workspaceActions, updateConfig]);
 
   return (
     <>

package/src/components/modals/PaidPlanRequiredModal.tsx

@@ -10,24 +10,23 @@ import {
     DialogHeader,
     DialogTitle,
 } from '../ui/overlay/Dialog';
-import { useWhitelabelUrls, useExternalContracting } from '../../providers/whitelabel.provider';
 import { useModalManager } from '../../store/useModalManager';
 import type { ModalData } from '../../store/useModalManager';
+import useAccountHubActions from '../account/hooks/useAccountHubActions';
 
 export default function PaidPlanRequiredModal() {
     const translate = useTranslations();
     const { activeModal, modalData, closeModal } = useModalManager();
     const isOpen = activeModal === 'paidPlanRequiredModal';
     const data = modalData as ModalData & { title?: string; description?: string };
-    const { accountsUrl } = useWhitelabelUrls();
-    const { redirectToExternal } = useExternalContracting();
+    const { openPlansCatalog } = useAccountHubActions();
 
     const title = (data.title as string) ?? translate('common.credits.paidPlanRequired.defaultTitle');
     const description = (data.description as string) ?? translate('common.credits.paidPlanRequired.defaultDescription');
 
     const handleKnowPlans = () => {
-        if (redirectToExternal('plans')) return;
-        window.location.href = `${accountsUrl}/subscriptions?tab=plans`;
+        closeModal();
+        openPlansCatalog();
     };
 
     return (

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

@@ -0,0 +1,72 @@
+'use client';
+
+import { IconAlertTriangle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog';
+import { useAddCardWithPaymentSwitch } from '../../account/hooks/useAddCardWithPaymentSwitch';
+import { useModalManager } from '../../../store/useModalManager';
+
+/** Primeiro cartão da conta: avisa que ele passa a ser a forma de pagamento da assinatura. */
+export default function AddFirstCardWarningModal() {
+  const translate = useTranslations();
+  const translateModal = useTranslations('common.account.workspace.subscription.addFirstCard');
+  const { activeModal, closeModal } = useModalManager();
+  const { openAddCard } = useAddCardWithPaymentSwitch();
+
+  const open = activeModal === 'addFirstCardWarningModal';
+
+  const handleContinue = () => {
+    closeModal();
+    openAddCard();
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) closeModal();
+      }}
+    >
+      <DialogContent
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className="flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)] duration-0!"
+      >
+        <DialogHeader className="gap-3 text-left p-5">
+          <div className="flex items-center justify-center w-10 h-10 bg-zinc-100 rounded-lg">
+            <IconAlertTriangle size={20} className="text-zinc-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translateModal('title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
+              <div className="flex flex-col gap-3">
+                <p>{translateModal('description1')}</p>
+                <p>{translateModal('description2')}</p>
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button className="h-10! transition-colors" onClick={handleContinue}>
+            {translateModal('continue')}
+          </Button>
+          <Button variant="secondary" className="h-10! transition-colors" onClick={closeModal}>
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,232 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { IconCheck, IconCreditCard } from '@tabler/icons-react';
+import { useStripe } from '@stripe/react-stripe-js';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../ui/buttons/Button';
+import { Separator } from '../../ui/data-display/Separator';
+import { Toast } from '../../ui/feedback/Toast';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useUpdateSubscriptionPayment } from '../../../modules/subscriptions/hooks/update-subscription-payment.hook';
+import {
+  confirmPaymentIfRequired,
+  PaymentAuthenticationError,
+} from '../../../modules/subscriptions/utils/confirm-payment-if-required';
+import { useModalManager } from '../../../store/useModalManager';
+
+/**
+ * Pergunta, logo depois do cadastro do cartão, se a assinatura passa a ser cobrada nele.
+ *
+ * Cadastrar cartão e trocar a forma de pagamento eram passos separados que o cliente tinha de
+ * descobrir sozinho: o cartão entrava, a conta seguia em boleto/pix (ou no cartão problemático)
+ * e a cobrança seguinte falhava de novo. A lista do "o que vai mudar" sai do estado real da
+ * conta — confirmação genérica vira um sim às cegas.
+ */
+export default function SwitchPaymentToCardModal() {
+  const translate = useTranslations('common.account.workspace.subscription.switchPaymentToCard');
+  const stripe = useStripe();
+  const { activeModal, modalData, closeModal } = useModalManager();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const { mutateAsync: updatePayment } = useUpdateSubscriptionPayment();
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  const open = activeModal === 'switchPaymentToCardModal';
+
+  const cardId = modalData.cardId as string | undefined;
+  const subscriptionId = modalData.subscriptionId as string | number | undefined;
+  const currentPaymentMethod = modalData.currentPaymentMethod as number | null | undefined;
+  const previousCardsCount = (modalData.previousCardsCount as number | undefined) ?? 0;
+
+  const isChangingMethod = currentPaymentMethod === 2 || currentPaymentMethod === 3;
+  const methodName = translate(currentPaymentMethod === 3 ? 'methodPix' : 'methodBoleto');
+
+  const handleConfirm = useCallback(async () => {
+    if (!cardId || subscriptionId == null) return;
+
+    // Sem Stripe carregado não há como concluir um desafio, e `confirmPaymentIfRequired` viraria
+    // no-op silencioso — a tela anunciaria pagamento aprovado sem ninguém ter autenticado nada.
+    if (!stripe) {
+      toast.custom(
+        (toastId) => <Toast variant="error" message={translate('errorToast')} toastId={toastId} />,
+        { duration: 5000 }
+      );
+      return;
+    }
+
+    setIsSwitching(true);
+    try {
+      const result = await updatePayment({
+        subscriptionId,
+        data: { payment_method: 1, id_card: cardId, charge_now: true },
+      });
+
+      // A troca não foi aplicada: há pagamento pendente travando a assinatura e o backend devolve
+      // o desafio em vez de trocar. Concluir o 3DS destrava, mas a troca ainda não aconteceu.
+      if (result.applied === false) {
+        if (result.client_secret) {
+          await confirmPaymentIfRequired(
+            stripe,
+            { client_secret: result.client_secret },
+            translate('authError')
+          );
+        }
+        closeModal();
+        toast.custom(
+          (toastId) => (
+            <Toast variant="warning" message={translate('pendingBlocked')} toastId={toastId} />
+          ),
+          { duration: 8000 }
+        );
+        return;
+      }
+
+      // O desfecho sai do `outcome`: ler um booleano capturado ANTES do desafio anunciava falha
+      // para pagamento que tinha acabado de completar.
+      let outcome = result.charge_now?.outcome ?? 'none';
+
+      if (outcome === 'requires_action' && result.charge_now?.client_secret) {
+        // `confirmPaymentIfRequired` só retorna sem lançar quando o pagamento foi capturado.
+        await confirmPaymentIfRequired(
+          stripe,
+          { client_secret: result.charge_now.client_secret },
+          translate('authError')
+        );
+        outcome = 'charged';
+      }
+
+      closeModal();
+
+      // Troca e cobrança têm desfechos independentes: anunciar só "tudo certo" esconderia uma
+      // fatura que continua aberta.
+      if (outcome === 'declined') {
+        toast.custom(
+          (toastId) => (
+            <Toast variant="warning" message={translate('switchedChargeFailed')} toastId={toastId} />
+          ),
+          { duration: 8000 }
+        );
+        return;
+      }
+
+      const amount = result.charge_now?.amount;
+      const successMessage =
+        outcome === 'charged' && typeof amount === 'number'
+          ? translate('successWithCharge', { value: formatCurrencyNumber(amount / 100) })
+          : translate('successToast');
+
+      toast.custom(
+        (toastId) => <Toast variant="success" message={successMessage} toastId={toastId} />,
+        { duration: 5000 }
+      );
+    } catch (error) {
+      // Falha de autenticação e falha de API têm causas diferentes: no 3DS a troca já aconteceu
+      // e só o pagamento ficou pendente.
+      const isAuthFailure = error instanceof PaymentAuthenticationError;
+      const message =
+        error instanceof Error && error.message ? error.message : translate('errorToast');
+
+      toast.custom(
+        (toastId) => (
+          <Toast
+            variant={isAuthFailure ? 'warning' : 'error'}
+            message={message}
+            toastId={toastId}
+          />
+        ),
+        { duration: isAuthFailure ? 8000 : 5000 }
+      );
+    } finally {
+      setIsSwitching(false);
+    }
+  }, [
+    cardId,
+    subscriptionId,
+    updatePayment,
+    stripe,
+    translate,
+    closeModal,
+    formatCurrencyNumber,
+  ]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(nextOpen) => {
+        if (!nextOpen) closeModal();
+      }}
+    >
+      <DialogContent
+        onOpenAutoFocus={(event) => event.preventDefault()}
+        className="flex flex-col p-0 gap-0 md:w-[410px]! lg:w-[410px]! max-w-[410px]! max-[410px]:w-[calc(100%-32px)]"
+      >
+        <DialogHeader className="gap-3 text-left p-5">
+          <div className="flex items-center justify-center w-10 h-10 bg-zinc-100 rounded-lg">
+            <IconCreditCard size={20} className="text-zinc-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
+              <div className="flex flex-col gap-3">
+                <p>{previousCardsCount === 0 ? translate('introFirstCard') : translate('intro')}</p>
+
+                <ul className="flex flex-col gap-2">
+                  {isChangingMethod && (
+                    <li className="flex items-start gap-2">
+                      <IconCheck size={16} className="text-zinc-950 mt-0.5 shrink-0" />
+                      <span>{translate('changeMethod', { method: methodName })}</span>
+                    </li>
+                  )}
+                  <li className="flex items-start gap-2">
+                    <IconCheck size={16} className="text-zinc-950 mt-0.5 shrink-0" />
+                    <span>{translate('changeDefault')}</span>
+                  </li>
+                  {/* Sem valor previsto: a consulta que alimentava a previsão era da conta
+                      inteira e incluía rascunho, então o modal anunciava um valor e a API cobrava
+                      outro. O valor cobrado vai no toast, vindo do `outcome`. */}
+                  <li className="flex items-start gap-2">
+                    <IconCheck size={16} className="text-zinc-950 mt-0.5 shrink-0" />
+                    <span>{translate('chargeNow')}</span>
+                  </li>
+                </ul>
+
+                <p>{translate('declineHint')}</p>
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button
+            className="h-10! transition-colors"
+            onClick={handleConfirm}
+            disabled={isSwitching}
+            loading={isSwitching}
+          >
+            {translate('confirm')}
+          </Button>
+          <Button
+            variant="secondary"
+            className="h-10! transition-colors"
+            onClick={closeModal}
+            disabled={isSwitching}
+          >
+            {translate('decline')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/modals/promo/AiCreditsOfferModal/AiCreditsOfferModal.tsx

@@ -9,7 +9,8 @@ import { Button } from '../../../ui/buttons/Button';
 import { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';
 import { Toast } from '../../../ui/feedback/Toast';
 import { useAuth } from '../../../../providers/auth.provider';
-import { useWhitelabel, useWhitelabelUrls } from '../../../../providers/whitelabel.provider';
+import { useWhitelabel } from '../../../../providers/whitelabel.provider';
+import useAccountHubActions from '../../../account/hooks/useAccountHubActions';
 import { useActiveSubscription } from '../../../../modules/subscriptions/hooks/find-active-subscription.hook';
 import { useCards } from '../../../../modules/cards/hooks/cards.hook';
 import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
@@ -92,7 +93,7 @@ export default function AiCreditsOfferModal() {
   const { openModal } = useModalManager();
   const { user } = useAuth();
   const { whitelabel } = useWhitelabel();
-  const { accountsUrl } = useWhitelabelUrls();
+  const { openPlansCatalog } = useAccountHubActions();
   const { formatCurrencyNumber } = useCurrencyFormatter();
 
   const [confirmingExit, setConfirmingExit] = useState(false);
@@ -151,7 +152,7 @@ export default function AiCreditsOfferModal() {
       // de virar um botão morto.
       if (subscriptionId == null) {
         closeModal();
-        window.location.assign(`${accountsUrl}/subscriptions?tab=plans`);
+        openPlansCatalog();
         return;
       }
 
@@ -221,11 +222,11 @@ export default function AiCreditsOfferModal() {
     },
     [
       accountId,
-      accountsUrl,
       closeModal,
       creditsLabel,
       dismiss,
       eligibility.data?.sessionIssuedAt,
+      openPlansCatalog,
       purchaseMutation,
       stripe,
       subscriptionId,

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

@@ -7,6 +7,7 @@ import { Popover, PopoverContent, PopoverTrigger } from '../overlay/Popover';
 import { NavBarItem } from '../../layouts/NavBarItem';
 import { Toast } from '../feedback/Toast';
 import { CardBrandIcon } from './CardBrandIcons';
+import { cn } from '../../../infra/utils/clsx';
 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';
@@ -75,11 +76,14 @@ export function CardItem({
 
   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'
-      }`}
+      className={cn(
+        'flex items-center p-4 transition-colors gap-3 rounded-lg border',
+        // Sem `onSelect` a linha não faz nada no clique (lista de gerenciar cartões):
+        // só o botão de três pontinhos age ali, então nem mãozinha nem hover.
+        onSelect && 'cursor-pointer',
+        isSelected ? 'bg-zinc-50 border-zinc-950' : 'bg-white border-zinc-200',
+        !isSelected && onSelect && 'hover:bg-zinc-50'
+      )}
       onClick={onSelect}
     >
       <div className="flex flex-col gap-0.5 flex-1 min-w-0">

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

@@ -0,0 +1,43 @@
+type PaymentMethodIconProps = {
+  className?: string;
+};
+
+export function PixIcon({ className }: PaymentMethodIconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M4.67762 6.40663L6.72547 6.40663C7.18162 6.40663 7.61803 6.59275 7.93377 6.92196L9.41592 8.4673C9.74782 8.81335 10.302 8.81045 10.6303 8.46094L12.0637 6.93469C12.3801 6.59774 12.8218 6.40663 13.2841 6.40663L15.1948 6.40663M15.3513 13.6115H13.2901C12.8243 13.6115 12.3797 13.4175 12.0629 13.0762L10.6318 11.5342C10.3028 11.1796 9.74254 11.1769 9.41011 11.5284L7.93498 13.0878C7.61875 13.4221 7.17887 13.6115 6.71871 13.6115H4.69301M2.67766 11.6375L8.36188 17.3217C9.26641 18.2262 10.7329 18.2262 11.6375 17.3217L17.3217 11.6375C18.2262 10.733 18.2262 9.26644 17.3217 8.36191L11.6375 2.67769C10.7329 1.77317 9.26641 1.77317 8.36188 2.67769L2.67766 8.36191C1.77314 9.26644 1.77314 10.733 2.67766 11.6375Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+      />
+    </svg>
+  );
+}
+
+export function BoletoIcon({ className }: PaymentMethodIconProps) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M5.73921 4V15.4M14.2617 4.6V16M8.51539 4V16M3.01172 4V11.8M16.9892 8.2V16M3.01172 15.4V16M16.9892 4V4.6M11.3395 4V16"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}