@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/subscription/ManageCardsSheet.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import { IconPlus } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { CardItem } from '../../../ui/data-display/CardItem';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useCards } from '../../../../modules/cards/hooks/cards.hook';
+
+type ManageCardsSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAddCard: () => void;
+};
+
+export function ManageCardsSheet({ open, onOpenChange, onAddCard }: ManageCardsSheetProps) {
+  const translate = useTranslations();
+  const isMobile = useIsMobile();
+  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });
+  const cards = data?.data ?? [];
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange} modal>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        className={cn(
+          'flex flex-col gap-0 p-0',
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'w-[480px]! sm:max-w-[480px]!'
+        )}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <SheetHeader className="px-5 py-3 border-b border-zinc-200">
+          <SheetTitle className="paragraph-medium-semibold text-zinc-950">
+            {translate('common.account.workspace.subscription.paymentInfo.manageTitle')}
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-6 p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+          {isLoading && (
+            <div className="flex flex-col gap-3">
+              {Array.from({ length: 3 }).map((_, index) => (
+                <Skeleton key={index} className="h-[74px] w-full rounded-lg" />
+              ))}
+            </div>
+          )}
+
+          {!isLoading && isError && (
+            <div className="flex flex-col items-center justify-center py-8 gap-3">
+              <span className="paragraph-small-regular text-zinc-600">
+                {translate('common.account.workspace.subscription.paymentInfo.loadFailed')}
+              </span>
+              <Button variant="secondary" className="h-10!" onClick={() => refetch()}>
+                {translate('common.account.workspace.subscription.paymentInfo.retry')}
+              </Button>
+            </div>
+          )}
+
+          {!isLoading && !isError && cards.length === 0 && (
+            <div className="flex items-center justify-center py-8">
+              <span className="paragraph-small-regular text-zinc-600">
+                {translate('common.account.workspace.subscription.paymentInfo.noCards')}
+              </span>
+            </div>
+          )}
+
+          {!isLoading && !isError && cards.length > 0 && (
+            <div className="flex flex-col gap-3">
+              {cards.map((card) => (
+                <CardItem key={card.id} card={card} hideDelete={cards.length <= 1} />
+              ))}
+            </div>
+          )}
+
+          <Button variant="secondary" className="w-fit h-10!" onClick={onAddCard}>
+            <IconPlus size={20} />
+            {translate('common.cards.paymentInfo.addCard')}
+          </Button>
+        </div>
+
+        <SheetFooter className="flex-row items-center justify-end p-5 border-t border-zinc-200">
+          <Button variant="secondary" className="h-10!" onClick={() => onOpenChange(false)}>
+            {translate('common.actions.close')}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/account/sections/subscription/OverdueReceiptOpener.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useCharges } from '../../../../modules/charges/hooks/charges.hook';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+
+function OverdueReceiptFetcher() {
+  const openReceipt = useSubscriptionFlows((state) => state.openReceipt);
+  const clearOverdueReceiptRequest = useSubscriptionFlows((state) => state.clearOverdueReceiptRequest);
+  const { data, isFetched } = useCharges({ page: 1, limit: 1, status: [0] });
+
+  useEffect(() => {
+    if (!isFetched) return;
+
+    const charge = data?.data?.[0];
+    if (charge) openReceipt(charge);
+    clearOverdueReceiptRequest();
+  }, [isFetched, data, openReceipt, clearOverdueReceiptRequest]);
+
+  return null;
+}
+
+export function OverdueReceiptOpener() {
+  const isOverdueReceiptRequested = useSubscriptionFlows((state) => state.isOverdueReceiptRequested);
+
+  if (!isOverdueReceiptRequested) return null;
+
+  return <OverdueReceiptFetcher />;
+}

package/src/components/account/sections/subscription/PayChargeDialog.tsx

