@greatapps/common 1.1.790 → 1.1.792

package/src/components/account/sections/AffiliatesSection.tsx

@@ -0,0 +1,342 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+  IconBookmark,
+  IconChartBar,
+  IconBuildingBank,
+  IconCoin,
+  IconCurrencyDollar,
+  IconFileText,
+  IconInfoCircle,
+  IconLink,
+  IconMail,
+  IconMenu2,
+  IconMessageCircle,
+  IconUserPlus,
+  IconUsers,
+} from '@tabler/icons-react';
+import { useTranslations } from 'next-intl';
+import { Button } from '../../ui/buttons/Button';
+import { Skeleton } from '../../ui/feedback/Skeleton';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/data-display/Tabs';
+import { useWhitelabel, useWhitelabelUrls } from '../../../providers/whitelabel.provider';
+import { formatCurrencyNumber } from '../../../utils/format/currency';
+import { getReportDateRangeFromPeriod } from '../../../utils/date-filter-period';
+import { DateFilterPeriod } from '../../../enums/DateFilterPeriod';
+import { useCurrentAffiliate } from '../../../modules/affiliates/hooks/use-current-affiliate.hook';
+import { useAffiliateReportAnalytics } from '../../../modules/affiliates/hooks/use-affiliate-report-analytics.hook';
+import { useAffiliateTransactions } from '../../../modules/affiliates/hooks/use-affiliate-transactions.hook';
+import { useAffiliateCoupons } from '../../../modules/affiliates/hooks/use-affiliate-coupons.hook';
+import { AFFILIATE_TOTAL_COMMISSION_PERCENT } from '../../../modules/affiliates/constants/affiliate.constants';
+import { getAffiliateShareLink } from '../../../modules/affiliates/utils/get-affiliate-share-link';
+import type { AffiliateTransaction } from '../../../modules/affiliates/types/affiliate.type';
+import useAffiliatesActions from '../hooks/useAffiliatesActions';
+import { DateFilterPopover } from './shared/DateFilterPopover';
+import { FilterPopover } from './shared/FilterPopover';
+import { IconBox } from './shared/IconBox';
+import { ListPagination } from './shared/ListPagination';
+import { RowActionsMenu } from './shared/RowActionsMenu';
+import { SectionLoadError } from './shared/SectionLoadError';
+import { WorkspaceSection } from './shared/WorkspaceSection';
+import { AffiliateCommissionCard } from './affiliates/AffiliateCommissionCard';
+import { AffiliateStatsCard } from './affiliates/AffiliateStatsCard';
+import { AffiliateStepCard } from './affiliates/AffiliateStepCard';
+import { AffiliateTransactionsList } from './affiliates/AffiliateTransactionsList';
+import { AffiliatesReportsTab } from './affiliates/reports/AffiliatesReportsTab';
+import { AffiliateFlows } from './affiliates/AffiliateFlows';
+
+const TRANSACTIONS_PAGE_SIZE = 100;
+
+type TransactionFilter = Extract<AffiliateTransaction['status'], 'consolidated' | 'pending'>;
+
+const tabTriggerClasses = 'cursor-pointer gap-2 px-3';
+
+function JoinProgramCard({
+  onJoin,
+  onOpenTerms,
+  isJoining,
+}: {
+  onJoin: () => void;
+  onOpenTerms: () => void;
+  isJoining: boolean;
+}) {
+  const translate = useTranslations();
+  const { whitelabel } = useWhitelabel();
+
+  return (
+    <div className="flex flex-col items-start gap-4 p-5 lg:p-6 bg-zinc-50 rounded-lg">
+      <IconBox icon={IconLink} />
+      <div className="flex flex-col gap-2">
+        <span className="paragraph-medium-semibold text-zinc-950">
+          {translate('common.account.workspace.affiliates.joinProgram.title')}
+        </span>
+        <p className="paragraph-small-regular text-zinc-600">
+          {translate('common.account.workspace.affiliates.joinProgram.description', {
+            whitelabelName: whitelabel?.name ?? '',
+          })}{' '}
+          <button type="button" onClick={onOpenTerms} className="underline text-zinc-950 cursor-pointer">
+            {translate('common.account.workspace.affiliates.joinProgram.termsLink')}
+          </button>
+        </p>
+      </div>
+      <Button className="h-10!" onClick={onJoin} loading={isJoining}>
+        {isJoining
+          ? translate('common.account.workspace.affiliates.joinProgram.joining')
+          : translate('common.account.workspace.affiliates.joinProgram.join')}
+      </Button>
+    </div>
+  );
+}
+
+export function AffiliatesSection() {
+  const translate = useTranslations();
+  const { pagesUrl } = useWhitelabelUrls();
+  const actions = useAffiliatesActions();
+
+  const [selectedPeriod, setSelectedPeriod] = useState<DateFilterPeriod>(DateFilterPeriod.ALL_TIME);
+  const [transactionsPage, setTransactionsPage] = useState(1);
+  const [transactionFilters, setTransactionFilters] = useState<TransactionFilter[]>([]);
+  const reportParams = useMemo(() => getReportDateRangeFromPeriod(selectedPeriod), [selectedPeriod]);
+
+  const {
+    data: affiliateData,
+    isPending: isAffiliatePending,
+    isError: isAffiliateError,
+    refetch: refetchAffiliate,
+  } = useCurrentAffiliate();
+  const affiliate = affiliateData?.data ?? null;
+  const isAffiliate = !!affiliate;
+
+  const { data: reportData, isPending: isReportPending } = useAffiliateReportAnalytics(reportParams, {
+    enabled: isAffiliate,
+  });
+  const { data: couponsData, isPending: isCouponsPending } = useAffiliateCoupons({ enabled: isAffiliate });
+  const { data: transactionsData, isPending: isTransactionsPending } = useAffiliateTransactions(
+    { page: transactionsPage, limit: TRANSACTIONS_PAGE_SIZE, sort: 'id:desc', ...reportParams },
+    { enabled: isAffiliate }
+  );
+
+  const report = reportData?.data;
+  const balance = affiliate?.balance != null ? Number(affiliate.balance) : 0;
+  const coupons = (couponsData?.data ?? []).filter((coupon) => coupon.discount <= AFFILIATE_TOTAL_COMMISSION_PERCENT);
+  const transactionsTotal = transactionsData?.total ?? 0;
+  const transactionsTotalPages = Math.ceil(transactionsTotal / TRANSACTIONS_PAGE_SIZE);
+
+  // Filtro da página atual, igual à tela de afiliados.
+  const transactions = (transactionsData?.data ?? []).filter(
+    (transaction) =>
+      transactionFilters.length === 0 || transactionFilters.includes(transaction.status as TransactionFilter)
+  );
+
+  const handleToggleTransactionFilter = (value: TransactionFilter, checked: boolean) => {
+    setTransactionFilters((previous) =>
+      checked ? [...previous, value] : previous.filter((item) => item !== value)
+    );
+  };
+
+
+  if (isAffiliatePending) {
+    return (
+      <WorkspaceSection>
+        <Skeleton className="h-10 w-40 rounded-lg" />
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton key={index} className="h-[170px] rounded-lg" />
+          ))}
+        </div>
+        <Skeleton className="h-40 rounded-lg" />
+      </WorkspaceSection>
+    );
+  }
+
+  if (isAffiliateError) {
+    return (
+      <WorkspaceSection>
+        <SectionLoadError
+          message={translate('common.account.workspace.loadFailed')}
+          onRetry={() => refetchAffiliate()}
+        />
+      </WorkspaceSection>
+    );
+  }
+
+  if (affiliate === null) {
+    return (
+      <WorkspaceSection>
+        <JoinProgramCard
+          onJoin={actions.joinProgram}
+          onOpenTerms={actions.openProgramTerms}
+          isJoining={actions.isJoiningProgram}
+        />
+      </WorkspaceSection>
+    );
+  }
+
+  return (
+    <WorkspaceSection>
+
+      <div className="flex items-center gap-2">
+        <Button className="h-10! gap-2" onClick={() => actions.requestWithdrawal(affiliate)}>
+          <IconCoin size={20} />
+          {translate('common.account.workspace.affiliates.requestWithdrawal')}
+        </Button>
+        <RowActionsMenu
+          width={220}
+          className="border border-zinc-200 bg-white"
+          items={[
+            {
+              icon: <IconBuildingBank size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.receivingAccount'),
+              onClick: () => actions.editReceivingAccount(affiliate),
+            },
+            {
+              icon: <IconUsers size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.listLeads'),
+              onClick: () => actions.listLeads(affiliate),
+            },
+            {
+              icon: <IconFileText size={20} className="text-zinc-400" />,
+              label: translate('common.account.workspace.affiliates.terms'),
+              onClick: actions.openTerms,
+            },
+          ]}
+        />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-3">
+          <span className="paragraph-medium-semibold text-zinc-950">
+            {translate('common.account.workspace.affiliates.stats.heading')}
+          </span>
+          <DateFilterPopover selectedPeriod={selectedPeriod} onSelectPeriod={setSelectedPeriod} />
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+          <AffiliateStatsCard
+            icon={IconMail}
+            stats={[
+              {
+                label: translate('common.account.workspace.affiliates.stats.totalAffiliates'),
+                value: String(report?.customers.period ?? 0),
+              },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.selectedPeriod')}
+            isLoading={isReportPending}
+          />
+          <AffiliateStatsCard
+            icon={IconUsers}
+            stats={[
+              { label: translate('common.account.workspace.affiliates.stats.clicks'), value: String(report?.views.period ?? 0) },
+              { label: translate('common.account.workspace.affiliates.stats.leads'), value: String(report?.leads.period ?? 0) },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.selectedPeriod')}
+            isLoading={isReportPending}
+          />
+          <AffiliateStatsCard
+            icon={IconCurrencyDollar}
+            stats={[
+              { label: translate('common.account.workspace.affiliates.stats.balance'), value: formatCurrencyNumber(balance) },
+            ]}
+            footerText={translate('common.account.workspace.affiliates.stats.minBalance')}
+            footerIcon={IconInfoCircle}
+          />
+        </div>
+      </div>
+
+      <Tabs defaultValue="link" className="w-full gap-5">
+        <TabsList className="h-auto bg-transparent overflow-x-auto scrollbar-hide">
+          <TabsTrigger className={tabTriggerClasses} value="link">
+            <IconLink size={16} />
+            {translate('common.account.workspace.affiliates.tabs.link')}
+          </TabsTrigger>
+          <TabsTrigger className={tabTriggerClasses} value="commissions">
+            <IconMenu2 size={16} />
+            {translate('common.account.workspace.affiliates.tabs.commissions')}
+          </TabsTrigger>
+          <TabsTrigger className={tabTriggerClasses} value="reports">
+            <IconChartBar size={16} />
+            {translate('common.account.workspace.affiliates.tabs.reports')}
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="link" className="flex flex-col gap-4">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+            <AffiliateStepCard
+              icon={IconMessageCircle}
+              title={translate('common.account.workspace.affiliates.steps.inviteTitle')}
+              description={translate('common.account.workspace.affiliates.steps.inviteDescription')}
+            />
+            <AffiliateStepCard
+              icon={IconUserPlus}
+              title={translate('common.account.workspace.affiliates.steps.registerTitle')}
+              description={translate('common.account.workspace.affiliates.steps.registerDescription')}
+            />
+            <AffiliateStepCard
+              icon={IconBookmark}
+              title={translate('common.account.workspace.affiliates.steps.trialTitle')}
+              description={translate('common.account.workspace.affiliates.steps.trialDescription')}
+            />
+          </div>
+
+          {isCouponsPending
+            ? Array.from({ length: 3 }).map((_, index) => <Skeleton key={index} className="h-[140px] rounded-lg" />)
+            : coupons.map((coupon) => (
+                <AffiliateCommissionCard
+                  key={coupon.id}
+                  commissionPercent={AFFILIATE_TOTAL_COMMISSION_PERCENT - coupon.discount}
+                  discountPercent={coupon.discount}
+                  affiliateCode={coupon.code}
+                  shareLink={getAffiliateShareLink(pagesUrl, coupon)}
+                />
+              ))}
+        </TabsContent>
+
+        <TabsContent value="commissions" className="flex flex-col gap-4">
+          <div className="flex items-center justify-between gap-3">
+            <span className="paragraph-medium-semibold text-zinc-950">
+              {translate('common.account.workspace.affiliates.transactions.total', {
+                total: String(transactionsTotal),
+              })}
+            </span>
+            <FilterPopover
+              label={translate('common.account.workspace.affiliates.transactions.filter')}
+              width={224}
+              options={[
+                {
+                  value: 'consolidated',
+                  label: translate('common.account.workspace.affiliates.transactions.status.consolidated'),
+                },
+                {
+                  value: 'pending',
+                  label: translate('common.account.workspace.affiliates.transactions.filterApproval'),
+                },
+              ]}
+              selected={transactionFilters}
+              onToggle={handleToggleTransactionFilter}
+            />
+          </div>
+
+          <AffiliateTransactionsList
+            transactions={transactions}
+            isLoading={isTransactionsPending}
+            onViewAttachment={actions.viewAttachment}
+          />
+
+          <div>
+            <ListPagination
+              currentPage={transactionsPage}
+              totalPages={transactionsTotalPages}
+              onPageChange={setTransactionsPage}
+            />
+          </div>
+        </TabsContent>
+
+        <TabsContent value="reports">
+          <AffiliatesReportsTab report={report} isLoading={isReportPending} />
+        </TabsContent>
+      </Tabs>
+
+      <AffiliateFlows />
+    </WorkspaceSection>
+  );
+}

package/src/components/account/sections/ChangePasswordSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { IconLock, IconX } from '@tabler/icons-react';
+import { IconArrowLeft, IconLock } from '@tabler/icons-react';
 import { useTranslations } from 'next-intl';
 import { Button } from '../../ui/buttons/Button';
 import { FormField } from '../../ui/form/FormField';
@@ -22,16 +22,12 @@ export function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {
   return (
     <form
       onSubmit={handleSubmit}
-      className="flex-1 overflow-y-auto px-4 pb-5 lg:p-5 flex flex-col h-full lg:h-full gap-5 lg:gap-6"
+      className="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 overscroll-contain px-4 py-5 pb-20 lg:px-8 lg:py-6 flex flex-col h-full gap-5 lg:gap-8"
     >
-      <div className="flex items-center justify-between">
-        <span className="paragraph-medium-semibold text-gray-950">
-          {translate('common.account.changePassword.title')}
-        </span>
-        <Button type="button" variant="ghost" className="size-8! p-0" onClick={onBack}>
-          <IconX size={18} />
-        </Button>
-      </div>
+      <Button type="button" variant="secondary" className="h-10! w-fit" onClick={onBack}>
+        <IconArrowLeft size={18} />
+        {translate('common.actions.back')}
+      </Button>
 
       <div className="flex flex-col gap-4">
         <FormField