@greatapps/common 1.1.789 → 1.1.791

package/dist/components/account/sections/AffiliatesSection.mjs

@@ -0,0 +1,313 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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 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;
+const tabTriggerClasses = "cursor-pointer gap-2 px-3";
+function JoinProgramCard({
+  onJoin,
+  onOpenTerms,
+  isJoining
+}) {
+  const translate = useTranslations();
+  const { whitelabel } = useWhitelabel();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-4 p-5 lg:p-6 bg-zinc-50 rounded-lg", children: [
+    /* @__PURE__ */ jsx(IconBox, { icon: IconLink }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.affiliates.joinProgram.title") }),
+      /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-zinc-600", children: [
+        translate("common.account.workspace.affiliates.joinProgram.description", {
+          whitelabelName: whitelabel?.name ?? ""
+        }),
+        " ",
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onOpenTerms, className: "underline text-zinc-950 cursor-pointer", children: translate("common.account.workspace.affiliates.joinProgram.termsLink") })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Button, { className: "h-10!", onClick: onJoin, loading: isJoining, children: isJoining ? translate("common.account.workspace.affiliates.joinProgram.joining") : translate("common.account.workspace.affiliates.joinProgram.join") })
+  ] });
+}
+function AffiliatesSection() {
+  const translate = useTranslations();
+  const { pagesUrl } = useWhitelabelUrls();
+  const actions = useAffiliatesActions();
+  const [selectedPeriod, setSelectedPeriod] = useState(DateFilterPeriod.ALL_TIME);
+  const [transactionsPage, setTransactionsPage] = useState(1);
+  const [transactionFilters, setTransactionFilters] = useState([]);
+  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);
+  const transactions = (transactionsData?.data ?? []).filter(
+    (transaction) => transactionFilters.length === 0 || transactionFilters.includes(transaction.status)
+  );
+  const handleToggleTransactionFilter = (value, checked) => {
+    setTransactionFilters(
+      (previous) => checked ? [...previous, value] : previous.filter((item) => item !== value)
+    );
+  };
+  if (isAffiliatePending) {
+    return /* @__PURE__ */ jsxs(WorkspaceSection, { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-40 rounded-lg" }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-[170px] rounded-lg" }, index)) }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-40 rounded-lg" })
+    ] });
+  }
+  if (isAffiliateError) {
+    return /* @__PURE__ */ jsx(WorkspaceSection, { children: /* @__PURE__ */ jsx(
+      SectionLoadError,
+      {
+        message: translate("common.account.workspace.loadFailed"),
+        onRetry: () => refetchAffiliate()
+      }
+    ) });
+  }
+  if (affiliate === null) {
+    return /* @__PURE__ */ jsx(WorkspaceSection, { children: /* @__PURE__ */ jsx(
+      JoinProgramCard,
+      {
+        onJoin: actions.joinProgram,
+        onOpenTerms: actions.openProgramTerms,
+        isJoining: actions.isJoiningProgram
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(WorkspaceSection, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs(Button, { className: "h-10! gap-2", onClick: () => actions.requestWithdrawal(affiliate), children: [
+        /* @__PURE__ */ jsx(IconCoin, { size: 20 }),
+        translate("common.account.workspace.affiliates.requestWithdrawal")
+      ] }),
+      /* @__PURE__ */ jsx(
+        RowActionsMenu,
+        {
+          width: 220,
+          className: "border border-zinc-200 bg-white",
+          items: [
+            {
+              icon: /* @__PURE__ */ jsx(IconBuildingBank, { size: 20, className: "text-zinc-400" }),
+              label: translate("common.account.workspace.affiliates.receivingAccount"),
+              onClick: () => actions.editReceivingAccount(affiliate)
+            },
+            {
+              icon: /* @__PURE__ */ jsx(IconUsers, { size: 20, className: "text-zinc-400" }),
+              label: translate("common.account.workspace.affiliates.listLeads"),
+              onClick: () => actions.listLeads(affiliate)
+            },
+            {
+              icon: /* @__PURE__ */ jsx(IconFileText, { size: 20, className: "text-zinc-400" }),
+              label: translate("common.account.workspace.affiliates.terms"),
+              onClick: actions.openTerms
+            }
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.affiliates.stats.heading") }),
+        /* @__PURE__ */ jsx(DateFilterPopover, { selectedPeriod, onSelectPeriod: setSelectedPeriod })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
+        /* @__PURE__ */ jsx(
+          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
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          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
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Tabs, { defaultValue: "link", className: "w-full gap-5", children: [
+      /* @__PURE__ */ jsxs(TabsList, { className: "h-auto bg-transparent overflow-x-auto scrollbar-hide", children: [
+        /* @__PURE__ */ jsxs(TabsTrigger, { className: tabTriggerClasses, value: "link", children: [
+          /* @__PURE__ */ jsx(IconLink, { size: 16 }),
+          translate("common.account.workspace.affiliates.tabs.link")
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { className: tabTriggerClasses, value: "commissions", children: [
+          /* @__PURE__ */ jsx(IconMenu2, { size: 16 }),
+          translate("common.account.workspace.affiliates.tabs.commissions")
+        ] }),
+        /* @__PURE__ */ jsxs(TabsTrigger, { className: tabTriggerClasses, value: "reports", children: [
+          /* @__PURE__ */ jsx(IconChartBar, { size: 16 }),
+          translate("common.account.workspace.affiliates.tabs.reports")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "link", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-3", children: [
+          /* @__PURE__ */ jsx(
+            AffiliateStepCard,
+            {
+              icon: IconMessageCircle,
+              title: translate("common.account.workspace.affiliates.steps.inviteTitle"),
+              description: translate("common.account.workspace.affiliates.steps.inviteDescription")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AffiliateStepCard,
+            {
+              icon: IconUserPlus,
+              title: translate("common.account.workspace.affiliates.steps.registerTitle"),
+              description: translate("common.account.workspace.affiliates.steps.registerDescription")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AffiliateStepCard,
+            {
+              icon: IconBookmark,
+              title: translate("common.account.workspace.affiliates.steps.trialTitle"),
+              description: translate("common.account.workspace.affiliates.steps.trialDescription")
+            }
+          )
+        ] }),
+        isCouponsPending ? Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-[140px] rounded-lg" }, index)) : coupons.map((coupon) => /* @__PURE__ */ jsx(
+          AffiliateCommissionCard,
+          {
+            commissionPercent: AFFILIATE_TOTAL_COMMISSION_PERCENT - coupon.discount,
+            discountPercent: coupon.discount,
+            affiliateCode: coupon.code,
+            shareLink: getAffiliateShareLink(pagesUrl, coupon)
+          },
+          coupon.id
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs(TabsContent, { value: "commissions", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.affiliates.transactions.total", {
+            total: String(transactionsTotal)
+          }) }),
+          /* @__PURE__ */ jsx(
+            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
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AffiliateTransactionsList,
+          {
+            transactions,
+            isLoading: isTransactionsPending,
+            onViewAttachment: actions.viewAttachment
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          ListPagination,
+          {
+            currentPage: transactionsPage,
+            totalPages: transactionsTotalPages,
+            onPageChange: setTransactionsPage
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(TabsContent, { value: "reports", children: /* @__PURE__ */ jsx(AffiliatesReportsTab, { report, isLoading: isReportPending }) })
+    ] }),
+    /* @__PURE__ */ jsx(AffiliateFlows, {})
+  ] });
+}
+export {
+  AffiliatesSection
+};
+//# sourceMappingURL=AffiliatesSection.mjs.map

package/dist/components/account/sections/AffiliatesSection.mjs.map

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

package/dist/components/account/sections/ChangePasswordSection.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-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";
@@ -17,11 +17,11 @@ function ChangePasswordSection({ onBack }) {
     "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",
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: translate("common.account.changePassword.title") }),
-          /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: "size-8! p-0", onClick: onBack, children: /* @__PURE__ */ jsx(IconX, { size: 18 }) })
+        /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", className: "h-10! w-fit", onClick: onBack, children: [
+          /* @__PURE__ */ jsx(IconArrowLeft, { size: 18 }),
+          translate("common.actions.back")
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
           /* @__PURE__ */ jsx(

package/dist/components/account/sections/ChangePasswordSection.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconLock, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useChangePasswordForm from '../hooks/useChangePasswordForm';\nimport usePasswordVisibility from '../../../hooks/usePasswordVisibility';\n\ninterface ChangePasswordSectionProps {\n  onBack: () => void;\n}\n\nexport function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {\n  const translate = useTranslations();\n  const { register, handleSubmit, errors } = useChangePasswordForm({\n    onSuccess: onBack,\n  });\n  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();\n  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      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\"\n    >\n      <div className=\"flex items-center justify-between\">\n        <span className=\"paragraph-medium-semibold text-gray-950\">\n          {translate('common.account.changePassword.title')}\n        </span>\n        <Button type=\"button\" variant=\"ghost\" className=\"size-8! p-0\" onClick={onBack}>\n          <IconX size={18} />\n        </Button>\n      </div>\n\n      <div className=\"flex flex-col gap-4\">\n        <FormField\n          label={translate('common.account.changePassword.currentPassword')}\n          type=\"password\"\n          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}\n          leftIcon={IconLock}\n          error={!!errors.currentPassword}\n          errorMessage={errors.currentPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showCurrentPw}\n          onTogglePassword={toggleCurrentPw}\n          {...register('currentPassword')}\n        />\n        <FormField\n          label={translate('common.account.changePassword.newPassword')}\n          type=\"password\"\n          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}\n          leftIcon={IconLock}\n          error={!!errors.newPassword}\n          errorMessage={errors.newPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showNewPw}\n          onTogglePassword={toggleNewPw}\n          {...register('newPassword')}\n        />\n      </div>\n\n      <Button type=\"submit\" className=\"w-fit h-10!\">\n        {translate('common.account.changePassword.submit')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";AA0BM,SACE,KADF;AAxBN,SAAS,UAAU,aAAa;AAChC,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAM3B,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC5E,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,UAAU,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC/D,WAAW;AAAA,EACb,CAAC;AACD,QAAM,EAAE,cAAc,eAAe,gBAAgB,gBAAgB,IAAI,sBAAsB;AAC/F,QAAM,EAAE,cAAc,WAAW,gBAAgB,YAAY,IAAI,sBAAsB;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,2CACb,oBAAU,qCAAqC,GAClD;AAAA,UACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,SAAQ,WAAU,eAAc,SAAS,QACrE,8BAAC,SAAM,MAAM,IAAI,GACnB;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,UAAU,+CAA+C;AAAA,cAChE,MAAK;AAAA,cACL,aAAa,UAAU,0DAA0D;AAAA,cACjF,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,iBAAiB;AAAA,cACtC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,iBAAiB;AAAA;AAAA,UAChC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,UAAU,2CAA2C;AAAA,cAC5D,MAAK;AAAA,cACL,aAAa,UAAU,sDAAsD;AAAA,cAC7E,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,aAAa;AAAA,cAClC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,WAAU,eAC7B,oBAAU,sCAAsC,GACnD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/account/sections/ChangePasswordSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconArrowLeft, IconLock } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../ui/buttons/Button';\nimport { FormField } from '../../ui/form/FormField';\nimport useChangePasswordForm from '../hooks/useChangePasswordForm';\nimport usePasswordVisibility from '../../../hooks/usePasswordVisibility';\n\ninterface ChangePasswordSectionProps {\n  onBack: () => void;\n}\n\nexport function ChangePasswordSection({ onBack }: ChangePasswordSectionProps) {\n  const translate = useTranslations();\n  const { register, handleSubmit, errors } = useChangePasswordForm({\n    onSuccess: onBack,\n  });\n  const { showPassword: showCurrentPw, togglePassword: toggleCurrentPw } = usePasswordVisibility();\n  const { showPassword: showNewPw, togglePassword: toggleNewPw } = usePasswordVisibility();\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      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\"\n    >\n      <Button type=\"button\" variant=\"secondary\" className=\"h-10! w-fit\" onClick={onBack}>\n        <IconArrowLeft size={18} />\n        {translate('common.actions.back')}\n      </Button>\n\n      <div className=\"flex flex-col gap-4\">\n        <FormField\n          label={translate('common.account.changePassword.currentPassword')}\n          type=\"password\"\n          placeholder={translate('common.account.changePassword.currentPasswordPlaceholder')}\n          leftIcon={IconLock}\n          error={!!errors.currentPassword}\n          errorMessage={errors.currentPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showCurrentPw}\n          onTogglePassword={toggleCurrentPw}\n          {...register('currentPassword')}\n        />\n        <FormField\n          label={translate('common.account.changePassword.newPassword')}\n          type=\"password\"\n          placeholder={translate('common.account.changePassword.newPasswordPlaceholder')}\n          leftIcon={IconLock}\n          error={!!errors.newPassword}\n          errorMessage={errors.newPassword?.message}\n          classnameContainer=\"h-10!\"\n          showPassword={showNewPw}\n          onTogglePassword={toggleNewPw}\n          {...register('newPassword')}\n        />\n      </div>\n\n      <Button type=\"submit\" className=\"w-fit h-10!\">\n        {translate('common.account.changePassword.submit')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";AA0BM,SACE,KADF;AAxBN,SAAS,eAAe,gBAAgB;AACxC,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,OAAO,2BAA2B;AAClC,OAAO,2BAA2B;AAM3B,SAAS,sBAAsB,EAAE,OAAO,GAA+B;AAC5E,QAAM,YAAY,gBAAgB;AAClC,QAAM,EAAE,UAAU,cAAc,OAAO,IAAI,sBAAsB;AAAA,IAC/D,WAAW;AAAA,EACb,CAAC;AACD,QAAM,EAAE,cAAc,eAAe,gBAAgB,gBAAgB,IAAI,sBAAsB;AAC/F,QAAM,EAAE,cAAc,WAAW,gBAAgB,YAAY,IAAI,sBAAsB;AAEvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,6BAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,eAAc,SAAS,QACzE;AAAA,8BAAC,iBAAc,MAAM,IAAI;AAAA,UACxB,UAAU,qBAAqB;AAAA,WAClC;AAAA,QAEA,qBAAC,SAAI,WAAU,uBACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,UAAU,+CAA+C;AAAA,cAChE,MAAK;AAAA,cACL,aAAa,UAAU,0DAA0D;AAAA,cACjF,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,iBAAiB;AAAA,cACtC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,iBAAiB;AAAA;AAAA,UAChC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,UAAU,2CAA2C;AAAA,cAC5D,MAAK;AAAA,cACL,aAAa,UAAU,sDAAsD;AAAA,cAC7E,UAAU;AAAA,cACV,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,aAAa;AAAA,cAClC,oBAAmB;AAAA,cACnB,cAAc;AAAA,cACd,kBAAkB;AAAA,cACjB,GAAG,SAAS,aAAa;AAAA;AAAA,UAC5B;AAAA,WACF;AAAA,QAEA,oBAAC,UAAO,MAAK,UAAS,WAAU,eAC7B,oBAAU,sCAAsC,GACnD;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}