@greatapps/common 1.1.789 → 1.1.791

package/dist/components/account/sections/subscription/PendingChangeDialog.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Badge } from "../../../ui/data-display/Badge";
+import { Separator } from "../../../ui/data-display/Separator";
+import { Dialog, DialogContent, DialogTitle } from "../../../ui/overlay/Dialog";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import {
+  getBillingPeriodLabel,
+  getPeriodicityLabel,
+  periodicityToBillingPeriod
+} from "../../../../modules/subscriptions/utils/periodicity";
+import { useIsDefaultWhitelabel } from "../../../../providers/whitelabel.provider";
+import { formatShortDate } from "../../../../infra/utils/date";
+import { useSubscriptionFlows } from "../../../../store/useSubscriptionFlows";
+function PendingChangeDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations("common.account.workspace.subscription.pendingChange");
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const pendingChange = useSubscriptionFlows((state) => state.pendingChange);
+  const close = useSubscriptionFlows((state) => state.closePendingChange);
+  const newPlan = pendingChange?.new_plan;
+  const newItems = pendingChange?.new_items ?? [];
+  const newDiscounts = pendingChange?.new_discounts ?? [];
+  const planItem = newItems.find((item) => item.is_plan_base);
+  const addonItems = newItems.filter(
+    (item) => !item.is_plan_base && !item.is_ai_credit && item.value > 0
+  );
+  const aiItem = newItems.find((item) => item.is_ai_credit && item.value > 0);
+  const billingLabel = newPlan ? getBillingPeriodLabel(periodicityToBillingPeriod(newPlan.periodicity) ?? "monthly", translate) : translate("common.periodicity.monthly");
+  const periodicityLabel = newPlan ? getPeriodicityLabel(newPlan.periodicity, translate) : "";
+  const effectDateLabel = pendingChange?.takes_effect_at_iso ? formatShortDate(pendingChange.takes_effect_at_iso) : "";
+  const periodicityDiscount = newDiscounts.find((discount) => discount.kind === "periodicity");
+  const couponDiscount = newDiscounts.find(
+    (discount) => discount.kind && discount.kind !== "periodicity"
+  );
+  return /* @__PURE__ */ jsx(Dialog, { open: !!pendingChange, onOpenChange: (nextOpen) => !nextOpen && close(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-100! lg:max-w-105! rounded-lg border shadow-[0px_4px_6px_0px_rgba(26,26,26,0.1)]",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 h-14 md:h-16 relative border-b border-zinc-200", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translateDialog("title") }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: close,
+              "aria-label": translate("common.actions.close"),
+              className: "absolute right-3 md:right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors",
+              children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-400" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 p-4 lg:p-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.subscription.planCard.planName", {
+                name: newPlan?.name ?? ""
+              }) }),
+              /* @__PURE__ */ jsx(Badge, { className: "text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold", children: periodicityLabel })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: translateDialog("startsOn", { date: effectDateLabel }) })
+          ] }),
+          /* @__PURE__ */ jsx(Separator, { className: "bg-zinc-200" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+            planItem && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("common.account.workspace.subscription.planCard.planName", {
+                name: planItem.addon_name ?? ""
+              }) }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-500", children: formatCurrencyNumber(planItem.value) })
+            ] }),
+            addonItems.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: item.quantity > 1 ? translateDialog("addonExtras", {
+                qty: String(item.quantity),
+                name: (item.addon_name ?? "").toLowerCase()
+              }) : item.addon_name }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-500", children: formatCurrencyNumber(item.value) })
+            ] }, `${item.addon_name ?? "addon"}-${index}`)),
+            isDefaultWhitelabel && aiItem && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translateDialog("aiCredits", { qty: aiItem.quantity.toLocaleString("pt-BR") }) }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-500", children: formatCurrencyNumber(aiItem.value) })
+            ] }),
+            periodicityDiscount?.percent_off ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-green-600", children: translateDialog("periodicityDiscount") }),
+              /* @__PURE__ */ jsxs("span", { className: "paragraph-small-semibold text-green-600", children: [
+                "-",
+                periodicityDiscount.percent_off,
+                "%"
+              ] })
+            ] }) : null,
+            couponDiscount?.percent_off ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-green-600", children: couponDiscount.name ?? translateDialog("couponDiscount") }),
+              /* @__PURE__ */ jsxs("span", { className: "paragraph-small-semibold text-green-600", children: [
+                "-",
+                couponDiscount.percent_off,
+                "%"
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ jsx(Separator, { className: "bg-zinc-200" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translateDialog("billing", { period: billingLabel }) }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950", children: formatCurrencyNumber(newPlan?.value ?? 0) })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  PendingChangeDialog
+};
+//# sourceMappingURL=PendingChangeDialog.mjs.map

package/dist/components/account/sections/subscription/PendingChangeDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PendingChangeDialog.tsx"],"sourcesContent":["'use client';\n\nimport { IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Badge } from '../../../ui/data-display/Badge';\nimport { Separator } from '../../../ui/data-display/Separator';\nimport { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport {\n  getBillingPeriodLabel,\n  getPeriodicityLabel,\n  periodicityToBillingPeriod,\n} from '../../../../modules/subscriptions/utils/periodicity';\nimport { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';\nimport { formatShortDate } from '../../../../infra/utils/date';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\n\n/** Resumo da alteração de plano já agendada: o que passa a valer e a partir de quando. */\nexport function PendingChangeDialog() {\n  const translate = useTranslations();\n  const translateDialog = useTranslations('common.account.workspace.subscription.pendingChange');\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const pendingChange = useSubscriptionFlows((state) => state.pendingChange);\n  const close = useSubscriptionFlows((state) => state.closePendingChange);\n\n  const newPlan = pendingChange?.new_plan;\n  const newItems = pendingChange?.new_items ?? [];\n  const newDiscounts = pendingChange?.new_discounts ?? [];\n\n  const planItem = newItems.find((item) => item.is_plan_base);\n  const addonItems = newItems.filter(\n    (item) => !item.is_plan_base && !item.is_ai_credit && item.value > 0\n  );\n  const aiItem = newItems.find((item) => item.is_ai_credit && item.value > 0);\n\n  const billingLabel = newPlan\n    ? getBillingPeriodLabel(periodicityToBillingPeriod(newPlan.periodicity) ?? 'monthly', translate)\n    : translate('common.periodicity.monthly');\n  const periodicityLabel = newPlan ? getPeriodicityLabel(newPlan.periodicity, translate) : '';\n  const effectDateLabel = pendingChange?.takes_effect_at_iso\n    ? formatShortDate(pendingChange.takes_effect_at_iso)\n    : '';\n\n  const periodicityDiscount = newDiscounts.find((discount) => discount.kind === 'periodicity');\n  const couponDiscount = newDiscounts.find(\n    (discount) => discount.kind && discount.kind !== 'periodicity'\n  );\n\n  return (\n    <Dialog open={!!pendingChange} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0! gap-0! max-w-[calc(100%-2rem)]! w-full sm:max-w-100! lg:max-w-105! rounded-lg border shadow-[0px_4px_6px_0px_rgba(26,26,26,0.1)]\"\n      >\n        <div className=\"flex items-center justify-center px-4 py-3 h-14 md:h-16 relative border-b border-zinc-200\">\n          <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n            {translateDialog('title')}\n          </DialogTitle>\n          <button\n            type=\"button\"\n            onClick={close}\n            aria-label={translate('common.actions.close')}\n            className=\"absolute right-3 md:right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors\"\n          >\n            <IconX size={18} className=\"text-zinc-400\" />\n          </button>\n        </div>\n\n        <div className=\"flex flex-col gap-5 p-4 lg:p-5\">\n          <div className=\"flex flex-col gap-1\">\n            <div className=\"flex items-center gap-2\">\n              <span className=\"paragraph-medium-semibold text-zinc-950\">\n                {translate('common.account.workspace.subscription.planCard.planName', {\n                  name: newPlan?.name ?? '',\n                })}\n              </span>\n              <Badge className=\"text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold\">\n                {periodicityLabel}\n              </Badge>\n            </div>\n            <span className=\"paragraph-small-regular text-zinc-500\">\n              {translateDialog('startsOn', { date: effectDateLabel })}\n            </span>\n          </div>\n\n          <Separator className=\"bg-zinc-200\" />\n\n          <div className=\"flex flex-col gap-4\">\n            {planItem && (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"paragraph-small-medium text-zinc-500\">\n                  {translate('common.account.workspace.subscription.planCard.planName', {\n                    name: planItem.addon_name ?? '',\n                  })}\n                </span>\n                <span className=\"paragraph-small-semibold text-zinc-500\">\n                  {formatCurrencyNumber(planItem.value)}\n                </span>\n              </div>\n            )}\n\n            {addonItems.map((item, index) => (\n              <div key={`${item.addon_name ?? 'addon'}-${index}`} className=\"flex items-center justify-between\">\n                <span className=\"paragraph-small-medium text-zinc-500\">\n                  {item.quantity > 1\n                    ? translateDialog('addonExtras', {\n                        qty: String(item.quantity),\n                        name: (item.addon_name ?? '').toLowerCase(),\n                      })\n                    : item.addon_name}\n                </span>\n                <span className=\"paragraph-small-semibold text-zinc-500\">\n                  {formatCurrencyNumber(item.value)}\n                </span>\n              </div>\n            ))}\n\n            {isDefaultWhitelabel && aiItem && (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"paragraph-small-medium text-zinc-500\">\n                  {translateDialog('aiCredits', { qty: aiItem.quantity.toLocaleString('pt-BR') })}\n                </span>\n                <span className=\"paragraph-small-semibold text-zinc-500\">\n                  {formatCurrencyNumber(aiItem.value)}\n                </span>\n              </div>\n            )}\n\n            {periodicityDiscount?.percent_off ? (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"paragraph-small-medium text-green-600\">\n                  {translateDialog('periodicityDiscount')}\n                </span>\n                <span className=\"paragraph-small-semibold text-green-600\">\n                  -{periodicityDiscount.percent_off}%\n                </span>\n              </div>\n            ) : null}\n\n            {couponDiscount?.percent_off ? (\n              <div className=\"flex items-center justify-between\">\n                <span className=\"paragraph-small-medium text-green-600\">\n                  {couponDiscount.name ?? translateDialog('couponDiscount')}\n                </span>\n                <span className=\"paragraph-small-semibold text-green-600\">\n                  -{couponDiscount.percent_off}%\n                </span>\n              </div>\n            ) : null}\n\n            <Separator className=\"bg-zinc-200\" />\n\n            <div className=\"flex items-center justify-between\">\n              <span className=\"paragraph-small-medium text-zinc-500\">\n                {translateDialog('billing', { period: billingLabel })}\n              </span>\n              <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950\">\n                {formatCurrencyNumber(newPlan?.value ?? 0)}\n              </span>\n            </div>\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/sections/subscription/PixDetailsDialog.mjs

@@ -0,0 +1,165 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconCalendar, IconCopy, IconCoin, IconQrcode } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "../../../ui/buttons/Button";
+import { Skeleton } from "../../../ui/feedback/Skeleton";
+import { Toast } from "../../../ui/feedback/Toast";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../ui/overlay/Dialog";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { useRefreshChargePix } from "../../../../modules/charges/hooks/refresh-pix.hook";
+import useCountdownTimer from "../../../../hooks/useCountdownTimer";
+import { copyToClipboard } from "../../../../utils/browser/clipboard";
+import { qrCodeToDataUrl } from "../../../../utils/qrcode/to-data-url";
+function formatCountdown(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remaining = seconds % 60;
+  const mm = String(minutes).padStart(2, "0");
+  const ss = String(remaining).padStart(2, "0");
+  return hours > 0 ? `${String(hours).padStart(2, "0")}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function PixDetailsDialog({ open, charge, onOpenChange }) {
+  const translate = useTranslations("common.account.workspace.subscription.pixDetails");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const paymentDetails = charge?.payment_details;
+  const staleQrCode = paymentDetails?.qr_code;
+  const staleExpiresAt = paymentDetails?.expires_at;
+  const isExpired = Boolean(paymentDetails?.expired);
+  const isRefreshable = Boolean(paymentDetails?.refreshable);
+  const needsRefresh = isRefreshable && (isExpired || !staleQrCode);
+  const [refreshedPix, setRefreshedPix] = useState(null);
+  const [mountedAt, setMountedAt] = useState(null);
+  const [generatedQrImage, setGeneratedQrImage] = useState(null);
+  const refreshPix = useRefreshChargePix();
+  useEffect(() => {
+    if (!open) {
+      setRefreshedPix(null);
+      refreshPix.reset();
+      return;
+    }
+    setMountedAt(Date.now());
+    if (needsRefresh && charge?.id) {
+      refreshPix.mutate(String(charge.id), {
+        onSuccess: (result) => {
+          if (result.pix) setRefreshedPix(result.pix);
+        }
+      });
+    }
+  }, [open]);
+  const qrCode = refreshedPix?.qr_code ?? (needsRefresh ? null : staleQrCode);
+  const expiresAtRaw = refreshedPix?.expires_at ?? (needsRefresh ? null : staleExpiresAt);
+  const isRefreshing = needsRefresh && refreshPix.isPending;
+  const refreshNotice = refreshPix.data && !refreshPix.data.pix ? refreshPix.data.message : null;
+  const expiresInSeconds = expiresAtRaw && mountedAt ? Math.max(0, Math.floor((new Date(expiresAtRaw).getTime() - mountedAt) / 1e3)) : null;
+  const shouldShowCountdown = typeof expiresInSeconds === "number" && expiresInSeconds > 0;
+  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });
+  useEffect(() => {
+    if (!qrCode) {
+      setGeneratedQrImage(null);
+      return;
+    }
+    let cancelled = false;
+    qrCodeToDataUrl(qrCode, {
+      width: 396,
+      margin: 1,
+      errorCorrectionLevel: "M",
+      color: { dark: "#171412", light: "#FFFFFF" }
+    }).then((dataUrl) => {
+      if (!cancelled) setGeneratedQrImage(dataUrl);
+    }).catch(() => {
+      if (!cancelled) setGeneratedQrImage(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [qrCode]);
+  const handleCopyCode = async () => {
+    if (!qrCode) return;
+    await copyToClipboard(qrCode);
+    toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translate("copiedToast"), toastId }));
+  };
+  if (!charge) return null;
+  const dueDateLabel = (() => {
+    if (!expiresAtRaw || !mountedAt) {
+      if (!charge.date_due) return "\u2014";
+      return new Date(charge.date_due).toLocaleDateString("pt-BR", { timeZone: "UTC" });
+    }
+    const expiresAt = new Date(expiresAtRaw);
+    const today = new Date(mountedAt);
+    const tomorrow = new Date(mountedAt);
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    if (isSameDay(expiresAt, today)) return translate("dueDateToday");
+    if (isSameDay(expiresAt, tomorrow)) return translate("dueDateTomorrow");
+    return expiresAt.toLocaleDateString("pt-BR");
+  })();
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] 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", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "gap-3 text-left p-5 border-b border-zinc-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0", children: /* @__PURE__ */ jsx(IconQrcode, { size: 20, className: "text-zinc-950" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("title") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("subtitle") })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconCalendar, { size: 20, className: "text-zinc-950" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("dueDate") }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: dueDateLabel })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "h-10 w-px bg-zinc-200" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconCoin, { size: 20, className: "text-zinc-950" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("value") }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: formatCurrencyNumber(charge.value) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center", children: [
+        shouldShowCountdown && /* @__PURE__ */ jsxs("p", { className: "paragraph-small-semibold text-zinc-950 text-center", children: [
+          translate("payIn"),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-red-600", children: formatCountdown(seconds) })
+        ] }),
+        isRefreshing ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "size-[198px] rounded-lg shrink-0" }),
+          /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500 text-center", children: translate("generating") })
+        ] }) : generatedQrImage ? /* @__PURE__ */ jsx("div", { className: "size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: generatedQrImage,
+            alt: translate("qrCodeAlt"),
+            className: "size-full object-contain"
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "size-[198px] border border-dashed border-zinc-300 rounded-lg bg-zinc-50 shrink-0 flex items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500", children: refreshPix.isError ? refreshPix.error?.message || translate("refreshError") : refreshNotice ?? translate("qrCodeUnavailable") }) }),
+        qrCode && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-zinc-200" }),
+            /* @__PURE__ */ jsx("span", { className: "px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap", children: translate("orCopyCode") }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-zinc-200" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 w-full", children: [
+            /* @__PURE__ */ jsx("p", { className: "paragraph-small-medium text-zinc-950 text-center break-all w-full", children: qrCode }),
+            /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: handleCopyCode, className: "h-10 gap-1.5", children: [
+              /* @__PURE__ */ jsx(IconCopy, { size: 20 }),
+              translate("copyCode")
+            ] })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  PixDetailsDialog
+};
+//# sourceMappingURL=PixDetailsDialog.mjs.map

package/dist/components/account/sections/subscription/PixDetailsDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PixDetailsDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { IconCalendar, IconCopy, IconCoin, IconQrcode } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { toast } from 'sonner';\nimport { Button } from '../../../ui/buttons/Button';\nimport { Skeleton } from '../../../ui/feedback/Skeleton';\nimport { Toast } from '../../../ui/feedback/Toast';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { useRefreshChargePix } from '../../../../modules/charges/hooks/refresh-pix.hook';\nimport type { Charge } from '../../../../modules/charges/types/charge.type';\nimport type { PixRefreshData } from '../../../../modules/charges/types/refresh-pix.type';\nimport useCountdownTimer from '../../../../hooks/useCountdownTimer';\nimport { copyToClipboard } from '../../../../utils/browser/clipboard';\nimport { qrCodeToDataUrl } from '../../../../utils/qrcode/to-data-url';\n\ntype PixDetailsDialogProps = {\n  open: boolean;\n  charge: Charge | null | undefined;\n  onOpenChange: (open: boolean) => void;\n};\n\nfunction formatCountdown(seconds: number): string {\n  const hours = Math.floor(seconds / 3600);\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const remaining = seconds % 60;\n  const mm = String(minutes).padStart(2, '0');\n  const ss = String(remaining).padStart(2, '0');\n\n  return hours > 0 ? `${String(hours).padStart(2, '0')}:${mm}:${ss}` : `${mm}:${ss}`;\n}\n\nfunction isSameDay(a: Date, b: Date) {\n  return (\n    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate()\n  );\n}\n\n/** QR code e copia-e-cola do PIX de uma cobrança em aberto, regenerando quando o código expirou. */\nexport function PixDetailsDialog({ open, charge, onOpenChange }: PixDetailsDialogProps) {\n  const translate = useTranslations('common.account.workspace.subscription.pixDetails');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const paymentDetails = charge?.payment_details as Record<string, unknown> | null | undefined;\n  const staleQrCode = paymentDetails?.qr_code as string | null | undefined;\n  const staleExpiresAt = paymentDetails?.expires_at as string | null | undefined;\n  // Flags do backend: `expired` = QR vencido; `refreshable` = pode regenerar. Regenera quando é\n  // refreshable e não há QR utilizável (vencido, ou mandato pendente que nunca teve QR próprio).\n  const isExpired = Boolean(paymentDetails?.expired);\n  const isRefreshable = Boolean(paymentDetails?.refreshable);\n  const needsRefresh = isRefreshable && (isExpired || !staleQrCode);\n\n  const [refreshedPix, setRefreshedPix] = useState<PixRefreshData | null>(null);\n  const [mountedAt, setMountedAt] = useState<number | null>(null);\n  const [generatedQrImage, setGeneratedQrImage] = useState<string | null>(null);\n  const refreshPix = useRefreshChargePix();\n\n  useEffect(() => {\n    if (!open) {\n      setRefreshedPix(null);\n      refreshPix.reset();\n      return;\n    }\n\n    setMountedAt(Date.now());\n    if (needsRefresh && charge?.id) {\n      refreshPix.mutate(String(charge.id), {\n        onSuccess: (result) => {\n          if (result.pix) setRefreshedPix(result.pix);\n        },\n      });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open]);\n\n  // Se regenerou, usa o novo; se está expirado e regenerável, esconde o vencido (shimmer até vir o\n  // novo); senão usa o da listagem.\n  const qrCode = refreshedPix?.qr_code ?? (needsRefresh ? null : staleQrCode);\n  const expiresAtRaw = refreshedPix?.expires_at ?? (needsRefresh ? null : staleExpiresAt);\n  const isRefreshing = needsRefresh && refreshPix.isPending;\n  const refreshNotice = refreshPix.data && !refreshPix.data.pix ? refreshPix.data.message : null;\n\n  const expiresInSeconds =\n    expiresAtRaw && mountedAt\n      ? Math.max(0, Math.floor((new Date(expiresAtRaw).getTime() - mountedAt) / 1000))\n      : null;\n  const shouldShowCountdown = typeof expiresInSeconds === 'number' && expiresInSeconds > 0;\n  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });\n\n  useEffect(() => {\n    if (!qrCode) {\n      setGeneratedQrImage(null);\n      return;\n    }\n\n    let cancelled = false;\n    qrCodeToDataUrl(qrCode, {\n      width: 396,\n      margin: 1,\n      errorCorrectionLevel: 'M',\n      color: { dark: '#171412', light: '#FFFFFF' },\n    })\n      .then((dataUrl) => {\n        if (!cancelled) setGeneratedQrImage(dataUrl);\n      })\n      .catch(() => {\n        if (!cancelled) setGeneratedQrImage(null);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [qrCode]);\n\n  const handleCopyCode = async () => {\n    if (!qrCode) return;\n    await copyToClipboard(qrCode);\n    toast.custom((toastId) => (\n      <Toast variant=\"success\" message={translate('copiedToast')} toastId={toastId} />\n    ));\n  };\n\n  if (!charge) return null;\n\n  const dueDateLabel = (() => {\n    if (!expiresAtRaw || !mountedAt) {\n      if (!charge.date_due) return '—';\n      return new Date(charge.date_due).toLocaleDateString('pt-BR', { timeZone: 'UTC' });\n    }\n\n    const expiresAt = new Date(expiresAtRaw);\n    const today = new Date(mountedAt);\n    const tomorrow = new Date(mountedAt);\n    tomorrow.setDate(tomorrow.getDate() + 1);\n\n    if (isSameDay(expiresAt, today)) return translate('dueDateToday');\n    if (isSameDay(expiresAt, tomorrow)) return translate('dueDateTomorrow');\n    return expiresAt.toLocaleDateString('pt-BR');\n  })();\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent className=\"flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] 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\">\n        <DialogHeader className=\"gap-3 text-left p-5 border-b border-zinc-200\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0\">\n              <IconQrcode size={20} className=\"text-zinc-950\" />\n            </div>\n            <div className=\"flex flex-col gap-0.5\">\n              <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                {translate('title')}\n              </DialogTitle>\n              <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('subtitle')}</span>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <div className=\"flex flex-col gap-5 p-5\">\n          <div className=\"flex items-center gap-4\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0\">\n                <IconCalendar size={20} className=\"text-zinc-950\" />\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('dueDate')}</span>\n                <span className=\"paragraph-small-semibold text-zinc-950\">{dueDateLabel}</span>\n              </div>\n            </div>\n\n            <div className=\"h-10 w-px bg-zinc-200\" />\n\n            <div className=\"flex items-center gap-3\">\n              <div className=\"size-10 bg-zinc-50 rounded-lg flex items-center justify-center shrink-0\">\n                <IconCoin size={20} className=\"text-zinc-950\" />\n              </div>\n              <div className=\"flex flex-col gap-1\">\n                <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('value')}</span>\n                <span className=\"paragraph-small-semibold text-zinc-950\">\n                  {formatCurrencyNumber(charge.value)}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center\">\n            {shouldShowCountdown && (\n              <p className=\"paragraph-small-semibold text-zinc-950 text-center\">\n                {translate('payIn')} <span className=\"text-red-600\">{formatCountdown(seconds)}</span>\n              </p>\n            )}\n\n            {isRefreshing ? (\n              <div className=\"flex flex-col items-center gap-3\">\n                <Skeleton className=\"size-[198px] rounded-lg shrink-0\" />\n                <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n                  {translate('generating')}\n                </p>\n              </div>\n            ) : generatedQrImage ? (\n              <div className=\"size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={generatedQrImage}\n                  alt={translate('qrCodeAlt')}\n                  className=\"size-full object-contain\"\n                />\n              </div>\n            ) : (\n              <div className=\"size-[198px] border border-dashed border-zinc-300 rounded-lg bg-zinc-50 shrink-0 flex items-center justify-center p-6 text-center\">\n                <p className=\"paragraph-small-regular text-zinc-500\">\n                  {refreshPix.isError\n                    ? refreshPix.error?.message || translate('refreshError')\n                    : (refreshNotice ?? translate('qrCodeUnavailable'))}\n                </p>\n              </div>\n            )}\n\n            {qrCode && (\n              <>\n                <div className=\"flex items-center w-full\">\n                  <div className=\"flex-1 h-px bg-zinc-200\" />\n                  <span className=\"px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap\">\n                    {translate('orCopyCode')}\n                  </span>\n                  <div className=\"flex-1 h-px bg-zinc-200\" />\n                </div>\n\n                <div className=\"flex flex-col items-center gap-4 w-full\">\n                  <p className=\"paragraph-small-medium text-zinc-950 text-center break-all w-full\">\n                    {qrCode}\n                  </p>\n                  <Button variant=\"secondary\" onClick={handleCopyCode} className=\"h-10 gap-1.5\">\n                    <IconCopy size={20} />\n                    {translate('copyCode')}\n                  </Button>\n                </div>\n              </>\n            )}\n          </div>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAwHM,SAoGQ,UApGR,KA8BM,YA9BN;AAtHN,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc,UAAU,UAAU,kBAAkB;AAC7D,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AAGpC,OAAO,uBAAuB;AAC9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAQhC,SAAS,gBAAgB,SAAyB;AAChD,QAAM,QAAQ,KAAK,MAAM,UAAU,IAAI;AACvC,QAAM,UAAU,KAAK,MAAO,UAAU,OAAQ,EAAE;AAChD,QAAM,YAAY,UAAU;AAC5B,QAAM,KAAK,OAAO,OAAO,EAAE,SAAS,GAAG,GAAG;AAC1C,QAAM,KAAK,OAAO,SAAS,EAAE,SAAS,GAAG,GAAG;AAE5C,SAAO,QAAQ,IAAI,GAAG,OAAO,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,IAAI,EAAE;AAClF;AAEA,SAAS,UAAU,GAAS,GAAS;AACnC,SACE,EAAE,YAAY,MAAM,EAAE,YAAY,KAAK,EAAE,SAAS,MAAM,EAAE,SAAS,KAAK,EAAE,QAAQ,MAAM,EAAE,QAAQ;AAEtG;AAGO,SAAS,iBAAiB,EAAE,MAAM,QAAQ,aAAa,GAA0B;AACtF,QAAM,YAAY,gBAAgB,kDAAkD;AACpF,QAAM,EAAE,qBAAqB,IAAI,qBAAqB;AAEtD,QAAM,iBAAiB,QAAQ;AAC/B,QAAM,cAAc,gBAAgB;AACpC,QAAM,iBAAiB,gBAAgB;AAGvC,QAAM,YAAY,QAAQ,gBAAgB,OAAO;AACjD,QAAM,gBAAgB,QAAQ,gBAAgB,WAAW;AACzD,QAAM,eAAe,kBAAkB,aAAa,CAAC;AAErD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAgC,IAAI;AAC5E,QAAM,CAAC,WAAW,YAAY,IAAI,SAAwB,IAAI;AAC9D,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAwB,IAAI;AAC5E,QAAM,aAAa,oBAAoB;AAEvC,YAAU,MAAM;AACd,QAAI,CAAC,MAAM;AACT,sBAAgB,IAAI;AACpB,iBAAW,MAAM;AACjB;AAAA,IACF;AAEA,iBAAa,KAAK,IAAI,CAAC;AACvB,QAAI,gBAAgB,QAAQ,IAAI;AAC9B,iBAAW,OAAO,OAAO,OAAO,EAAE,GAAG;AAAA,QACnC,WAAW,CAAC,WAAW;AACrB,cAAI,OAAO,IAAK,iBAAgB,OAAO,GAAG;AAAA,QAC5C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EAEF,GAAG,CAAC,IAAI,CAAC;AAIT,QAAM,SAAS,cAAc,YAAY,eAAe,OAAO;AAC/D,QAAM,eAAe,cAAc,eAAe,eAAe,OAAO;AACxE,QAAM,eAAe,gBAAgB,WAAW;AAChD,QAAM,gBAAgB,WAAW,QAAQ,CAAC,WAAW,KAAK,MAAM,WAAW,KAAK,UAAU;AAE1F,QAAM,mBACJ,gBAAgB,YACZ,KAAK,IAAI,GAAG,KAAK,OAAO,IAAI,KAAK,YAAY,EAAE,QAAQ,IAAI,aAAa,GAAI,CAAC,IAC7E;AACN,QAAM,sBAAsB,OAAO,qBAAqB,YAAY,mBAAmB;AACvF,QAAM,EAAE,QAAQ,IAAI,kBAAkB,EAAE,gBAAgB,sBAAsB,mBAAmB,EAAE,CAAC;AAEpG,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ;AACX,0BAAoB,IAAI;AACxB;AAAA,IACF;AAEA,QAAI,YAAY;AAChB,oBAAgB,QAAQ;AAAA,MACtB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,sBAAsB;AAAA,MACtB,OAAO,EAAE,MAAM,WAAW,OAAO,UAAU;AAAA,IAC7C,CAAC,EACE,KAAK,CAAC,YAAY;AACjB,UAAI,CAAC,UAAW,qBAAoB,OAAO;AAAA,IAC7C,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAW,qBAAoB,IAAI;AAAA,IAC1C,CAAC;AAEH,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB,YAAY;AACjC,QAAI,CAAC,OAAQ;AACb,UAAM,gBAAgB,MAAM;AAC5B,UAAM,OAAO,CAAC,YACZ,oBAAC,SAAM,SAAQ,WAAU,SAAS,UAAU,aAAa,GAAG,SAAkB,CAC/E;AAAA,EACH;AAEA,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,gBAAgB,MAAM;AAC1B,QAAI,CAAC,gBAAgB,CAAC,WAAW;AAC/B,UAAI,CAAC,OAAO,SAAU,QAAO;AAC7B,aAAO,IAAI,KAAK,OAAO,QAAQ,EAAE,mBAAmB,SAAS,EAAE,UAAU,MAAM,CAAC;AAAA,IAClF;AAEA,UAAM,YAAY,IAAI,KAAK,YAAY;AACvC,UAAM,QAAQ,IAAI,KAAK,SAAS;AAChC,UAAM,WAAW,IAAI,KAAK,SAAS;AACnC,aAAS,QAAQ,SAAS,QAAQ,IAAI,CAAC;AAEvC,QAAI,UAAU,WAAW,KAAK,EAAG,QAAO,UAAU,cAAc;AAChE,QAAI,UAAU,WAAW,QAAQ,EAAG,QAAO,UAAU,iBAAiB;AACtE,WAAO,UAAU,mBAAmB,OAAO;AAAA,EAC7C,GAAG;AAEH,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,4QACvB;AAAA,wBAAC,gBAAa,WAAU,gDACtB,+BAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,2EACb,8BAAC,cAAW,MAAM,IAAI,WAAU,iBAAgB,GAClD;AAAA,MACA,qBAAC,SAAI,WAAU,yBACb;AAAA,4BAAC,eAAY,WAAU,2CACpB,oBAAU,OAAO,GACpB;AAAA,QACA,oBAAC,UAAK,WAAU,yCAAyC,oBAAU,UAAU,GAAE;AAAA,SACjF;AAAA,OACF,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,2BACb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,6BAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,2EACb,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB,GACpD;AAAA,UACA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,yCAAyC,oBAAU,SAAS,GAAE;AAAA,YAC9E,oBAAC,UAAK,WAAU,0CAA0C,wBAAa;AAAA,aACzE;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,yBAAwB;AAAA,QAEvC,qBAAC,SAAI,WAAU,2BACb;AAAA,8BAAC,SAAI,WAAU,2EACb,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAChD;AAAA,UACA,qBAAC,SAAI,WAAU,uBACb;AAAA,gCAAC,UAAK,WAAU,yCAAyC,oBAAU,OAAO,GAAE;AAAA,YAC5E,oBAAC,UAAK,WAAU,0CACb,+BAAqB,OAAO,KAAK,GACpC;AAAA,aACF;AAAA,WACF;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,mFACZ;AAAA,+BACC,qBAAC,OAAE,WAAU,sDACV;AAAA,oBAAU,OAAO;AAAA,UAAE;AAAA,UAAC,oBAAC,UAAK,WAAU,gBAAgB,0BAAgB,OAAO,GAAE;AAAA,WAChF;AAAA,QAGD,eACC,qBAAC,SAAI,WAAU,oCACb;AAAA,8BAAC,YAAS,WAAU,oCAAmC;AAAA,UACvD,oBAAC,OAAE,WAAU,qDACV,oBAAU,YAAY,GACzB;AAAA,WACF,IACE,mBACF,oBAAC,SAAI,WAAU,wFAEb;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK,UAAU,WAAW;AAAA,YAC1B,WAAU;AAAA;AAAA,QACZ,GACF,IAEA,oBAAC,SAAI,WAAU,qIACb,8BAAC,OAAE,WAAU,yCACV,qBAAW,UACR,WAAW,OAAO,WAAW,UAAU,cAAc,IACpD,iBAAiB,UAAU,mBAAmB,GACrD,GACF;AAAA,QAGD,UACC,iCACE;AAAA,+BAAC,SAAI,WAAU,4BACb;AAAA,gCAAC,SAAI,WAAU,2BAA0B;AAAA,YACzC,oBAAC,UAAK,WAAU,gEACb,oBAAU,YAAY,GACzB;AAAA,YACA,oBAAC,SAAI,WAAU,2BAA0B;AAAA,aAC3C;AAAA,UAEA,qBAAC,SAAI,WAAU,2CACb;AAAA,gCAAC,OAAE,WAAU,qEACV,kBACH;AAAA,YACA,qBAAC,UAAO,SAAQ,aAAY,SAAS,gBAAgB,WAAU,gBAC7D;AAAA,kCAAC,YAAS,MAAM,IAAI;AAAA,cACnB,UAAU,UAAU;AAAA,eACvB;AAAA,aACF;AAAA,WACF;AAAA,SAEJ;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/components/account/sections/subscription/PixPaymentDialog.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { IconAlertTriangle, IconCircleCheck, IconCopy, IconQrcode } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "../../../ui/buttons/Button";
+import { Skeleton } from "../../../ui/feedback/Skeleton";
+import { Toast } from "../../../ui/feedback/Toast";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../ui/overlay/Dialog";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { usePendingPixStatus } from "../../../../modules/subscriptions/hooks/pending-pix-status.hook";
+import useCountdownTimer from "../../../../hooks/useCountdownTimer";
+import { copyToClipboard } from "../../../../utils/browser/clipboard";
+import { qrCodeToDataUrl } from "../../../../utils/qrcode/to-data-url";
+import { useSubscriptionFlows } from "../../../../store/useSubscriptionFlows";
+import { cn } from "../../../../infra/utils/clsx";
+function formatCountdown(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remaining = seconds % 60;
+  const mm = String(minutes).padStart(2, "0");
+  const ss = String(remaining).padStart(2, "0");
+  return hours > 0 ? `${String(hours).padStart(2, "0")}:${mm}:${ss}` : `${mm}:${ss}`;
+}
+function PixPaymentDialog() {
+  const translate = useTranslations("common.account.workspace.subscription.pixPayment");
+  const translateActions = useTranslations();
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const pixPayment = useSubscriptionFlows((state) => state.pixPayment);
+  const close = useSubscriptionFlows((state) => state.closePixPayment);
+  const openPlansCatalog = useSubscriptionFlows((state) => state.openPlansCatalog);
+  const [mountedAt, setMountedAt] = useState(null);
+  const [generatedQrImage, setGeneratedQrImage] = useState(null);
+  const { data: statusData } = usePendingPixStatus(pixPayment?.correlationId);
+  const phase = statusData?.data?.phase;
+  useEffect(() => {
+    if (!pixPayment) {
+      setMountedAt(null);
+      return;
+    }
+    setMountedAt(Date.now());
+  }, [pixPayment]);
+  useEffect(() => {
+    const qrCode = pixPayment?.qrCode;
+    if (!qrCode) {
+      setGeneratedQrImage(null);
+      return;
+    }
+    let cancelled = false;
+    qrCodeToDataUrl(qrCode, {
+      width: 396,
+      margin: 1,
+      errorCorrectionLevel: "M",
+      color: { dark: "#171412", light: "#FFFFFF" }
+    }).then((dataUrl) => {
+      if (!cancelled) setGeneratedQrImage(dataUrl);
+    }).catch(() => {
+      if (!cancelled) setGeneratedQrImage(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pixPayment?.qrCode]);
+  const isPaid = phase === "completed";
+  const isRejected = phase === "rejected";
+  const isExpired = phase === "expired";
+  const paidNotifiedRef = useRef(false);
+  useEffect(() => {
+    if (!isPaid || paidNotifiedRef.current) return;
+    paidNotifiedRef.current = true;
+    toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translate("paidToast"), toastId }));
+  }, [isPaid, translate]);
+  useEffect(() => {
+    if (!pixPayment) paidNotifiedRef.current = false;
+  }, [pixPayment]);
+  const handleGenerateAnother = () => {
+    close();
+    openPlansCatalog();
+  };
+  const expiresInSeconds = pixPayment?.expiresAt && mountedAt ? Math.max(0, Math.floor((new Date(pixPayment.expiresAt).getTime() - mountedAt) / 1e3)) : null;
+  const shouldShowCountdown = typeof expiresInSeconds === "number" && expiresInSeconds > 0;
+  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });
+  const handleCopyCode = async () => {
+    if (!pixPayment?.qrCode) return;
+    await copyToClipboard(pixPayment.qrCode);
+    toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translate("copiedToast"), toastId }));
+  };
+  const payNowLabel = pixPayment?.payNowCents != null && pixPayment.payNowCents > 0 ? formatCurrencyNumber(pixPayment.payNowCents / 100) : null;
+  return /* @__PURE__ */ jsx(Dialog, { open: !!pixPayment, onOpenChange: (nextOpen) => !nextOpen && close(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] 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", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "gap-3 text-left p-5 border-b border-zinc-200", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0", children: /* @__PURE__ */ jsx(IconQrcode, { size: 20, className: "text-zinc-950" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("title") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("subtitle") })
+      ] })
+    ] }) }),
+    isPaid || isRejected || isExpired ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-4 p-8 text-center", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "size-12 rounded-full flex items-center justify-center",
+            isPaid ? "bg-green-50" : "bg-red-50"
+          ),
+          children: isPaid ? /* @__PURE__ */ jsx(IconCircleCheck, { size: 24, className: "text-green-500" }) : /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, className: "text-red-500" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold text-zinc-950", children: isPaid ? translate("paidTitle") : isRejected ? translate("rejectedTitle") : translate("expiredTitle") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: isPaid ? translate("paidToast") : translate("rejectedOrExpiredDescription") })
+      ] }),
+      isPaid ? /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10", onClick: close, children: translateActions("common.actions.close") }) : /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10", onClick: handleGenerateAnother, children: translate("generateAnother") })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 p-5", children: [
+      payNowLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("payNowLabel") }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: payNowLabel })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center", children: [
+        shouldShowCountdown && /* @__PURE__ */ jsxs("p", { className: "paragraph-small-semibold text-zinc-950 text-center", children: [
+          translate("payIn"),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "text-red-600", children: formatCountdown(seconds) })
+        ] }),
+        generatedQrImage ? /* @__PURE__ */ jsx("div", { className: "size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: generatedQrImage,
+            alt: translate("qrCodeAlt"),
+            className: "size-full object-contain"
+          }
+        ) }) : /* @__PURE__ */ jsx(Skeleton, { className: "size-[198px] rounded-lg shrink-0" }),
+        pixPayment?.qrCode && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center w-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-zinc-200" }),
+            /* @__PURE__ */ jsx("span", { className: "px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap", children: translate("orCopyCode") }),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 h-px bg-zinc-200" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 w-full", children: [
+            /* @__PURE__ */ jsx("p", { className: "paragraph-small-medium text-zinc-950 text-center break-all w-full", children: pixPayment.qrCode }),
+            /* @__PURE__ */ jsxs(Button, { variant: "secondary", onClick: handleCopyCode, className: "h-10 gap-1.5", children: [
+              /* @__PURE__ */ jsx(IconCopy, { size: 20 }),
+              translate("copyCode")
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "paragraph-xsmall-medium text-zinc-500 text-center", children: translate("waitingPayment") })
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  PixPaymentDialog
+};
+//# sourceMappingURL=PixPaymentDialog.mjs.map

package/dist/components/account/sections/subscription/PixPaymentDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PixPaymentDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState } from 'react';\nimport { IconAlertTriangle, IconCircleCheck, IconCopy, IconQrcode } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { toast } from 'sonner';\nimport { Button } from '../../../ui/buttons/Button';\nimport { Skeleton } from '../../../ui/feedback/Skeleton';\nimport { Toast } from '../../../ui/feedback/Toast';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { usePendingPixStatus } from '../../../../modules/subscriptions/hooks/pending-pix-status.hook';\nimport useCountdownTimer from '../../../../hooks/useCountdownTimer';\nimport { copyToClipboard } from '../../../../utils/browser/clipboard';\nimport { qrCodeToDataUrl } from '../../../../utils/qrcode/to-data-url';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\nimport { cn } from '../../../../infra/utils/clsx';\n\nfunction formatCountdown(seconds: number): string {\n  const hours = Math.floor(seconds / 3600);\n  const minutes = Math.floor((seconds % 3600) / 60);\n  const remaining = seconds % 60;\n  const mm = String(minutes).padStart(2, '0');\n  const ss = String(remaining).padStart(2, '0');\n\n  return hours > 0 ? `${String(hours).padStart(2, '0')}:${mm}:${ss}` : `${mm}:${ss}`;\n}\n\n/**\n * QR code do pix gerado na troca de plano ou reativação. Fica em polling até o backend confirmar\n * o pagamento — no gapps esse passo era uma página de checkout à parte.\n */\nexport function PixPaymentDialog() {\n  const translate = useTranslations('common.account.workspace.subscription.pixPayment');\n  const translateActions = useTranslations();\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const pixPayment = useSubscriptionFlows((state) => state.pixPayment);\n  const close = useSubscriptionFlows((state) => state.closePixPayment);\n  const openPlansCatalog = useSubscriptionFlows((state) => state.openPlansCatalog);\n\n  const [mountedAt, setMountedAt] = useState<number | null>(null);\n  const [generatedQrImage, setGeneratedQrImage] = useState<string | null>(null);\n\n  const { data: statusData } = usePendingPixStatus(pixPayment?.correlationId);\n  const phase = statusData?.data?.phase;\n\n  useEffect(() => {\n    if (!pixPayment) {\n      setMountedAt(null);\n      return;\n    }\n    setMountedAt(Date.now());\n  }, [pixPayment]);\n\n  useEffect(() => {\n    const qrCode = pixPayment?.qrCode;\n    if (!qrCode) {\n      setGeneratedQrImage(null);\n      return;\n    }\n\n    let cancelled = false;\n    qrCodeToDataUrl(qrCode, {\n      width: 396,\n      margin: 1,\n      errorCorrectionLevel: 'M',\n      color: { dark: '#171412', light: '#FFFFFF' },\n    })\n      .then((dataUrl) => {\n        if (!cancelled) setGeneratedQrImage(dataUrl);\n      })\n      .catch(() => {\n        if (!cancelled) setGeneratedQrImage(null);\n      });\n\n    return () => {\n      cancelled = true;\n    };\n  }, [pixPayment?.qrCode]);\n\n  const isPaid = phase === 'completed';\n  const isRejected = phase === 'rejected';\n  const isExpired = phase === 'expired';\n\n  // Pago avisa uma vez; a janela fica com a confirmação na tela, como a página do gapps fazia.\n  const paidNotifiedRef = useRef(false);\n  useEffect(() => {\n    if (!isPaid || paidNotifiedRef.current) return;\n    paidNotifiedRef.current = true;\n    toast.custom((toastId) => (\n      <Toast variant=\"success\" message={translate('paidToast')} toastId={toastId} />\n    ));\n  }, [isPaid, translate]);\n\n  useEffect(() => {\n    if (!pixPayment) paidNotifiedRef.current = false;\n  }, [pixPayment]);\n\n  const handleGenerateAnother = () => {\n    close();\n    openPlansCatalog();\n  };\n\n  const expiresInSeconds =\n    pixPayment?.expiresAt && mountedAt\n      ? Math.max(0, Math.floor((new Date(pixPayment.expiresAt).getTime() - mountedAt) / 1000))\n      : null;\n  const shouldShowCountdown = typeof expiresInSeconds === 'number' && expiresInSeconds > 0;\n  const { seconds } = useCountdownTimer({ initialSeconds: shouldShowCountdown ? expiresInSeconds : 1 });\n\n  const handleCopyCode = async () => {\n    if (!pixPayment?.qrCode) return;\n    await copyToClipboard(pixPayment.qrCode);\n    toast.custom((toastId) => (\n      <Toast variant=\"success\" message={translate('copiedToast')} toastId={toastId} />\n    ));\n  };\n\n  const payNowLabel =\n    pixPayment?.payNowCents != null && pixPayment.payNowCents > 0\n      ? formatCurrencyNumber(pixPayment.payNowCents / 100)\n      : null;\n\n  return (\n    <Dialog open={!!pixPayment} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <DialogContent className=\"flex flex-col p-0 gap-0 w-full sm:max-w-130 lg:max-w-130 max-h-[90vh] 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\">\n        <DialogHeader className=\"gap-3 text-left p-5 border-b border-zinc-200\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"flex items-center justify-center size-10 bg-zinc-50 rounded-lg shrink-0\">\n              <IconQrcode size={20} className=\"text-zinc-950\" />\n            </div>\n            <div className=\"flex flex-col gap-0.5\">\n              <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n                {translate('title')}\n              </DialogTitle>\n              <span className=\"paragraph-xsmall-medium text-zinc-500\">{translate('subtitle')}</span>\n            </div>\n          </div>\n        </DialogHeader>\n\n        {/* Fechado o ciclo (pago, recusado ou expirado), o QR perde a função: a janela vira o\n            desfecho, como a página de pix do gapps. */}\n        {isPaid || isRejected || isExpired ? (\n          <div className=\"flex flex-col items-center justify-center gap-4 p-8 text-center\">\n            <div\n              className={cn(\n                'size-12 rounded-full flex items-center justify-center',\n                isPaid ? 'bg-green-50' : 'bg-red-50'\n              )}\n            >\n              {isPaid ? (\n                <IconCircleCheck size={24} className=\"text-green-500\" />\n              ) : (\n                <IconAlertTriangle size={24} className=\"text-red-500\" />\n              )}\n            </div>\n\n            <div className=\"flex flex-col gap-1\">\n              <span className=\"paragraph-xlarge-semibold text-zinc-950\">\n                {isPaid\n                  ? translate('paidTitle')\n                  : isRejected\n                    ? translate('rejectedTitle')\n                    : translate('expiredTitle')}\n              </span>\n              <span className=\"paragraph-small-regular text-zinc-500\">\n                {isPaid ? translate('paidToast') : translate('rejectedOrExpiredDescription')}\n              </span>\n            </div>\n\n            {isPaid ? (\n              <Button variant=\"secondary\" className=\"h-10\" onClick={close}>\n                {translateActions('common.actions.close')}\n              </Button>\n            ) : (\n              <Button variant=\"secondary\" className=\"h-10\" onClick={handleGenerateAnother}>\n                {translate('generateAnother')}\n              </Button>\n            )}\n          </div>\n        ) : (\n        <div className=\"flex flex-col gap-5 p-5\">\n          {payNowLabel && (\n            <div className=\"flex items-center justify-between\">\n              <span className=\"paragraph-small-medium text-zinc-500\">{translate('payNowLabel')}</span>\n              <span className=\"paragraph-medium-semibold text-zinc-950\">{payNowLabel}</span>\n            </div>\n          )}\n\n          <div className=\"flex flex-col gap-6 p-5 border border-zinc-200 rounded-lg bg-white items-center\">\n            {shouldShowCountdown && (\n              <p className=\"paragraph-small-semibold text-zinc-950 text-center\">\n                {translate('payIn')} <span className=\"text-red-600\">{formatCountdown(seconds)}</span>\n              </p>\n            )}\n\n            {generatedQrImage ? (\n              <div className=\"size-[198px] border border-zinc-200 rounded-lg overflow-hidden bg-white shrink-0 p-3\">\n                {/* eslint-disable-next-line @next/next/no-img-element */}\n                <img\n                  src={generatedQrImage}\n                  alt={translate('qrCodeAlt')}\n                  className=\"size-full object-contain\"\n                />\n              </div>\n            ) : (\n              <Skeleton className=\"size-[198px] rounded-lg shrink-0\" />\n            )}\n\n            {pixPayment?.qrCode && (\n              <>\n                <div className=\"flex items-center w-full\">\n                  <div className=\"flex-1 h-px bg-zinc-200\" />\n                  <span className=\"px-2 paragraph-xsmall-medium text-zinc-500 whitespace-nowrap\">\n                    {translate('orCopyCode')}\n                  </span>\n                  <div className=\"flex-1 h-px bg-zinc-200\" />\n                </div>\n\n                <div className=\"flex flex-col items-center gap-4 w-full\">\n                  <p className=\"paragraph-small-medium text-zinc-950 text-center break-all w-full\">\n                    {pixPayment.qrCode}\n                  </p>\n                  <Button variant=\"secondary\" onClick={handleCopyCode} className=\"h-10 gap-1.5\">\n                    <IconCopy size={20} />\n                    {translate('copyCode')}\n                  </Button>\n                </div>\n              </>\n            )}\n\n            <p className=\"paragraph-xsmall-medium text-zinc-500 text-center\">\n              {translate('waitingPayment')}\n            </p>\n          </div>\n        </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}