@greatapps/common 1.1.789 → 1.1.791

package/src/components/account/sections/affiliates/AffiliateLeadsSheet.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import { useMemo } from 'react';
+import { IconLoader2 } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';
+import { useAffiliateLeads } from '../../../../modules/affiliates/hooks/use-affiliate-leads.hook';
+import type { AffiliateLead } from '../../../../modules/affiliates/types/affiliate.type';
+import useIsMobile from '../../../../hooks/useIsMobile';
+import { cn } from '../../../../infra/utils/clsx';
+import { useAffiliateFlows } from '../../../../store/useAffiliateFlows';
+
+function getFirstName(name: string | null | undefined): string {
+  if (!name) return '—';
+  return name.trim().split(/\s+/)[0];
+}
+
+function formatLeadDate(datetime: string | null | undefined): string {
+  if (!datetime) return '—';
+  const date = new Date(datetime);
+  if (Number.isNaN(date.getTime())) return '—';
+
+  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const hours = String(date.getHours()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, '0');
+
+  return `${day}/${month}/${date.getFullYear()} ${hours}:${minutes}`;
+}
+
+function getMonthYearKey(datetime: string | null | undefined, noDate: string, months: string[]): string {
+  if (!datetime) return noDate;
+  const date = new Date(datetime);
+  if (Number.isNaN(date.getTime())) return noDate;
+  return `${months[date.getMonth()]} ${date.getFullYear()}`;
+}
+
+function groupLeadsByMonth(leads: AffiliateLead[], noDate: string, months: string[]) {
+  const groups = new Map<string, AffiliateLead[]>();
+
+  for (const lead of leads) {
+    const key = getMonthYearKey(lead.datetime_add, noDate, months);
+    const existing = groups.get(key);
+    if (existing) existing.push(lead);
+    else groups.set(key, [lead]);
+  }
+
+  return Array.from(groups.entries()).map(([label, items]) => ({ label, leads: items }));
+}
+
+/** Leads indicados pelo afiliado, agrupados por mês. */
+export function AffiliateLeadsSheet() {
+  const translate = useTranslations();
+  const translateSheet = useTranslations('common.account.workspace.affiliates.leadsSheet');
+  const isMobile = useIsMobile();
+  const isOpen = useAffiliateFlows((state) => state.isLeadsOpen);
+  const close = useAffiliateFlows((state) => state.closeLeads);
+
+  const { data: leadsData, isLoading } = useAffiliateLeads({}, { enabled: isOpen });
+  const leads = leadsData?.data ?? [];
+
+  const monthNames = useMemo(
+    () => [
+      translate('common.account.workspace.affiliates.leadsSheet.months.january'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.february'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.march'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.april'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.may'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.june'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.july'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.august'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.september'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.october'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.november'),
+      translate('common.account.workspace.affiliates.leadsSheet.months.december'),
+    ],
+    [translate]
+  );
+
+  const noDateLabel = translateSheet('noDate');
+  const groupedLeads = useMemo(
+    () => groupLeadsByMonth(leads, noDateLabel, monthNames),
+    [leads, noDateLabel, monthNames]
+  );
+
+  return (
+    <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <SheetContent
+        side={isMobile ? 'bottom' : 'right'}
+        className={cn(
+          isMobile
+            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
+            : 'h-screen max-w-[480px]! w-[480px]!',
+          'data-[state=open]:max-h-none data-[state=open]:h-dvh'
+        )}
+      >
+        <SheetHeader className="border-b border-zinc-200">
+          <SheetTitle className="text-zinc-950 paragraph-medium-semibold">
+            {translateSheet('title')}
+          </SheetTitle>
+        </SheetHeader>
+
+        <div className="flex flex-col gap-6 px-5 py-5 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 flex-1">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-10">
+              <IconLoader2 size={24} className="animate-spin text-zinc-400" />
+            </div>
+          ) : leads.length === 0 ? (
+            <div className="flex items-center justify-center py-10">
+              <span className="paragraph-small-regular text-zinc-500">{translateSheet('emptyState')}</span>
+            </div>
+          ) : (
+            groupedLeads.map((group) => (
+              <div key={group.label} className="flex flex-col gap-3">
+                <span className="paragraph-small-medium text-zinc-950">{group.label}</span>
+                <div className="rounded-lg bg-zinc-50">
+                  {group.leads.map((lead, index) => (
+                    <div key={lead.id}>
+                      <div className="flex items-center gap-4 px-4 py-4">
+                        <span className="paragraph-xsmall-medium text-zinc-500 shrink-0 w-[130px]">
+                          {formatLeadDate(lead.datetime_add)}
+                        </span>
+                        <span className="paragraph-small-semibold text-zinc-950 truncate min-w-0">
+                          {getFirstName(lead.name)}
+                        </span>
+                      </div>
+                      {index < group.leads.length - 1 && (
+                        <div className="px-4">
+                          <Separator />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/account/sections/affiliates/AffiliateStatsCard.tsx

@@ -0,0 +1,56 @@
+import { Fragment } from 'react';
+import type { TablerIcon } from '@tabler/icons-react';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+
+type AffiliateStat = {
+  label: string;
+  value: string;
+};
+
+type AffiliateStatsCardProps = {
+  icon: TablerIcon;
+  stats: AffiliateStat[];
+  footerText: string;
+  footerIcon?: TablerIcon;
+  isLoading?: boolean;
+};
+
+/** Card de número da aba Afiliados: ícone, um ou mais valores (separados por divisória) e rodapé. */
+export function AffiliateStatsCard({
+  icon: Icon,
+  stats,
+  footerText,
+  footerIcon: FooterIcon,
+  isLoading = false,
+}: AffiliateStatsCardProps) {
+  return (
+    <div className="flex flex-col gap-6 p-5 bg-white border border-zinc-200 rounded-lg min-w-0">
+      <div className="flex items-center justify-center size-10 bg-zinc-50 rounded-lg">
+        <Icon size={20} className="text-zinc-500" />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-stretch gap-6">
+          {stats.map((stat, index) => (
+            <Fragment key={stat.label}>
+              {index > 0 && <div className="w-px bg-zinc-200 shrink-0" />}
+              <div className="flex flex-col gap-2 min-w-0">
+                <span className="paragraph-small-regular text-zinc-600">{stat.label}</span>
+                {isLoading ? (
+                  <Skeleton className="h-7 w-16 rounded" />
+                ) : (
+                  <span className="paragraph-xlarge-semibold text-zinc-950 truncate">{stat.value}</span>
+                )}
+              </div>
+            </Fragment>
+          ))}
+        </div>
+
+        <div className="flex items-center gap-1.5">
+          {FooterIcon && <FooterIcon size={16} className="text-zinc-500 shrink-0" />}
+          <span className="paragraph-xsmall-medium text-zinc-600">{footerText}</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/affiliates/AffiliateStepCard.tsx

@@ -0,0 +1,20 @@
+import type { TablerIcon } from '@tabler/icons-react';
+import { IconBox } from '../shared/IconBox';
+
+type AffiliateStepCardProps = {
+  icon: TablerIcon;
+  title: string;
+  description: string;
+};
+
+export function AffiliateStepCard({ icon, title, description }: AffiliateStepCardProps) {
+  return (
+    <div className="flex flex-col lg:flex-row items-start gap-3 lg:gap-4 p-4 lg:p-5 bg-zinc-50 rounded-lg min-w-0">
+      <IconBox icon={icon} iconClassName="text-zinc-500" />
+      <div className="flex flex-col gap-1">
+        <span className="text-zinc-950 paragraph-small-semibold">{title}</span>
+        <span className="text-zinc-600 paragraph-small-medium">{description}</span>
+      </div>
+    </div>
+  );
+}

package/src/components/account/sections/affiliates/AffiliateTransactionsList.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import { IconEye, IconInfoCircle } from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../../ui/buttons/Button';
+import { Separator } from '../../../ui/data-display/Separator';
+import { Skeleton } from '../../../ui/feedback/Skeleton';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../ui/data-display/Table';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';
+import { formatCurrencyNumber } from '../../../../utils/format/currency';
+import type { AffiliateTransaction } from '../../../../modules/affiliates/types/affiliate.type';
+import { StatusBadge, type StatusBadgeTone } from '../shared/StatusBadge';
+
+const TRANSACTION_TYPE_COMMISSION = 1;
+const TRANSACTION_TYPE_WITHDRAWAL = 2;
+
+const STATUS_TONES: Record<AffiliateTransaction['status'], StatusBadgeTone> = {
+  pending: 'yellow',
+  consolidated: 'green',
+  canceled: 'red',
+  refused: 'red',
+};
+
+const headClasses = 'h-11 px-3 first:pl-6 paragraph-xsmall-semibold text-zinc-500';
+
+function formatDateTime(value: string): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  const pad = (part: number) => String(part).padStart(2, '0');
+  return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()} ${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+
+function TransactionTypeBadge({ type }: { type: number }) {
+  const translate = useTranslations();
+
+  const label =
+    type === TRANSACTION_TYPE_COMMISSION
+      ? translate('common.account.workspace.affiliates.transactions.typeCommission')
+      : type === TRANSACTION_TYPE_WITHDRAWAL
+        ? translate('common.account.workspace.affiliates.transactions.typeWithdrawal')
+        : translate('common.account.workspace.affiliates.transactions.typeFallback', { type: String(type) });
+
+  return <StatusBadge tone={type === TRANSACTION_TYPE_COMMISSION ? 'green' : 'blue'}>{label}</StatusBadge>;
+}
+
+function TransactionStatusBadge({ transaction }: { transaction: AffiliateTransaction }) {
+  const translate = useTranslations();
+  const translateStatus = useTranslations('common.account.workspace.affiliates.transactions.status');
+  const { status } = transaction;
+  const hasInfo = status === 'pending' || status === 'refused';
+
+  const badge = (
+    <StatusBadge tone={STATUS_TONES[status]}>
+      {translateStatus(status)}
+      {hasInfo && <IconInfoCircle size={14} className="shrink-0" />}
+    </StatusBadge>
+  );
+
+  if (!hasInfo) return badge;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{badge}</TooltipTrigger>
+      <TooltipContent side="top" className="max-w-xs p-3">
+        {status === 'pending'
+          ? translate('common.account.workspace.affiliates.transactions.pendingTooltip')
+          : transaction.refused_reason || translate('common.account.workspace.affiliates.transactions.refusedTooltip')}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+type AffiliateTransactionsListProps = {
+  transactions: AffiliateTransaction[];
+  isLoading: boolean;
+  onViewAttachment: (attachment: string) => void;
+};
+
+export function AffiliateTransactionsList({ transactions, isLoading, onViewAttachment }: AffiliateTransactionsListProps) {
+  const translate = useTranslations();
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col gap-3">
+        {Array.from({ length: 4 }).map((_, index) => (
+          <Skeleton key={index} className="h-14 w-full rounded-lg" />
+        ))}
+      </div>
+    );
+  }
+
+  if (transactions.length === 0) {
+    return (
+      <div className="flex items-center justify-center py-12 border border-zinc-200 rounded-lg bg-white">
+        <p className="paragraph-small-medium text-zinc-500">
+          {translate('common.account.workspace.affiliates.transactions.empty')}
+        </p>
+      </div>
+    );
+  }
+
+  const viewAttachmentButton = (attachment?: string | null) =>
+    attachment ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            className="size-10! p-0"
+            aria-label={translate('common.account.workspace.affiliates.transactions.viewAttachment')}
+            onClick={() => onViewAttachment(attachment)}
+          >
+            <IconEye size={20} />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {translate('common.account.workspace.affiliates.transactions.viewAttachment')}
+        </TooltipContent>
+      </Tooltip>
+    ) : null;
+
+  return (
+    <>
+      <div className="hidden lg:block rounded-lg border border-zinc-200 bg-white overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-zinc-50 hover:bg-zinc-50">
+              <TableHead className={headClasses}>
+                {translate('common.account.workspace.affiliates.transactions.date')}
+              </TableHead>
+              <TableHead className={headClasses}>
+                {translate('common.account.workspace.affiliates.transactions.value')}
+              </TableHead>
+              <TableHead className={headClasses}>
+                {translate('common.account.workspace.affiliates.transactions.type')}
+              </TableHead>
+              <TableHead className={headClasses}>
+                {translate('common.account.workspace.affiliates.transactions.statusColumn')}
+              </TableHead>
+              <TableHead className="h-11 w-16" />
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {transactions.map((transaction) => (
+              <TableRow key={transaction.id} className="hover:bg-zinc-50">
+                <TableCell className="pl-6 pr-3 py-5">
+                  <span className="paragraph-small-medium text-zinc-600">{formatDateTime(transaction.datetime_add)}</span>
+                </TableCell>
+                <TableCell className="px-3 py-5">
+                  <span className="paragraph-small-semibold text-zinc-600">{formatCurrencyNumber(transaction.value)}</span>
+                </TableCell>
+                <TableCell className="px-3 py-5">
+                  <TransactionTypeBadge type={transaction.type} />
+                </TableCell>
+                <TableCell className="px-3 py-5">
+                  <TransactionStatusBadge transaction={transaction} />
+                </TableCell>
+                <TableCell className="w-16 py-4">
+                  <div className="flex justify-center">{viewAttachmentButton(transaction.attachment)}</div>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex lg:hidden flex-col gap-3">
+        {transactions.map((transaction) => (
+          <div key={transaction.id} className="flex flex-col gap-3 border border-zinc-200 rounded-lg p-4 bg-white">
+            <div className="flex items-center justify-between gap-4 min-h-10">
+              <span className="paragraph-small-regular text-zinc-600">{formatDateTime(transaction.datetime_add)}</span>
+              {viewAttachmentButton(transaction.attachment)}
+            </div>
+            <Separator />
+            <div className="flex flex-col gap-3">
+              <span className="paragraph-small-regular text-zinc-600">{transaction.email ?? '—'}</span>
+              <span className="paragraph-xlarge-semibold text-zinc-600">{formatCurrencyNumber(transaction.value)}</span>
+              <div className="flex items-center justify-between gap-2">
+                <TransactionTypeBadge type={transaction.type} />
+                <TransactionStatusBadge transaction={transaction} />
+              </div>
+            </div>
+            {transaction.status === 'refused' && transaction.refused_reason && (
+              <span className="paragraph-xsmall-medium text-zinc-500">
+                {translate('common.account.workspace.affiliates.transactions.refusedReason', {
+                  reason: transaction.refused_reason,
+                })}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

package/src/components/account/sections/affiliates/NoReceivingAccountModal.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { IconBuildingBank } 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 { useAffiliateFlows } from '../../../../store/useAffiliateFlows';
+
+/** Aviso de saque sem conta de recebimento cadastrada, com o caminho para cadastrar. */
+export function NoReceivingAccountModal() {
+  const translate = useTranslations();
+  const isOpen = useAffiliateFlows((state) => state.isMissingReceivingAccountOpen);
+  const close = useAffiliateFlows((state) => state.closeMissingReceivingAccount);
+  const openReceivingAccount = useAffiliateFlows((state) => state.openReceivingAccount);
+
+  const handleRegister = () => {
+    close();
+    openReceivingAccount();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>
+      <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-gray-100 rounded-lg">
+            <IconBuildingBank size={20} className="text-gray-950" />
+          </div>
+          <div className="flex flex-col gap-2">
+            <DialogTitle className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.account.workspace.affiliates.noBankAccount.title')}
+            </DialogTitle>
+            <DialogDescription className="paragraph-small-regular text-zinc-600" asChild>
+              <div className="flex flex-col gap-3">
+                <p>{translate('common.account.workspace.affiliates.noBankAccount.description')}</p>
+              </div>
+            </DialogDescription>
+          </div>
+        </DialogHeader>
+
+        <Separator />
+
+        <div className="flex items-center gap-2 p-5">
+          <Button className="h-10! transition-colors" onClick={handleRegister}>
+            {translate('common.account.workspace.affiliates.noBankAccount.registerButton')}
+          </Button>
+          <Button variant="secondary" className="h-10! transition-colors" onClick={close}>
+            {translate('common.actions.cancel')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}