@@ -0,0 +1,306 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { IconAtom, IconBolt, IconInfoCircle, IconWorld, IconX } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { PaymentInfoCard } from '../../../ui/data-display/PaymentInfoCard';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Toast } from '../../../ui/feedback/Toast';
+import { PaymentMethodToggle, type PaymentMethodOption } from '../../../ui/form/PaymentMethodToggle';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCards } from '../../../../modules/cards/hooks/cards.hook';
+import { useChargeAction } from '../../../../modules/charges/hooks/charge-action.hook';
+import { useCurrentSubscription } from '../../../../modules/subscriptions/hooks/use-current-subscription.hook';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { ADDON_IDS } from '../../../../modules/subscriptions/constants/addons.constants';
+import { isBoletoPayer } from '../../../../modules/subscriptions/utils/is-boleto-payer';
+import { periodicityToBillingPeriod } from '../../../../modules/subscriptions/utils/periodicity';
+import { resolveSubscriptionPlanName } from '../../../../modules/subscriptions/utils/resolve-subscription-plan-name';
+import { useExternalContracting, useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import { BoletoDetailsDialog } from './BoletoDetailsDialog';
+import { PixDetailsDialog } from './PixDetailsDialog';
+
+function formatDate(date: Date | string | null | undefined) {
+  if (!date) return '—';
+  return new Date(date).toLocaleDateString('pt-BR', { timeZone: 'UTC' });
+}
+
+/** Pagamento de uma fatura em aberto: cartão, boleto ou pix, conforme o que a cobrança aceita. */
+export function PayChargeDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations('common.account.workspace.subscription.payCharge');
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { isExternalContracting, redirectToExternal } = useExternalContracting();
+  const { formatCurrency } = useCurrencyFormatter();
+
+  const payChargeState = useSubscriptionFlows((state) => state.payCharge);
+  const close = useSubscriptionFlows((state) => state.closePayCharge);
+  const charge = payChargeState?.charge;
+  const isOpen = !!payChargeState;
+
+  const [paymentMethod, setPaymentMethod] = useState<PaymentMethodOption>('card');
+  const [selectedCardId, setSelectedCardId] = useState('');
+  const [isPaying, setIsPaying] = useState(false);
+  const [boletoDialogOpen, setBoletoDialogOpen] = useState(false);
+  const [pixDialogOpen, setPixDialogOpen] = useState(false);
+
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const { mutateAsync: payCharge } = useChargeAction();
+
+  const isAnnual = periodicityToBillingPeriod(subscription?.periodicity) === 'annual';
+
+  // Cobrança já gerada como boleto/pix mantém o método disponível, independente da periodicidade.
+  const chargePaymentDetails = charge?.payment_details as Record<string, unknown> | null | undefined;
+  const chargeIsAlreadyBoleto = chargePaymentDetails?.type === 'boleto' || charge?.payment_method === 2;
+  const chargeIsAlreadyPix = chargePaymentDetails?.type === 'pix' || charge?.payment_method === 3;
+  const boletoAvailable = chargeIsAlreadyBoleto || isBoletoPayer(subscription?.payment_method);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setPaymentMethod('card');
+      setSelectedCardId('');
+      setIsPaying(false);
+      return;
+    }
+
+    setPaymentMethod(chargeIsAlreadyPix ? 'pix' : chargeIsAlreadyBoleto ? 'boleto' : 'card');
+
+    const cards = cardsData?.data ?? [];
+    if (cards.length === 0) return;
+
+    const isValid = cards.some((card) => card.id.toString() === selectedCardId);
+    if (!isValid) {
+      const defaultCard = cards.find((card) => card.is_default) ?? cards[0];
+      setSelectedCardId(defaultCard.id.toString());
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen, charge?.id, chargeIsAlreadyBoleto, chargeIsAlreadyPix, cardsData]);
+
+  useEffect(() => {
+    // Só volta para cartão quando o boleto está mesmo bloqueado; cobrança que já é boleto continua.
+    if (!isOpen || paymentMethod !== 'boleto') return;
+    if (!boletoAvailable || (!isAnnual && !chargeIsAlreadyBoleto)) setPaymentMethod('card');
+  }, [isOpen, isAnnual, chargeIsAlreadyBoleto, boletoAvailable, paymentMethod]);
+
+  useEffect(() => {
+    if (isOpen && isExternalContracting) {
+      close();
+      redirectToExternal('contracting');
+    }
+  }, [isOpen, isExternalContracting, close, redirectToExternal]);
+
+  const handlePayWithCard = async () => {
+    if (!charge) return;
+
+    setIsPaying(true);
+    try {
+      await payCharge({ chargeId: charge.id, paymentMethod: 1, paymentMethodId: selectedCardId });
+      close();
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translateDialog('successToast')} toastId={toastId} />
+      ));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateDialog('errorPayment');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    } finally {
+      setIsPaying(false);
+    }
+  };
+
+  const handlePayWithBoleto = async () => {
+    if (!charge) return;
+
+    // Cobrança que já virou boleto: só mostra os dados existentes.
+    if (chargeIsAlreadyBoleto) {
+      setBoletoDialogOpen(true);
+      return;
+    }
+
+    setIsPaying(true);
+    try {
+      await payCharge({ chargeId: charge.id, paymentMethod: 2 });
+      close();
+      toast.custom((toastId) => (
+        <Toast variant="success" message={translateDialog('successToast')} toastId={toastId} />
+      ));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateDialog('errorBoleto');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    } finally {
+      setIsPaying(false);
+    }
+  };
+
+  const aiItems = subscription?.items?.filter((item) => item.id_addon === ADDON_IDS.AI) ?? [];
+  const aiItem =
+    aiItems.length > 0
+      ? aiItems.reduce((best, item) => (item.quantity > best.quantity ? item : best))
+      : undefined;
+  const domainsItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.DOMAINS);
+  const abTestItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AB_TEST);
+
+  const hasItems =
+    (domainsItem && (domainsItem.quantity ?? 0) > 0) ||
+    (aiItem && (aiItem.quantity ?? 0) > 0) ||
+    (abTestItem && (abTestItem.quantity ?? 0) > 0);
+
+  if (isExternalContracting || !charge) return null;
+
+  const planName = resolveSubscriptionPlanName(subscription, translate, '—');
+  const infoBoxClasses = cn(
+    'flex items-start gap-3 p-4 rounded-lg',
+    isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+  );
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <DialogContent
+        showCloseButton={false}
+        className="flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-auto bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-120 lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden lg:overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300"
+      >
+        <DialogHeader className="px-4 py-3 border-b border-gray-200 shrink-0 relative">
+          <DialogTitle className="paragraph-medium-semibold text-gray-950 text-center">
+            {translateDialog('title')}
+          </DialogTitle>
+          <button
+            type="button"
+            onClick={close}
+            aria-label={translate('common.actions.close')}
+            className="absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
+          >
+            <IconX size={18} className="text-gray-400" />
+          </button>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-6 p-4 lg:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300">
+          <div className="flex flex-col gap-4 p-4 bg-gray-50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div className="size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0">
+                <IconBolt size={20} className="text-gray-950" />
+              </div>
+              <div className="flex flex-col gap-0.5 flex-1">
+                <span className="paragraph-small-semibold text-gray-950">{planName}</span>
+                <span className="paragraph-small-regular text-gray-500">
+                  {translateDialog('dueDate', { date: formatDate(charge.date_due) })}
+                </span>
+              </div>
+              <span className="paragraph-medium-semibold text-gray-950">
+                {charge.value ? formatCurrency(charge.value) : '—'}
+              </span>
+            </div>
+
+            {hasItems && (
+              <>
+                <Separator className="bg-gray-200" />
+                <div className="flex flex-col gap-3">
+                  {domainsItem && (domainsItem.quantity ?? 0) > 0 && (
+                    <div className="flex items-center gap-3">
+                      <IconWorld size={16} className="text-gray-500 shrink-0" />
+                      <span className="paragraph-small-medium text-gray-500 flex-1">
+                        {translateDialog('domains')}
+                      </span>
+                      <span className="paragraph-small-semibold text-gray-950">
+                        {domainsItem.quantity}
+                      </span>
+                    </div>
+                  )}
+                  {aiItem && (aiItem.quantity ?? 0) > 0 && (
+                    <div className="flex items-center gap-3">
+                      <IconBolt size={16} className="text-gray-500 shrink-0" />
+                      <span className="paragraph-small-medium text-gray-500 flex-1">
+                        {translateDialog('aiCredits')}
+                      </span>
+                      <span className="paragraph-small-semibold text-gray-950">{aiItem.quantity}</span>
+                    </div>
+                  )}
+                  {abTestItem && (abTestItem.quantity ?? 0) > 0 && (
+                    <div className="flex items-center gap-3">
+                      <IconAtom size={16} className="text-gray-500 shrink-0" />
+                      <span className="paragraph-small-medium text-gray-500 flex-1">
+                        {translateDialog('abTest')}
+                      </span>
+                      <span className="paragraph-small-semibold text-gray-950">
+                        {translateDialog('abTestActive')}
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <span className="paragraph-medium-semibold text-gray-950">{translateDialog('payment')}</span>
+            <PaymentMethodToggle
+              value={paymentMethod}
+              onChange={setPaymentMethod}
+              disableBoleto={!isAnnual && !chargeIsAlreadyBoleto}
+              hideBoleto={!boletoAvailable}
+              hidePix={!chargeIsAlreadyPix}
+              boletoTooltip={translateDialog('boletoTooltip')}
+            />
+
+            {paymentMethod === 'card' ? (
+              <PaymentInfoCard selectedCardId={selectedCardId} onCardSelect={setSelectedCardId} />
+            ) : paymentMethod === 'boleto' ? (
+              <div className={infoBoxClasses}>
+                <IconInfoCircle size={16} className="text-gray-950 shrink-0 mt-0.5" />
+                <p className="paragraph-small-regular text-gray-950 whitespace-pre-line">
+                  {translateDialog('boletoInfo')}
+                </p>
+              </div>
+            ) : (
+              <div className={infoBoxClasses}>
+                <IconInfoCircle size={16} className="text-gray-950 shrink-0 mt-0.5" />
+                <p className="paragraph-small-regular text-gray-950">
+                  {translateDialog.rich('pixInfo', {
+                    b: (chunks) => <span className="paragraph-small-semibold">{chunks}</span>,
+                  })}
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 shrink-0">
+          <Button type="button" variant="secondary" className="h-10!" onClick={close}>
+            {translate('common.actions.cancel')}
+          </Button>
+
+          {paymentMethod === 'card' ? (
+            <Button
+              type="button"
+              className="h-10!"
+              disabled={!selectedCardId}
+              loading={isPaying}
+              onClick={handlePayWithCard}
+            >
+              {isPaying ? translateDialog('processing') : translateDialog('payNow')}
+            </Button>
+          ) : paymentMethod === 'pix' ? (
+            <Button type="button" className="h-10!" onClick={() => setPixDialogOpen(true)}>
+              {translateDialog('viewPixCode')}
+            </Button>
+          ) : (
+            <Button type="button" className="h-10!" loading={isPaying} onClick={handlePayWithBoleto}>
+              {chargeIsAlreadyBoleto
+                ? translateDialog('viewBoleto')
+                : isPaying
+                  ? translateDialog('generatingBoleto')
+                  : translateDialog('generateBoleto')}
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+
+      <BoletoDetailsDialog open={boletoDialogOpen} charge={charge} onOpenChange={setBoletoDialogOpen} />
+      <PixDetailsDialog open={pixDialogOpen} charge={charge} onOpenChange={setPixDialogOpen} />
+    </Dialog>
+  );
+}

package/src/components/account/sections/subscription/PaymentConfirmationDialog.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { IconCircleCheckFilled, IconInfoCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+
+/** Confirmação depois da cobrança no cartão da troca de plano. */
+export function PaymentConfirmationDialog() {
+  const translate = useTranslations('common.account.workspace.subscription.paymentConfirmation');
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+
+  const confirmation = useSubscriptionFlows((state) => state.paymentConfirmation);
+  const close = useSubscriptionFlows((state) => state.closePaymentConfirmation);
+
+  const formattedTotal = formatCurrencyNumber(confirmation?.total ?? 0);
+  const priceDisplay = confirmation?.periodLabel
+    ? `${formattedTotal}${confirmation.periodLabel}`
+    : formattedTotal;
+  const immediateChargeTotal = confirmation?.immediateChargeTotal;
+  const hasImmediateCharge = immediateChargeTotal != null && immediateChargeTotal > 0;
+
+  return (
+    <Dialog open={!!confirmation} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <DialogContent className="flex flex-col p-4 lg:p-6 gap-4 items-center max-w-[calc(100%-32px)]! h-auto! rounded-lg border top-[50%]! left-[50%]! right-auto! bottom-auto! translate-x-[-50%]! translate-y-[-50%]! lg:max-w-[386px]!">
+        <IconCircleCheckFilled size={56} className="text-green-500" />
+
+        <div className="flex flex-col gap-2 text-center">
+          <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+            {translate('subscriptionConfirmed')}
+          </DialogTitle>
+          <p className="paragraph-small-regular text-zinc-500">
+            {translate.rich('youSubscribed', {
+              planName: confirmation?.planName ?? '',
+              b: (chunks) => <span className="font-semibold text-zinc-950">{chunks}</span>,
+            })}
+            <br />
+            {translate.rich('price', {
+              price: priceDisplay,
+              b: (chunks) => <span className="font-semibold text-zinc-950">{chunks}</span>,
+            })}
+            {hasImmediateCharge && (
+              <>
+                <br />
+                {translate.rich('immediateCharge', {
+                  amount: formatCurrencyNumber(immediateChargeTotal),
+                  b: (chunks) => <span className="font-semibold text-zinc-950">{chunks}</span>,
+                })}
+              </>
+            )}
+          </p>
+        </div>
+
+        <div
+          className={cn(
+            'flex items-center gap-3 p-4 rounded-lg w-full',
+            isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'
+          )}
+        >
+          <IconInfoCircle size={16} className="shrink-0 text-zinc-950" />
+          <p className="paragraph-small-regular text-zinc-950">{translate('manageInfo')}</p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/account/sections/subscription/PaymentMethodsCard.tsx

@@ -0,0 +1,117 @@
+'use client';
+
+import { useState } from 'react';
+import { IconPlus } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { CardBrandIcon } from '../../../ui/data-display/CardBrandIcons';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { useCards } from '../../../../modules/cards/hooks/cards.hook';
+import { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';
+import useSubscriptionActions from '../../hooks/useSubscriptionActions';
+import { ManageCardsSheet } from './ManageCardsSheet';
+
+/** "06/2027" → "06/27", como na tela de assinatura. */
+function formatExpiryDate(date?: string | null): string {
+  if (!date) return '';
+  const [month, year] = date.split('/');
+  if (!month || !year) return date;
+  return `${month}/${year.slice(-2)}`;
+}
+
+export function PaymentMethodsCard() {
+  const translate = useTranslations();
+  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });
+  const { hasPermission } = useManagementPermissions();
+  const actions = useSubscriptionActions();
+  const [isManageOpen, setIsManageOpen] = useState(false);
+
+  const cards = data?.data ?? [];
+  const defaultCard = cards.find((card) => card.is_default) ?? cards[0];
+  const lastDigits = (defaultCard?.number ?? '').replaceAll(/\D/g, '').slice(-4);
+  const expiryDate = formatExpiryDate(defaultCard?.date);
+  const canManageCards = hasPermission('manage_cards');
+
+  const addCardButton = canManageCards && (
+    <Button variant="secondary" className="h-10!" onClick={actions.addCard}>
+      <IconPlus size={20} />
+      {translate('common.cards.paymentInfo.addCard')}
+    </Button>
+  );
+
+  return (
+    <div className="flex flex-col gap-6 p-5 lg:p-6 border border-zinc-200 rounded-lg bg-white">
+      <span className="paragraph-medium-semibold text-zinc-950">
+        {translate('common.account.workspace.subscription.paymentInfo.title')}
+      </span>
+
+      {isLoading && (
+        <div className="flex items-center gap-4">
+          <Skeleton className="size-10 rounded-lg" />
+          <div className="flex flex-col gap-1.5">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-4 w-40" />
+          </div>
+        </div>
+      )}
+
+      {!isLoading && isError && (
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <span className="paragraph-small-medium text-zinc-500">
+            {translate('common.account.workspace.subscription.paymentInfo.loadFailed')}
+          </span>
+          <Button variant="secondary" className="h-10!" onClick={() => refetch()}>
+            {translate('common.account.workspace.subscription.paymentInfo.retry')}
+          </Button>
+        </div>
+      )}
+
+      {!isLoading && !isError && !defaultCard && (
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <span className="paragraph-small-medium text-zinc-500">
+            {translate('common.account.workspace.subscription.paymentInfo.noCardAdded')}
+          </span>
+          {addCardButton}
+        </div>
+      )}
+
+      {!isLoading && !isError && defaultCard && (
+        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div className="flex items-center gap-4 min-w-0">
+            <div className="flex items-center justify-center size-10 shrink-0 rounded-lg border border-zinc-200 bg-white shadow-xs">
+              <CardBrandIcon brand={defaultCard.brand} />
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="paragraph-small-semibold text-zinc-950 truncate">{defaultCard.name}</span>
+              <span className="paragraph-small-medium text-zinc-500">
+                {lastDigits
+                  ? `•••• •••• •••• ${lastDigits}`
+                  : translate('common.cards.item.digitsUnavailable')}
+              </span>
+              {expiryDate && (
+                <span className="paragraph-xsmall-medium text-zinc-500">
+                  {translate('common.account.workspace.subscription.paymentInfo.validUntil', { date: expiryDate })}
+                </span>
+              )}
+            </div>
+            {defaultCard.is_default && (
+              <span className="paragraph-xsmall-semibold text-zinc-600 bg-zinc-50 px-2 h-6 inline-flex items-center rounded-lg whitespace-nowrap">
+                {translate('common.account.workspace.subscription.paymentInfo.defaultCard')}
+              </span>
+            )}
+          </div>
+          {canManageCards && (
+            <div className="flex items-center gap-2">
+              <Button variant="secondary" className="h-10!" onClick={() => setIsManageOpen(true)}>
+                {translate('common.cards.paymentInfo.manageCards')}
+              </Button>
+              {addCardButton}
+            </div>
+          )}
+        </div>
+      )}
+
+      <ManageCardsSheet open={isManageOpen} onOpenChange={setIsManageOpen} onAddCard={actions.addCard} />
+    </div>
+  );
+}