@greatapps/common 1.1.790 → 1.1.791

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../ui/buttons/Button";
+import { CardItem } from "../../../ui/data-display/CardItem";
+import { Skeleton } from "../../../ui/feedback/Skeleton";
+import { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from "../../../ui/overlay/Sheet";
+import useIsMobile from "../../../../hooks/useIsMobile";
+import { cn } from "../../../../infra/utils/clsx";
+import { useCards } from "../../../../modules/cards/hooks/cards.hook";
+function ManageCardsSheet({ open, onOpenChange, onAddCard }) {
+  const translate = useTranslations();
+  const isMobile = useIsMobile();
+  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });
+  const cards = data?.data ?? [];
+  return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs(
+    SheetContent,
+    {
+      side: isMobile ? "bottom" : "right",
+      className: cn(
+        "flex flex-col gap-0 p-0",
+        isMobile ? "h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]" : "w-[480px]! sm:max-w-[480px]!"
+      ),
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      children: [
+        /* @__PURE__ */ jsx(SheetHeader, { className: "px-5 py-3 border-b border-zinc-200", children: /* @__PURE__ */ jsx(SheetTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.subscription.paymentInfo.manageTitle") }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+          isLoading && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-[74px] w-full rounded-lg" }, index)) }),
+          !isLoading && isError && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 gap-3", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: translate("common.account.workspace.subscription.paymentInfo.loadFailed") }),
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", onClick: () => refetch(), children: translate("common.account.workspace.subscription.paymentInfo.retry") })
+          ] }),
+          !isLoading && !isError && cards.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-8", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-600", children: translate("common.account.workspace.subscription.paymentInfo.noCards") }) }),
+          !isLoading && !isError && cards.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: cards.map((card) => /* @__PURE__ */ jsx(CardItem, { card, hideDelete: cards.length <= 1 }, card.id)) }),
+          /* @__PURE__ */ jsxs(Button, { variant: "secondary", className: "w-fit h-10!", onClick: onAddCard, children: [
+            /* @__PURE__ */ jsx(IconPlus, { size: 20 }),
+            translate("common.cards.paymentInfo.addCard")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(SheetFooter, { className: "flex-row items-center justify-end p-5 border-t border-zinc-200", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", onClick: () => onOpenChange(false), children: translate("common.actions.close") }) })
+      ]
+    }
+  ) });
+}
+export {
+  ManageCardsSheet
+};
+//# sourceMappingURL=ManageCardsSheet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/ManageCardsSheet.tsx"],"sourcesContent":["'use client';\n\nimport { IconPlus } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../ui/buttons/Button';\nimport { CardItem } from '../../../ui/data-display/CardItem';\nimport { Skeleton } from '../../../ui/feedback/Skeleton';\nimport { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';\nimport useIsMobile from '../../../../hooks/useIsMobile';\nimport { cn } from '../../../../infra/utils/clsx';\nimport { useCards } from '../../../../modules/cards/hooks/cards.hook';\n\ntype ManageCardsSheetProps = {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  onAddCard: () => void;\n};\n\nexport function ManageCardsSheet({ open, onOpenChange, onAddCard }: ManageCardsSheetProps) {\n  const translate = useTranslations();\n  const isMobile = useIsMobile();\n  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });\n  const cards = data?.data ?? [];\n\n  return (\n    <Sheet open={open} onOpenChange={onOpenChange} modal>\n      <SheetContent\n        side={isMobile ? 'bottom' : 'right'}\n        className={cn(\n          'flex flex-col gap-0 p-0',\n          isMobile\n            ? 'h-dvh w-full max-w-full rounded-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'\n            : 'w-[480px]! sm:max-w-[480px]!'\n        )}\n        onOpenAutoFocus={(event) => event.preventDefault()}\n      >\n        <SheetHeader className=\"px-5 py-3 border-b border-zinc-200\">\n          <SheetTitle className=\"paragraph-medium-semibold text-zinc-950\">\n            {translate('common.account.workspace.subscription.paymentInfo.manageTitle')}\n          </SheetTitle>\n        </SheetHeader>\n\n        <div className=\"flex flex-col gap-6 p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300\">\n          {isLoading && (\n            <div className=\"flex flex-col gap-3\">\n              {Array.from({ length: 3 }).map((_, index) => (\n                <Skeleton key={index} className=\"h-[74px] w-full rounded-lg\" />\n              ))}\n            </div>\n          )}\n\n          {!isLoading && isError && (\n            <div className=\"flex flex-col items-center justify-center py-8 gap-3\">\n              <span className=\"paragraph-small-regular text-zinc-600\">\n                {translate('common.account.workspace.subscription.paymentInfo.loadFailed')}\n              </span>\n              <Button variant=\"secondary\" className=\"h-10!\" onClick={() => refetch()}>\n                {translate('common.account.workspace.subscription.paymentInfo.retry')}\n              </Button>\n            </div>\n          )}\n\n          {!isLoading && !isError && cards.length === 0 && (\n            <div className=\"flex items-center justify-center py-8\">\n              <span className=\"paragraph-small-regular text-zinc-600\">\n                {translate('common.account.workspace.subscription.paymentInfo.noCards')}\n              </span>\n            </div>\n          )}\n\n          {!isLoading && !isError && cards.length > 0 && (\n            <div className=\"flex flex-col gap-3\">\n              {cards.map((card) => (\n                <CardItem key={card.id} card={card} hideDelete={cards.length <= 1} />\n              ))}\n            </div>\n          )}\n\n          <Button variant=\"secondary\" className=\"w-fit h-10!\" onClick={onAddCard}>\n            <IconPlus size={20} />\n            {translate('common.cards.paymentInfo.addCard')}\n          </Button>\n        </div>\n\n        <SheetFooter className=\"flex-row items-center justify-end p-5 border-t border-zinc-200\">\n          <Button variant=\"secondary\" className=\"h-10!\" onClick={() => onOpenChange(false)}>\n            {translate('common.actions.close')}\n          </Button>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":";AAqCU,cAeE,YAfF;AAnCV,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,SAAS,OAAO,cAAc,aAAa,aAAa,kBAAkB;AAC1E,OAAO,iBAAiB;AACxB,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAQlB,SAAS,iBAAiB,EAAE,MAAM,cAAc,UAAU,GAA0B;AACzF,QAAM,YAAY,gBAAgB;AAClC,QAAM,WAAW,YAAY;AAC7B,QAAM,EAAE,MAAM,WAAW,SAAS,QAAQ,IAAI,SAAS,EAAE,cAAc,KAAK,CAAC;AAC7E,QAAM,QAAQ,MAAM,QAAQ,CAAC;AAE7B,SACE,oBAAC,SAAM,MAAY,cAA4B,OAAK,MAClD;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,WAAW,WAAW;AAAA,MAC5B,WAAW;AAAA,QACT;AAAA,QACA,WACI,wGACA;AAAA,MACN;AAAA,MACA,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAAA,MAEjD;AAAA,4BAAC,eAAY,WAAU,sCACrB,8BAAC,cAAW,WAAU,2CACnB,oBAAU,+DAA+D,GAC5E,GACF;AAAA,QAEA,qBAAC,SAAI,WAAU,qOACZ;AAAA,uBACC,oBAAC,SAAI,WAAU,uBACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,UACjC,oBAAC,YAAqB,WAAU,gCAAjB,KAA8C,CAC9D,GACH;AAAA,UAGD,CAAC,aAAa,WACb,qBAAC,SAAI,WAAU,wDACb;AAAA,gCAAC,UAAK,WAAU,yCACb,oBAAU,8DAA8D,GAC3E;AAAA,YACA,oBAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,SAAS,MAAM,QAAQ,GAClE,oBAAU,yDAAyD,GACtE;AAAA,aACF;AAAA,UAGD,CAAC,aAAa,CAAC,WAAW,MAAM,WAAW,KAC1C,oBAAC,SAAI,WAAU,yCACb,8BAAC,UAAK,WAAU,yCACb,oBAAU,2DAA2D,GACxE,GACF;AAAA,UAGD,CAAC,aAAa,CAAC,WAAW,MAAM,SAAS,KACxC,oBAAC,SAAI,WAAU,uBACZ,gBAAM,IAAI,CAAC,SACV,oBAAC,YAAuB,MAAY,YAAY,MAAM,UAAU,KAAjD,KAAK,EAA+C,CACpE,GACH;AAAA,UAGF,qBAAC,UAAO,SAAQ,aAAY,WAAU,eAAc,SAAS,WAC3D;AAAA,gCAAC,YAAS,MAAM,IAAI;AAAA,YACnB,UAAU,kCAAkC;AAAA,aAC/C;AAAA,WACF;AAAA,QAEA,oBAAC,eAAY,WAAU,kEACrB,8BAAC,UAAO,SAAQ,aAAY,WAAU,SAAQ,SAAS,MAAM,aAAa,KAAK,GAC5E,oBAAU,sBAAsB,GACnC,GACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,26 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useCharges } from "../../../../modules/charges/hooks/charges.hook";
+import { useSubscriptionFlows } from "../../../../store/useSubscriptionFlows";
+function OverdueReceiptFetcher() {
+  const openReceipt = useSubscriptionFlows((state) => state.openReceipt);
+  const clearOverdueReceiptRequest = useSubscriptionFlows((state) => state.clearOverdueReceiptRequest);
+  const { data, isFetched } = useCharges({ page: 1, limit: 1, status: [0] });
+  useEffect(() => {
+    if (!isFetched) return;
+    const charge = data?.data?.[0];
+    if (charge) openReceipt(charge);
+    clearOverdueReceiptRequest();
+  }, [isFetched, data, openReceipt, clearOverdueReceiptRequest]);
+  return null;
+}
+function OverdueReceiptOpener() {
+  const isOverdueReceiptRequested = useSubscriptionFlows((state) => state.isOverdueReceiptRequested);
+  if (!isOverdueReceiptRequested) return null;
+  return /* @__PURE__ */ jsx(OverdueReceiptFetcher, {});
+}
+export {
+  OverdueReceiptOpener
+};
+//# sourceMappingURL=OverdueReceiptOpener.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/OverdueReceiptOpener.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useCharges } from '../../../../modules/charges/hooks/charges.hook';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\n\nfunction OverdueReceiptFetcher() {\n  const openReceipt = useSubscriptionFlows((state) => state.openReceipt);\n  const clearOverdueReceiptRequest = useSubscriptionFlows((state) => state.clearOverdueReceiptRequest);\n  const { data, isFetched } = useCharges({ page: 1, limit: 1, status: [0] });\n\n  useEffect(() => {\n    if (!isFetched) return;\n\n    const charge = data?.data?.[0];\n    if (charge) openReceipt(charge);\n    clearOverdueReceiptRequest();\n  }, [isFetched, data, openReceipt, clearOverdueReceiptRequest]);\n\n  return null;\n}\n\nexport function OverdueReceiptOpener() {\n  const isOverdueReceiptRequested = useSubscriptionFlows((state) => state.isOverdueReceiptRequested);\n\n  if (!isOverdueReceiptRequested) return null;\n\n  return <OverdueReceiptFetcher />;\n}\n"],"mappings":";AA2BS;AAzBT,SAAS,iBAAiB;AAC1B,SAAS,kBAAkB;AAC3B,SAAS,4BAA4B;AAErC,SAAS,wBAAwB;AAC/B,QAAM,cAAc,qBAAqB,CAAC,UAAU,MAAM,WAAW;AACrE,QAAM,6BAA6B,qBAAqB,CAAC,UAAU,MAAM,0BAA0B;AACnG,QAAM,EAAE,MAAM,UAAU,IAAI,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC;AAEzE,YAAU,MAAM;AACd,QAAI,CAAC,UAAW;AAEhB,UAAM,SAAS,MAAM,OAAO,CAAC;AAC7B,QAAI,OAAQ,aAAY,MAAM;AAC9B,+BAA2B;AAAA,EAC7B,GAAG,CAAC,WAAW,MAAM,aAAa,0BAA0B,CAAC;AAE7D,SAAO;AACT;AAEO,SAAS,uBAAuB;AACrC,QAAM,4BAA4B,qBAAqB,CAAC,UAAU,MAAM,yBAAyB;AAEjG,MAAI,CAAC,0BAA2B,QAAO;AAEvC,SAAO,oBAAC,yBAAsB;AAChC;","names":[]}

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

