@greatapps/common 1.1.790 → 1.1.791

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

@@ -0,0 +1,318 @@
+'use client';
+
+import { useState, type ReactNode } from 'react';
+import {
+  IconBarcode,
+  IconCreditCard,
+  IconDownload,
+  IconExternalLink,
+  IconFileInvoice,
+  IconLoader2,
+  IconQrcode,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
+import { Button } from '../../../ui/buttons/Button';
+import { CardBrandIcon } from '../../../ui/data-display/CardBrandIcons';
+import { BoletoIcon } from '../../../ui/data-display/PaymentMethodIcons';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Toast } from '../../../ui/feedback/Toast';
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';
+import { useNotaFiscal } from '../../../../modules/charges/hooks/nota-fiscal.hook';
+import { getChargeDownloadUrl } from '../../../../modules/charges/utils/get-charge-download-url';
+import type { Charge } from '../../../../modules/charges/types/charge.type';
+import { useSubscriptionById } from '../../../../modules/subscriptions/hooks/find-subscription-by-id.hook';
+import { useWhitelabel } from '../../../../providers/whitelabel.provider';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';
+import { ChargeStatusBadge } from './ChargeStatusBadge';
+import { BoletoDetailsDialog } from './BoletoDetailsDialog';
+import { PixDetailsDialog } from './PixDetailsDialog';
+
+function InfoRow({ label, value }: { label: string; value: ReactNode }) {
+  return (
+    <div className="flex flex-col lg:flex-row gap-1 lg:gap-3 lg:items-center">
+      <span className="paragraph-small-medium text-zinc-950 lg:w-[160px] shrink-0">{label}</span>
+      <span className="paragraph-small-regular text-zinc-600">{value}</span>
+    </div>
+  );
+}
+
+function PaymentMethodIcon({
+  paymentMethod,
+  cardBrand,
+}: {
+  paymentMethod: number;
+  cardBrand?: string | null;
+}) {
+  if (paymentMethod === 1 && cardBrand) {
+    return <CardBrandIcon brand={cardBrand.toLowerCase()} className="h-[17px] w-auto" />;
+  }
+  if (paymentMethod === 2) return <BoletoIcon className="text-zinc-950" />;
+  if (paymentMethod === 3) return <IconQrcode size={20} className="text-zinc-950" />;
+  return null;
+}
+
+/** Detalhes de uma cobrança: dados gerais, pagamento e as ações de pagar, boleto, pix e nota. */
+export function ReceiptDetailsSheet() {
+  const translate = useTranslations('common.account.workspace.subscription.receipt');
+  const isMobile = useIsMobile();
+  const { formatCurrencyNumber, currency } = useCurrencyFormatter();
+  const { whitelabel } = useWhitelabel();
+  const { mutateAsync: fetchNotaFiscal, isPending: isLoadingNotaFiscal } = useNotaFiscal();
+
+  const charge = useSubscriptionFlows((state) => state.receiptCharge);
+  const close = useSubscriptionFlows((state) => state.closeReceipt);
+  const openPayCharge = useSubscriptionFlows((state) => state.openPayCharge);
+
+  const [boletoDialogOpen, setBoletoDialogOpen] = useState(false);
+  const [pixDialogOpen, setPixDialogOpen] = useState(false);
+
+  const { data: subscriptionData, isLoading: isLoadingSubscription } = useSubscriptionById(
+    charge?.id_subscription ?? undefined
+  );
+
+  if (!charge) return null;
+
+  const isPending = charge.status === 0;
+  const isPaid = charge.status === 1;
+  const downloadUrl = getChargeDownloadUrl(charge);
+
+  // Sem `payment_method`, o meio vem do `payment_details` que o gateway devolveu.
+  const paymentDetails = charge.payment_details as Record<string, unknown> | null | undefined;
+  const resolvedPaymentMethod =
+    charge.payment_method ??
+    (paymentDetails?.type === 'card'
+      ? 1
+      : paymentDetails?.type === 'boleto'
+        ? 2
+        : paymentDetails?.type === 'pix'
+          ? 3
+          : 0);
+
+  const subscription = subscriptionData?.data;
+  const subscriptionCard = subscription?.card;
+  const paidCardBrand = paymentDetails?.brand as string | undefined;
+  const paidCardLast4 = paymentDetails?.last4 as string | undefined;
+  const currentCardBrand = subscriptionCard?.brand || subscription?.card_brand;
+  const currentCardLast4 = subscriptionCard?.last4 || subscription?.card_number?.slice(-4);
+
+  // Paga mostra o cartão que pagou; em aberto mostra o cartão atual da assinatura, que é quem vai pagar.
+  const resolvedCardBrand = isPaid ? paidCardBrand || currentCardBrand : currentCardBrand || paidCardBrand;
+  const resolvedCardLast4 = isPaid ? paidCardLast4 || currentCardLast4 : currentCardLast4 || paidCardLast4;
+
+  const isBoleto = resolvedPaymentMethod === 2;
+  const isPix = resolvedPaymentMethod === 3;
+  const boletoDetails = paymentDetails?.type === 'boleto' ? paymentDetails : null;
+  const boletoUrl =
+    (boletoDetails?.hosted_voucher_url as string | null | undefined) ??
+    (boletoDetails?.pdf as string | null | undefined) ??
+    charge.gateway_billet ??
+    charge.invoice_url;
+
+  // Nota fiscal só existe na whitelabel principal e em cobrança BRL. Em USD o recibo do gateway já
+  // tem valor fiscal lá fora — nesse caso fica o "Baixar recibo".
+  const canHaveNotaFiscal = isPaid && whitelabel?.id === 1 && currency !== 'usd';
+
+  const handleDownloadNotaFiscal = async () => {
+    try {
+      const result = await fetchNotaFiscal(charge.id);
+      const nota = result.notas.find((item) => item.linkPdf) ?? result.notas[0];
+      const url = nota?.linkPdf ?? nota?.linkXml ?? null;
+
+      if (!result.emitida || !url) {
+        toast.custom((toastId) => (
+          <Toast variant="error" message={translate('notaFiscalEmpty')} toastId={toastId} />
+        ));
+        return;
+      }
+
+      window.open(url, '_blank', 'noopener,noreferrer');
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translate('notaFiscalError');
+      toast.custom((toastId) => <Toast variant="error" message={message} toastId={toastId} />);
+    }
+  };
+
+  const paymentMethodLabel =
+    resolvedPaymentMethod === 1
+      ? translate('paymentMethodCreditCard')
+      : resolvedPaymentMethod === 2
+        ? translate('paymentMethodBoleto')
+        : resolvedPaymentMethod === 3
+          ? translate('paymentMethodPix')
+          : '';
+
+  const paymentMethodBlock = (
+    <div className="flex flex-col gap-1">
+      <div className="flex flex-col lg:flex-row gap-1 lg:gap-3 lg:items-center">
+        <span className="paragraph-small-medium text-zinc-950 lg:w-[160px] shrink-0">
+          {translate('paymentMethod')}
+        </span>
+        {isLoadingSubscription && resolvedPaymentMethod === 1 ? (
+          <Skeleton className="h-5 w-10 rounded" />
+        ) : (
+          <PaymentMethodIcon paymentMethod={resolvedPaymentMethod} cardBrand={resolvedCardBrand} />
+        )}
+      </div>
+      <div className="flex flex-col lg:pl-[172px]">
+        <span className="paragraph-small-regular text-zinc-600">{paymentMethodLabel}</span>
+        {resolvedPaymentMethod === 1 &&
+          (isLoadingSubscription && !resolvedCardLast4 ? (
+            <Skeleton className="h-4 w-20 rounded" />
+          ) : (
+            resolvedCardLast4 && (
+              <span className="paragraph-small-medium text-zinc-600">•••• {resolvedCardLast4}</span>
+            )
+          ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <Sheet open={!!charge} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <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]!'
+        )}
+      >
+        <SheetHeader className="px-4 sm:px-5 py-3 border-b border-zinc-200">
+          <SheetTitle className="paragraph-medium-semibold text-zinc-950">ID {charge.id}</SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-5 sm:gap-6 p-4 sm: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-2">
+            <span className="paragraph-small-regular text-zinc-600">{translate('generalInfo')}</span>
+            <div className="flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg">
+              <InfoRow
+                label={translate('chargeLabel')}
+                value={
+                  charge.line_descriptions?.[0] ||
+                  charge.title ||
+                  charge.description ||
+                  translate('noTitle')
+                }
+              />
+              {charge.description && charge.line_descriptions?.length ? (
+                <InfoRow label={translate('detailsLabel')} value={charge.description} />
+              ) : null}
+              <div className="flex flex-col lg:flex-row gap-1 lg:gap-3 lg:items-center">
+                <span className="paragraph-small-medium text-zinc-950 lg:w-[160px] shrink-0">
+                  {translate('statusLabel')}
+                </span>
+                <ChargeStatusBadge status={charge.status} />
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="paragraph-small-regular text-zinc-600">{translate('paymentSection')}</span>
+            <div className="flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg">
+              <InfoRow label={translate('totalValue')} value={formatCurrencyNumber(charge.value)} />
+
+              {isPaid ? (
+                <>
+                  <InfoRow
+                    label={translate('paymentDate')}
+                    value={
+                      charge.date_payment
+                        ? new Date(charge.date_payment).toLocaleDateString('pt-BR')
+                        : undefined
+                    }
+                  />
+                  <div className="w-full h-px bg-zinc-200" />
+                  {paymentMethodBlock}
+                </>
+              ) : (
+                <>
+                  <InfoRow
+                    label={translate('dueDate')}
+                    value={
+                      charge.date_due
+                        ? new Date(charge.date_due).toLocaleDateString('pt-BR', { timeZone: 'UTC' })
+                        : undefined
+                    }
+                  />
+                  <div className="w-full h-px bg-zinc-200" />
+                  {paymentMethodBlock}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {(isPending || (isPaid && (!!downloadUrl || canHaveNotaFiscal))) && (
+          <SheetFooter className="flex-row gap-2 p-4 sm:p-5 border-t border-zinc-200">
+            {isPending && isPix ? (
+              <Button className="h-10 flex-1" onClick={() => setPixDialogOpen(true)}>
+                <IconQrcode size={20} />
+                {translate('viewPixCode')}
+              </Button>
+            ) : isPending && isBoleto ? (
+              <>
+                {boletoUrl && (
+                  <Button
+                    className="h-10 flex-1"
+                    onClick={() => window.open(boletoUrl, '_blank', 'noopener,noreferrer')}
+                  >
+                    <IconExternalLink size={20} />
+                    {translate('payBoleto')}
+                  </Button>
+                )}
+                <Button
+                  variant="secondary"
+                  className="h-10 flex-1"
+                  onClick={() => setBoletoDialogOpen(true)}
+                >
+                  <IconBarcode size={20} />
+                  {translate('viewBoletoDetails')}
+                </Button>
+              </>
+            ) : isPending ? (
+              <>
+                <Button className="h-10 flex-1" onClick={() => openPayCharge(charge)}>
+                  {translate('retryPayment')}
+                </Button>
+                <Button variant="secondary" className="h-10 flex-1" onClick={() => openPayCharge(charge)}>
+                  <IconCreditCard size={20} />
+                  {translate('changeCard')}
+                </Button>
+              </>
+            ) : canHaveNotaFiscal ? (
+              <Button
+                className="w-full lg:w-fit h-10"
+                onClick={handleDownloadNotaFiscal}
+                disabled={isLoadingNotaFiscal}
+              >
+                {isLoadingNotaFiscal ? (
+                  <IconLoader2 size={20} className="animate-spin" />
+                ) : (
+                  <IconFileInvoice size={20} />
+                )}
+                {translate('notaFiscal')}
+              </Button>
+            ) : downloadUrl ? (
+              <Button
+                variant="secondary"
+                className="w-full lg:w-fit h-10"
+                onClick={() => window.open(downloadUrl, '_blank', 'noopener,noreferrer')}
+              >
+                {translate('downloadReceipt')}
+                <IconDownload size={20} />
+              </Button>
+            ) : null}
+          </SheetFooter>
+        )}
+      </SheetContent>
+
+      <BoletoDetailsDialog open={boletoDialogOpen} charge={charge} onOpenChange={setBoletoDialogOpen} />
+      <PixDetailsDialog open={pixDialogOpen} charge={charge} onOpenChange={setPixDialogOpen} />
+    </Sheet>
+  );
+}

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

@@ -0,0 +1,40 @@
+'use client';
+
+import { BillingAddressSheet } from './BillingAddressSheet';
+import { BoletoGeneratedDialog } from './BoletoGeneratedDialog';
+import { CancelPlanDialog } from './CancelPlanDialog';
+import { PayChargeDialog } from './PayChargeDialog';
+import { PaymentConfirmationDialog } from './PaymentConfirmationDialog';
+import { PendingChangeDialog } from './PendingChangeDialog';
+import { PixPaymentDialog } from './PixPaymentDialog';
+import { PlanDetailsSheet } from './PlanDetailsSheet';
+import { ReceiptDetailsSheet } from './ReceiptDetailsSheet';
+import { UsageReportSheet } from './UsageReportSheet';
+import { ChangePlanSheet } from './change-plan/ChangePlanSheet';
+import { CannotDowngradeDialog } from './downgrade/CannotDowngradeDialog';
+import { DowngradeReasonDialog } from './downgrade/DowngradeReasonDialog';
+import { OverdueReceiptOpener } from './OverdueReceiptOpener';
+import { PlansCatalogDialog } from './plans/PlansCatalogDialog';
+
+/** Fluxos da aba Assinatura, abertos por cima do modal Minha conta. */
+export function SubscriptionFlows() {
+  return (
+    <>
+      <OverdueReceiptOpener />
+      <ReceiptDetailsSheet />
+      <PayChargeDialog />
+      <PlanDetailsSheet />
+      <BillingAddressSheet />
+      <UsageReportSheet />
+      <CancelPlanDialog />
+      <PendingChangeDialog />
+      <ChangePlanSheet />
+      <PlansCatalogDialog />
+      <DowngradeReasonDialog />
+      <CannotDowngradeDialog />
+      <PixPaymentDialog />
+      <BoletoGeneratedDialog />
+      <PaymentConfirmationDialog />
+    </>
+  );
+}