@@ -0,0 +1,222 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconAtom, IconBolt, IconInfoCircle, IconWorld, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { Button } from "../../../ui/buttons/Button";
+import { PaymentInfoCard } from "../../../ui/data-display/PaymentInfoCard";
+import { Separator } from "../../../ui/data-display/Separator";
+import { Toast } from "../../../ui/feedback/Toast";
+import { PaymentMethodToggle } from "../../../ui/form/PaymentMethodToggle";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../ui/overlay/Dialog";
+import { useCards } from "../../../../modules/cards/hooks/cards.hook";
+import { useChargeAction } from "../../../../modules/charges/hooks/charge-action.hook";
+import { useCurrentSubscription } from "../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { ADDON_IDS } from "../../../../modules/subscriptions/constants/addons.constants";
+import { isBoletoPayer } from "../../../../modules/subscriptions/utils/is-boleto-payer";
+import { periodicityToBillingPeriod } from "../../../../modules/subscriptions/utils/periodicity";
+import { resolveSubscriptionPlanName } from "../../../../modules/subscriptions/utils/resolve-subscription-plan-name";
+import { useExternalContracting, useIsDefaultWhitelabel } from "../../../../providers/whitelabel.provider";
+import { cn } from "../../../../infra/utils/clsx";
+import { useSubscriptionFlows } from "../../../../store/useSubscriptionFlows";
+import { BoletoDetailsDialog } from "./BoletoDetailsDialog";
+import { PixDetailsDialog } from "./PixDetailsDialog";
+function formatDate(date) {
+  if (!date) return "\u2014";
+  return new Date(date).toLocaleDateString("pt-BR", { timeZone: "UTC" });
+}
+function PayChargeDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations("common.account.workspace.subscription.payCharge");
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const { isExternalContracting, redirectToExternal } = useExternalContracting();
+  const { formatCurrency } = useCurrencyFormatter();
+  const payChargeState = useSubscriptionFlows((state) => state.payCharge);
+  const close = useSubscriptionFlows((state) => state.closePayCharge);
+  const charge = payChargeState?.charge;
+  const isOpen = !!payChargeState;
+  const [paymentMethod, setPaymentMethod] = useState("card");
+  const [selectedCardId, setSelectedCardId] = useState("");
+  const [isPaying, setIsPaying] = useState(false);
+  const [boletoDialogOpen, setBoletoDialogOpen] = useState(false);
+  const [pixDialogOpen, setPixDialogOpen] = useState(false);
+  const { data: cardsData } = useCards();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const { mutateAsync: payCharge } = useChargeAction();
+  const isAnnual = periodicityToBillingPeriod(subscription?.periodicity) === "annual";
+  const chargePaymentDetails = charge?.payment_details;
+  const chargeIsAlreadyBoleto = chargePaymentDetails?.type === "boleto" || charge?.payment_method === 2;
+  const chargeIsAlreadyPix = chargePaymentDetails?.type === "pix" || charge?.payment_method === 3;
+  const boletoAvailable = chargeIsAlreadyBoleto || isBoletoPayer(subscription?.payment_method);
+  useEffect(() => {
+    if (!isOpen) {
+      setPaymentMethod("card");
+      setSelectedCardId("");
+      setIsPaying(false);
+      return;
+    }
+    setPaymentMethod(chargeIsAlreadyPix ? "pix" : chargeIsAlreadyBoleto ? "boleto" : "card");
+    const cards = cardsData?.data ?? [];
+    if (cards.length === 0) return;
+    const isValid = cards.some((card) => card.id.toString() === selectedCardId);
+    if (!isValid) {
+      const defaultCard = cards.find((card) => card.is_default) ?? cards[0];
+      setSelectedCardId(defaultCard.id.toString());
+    }
+  }, [isOpen, charge?.id, chargeIsAlreadyBoleto, chargeIsAlreadyPix, cardsData]);
+  useEffect(() => {
+    if (!isOpen || paymentMethod !== "boleto") return;
+    if (!boletoAvailable || !isAnnual && !chargeIsAlreadyBoleto) setPaymentMethod("card");
+  }, [isOpen, isAnnual, chargeIsAlreadyBoleto, boletoAvailable, paymentMethod]);
+  useEffect(() => {
+    if (isOpen && isExternalContracting) {
+      close();
+      redirectToExternal("contracting");
+    }
+  }, [isOpen, isExternalContracting, close, redirectToExternal]);
+  const handlePayWithCard = async () => {
+    if (!charge) return;
+    setIsPaying(true);
+    try {
+      await payCharge({ chargeId: charge.id, paymentMethod: 1, paymentMethodId: selectedCardId });
+      close();
+      toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translateDialog("successToast"), toastId }));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateDialog("errorPayment");
+      toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "error", message, toastId }));
+    } finally {
+      setIsPaying(false);
+    }
+  };
+  const handlePayWithBoleto = async () => {
+    if (!charge) return;
+    if (chargeIsAlreadyBoleto) {
+      setBoletoDialogOpen(true);
+      return;
+    }
+    setIsPaying(true);
+    try {
+      await payCharge({ chargeId: charge.id, paymentMethod: 2 });
+      close();
+      toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "success", message: translateDialog("successToast"), toastId }));
+    } catch (error) {
+      const message = error instanceof Error ? error.message : translateDialog("errorBoleto");
+      toast.custom((toastId) => /* @__PURE__ */ jsx(Toast, { variant: "error", message, toastId }));
+    } finally {
+      setIsPaying(false);
+    }
+  };
+  const aiItems = subscription?.items?.filter((item) => item.id_addon === ADDON_IDS.AI) ?? [];
+  const aiItem = aiItems.length > 0 ? aiItems.reduce((best, item) => item.quantity > best.quantity ? item : best) : void 0;
+  const domainsItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.DOMAINS);
+  const abTestItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AB_TEST);
+  const hasItems = domainsItem && (domainsItem.quantity ?? 0) > 0 || aiItem && (aiItem.quantity ?? 0) > 0 || abTestItem && (abTestItem.quantity ?? 0) > 0;
+  if (isExternalContracting || !charge) return null;
+  const planName = resolveSubscriptionPlanName(subscription, translate, "\u2014");
+  const infoBoxClasses = cn(
+    "flex items-start gap-3 p-4 rounded-lg",
+    isDefaultWhitelabel ? "bg-cyan-50" : "bg-zinc-50"
+  );
+  return /* @__PURE__ */ jsxs(Dialog, { open: isOpen, onOpenChange: (nextOpen) => !nextOpen && close(), children: [
+    /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        showCloseButton: false,
+        className: "flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-auto bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-120 lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden lg: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__ */ jsxs(DialogHeader, { className: "px-4 py-3 border-b border-gray-200 shrink-0 relative", children: [
+            /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-gray-950 text-center", children: translateDialog("title") }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: close,
+                "aria-label": translate("common.actions.close"),
+                className: "absolute right-3 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors",
+                children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-gray-400" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4 lg:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 bg-gray-50 rounded-lg", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                /* @__PURE__ */ jsx("div", { className: "size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconBolt, { size: 20, className: "text-gray-950" }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: planName }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-gray-500", children: translateDialog("dueDate", { date: formatDate(charge.date_due) }) })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: charge.value ? formatCurrency(charge.value) : "\u2014" })
+              ] }),
+              hasItems && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Separator, { className: "bg-gray-200" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+                  domainsItem && (domainsItem.quantity ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(IconWorld, { size: 16, className: "text-gray-500 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-500 flex-1", children: translateDialog("domains") }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: domainsItem.quantity })
+                  ] }),
+                  aiItem && (aiItem.quantity ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(IconBolt, { size: 16, className: "text-gray-500 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-500 flex-1", children: translateDialog("aiCredits") }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: aiItem.quantity })
+                  ] }),
+                  abTestItem && (abTestItem.quantity ?? 0) > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(IconAtom, { size: 16, className: "text-gray-500 shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-500 flex-1", children: translateDialog("abTest") }),
+                    /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: translateDialog("abTestActive") })
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950", children: translateDialog("payment") }),
+              /* @__PURE__ */ jsx(
+                PaymentMethodToggle,
+                {
+                  value: paymentMethod,
+                  onChange: setPaymentMethod,
+                  disableBoleto: !isAnnual && !chargeIsAlreadyBoleto,
+                  hideBoleto: !boletoAvailable,
+                  hidePix: !chargeIsAlreadyPix,
+                  boletoTooltip: translateDialog("boletoTooltip")
+                }
+              ),
+              paymentMethod === "card" ? /* @__PURE__ */ jsx(PaymentInfoCard, { selectedCardId, onCardSelect: setSelectedCardId }) : paymentMethod === "boleto" ? /* @__PURE__ */ jsxs("div", { className: infoBoxClasses, children: [
+                /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "text-gray-950 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-gray-950 whitespace-pre-line", children: translateDialog("boletoInfo") })
+              ] }) : /* @__PURE__ */ jsxs("div", { className: infoBoxClasses, children: [
+                /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "text-gray-950 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-gray-950", children: translateDialog.rich("pixInfo", {
+                  b: (chunks) => /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: chunks })
+                }) })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 shrink-0", children: [
+            /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10!", onClick: close, children: translate("common.actions.cancel") }),
+            paymentMethod === "card" ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                className: "h-10!",
+                disabled: !selectedCardId,
+                loading: isPaying,
+                onClick: handlePayWithCard,
+                children: isPaying ? translateDialog("processing") : translateDialog("payNow")
+              }
+            ) : paymentMethod === "pix" ? /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", onClick: () => setPixDialogOpen(true), children: translateDialog("viewPixCode") }) : /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", loading: isPaying, onClick: handlePayWithBoleto, children: chargeIsAlreadyBoleto ? translateDialog("viewBoleto") : isPaying ? translateDialog("generatingBoleto") : translateDialog("generateBoleto") })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(BoletoDetailsDialog, { open: boletoDialogOpen, charge, onOpenChange: setBoletoDialogOpen }),
+    /* @__PURE__ */ jsx(PixDetailsDialog, { open: pixDialogOpen, charge, onOpenChange: setPixDialogOpen })
+  ] });
+}
+export {
+  PayChargeDialog
+};
+//# sourceMappingURL=PayChargeDialog.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PayChargeDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { IconAtom, IconBolt, IconInfoCircle, IconWorld, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { toast } from 'sonner';\nimport { Button } from '../../../ui/buttons/Button';\nimport { PaymentInfoCard } from '../../../ui/data-display/PaymentInfoCard';\nimport { Separator } from '../../../ui/data-display/Separator';\nimport { Toast } from '../../../ui/feedback/Toast';\nimport { PaymentMethodToggle, type PaymentMethodOption } from '../../../ui/form/PaymentMethodToggle';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { useCards } from '../../../../modules/cards/hooks/cards.hook';\nimport { useChargeAction } from '../../../../modules/charges/hooks/charge-action.hook';\nimport { useCurrentSubscription } from '../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { ADDON_IDS } from '../../../../modules/subscriptions/constants/addons.constants';\nimport { isBoletoPayer } from '../../../../modules/subscriptions/utils/is-boleto-payer';\nimport { periodicityToBillingPeriod } from '../../../../modules/subscriptions/utils/periodicity';\nimport { resolveSubscriptionPlanName } from '../../../../modules/subscriptions/utils/resolve-subscription-plan-name';\nimport { useExternalContracting, useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';\nimport { cn } from '../../../../infra/utils/clsx';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\nimport { BoletoDetailsDialog } from './BoletoDetailsDialog';\nimport { PixDetailsDialog } from './PixDetailsDialog';\n\nfunction formatDate(date: Date | string | null | undefined) {\n  if (!date) return '—';\n  return new Date(date).toLocaleDateString('pt-BR', { timeZone: 'UTC' });\n}\n\n/** Pagamento de uma fatura em aberto: cartão, boleto ou pix, conforme o que a cobrança aceita. */\nexport function PayChargeDialog() {\n  const translate = useTranslations();\n  const translateDialog = useTranslations('common.account.workspace.subscription.payCharge');\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n  const { isExternalContracting, redirectToExternal } = useExternalContracting();\n  const { formatCurrency } = useCurrencyFormatter();\n\n  const payChargeState = useSubscriptionFlows((state) => state.payCharge);\n  const close = useSubscriptionFlows((state) => state.closePayCharge);\n  const charge = payChargeState?.charge;\n  const isOpen = !!payChargeState;\n\n  const [paymentMethod, setPaymentMethod] = useState<PaymentMethodOption>('card');\n  const [selectedCardId, setSelectedCardId] = useState('');\n  const [isPaying, setIsPaying] = useState(false);\n  const [boletoDialogOpen, setBoletoDialogOpen] = useState(false);\n  const [pixDialogOpen, setPixDialogOpen] = useState(false);\n\n  const { data: cardsData } = useCards();\n  const { data: subscriptionData } = useCurrentSubscription();\n  const subscription = subscriptionData?.data?.[0];\n  const { mutateAsync: payCharge } = useChargeAction();\n\n  const isAnnual = periodicityToBillingPeriod(subscription?.periodicity) === 'annual';\n\n  // Cobrança já gerada como boleto/pix mantém o método disponível, independente da periodicidade.\n  const chargePaymentDetails = charge?.payment_details as Record<string, unknown> | null | undefined;\n  const chargeIsAlreadyBoleto = chargePaymentDetails?.type === 'boleto' || charge?.payment_method === 2;\n  const chargeIsAlreadyPix = chargePaymentDetails?.type === 'pix' || charge?.payment_method === 3;\n  const boletoAvailable = chargeIsAlreadyBoleto || isBoletoPayer(subscription?.payment_method);\n\n  useEffect(() => {\n    if (!isOpen) {\n      setPaymentMethod('card');\n      setSelectedCardId('');\n      setIsPaying(false);\n      return;\n    }\n\n    setPaymentMethod(chargeIsAlreadyPix ? 'pix' : chargeIsAlreadyBoleto ? 'boleto' : 'card');\n\n    const cards = cardsData?.data ?? [];\n    if (cards.length === 0) return;\n\n    const isValid = cards.some((card) => card.id.toString() === selectedCardId);\n    if (!isValid) {\n      const defaultCard = cards.find((card) => card.is_default) ?? cards[0];\n      setSelectedCardId(defaultCard.id.toString());\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen, charge?.id, chargeIsAlreadyBoleto, chargeIsAlreadyPix, cardsData]);\n\n  useEffect(() => {\n    // Só volta para cartão quando o boleto está mesmo bloqueado; cobrança que já é boleto continua.\n    if (!isOpen || paymentMethod !== 'boleto') return;\n    if (!boletoAvailable || (!isAnnual && !chargeIsAlreadyBoleto)) setPaymentMethod('card');\n  }, [isOpen, isAnnual, chargeIsAlreadyBoleto, boletoAvailable, paymentMethod]);\n\n  useEffect(() => {\n    if (isOpen && isExternalContracting) {\n      close();\n      redirectToExternal('contracting');\n    }\n  }, [isOpen, isExternalContracting, close, redirectToExternal]);\n\n  const handlePayWithCard = async () => {\n    if (!charge) return;\n\n    setIsPaying(true);\n    try {\n      await payCharge({ chargeId: charge.id, paymentMethod: 1, paymentMethodId: selectedCardId });\n      close();\n      toast.custom((toastId) => (\n        <Toast variant=\"success\" message={translateDialog('successToast')} toastId={toastId} />\n      ));\n    } catch (error) {\n      const message = error instanceof Error ? error.message : translateDialog('errorPayment');\n      toast.custom((toastId) => <Toast variant=\"error\" message={message} toastId={toastId} />);\n    } finally {\n      setIsPaying(false);\n    }\n  };\n\n  const handlePayWithBoleto = async () => {\n    if (!charge) return;\n\n    // Cobrança que já virou boleto: só mostra os dados existentes.\n    if (chargeIsAlreadyBoleto) {\n      setBoletoDialogOpen(true);\n      return;\n    }\n\n    setIsPaying(true);\n    try {\n      await payCharge({ chargeId: charge.id, paymentMethod: 2 });\n      close();\n      toast.custom((toastId) => (\n        <Toast variant=\"success\" message={translateDialog('successToast')} toastId={toastId} />\n      ));\n    } catch (error) {\n      const message = error instanceof Error ? error.message : translateDialog('errorBoleto');\n      toast.custom((toastId) => <Toast variant=\"error\" message={message} toastId={toastId} />);\n    } finally {\n      setIsPaying(false);\n    }\n  };\n\n  const aiItems = subscription?.items?.filter((item) => item.id_addon === ADDON_IDS.AI) ?? [];\n  const aiItem =\n    aiItems.length > 0\n      ? aiItems.reduce((best, item) => (item.quantity > best.quantity ? item : best))\n      : undefined;\n  const domainsItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.DOMAINS);\n  const abTestItem = subscription?.items?.find((item) => item.id_addon === ADDON_IDS.AB_TEST);\n\n  const hasItems =\n    (domainsItem && (domainsItem.quantity ?? 0) > 0) ||\n    (aiItem && (aiItem.quantity ?? 0) > 0) ||\n    (abTestItem && (abTestItem.quantity ?? 0) > 0);\n\n  if (isExternalContracting || !charge) return null;\n\n  const planName = resolveSubscriptionPlanName(subscription, translate, '—');\n  const infoBoxClasses = cn(\n    'flex items-start gap-3 p-4 rounded-lg',\n    isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'\n  );\n\n  return (\n    <Dialog open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0 gap-0 max-w-full sm:max-w-full border-0 rounded-t-2xl rounded-b-none h-dvh top-auto bottom-0 left-0 right-0 translate-x-0 translate-y-0 lg:max-w-120 lg:h-auto lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%] lg:left-[50%] lg:right-auto lg:bottom-auto lg:translate-x-[-50%] lg:translate-y-[-50%] overflow-hidden lg: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      >\n        <DialogHeader className=\"px-4 py-3 border-b border-gray-200 shrink-0 relative\">\n          <DialogTitle className=\"paragraph-medium-semibold text-gray-950 text-center\">\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 top-1/2 -translate-y-1/2 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors\"\n          >\n            <IconX size={18} className=\"text-gray-400\" />\n          </button>\n        </DialogHeader>\n\n        <div className=\"flex flex-col gap-6 p-4 lg:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300\">\n          <div className=\"flex flex-col gap-4 p-4 bg-gray-50 rounded-lg\">\n            <div className=\"flex items-center gap-3\">\n              <div className=\"size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0\">\n                <IconBolt size={20} className=\"text-gray-950\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 flex-1\">\n                <span className=\"paragraph-small-semibold text-gray-950\">{planName}</span>\n                <span className=\"paragraph-small-regular text-gray-500\">\n                  {translateDialog('dueDate', { date: formatDate(charge.date_due) })}\n                </span>\n              </div>\n              <span className=\"paragraph-medium-semibold text-gray-950\">\n                {charge.value ? formatCurrency(charge.value) : '—'}\n              </span>\n            </div>\n\n            {hasItems && (\n              <>\n                <Separator className=\"bg-gray-200\" />\n                <div className=\"flex flex-col gap-3\">\n                  {domainsItem && (domainsItem.quantity ?? 0) > 0 && (\n                    <div className=\"flex items-center gap-3\">\n                      <IconWorld size={16} className=\"text-gray-500 shrink-0\" />\n                      <span className=\"paragraph-small-medium text-gray-500 flex-1\">\n                        {translateDialog('domains')}\n                      </span>\n                      <span className=\"paragraph-small-semibold text-gray-950\">\n                        {domainsItem.quantity}\n                      </span>\n                    </div>\n                  )}\n                  {aiItem && (aiItem.quantity ?? 0) > 0 && (\n                    <div className=\"flex items-center gap-3\">\n                      <IconBolt size={16} className=\"text-gray-500 shrink-0\" />\n                      <span className=\"paragraph-small-medium text-gray-500 flex-1\">\n                        {translateDialog('aiCredits')}\n                      </span>\n                      <span className=\"paragraph-small-semibold text-gray-950\">{aiItem.quantity}</span>\n                    </div>\n                  )}\n                  {abTestItem && (abTestItem.quantity ?? 0) > 0 && (\n                    <div className=\"flex items-center gap-3\">\n                      <IconAtom size={16} className=\"text-gray-500 shrink-0\" />\n                      <span className=\"paragraph-small-medium text-gray-500 flex-1\">\n                        {translateDialog('abTest')}\n                      </span>\n                      <span className=\"paragraph-small-semibold text-gray-950\">\n                        {translateDialog('abTestActive')}\n                      </span>\n                    </div>\n                  )}\n                </div>\n              </>\n            )}\n          </div>\n\n          <div className=\"flex flex-col gap-4\">\n            <span className=\"paragraph-medium-semibold text-gray-950\">{translateDialog('payment')}</span>\n            <PaymentMethodToggle\n              value={paymentMethod}\n              onChange={setPaymentMethod}\n              disableBoleto={!isAnnual && !chargeIsAlreadyBoleto}\n              hideBoleto={!boletoAvailable}\n              hidePix={!chargeIsAlreadyPix}\n              boletoTooltip={translateDialog('boletoTooltip')}\n            />\n\n            {paymentMethod === 'card' ? (\n              <PaymentInfoCard selectedCardId={selectedCardId} onCardSelect={setSelectedCardId} />\n            ) : paymentMethod === 'boleto' ? (\n              <div className={infoBoxClasses}>\n                <IconInfoCircle size={16} className=\"text-gray-950 shrink-0 mt-0.5\" />\n                <p className=\"paragraph-small-regular text-gray-950 whitespace-pre-line\">\n                  {translateDialog('boletoInfo')}\n                </p>\n              </div>\n            ) : (\n              <div className={infoBoxClasses}>\n                <IconInfoCircle size={16} className=\"text-gray-950 shrink-0 mt-0.5\" />\n                <p className=\"paragraph-small-regular text-gray-950\">\n                  {translateDialog.rich('pixInfo', {\n                    b: (chunks) => <span className=\"paragraph-small-semibold\">{chunks}</span>,\n                  })}\n                </p>\n              </div>\n            )}\n          </div>\n        </div>\n\n        <div className=\"flex items-center justify-between p-4 lg:p-5 border-t border-gray-200 shrink-0\">\n          <Button type=\"button\" variant=\"secondary\" className=\"h-10!\" onClick={close}>\n            {translate('common.actions.cancel')}\n          </Button>\n\n          {paymentMethod === 'card' ? (\n            <Button\n              type=\"button\"\n              className=\"h-10!\"\n              disabled={!selectedCardId}\n              loading={isPaying}\n              onClick={handlePayWithCard}\n            >\n              {isPaying ? translateDialog('processing') : translateDialog('payNow')}\n            </Button>\n          ) : paymentMethod === 'pix' ? (\n            <Button type=\"button\" className=\"h-10!\" onClick={() => setPixDialogOpen(true)}>\n              {translateDialog('viewPixCode')}\n            </Button>\n          ) : (\n            <Button type=\"button\" className=\"h-10!\" loading={isPaying} onClick={handlePayWithBoleto}>\n              {chargeIsAlreadyBoleto\n                ? translateDialog('viewBoleto')\n                : isPaying\n                  ? translateDialog('generatingBoleto')\n                  : translateDialog('generateBoleto')}\n            </Button>\n          )}\n        </div>\n      </DialogContent>\n\n      <BoletoDetailsDialog open={boletoDialogOpen} charge={charge} onOpenChange={setBoletoDialogOpen} />\n      <PixDetailsDialog open={pixDialogOpen} charge={charge} onOpenChange={setPixDialogOpen} />\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,61 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconCircleCheckFilled, IconInfoCircle } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Dialog, DialogContent, DialogTitle } from "../../../ui/overlay/Dialog";
+import { useCurrencyFormatter } from "../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { useIsDefaultWhitelabel } from "../../../../providers/whitelabel.provider";
+import { cn } from "../../../../infra/utils/clsx";
+import { useSubscriptionFlows } from "../../../../store/useSubscriptionFlows";
+function PaymentConfirmationDialog() {
+  const translate = useTranslations("common.account.workspace.subscription.paymentConfirmation");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const confirmation = useSubscriptionFlows((state) => state.paymentConfirmation);
+  const close = useSubscriptionFlows((state) => state.closePaymentConfirmation);
+  const formattedTotal = formatCurrencyNumber(confirmation?.total ?? 0);
+  const priceDisplay = confirmation?.periodLabel ? `${formattedTotal}${confirmation.periodLabel}` : formattedTotal;
+  const immediateChargeTotal = confirmation?.immediateChargeTotal;
+  const hasImmediateCharge = immediateChargeTotal != null && immediateChargeTotal > 0;
+  return /* @__PURE__ */ jsx(Dialog, { open: !!confirmation, onOpenChange: (nextOpen) => !nextOpen && close(), children: /* @__PURE__ */ jsxs(DialogContent, { className: "flex flex-col p-4 lg:p-6 gap-4 items-center max-w-[calc(100%-32px)]! h-auto! rounded-lg border top-[50%]! left-[50%]! right-auto! bottom-auto! translate-x-[-50%]! translate-y-[-50%]! lg:max-w-[386px]!", children: [
+    /* @__PURE__ */ jsx(IconCircleCheckFilled, { size: 56, className: "text-green-500" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 text-center", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950", children: translate("subscriptionConfirmed") }),
+      /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-zinc-500", children: [
+        translate.rich("youSubscribed", {
+          planName: confirmation?.planName ?? "",
+          b: (chunks) => /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-950", children: chunks })
+        }),
+        /* @__PURE__ */ jsx("br", {}),
+        translate.rich("price", {
+          price: priceDisplay,
+          b: (chunks) => /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-950", children: chunks })
+        }),
+        hasImmediateCharge && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("br", {}),
+          translate.rich("immediateCharge", {
+            amount: formatCurrencyNumber(immediateChargeTotal),
+            b: (chunks) => /* @__PURE__ */ jsx("span", { className: "font-semibold text-zinc-950", children: chunks })
+          })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 p-4 rounded-lg w-full",
+          isDefaultWhitelabel ? "bg-cyan-50" : "bg-zinc-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "shrink-0 text-zinc-950" }),
+          /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-950", children: translate("manageInfo") })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  PaymentConfirmationDialog
+};
+//# sourceMappingURL=PaymentConfirmationDialog.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PaymentConfirmationDialog.tsx"],"sourcesContent":["'use client';\n\nimport { IconCircleCheckFilled, IconInfoCircle } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Dialog, DialogContent, DialogTitle } from '../../../ui/overlay/Dialog';\nimport { useCurrencyFormatter } from '../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { useIsDefaultWhitelabel } from '../../../../providers/whitelabel.provider';\nimport { cn } from '../../../../infra/utils/clsx';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\n\n/** Confirmação depois da cobrança no cartão da troca de plano. */\nexport function PaymentConfirmationDialog() {\n  const translate = useTranslations('common.account.workspace.subscription.paymentConfirmation');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n\n  const confirmation = useSubscriptionFlows((state) => state.paymentConfirmation);\n  const close = useSubscriptionFlows((state) => state.closePaymentConfirmation);\n\n  const formattedTotal = formatCurrencyNumber(confirmation?.total ?? 0);\n  const priceDisplay = confirmation?.periodLabel\n    ? `${formattedTotal}${confirmation.periodLabel}`\n    : formattedTotal;\n  const immediateChargeTotal = confirmation?.immediateChargeTotal;\n  const hasImmediateCharge = immediateChargeTotal != null && immediateChargeTotal > 0;\n\n  return (\n    <Dialog open={!!confirmation} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <DialogContent className=\"flex flex-col p-4 lg:p-6 gap-4 items-center max-w-[calc(100%-32px)]! h-auto! rounded-lg border top-[50%]! left-[50%]! right-auto! bottom-auto! translate-x-[-50%]! translate-y-[-50%]! lg:max-w-[386px]!\">\n        <IconCircleCheckFilled size={56} className=\"text-green-500\" />\n\n        <div className=\"flex flex-col gap-2 text-center\">\n          <DialogTitle className=\"paragraph-medium-semibold text-zinc-950\">\n            {translate('subscriptionConfirmed')}\n          </DialogTitle>\n          <p className=\"paragraph-small-regular text-zinc-500\">\n            {translate.rich('youSubscribed', {\n              planName: confirmation?.planName ?? '',\n              b: (chunks) => <span className=\"font-semibold text-zinc-950\">{chunks}</span>,\n            })}\n            <br />\n            {translate.rich('price', {\n              price: priceDisplay,\n              b: (chunks) => <span className=\"font-semibold text-zinc-950\">{chunks}</span>,\n            })}\n            {hasImmediateCharge && (\n              <>\n                <br />\n                {translate.rich('immediateCharge', {\n                  amount: formatCurrencyNumber(immediateChargeTotal),\n                  b: (chunks) => <span className=\"font-semibold text-zinc-950\">{chunks}</span>,\n                })}\n              </>\n            )}\n          </p>\n        </div>\n\n        <div\n          className={cn(\n            'flex items-center gap-3 p-4 rounded-lg w-full',\n            isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'\n          )}\n        >\n          <IconInfoCircle size={16} className=\"shrink-0 text-zinc-950\" />\n          <p className=\"paragraph-small-regular text-zinc-950\">{translate('manageInfo')}</p>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA6BQ,SAiBM,UAjBN,KAiBM,YAjBN;AA3BR,SAAS,uBAAuB,sBAAsB;AACtD,SAAS,uBAAuB;AAChC,SAAS,QAAQ,eAAe,mBAAmB;AACnD,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,4BAA4B;AAG9B,SAAS,4BAA4B;AAC1C,QAAM,YAAY,gBAAgB,2DAA2D;AAC7F,QAAM,EAAE,qBAAqB,IAAI,qBAAqB;AACtD,QAAM,sBAAsB,uBAAuB;AAEnD,QAAM,eAAe,qBAAqB,CAAC,UAAU,MAAM,mBAAmB;AAC9E,QAAM,QAAQ,qBAAqB,CAAC,UAAU,MAAM,wBAAwB;AAE5E,QAAM,iBAAiB,qBAAqB,cAAc,SAAS,CAAC;AACpE,QAAM,eAAe,cAAc,cAC/B,GAAG,cAAc,GAAG,aAAa,WAAW,KAC5C;AACJ,QAAM,uBAAuB,cAAc;AAC3C,QAAM,qBAAqB,wBAAwB,QAAQ,uBAAuB;AAElF,SACE,oBAAC,UAAO,MAAM,CAAC,CAAC,cAAc,cAAc,CAAC,aAAa,CAAC,YAAY,MAAM,GAC3E,+BAAC,iBAAc,WAAU,4MACvB;AAAA,wBAAC,yBAAsB,MAAM,IAAI,WAAU,kBAAiB;AAAA,IAE5D,qBAAC,SAAI,WAAU,mCACb;AAAA,0BAAC,eAAY,WAAU,2CACpB,oBAAU,uBAAuB,GACpC;AAAA,MACA,qBAAC,OAAE,WAAU,yCACV;AAAA,kBAAU,KAAK,iBAAiB;AAAA,UAC/B,UAAU,cAAc,YAAY;AAAA,UACpC,GAAG,CAAC,WAAW,oBAAC,UAAK,WAAU,+BAA+B,kBAAO;AAAA,QACvE,CAAC;AAAA,QACD,oBAAC,QAAG;AAAA,QACH,UAAU,KAAK,SAAS;AAAA,UACvB,OAAO;AAAA,UACP,GAAG,CAAC,WAAW,oBAAC,UAAK,WAAU,+BAA+B,kBAAO;AAAA,QACvE,CAAC;AAAA,QACA,sBACC,iCACE;AAAA,8BAAC,QAAG;AAAA,UACH,UAAU,KAAK,mBAAmB;AAAA,YACjC,QAAQ,qBAAqB,oBAAoB;AAAA,YACjD,GAAG,CAAC,WAAW,oBAAC,UAAK,WAAU,+BAA+B,kBAAO;AAAA,UACvE,CAAC;AAAA,WACH;AAAA,SAEJ;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,eAAe;AAAA,QACvC;AAAA,QAEA;AAAA,8BAAC,kBAAe,MAAM,IAAI,WAAU,0BAAyB;AAAA,UAC7D,oBAAC,OAAE,WAAU,yCAAyC,oBAAU,YAAY,GAAE;AAAA;AAAA;AAAA,IAChF;AAAA,KACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../ui/buttons/Button";
+import { CardBrandIcon } from "../../../ui/data-display/CardBrandIcons";
+import { Skeleton } from "../../../ui/feedback/Skeleton";
+import { useCards } from "../../../../modules/cards/hooks/cards.hook";
+import { useManagementPermissions } from "../../../../modules/auth/hooks/useManagementPermissions";
+import useSubscriptionActions from "../../hooks/useSubscriptionActions";
+import { ManageCardsSheet } from "./ManageCardsSheet";
+function formatExpiryDate(date) {
+  if (!date) return "";
+  const [month, year] = date.split("/");
+  if (!month || !year) return date;
+  return `${month}/${year.slice(-2)}`;
+}
+function PaymentMethodsCard() {
+  const translate = useTranslations();
+  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });
+  const { hasPermission } = useManagementPermissions();
+  const actions = useSubscriptionActions();
+  const [isManageOpen, setIsManageOpen] = useState(false);
+  const cards = data?.data ?? [];
+  const defaultCard = cards.find((card) => card.is_default) ?? cards[0];
+  const lastDigits = (defaultCard?.number ?? "").replaceAll(/\D/g, "").slice(-4);
+  const expiryDate = formatExpiryDate(defaultCard?.date);
+  const canManageCards = hasPermission("manage_cards");
+  const addCardButton = canManageCards && /* @__PURE__ */ jsxs(Button, { variant: "secondary", className: "h-10!", onClick: actions.addCard, children: [
+    /* @__PURE__ */ jsx(IconPlus, { size: 20 }),
+    translate("common.cards.paymentInfo.addCard")
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-5 lg:p-6 border border-zinc-200 rounded-lg bg-white", children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("common.account.workspace.subscription.paymentInfo.title") }),
+    isLoading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "size-10 rounded-lg" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-40" })
+      ] })
+    ] }),
+    !isLoading && isError && /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("common.account.workspace.subscription.paymentInfo.loadFailed") }),
+      /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", onClick: () => refetch(), children: translate("common.account.workspace.subscription.paymentInfo.retry") })
+    ] }),
+    !isLoading && !isError && !defaultCard && /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("common.account.workspace.subscription.paymentInfo.noCardAdded") }),
+      addCardButton
+    ] }),
+    !isLoading && !isError && defaultCard && /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-10 shrink-0 rounded-lg border border-zinc-200 bg-white shadow-xs", children: /* @__PURE__ */ jsx(CardBrandIcon, { brand: defaultCard.brand }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 truncate", children: defaultCard.name }),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: lastDigits ? `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${lastDigits}` : translate("common.cards.item.digitsUnavailable") }),
+          expiryDate && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("common.account.workspace.subscription.paymentInfo.validUntil", { date: expiryDate }) })
+        ] }),
+        defaultCard.is_default && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600 bg-zinc-50 px-2 h-6 inline-flex items-center rounded-lg whitespace-nowrap", children: translate("common.account.workspace.subscription.paymentInfo.defaultCard") })
+      ] }),
+      canManageCards && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", onClick: () => setIsManageOpen(true), children: translate("common.cards.paymentInfo.manageCards") }),
+        addCardButton
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(ManageCardsSheet, { open: isManageOpen, onOpenChange: setIsManageOpen, onAddCard: actions.addCard })
+  ] });
+}
+export {
+  PaymentMethodsCard
+};
+//# sourceMappingURL=PaymentMethodsCard.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/PaymentMethodsCard.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconPlus } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../ui/buttons/Button';\nimport { CardBrandIcon } from '../../../ui/data-display/CardBrandIcons';\nimport { Skeleton } from '../../../ui/feedback/Skeleton';\nimport { useCards } from '../../../../modules/cards/hooks/cards.hook';\nimport { useManagementPermissions } from '../../../../modules/auth/hooks/useManagementPermissions';\nimport useSubscriptionActions from '../../hooks/useSubscriptionActions';\nimport { ManageCardsSheet } from './ManageCardsSheet';\n\n/** \"06/2027\" → \"06/27\", como na tela de assinatura. */\nfunction formatExpiryDate(date?: string | null): string {\n  if (!date) return '';\n  const [month, year] = date.split('/');\n  if (!month || !year) return date;\n  return `${month}/${year.slice(-2)}`;\n}\n\nexport function PaymentMethodsCard() {\n  const translate = useTranslations();\n  const { data, isLoading, isError, refetch } = useCards({ includeVindi: true });\n  const { hasPermission } = useManagementPermissions();\n  const actions = useSubscriptionActions();\n  const [isManageOpen, setIsManageOpen] = useState(false);\n\n  const cards = data?.data ?? [];\n  const defaultCard = cards.find((card) => card.is_default) ?? cards[0];\n  const lastDigits = (defaultCard?.number ?? '').replaceAll(/\\D/g, '').slice(-4);\n  const expiryDate = formatExpiryDate(defaultCard?.date);\n  const canManageCards = hasPermission('manage_cards');\n\n  const addCardButton = canManageCards && (\n    <Button variant=\"secondary\" className=\"h-10!\" onClick={actions.addCard}>\n      <IconPlus size={20} />\n      {translate('common.cards.paymentInfo.addCard')}\n    </Button>\n  );\n\n  return (\n    <div className=\"flex flex-col gap-6 p-5 lg:p-6 border border-zinc-200 rounded-lg bg-white\">\n      <span className=\"paragraph-medium-semibold text-zinc-950\">\n        {translate('common.account.workspace.subscription.paymentInfo.title')}\n      </span>\n\n      {isLoading && (\n        <div className=\"flex items-center gap-4\">\n          <Skeleton className=\"size-10 rounded-lg\" />\n          <div className=\"flex flex-col gap-1.5\">\n            <Skeleton className=\"h-4 w-32\" />\n            <Skeleton className=\"h-4 w-40\" />\n          </div>\n        </div>\n      )}\n\n      {!isLoading && isError && (\n        <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n          <span className=\"paragraph-small-medium text-zinc-500\">\n            {translate('common.account.workspace.subscription.paymentInfo.loadFailed')}\n          </span>\n          <Button variant=\"secondary\" className=\"h-10!\" onClick={() => refetch()}>\n            {translate('common.account.workspace.subscription.paymentInfo.retry')}\n          </Button>\n        </div>\n      )}\n\n      {!isLoading && !isError && !defaultCard && (\n        <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n          <span className=\"paragraph-small-medium text-zinc-500\">\n            {translate('common.account.workspace.subscription.paymentInfo.noCardAdded')}\n          </span>\n          {addCardButton}\n        </div>\n      )}\n\n      {!isLoading && !isError && defaultCard && (\n        <div className=\"flex flex-col md:flex-row md:items-center justify-between gap-4\">\n          <div className=\"flex items-center gap-4 min-w-0\">\n            <div className=\"flex items-center justify-center size-10 shrink-0 rounded-lg border border-zinc-200 bg-white shadow-xs\">\n              <CardBrandIcon brand={defaultCard.brand} />\n            </div>\n            <div className=\"flex flex-col min-w-0\">\n              <span className=\"paragraph-small-semibold text-zinc-950 truncate\">{defaultCard.name}</span>\n              <span className=\"paragraph-small-medium text-zinc-500\">\n                {lastDigits\n                  ? `•••• •••• •••• ${lastDigits}`\n                  : translate('common.cards.item.digitsUnavailable')}\n              </span>\n              {expiryDate && (\n                <span className=\"paragraph-xsmall-medium text-zinc-500\">\n                  {translate('common.account.workspace.subscription.paymentInfo.validUntil', { date: expiryDate })}\n                </span>\n              )}\n            </div>\n            {defaultCard.is_default && (\n              <span className=\"paragraph-xsmall-semibold text-zinc-600 bg-zinc-50 px-2 h-6 inline-flex items-center rounded-lg whitespace-nowrap\">\n                {translate('common.account.workspace.subscription.paymentInfo.defaultCard')}\n              </span>\n            )}\n          </div>\n          {canManageCards && (\n            <div className=\"flex items-center gap-2\">\n              <Button variant=\"secondary\" className=\"h-10!\" onClick={() => setIsManageOpen(true)}>\n                {translate('common.cards.paymentInfo.manageCards')}\n              </Button>\n              {addCardButton}\n            </div>\n          )}\n        </div>\n      )}\n\n      <ManageCardsSheet open={isManageOpen} onOpenChange={setIsManageOpen} onAddCard={actions.addCard} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}