@greatapps/common 1.1.789 → 1.1.791

package/dist/components/account/sections/subscription/change-plan/components/CouponDialog.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { z } from "zod";
+import { Button } from "../../../../../ui/buttons/Button";
+import { FormField } from "../../../../../ui/form/FormField";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../../../ui/overlay/Dialog";
+import { useCouponByCode } from "../../../../../../modules/coupons/hooks/use-coupon-by-code.hook";
+import { useChangePlan } from "../useChangePlanState";
+const couponSchema = z.object({ code: z.string().min(1) });
+function CouponDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations("common.account.workspace.subscription.changePlan.couponDialog");
+  const { isCouponDialogOpen, setIsCouponDialogOpen, handleApplyCoupon } = useChangePlan();
+  const form = useForm({
+    resolver: zodResolver(couponSchema),
+    defaultValues: { code: "" },
+    mode: "onSubmit",
+    reValidateMode: "onChange"
+  });
+  const { mutateAsync: fetchCouponByCode, isPending } = useCouponByCode();
+  const handleClose = useCallback(() => {
+    form.reset();
+    setIsCouponDialogOpen(false);
+  }, [form, setIsCouponDialogOpen]);
+  const onSubmit = useCallback(
+    async ({ code }) => {
+      const trimmedCode = code.trim();
+      if (!trimmedCode) return;
+      try {
+        const coupon = await fetchCouponByCode(trimmedCode);
+        if (!coupon) {
+          form.setError("code", {
+            type: "manual",
+            message: translateDialog("notFoundOrInvalid", { code: trimmedCode })
+          });
+          return;
+        }
+        const stripeData = coupon.stripe_data;
+        if (stripeData && stripeData.usable === false && stripeData.usable_global !== true) {
+          form.setError("code", {
+            type: "manual",
+            message: stripeData.invalid_reason || translateDialog("notUsableAccount", { code: trimmedCode })
+          });
+          return;
+        }
+        handleClose();
+        handleApplyCoupon({ id: coupon.id, code: coupon.code, stripeData: coupon.stripe_data ?? null });
+      } catch {
+        form.setError("code", {
+          type: "manual",
+          message: translateDialog("notFoundOrInvalid", { code: trimmedCode })
+        });
+      }
+    },
+    [fetchCouponByCode, form, handleApplyCoupon, handleClose, translateDialog]
+  );
+  const {
+    register,
+    watch,
+    formState: { errors, isSubmitting }
+  } = form;
+  const codeValue = watch("code");
+  return /* @__PURE__ */ jsx(Dialog, { open: isCouponDialogOpen, onOpenChange: (nextOpen) => !nextOpen && handleClose(), children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "flex flex-col p-0! gap-0! 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-105!",
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0", children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: translateDialog("title") }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              className: "size-8! p-0 absolute right-4",
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(IconX, { size: 18 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-col flex-1 lg:flex-none", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none", children: /* @__PURE__ */ jsx(
+            FormField,
+            {
+              label: translateDialog("codeLabel"),
+              placeholder: translateDialog("codePlaceholder"),
+              ...register("code"),
+              error: !!errors.code,
+              errorMessage: errors.code?.message
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", type: "button", onClick: handleClose, className: "h-10!", children: translate("common.actions.cancel") }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                disabled: !codeValue?.trim() || isPending,
+                loading: isSubmitting,
+                className: "h-10!",
+                children: isSubmitting ? translateDialog("applying") : translateDialog("apply")
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  CouponDialog
+};
+//# sourceMappingURL=CouponDialog.mjs.map

package/dist/components/account/sections/subscription/change-plan/components/CouponDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/CouponDialog.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\nimport { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { z } from 'zod';\nimport { Button } from '../../../../../ui/buttons/Button';\nimport { FormField } from '../../../../../ui/form/FormField';\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../../../../ui/overlay/Dialog';\nimport { useCouponByCode } from '../../../../../../modules/coupons/hooks/use-coupon-by-code.hook';\nimport { useChangePlan } from '../useChangePlanState';\n\nconst couponSchema = z.object({ code: z.string().min(1) });\n\ntype CouponFormData = z.infer<typeof couponSchema>;\n\n/** Digitação e validação do cupom aplicado na troca de plano. */\nexport function CouponDialog() {\n  const translate = useTranslations();\n  const translateDialog = useTranslations('common.account.workspace.subscription.changePlan.couponDialog');\n  const { isCouponDialogOpen, setIsCouponDialogOpen, handleApplyCoupon } = useChangePlan();\n\n  const form = useForm<CouponFormData>({\n    resolver: zodResolver(couponSchema),\n    defaultValues: { code: '' },\n    mode: 'onSubmit',\n    reValidateMode: 'onChange',\n  });\n\n  const { mutateAsync: fetchCouponByCode, isPending } = useCouponByCode();\n\n  const handleClose = useCallback(() => {\n    form.reset();\n    setIsCouponDialogOpen(false);\n  }, [form, setIsCouponDialogOpen]);\n\n  const onSubmit = useCallback(\n    async ({ code }: CouponFormData) => {\n      const trimmedCode = code.trim();\n      if (!trimmedCode) return;\n\n      try {\n        const coupon = await fetchCouponByCode(trimmedCode);\n\n        if (!coupon) {\n          form.setError('code', {\n            type: 'manual',\n            message: translateDialog('notFoundOrInvalid', { code: trimmedCode }),\n          });\n          return;\n        }\n\n        const stripeData = coupon.stripe_data;\n        if (stripeData && stripeData.usable === false && stripeData.usable_global !== true) {\n          form.setError('code', {\n            type: 'manual',\n            message:\n              stripeData.invalid_reason || translateDialog('notUsableAccount', { code: trimmedCode }),\n          });\n          return;\n        }\n\n        handleClose();\n        handleApplyCoupon({ id: coupon.id, code: coupon.code, stripeData: coupon.stripe_data ?? null });\n      } catch {\n        form.setError('code', {\n          type: 'manual',\n          message: translateDialog('notFoundOrInvalid', { code: trimmedCode }),\n        });\n      }\n    },\n    [fetchCouponByCode, form, handleApplyCoupon, handleClose, translateDialog]\n  );\n\n  const {\n    register,\n    watch,\n    formState: { errors, isSubmitting },\n  } = form;\n  const codeValue = watch('code');\n\n  return (\n    <Dialog open={isCouponDialogOpen} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"flex flex-col p-0! gap-0! 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-105!\"\n      >\n        <DialogHeader className=\"p-0\">\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-zinc-200 lg:border-b-0\">\n            <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n              {translateDialog('title')}\n            </DialogTitle>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              className=\"size-8! p-0 absolute right-4\"\n              onClick={handleClose}\n            >\n              <IconX size={18} />\n            </Button>\n          </div>\n        </DialogHeader>\n\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"flex flex-col flex-1 lg:flex-none\">\n          <div className=\"flex flex-col gap-6 lg:gap-8 p-4 lg:p-5 flex-1 lg:flex-none\">\n            <FormField\n              label={translateDialog('codeLabel')}\n              placeholder={translateDialog('codePlaceholder')}\n              {...register('code')}\n              error={!!errors.code}\n              errorMessage={errors.code?.message}\n            />\n          </div>\n\n          <div className=\"flex justify-between items-center p-4 lg:p-5 border-t border-zinc-200 mt-auto lg:mt-0\">\n            <Button variant=\"secondary\" type=\"button\" onClick={handleClose} className=\"h-10!\">\n              {translate('common.actions.cancel')}\n            </Button>\n            <Button\n              type=\"submit\"\n              disabled={!codeValue?.trim() || isPending}\n              loading={isSubmitting}\n              className=\"h-10!\"\n            >\n              {isSubmitting ? translateDialog('applying') : translateDialog('apply')}\n            </Button>\n          </div>\n        </form>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AA0FU,SACE,KADF;AAxFV,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,aAAa;AACtB,SAAS,uBAAuB;AAChC,SAAS,SAAS;AAClB,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ,eAAe,cAAc,mBAAmB;AACjE,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAE9B,MAAM,eAAe,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,EAAE,CAAC;AAKlD,SAAS,eAAe;AAC7B,QAAM,YAAY,gBAAgB;AAClC,QAAM,kBAAkB,gBAAgB,+DAA+D;AACvG,QAAM,EAAE,oBAAoB,uBAAuB,kBAAkB,IAAI,cAAc;AAEvF,QAAM,OAAO,QAAwB;AAAA,IACnC,UAAU,YAAY,YAAY;AAAA,IAClC,eAAe,EAAE,MAAM,GAAG;AAAA,IAC1B,MAAM;AAAA,IACN,gBAAgB;AAAA,EAClB,CAAC;AAED,QAAM,EAAE,aAAa,mBAAmB,UAAU,IAAI,gBAAgB;AAEtE,QAAM,cAAc,YAAY,MAAM;AACpC,SAAK,MAAM;AACX,0BAAsB,KAAK;AAAA,EAC7B,GAAG,CAAC,MAAM,qBAAqB,CAAC;AAEhC,QAAM,WAAW;AAAA,IACf,OAAO,EAAE,KAAK,MAAsB;AAClC,YAAM,cAAc,KAAK,KAAK;AAC9B,UAAI,CAAC,YAAa;AAElB,UAAI;AACF,cAAM,SAAS,MAAM,kBAAkB,WAAW;AAElD,YAAI,CAAC,QAAQ;AACX,eAAK,SAAS,QAAQ;AAAA,YACpB,MAAM;AAAA,YACN,SAAS,gBAAgB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAAA,UACrE,CAAC;AACD;AAAA,QACF;AAEA,cAAM,aAAa,OAAO;AAC1B,YAAI,cAAc,WAAW,WAAW,SAAS,WAAW,kBAAkB,MAAM;AAClF,eAAK,SAAS,QAAQ;AAAA,YACpB,MAAM;AAAA,YACN,SACE,WAAW,kBAAkB,gBAAgB,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAAA,UAC1F,CAAC;AACD;AAAA,QACF;AAEA,oBAAY;AACZ,0BAAkB,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO,MAAM,YAAY,OAAO,eAAe,KAAK,CAAC;AAAA,MAChG,QAAQ;AACN,aAAK,SAAS,QAAQ;AAAA,UACpB,MAAM;AAAA,UACN,SAAS,gBAAgB,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAAA,QACrE,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,mBAAmB,MAAM,mBAAmB,aAAa,eAAe;AAAA,EAC3E;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW,EAAE,QAAQ,aAAa;AAAA,EACpC,IAAI;AACJ,QAAM,YAAY,MAAM,MAAM;AAE9B,SACE,oBAAC,UAAO,MAAM,oBAAoB,cAAc,CAAC,aAAa,CAAC,YAAY,YAAY,GACrF;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAU;AAAA,MAEV;AAAA,4BAAC,gBAAa,WAAU,OACtB,+BAAC,SAAI,WAAU,8FACb;AAAA,8BAAC,eAAY,WAAU,uDACpB,0BAAgB,OAAO,GAC1B;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cAET,8BAAC,SAAM,MAAM,IAAI;AAAA;AAAA,UACnB;AAAA,WACF,GACF;AAAA,QAEA,qBAAC,UAAK,UAAU,KAAK,aAAa,QAAQ,GAAG,WAAU,qCACrD;AAAA,8BAAC,SAAI,WAAU,+DACb;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,gBAAgB,WAAW;AAAA,cAClC,aAAa,gBAAgB,iBAAiB;AAAA,cAC7C,GAAG,SAAS,MAAM;AAAA,cACnB,OAAO,CAAC,CAAC,OAAO;AAAA,cAChB,cAAc,OAAO,MAAM;AAAA;AAAA,UAC7B,GACF;AAAA,UAEA,qBAAC,SAAI,WAAU,yFACb;AAAA,gCAAC,UAAO,SAAQ,aAAY,MAAK,UAAS,SAAS,aAAa,WAAU,SACvE,oBAAU,uBAAuB,GACpC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAU,CAAC,WAAW,KAAK,KAAK;AAAA,gBAChC,SAAS;AAAA,gBACT,WAAU;AAAA,gBAET,yBAAe,gBAAgB,UAAU,IAAI,gBAAgB,OAAO;AAAA;AAAA,YACvE;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/components/account/sections/subscription/change-plan/components/PricePreview.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { Skeleton } from "../../../../../ui/feedback/Skeleton";
+import { useChangePlan } from "../useChangePlanState";
+function PricePreview() {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const { isCalculating, totalPrice, billingLabel, formatCurrencyNumber } = useChangePlan();
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translate("billingRow", { period: billingLabel }) }),
+    isCalculating ? /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24 rounded" }) : totalPrice !== null ? /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950", children: formatCurrencyNumber(totalPrice) }) : /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-400", children: "--" })
+  ] });
+}
+export {
+  PricePreview
+};
+//# sourceMappingURL=PricePreview.mjs.map

package/dist/components/account/sections/subscription/change-plan/components/PricePreview.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/PricePreview.tsx"],"sourcesContent":["'use client';\n\nimport { useTranslations } from 'next-intl';\nimport { Skeleton } from '../../../../../ui/feedback/Skeleton';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Preço do período no rodapé do passo de configuração. */\nexport function PricePreview() {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const { isCalculating, totalPrice, billingLabel, formatCurrencyNumber } = useChangePlan();\n\n  return (\n    <div className=\"flex items-center justify-between\">\n      <span className=\"paragraph-small-medium text-zinc-500\">\n        {translate('billingRow', { period: billingLabel })}\n      </span>\n      {isCalculating ? (\n        <Skeleton className=\"h-7 w-24 rounded\" />\n      ) : totalPrice !== null ? (\n        <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950\">\n          {formatCurrencyNumber(totalPrice)}\n        </span>\n      ) : (\n        <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-400\">--</span>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAYI,SACE,KADF;AAVJ,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAGvB,SAAS,eAAe;AAC7B,QAAM,YAAY,gBAAgB,kDAAkD;AACpF,QAAM,EAAE,eAAe,YAAY,cAAc,qBAAqB,IAAI,cAAc;AAExF,SACE,qBAAC,SAAI,WAAU,qCACb;AAAA,wBAAC,UAAK,WAAU,wCACb,oBAAU,cAAc,EAAE,QAAQ,aAAa,CAAC,GACnD;AAAA,IACC,gBACC,oBAAC,YAAS,WAAU,oBAAmB,IACrC,eAAe,OACjB,oBAAC,UAAK,WAAU,oEACb,+BAAqB,UAAU,GAClC,IAEA,oBAAC,UAAK,WAAU,oEAAmE,gBAAE;AAAA,KAEzF;AAEJ;","names":[]}

package/dist/components/account/sections/subscription/change-plan/components/SummaryBlock.mjs

@@ -0,0 +1,130 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconChevronDown } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Separator } from "../../../../../ui/data-display/Separator";
+import { Skeleton } from "../../../../../ui/feedback/Skeleton";
+import { useCurrencyFormatter } from "../../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { ADDON_IDS, getAddonLabels } from "../../../../../../modules/subscriptions/constants/addons.constants";
+import { roundDiscountPercent } from "../../../../../../modules/subscriptions/utils/periodicity";
+import { cn } from "../../../../../../infra/utils/clsx";
+import { useChangePlan } from "../useChangePlanState";
+function ImmediateChargeBlock({
+  immediateCharge,
+  isCalculating
+}) {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const [expanded, setExpanded] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Separator, { className: "bg-zinc-200" }),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((value) => !value),
+        className: "flex items-center justify-between cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-950 flex items-center gap-1", children: [
+            translate("summary.immediateCharge"),
+            /* @__PURE__ */ jsx(
+              IconChevronDown,
+              {
+                size: 16,
+                className: cn("text-zinc-500 transition-transform duration-200", expanded && "rotate-180")
+              }
+            )
+          ] }),
+          isCalculating ? /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24 rounded" }) : /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950", children: formatCurrencyNumber(immediateCharge.total) })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: immediateCharge.items.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-400", children: item.description }),
+      /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-semibold text-zinc-400", children: [
+        item.value < 0 ? "-" : "",
+        formatCurrencyNumber(Math.abs(item.value))
+      ] })
+    ] }, `${item.description}-${index}`)) })
+  ] });
+}
+function SummaryBlock() {
+  const translate = useTranslations();
+  const translateSummary = useTranslations("common.account.workspace.subscription.changePlan");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const {
+    planName,
+    newPlanPrice,
+    billingLabel,
+    billingLabelFull,
+    periodMonths,
+    isCalculating,
+    totalPrice,
+    discountAmount,
+    couponDiscountAmount,
+    appliedCouponCode,
+    immediateCharge,
+    calculatedPlanExtras
+  } = useChangePlan();
+  const periodDiscountPercent = roundDiscountPercent(
+    discountAmount / ((totalPrice ?? 0) + discountAmount + couponDiscountAmount) * 100
+  );
+  const addons = getAddonLabels(translate);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translateSummary("summary.title") }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 border border-zinc-200 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: translateSummary("summary.planRow", { planName: planName ?? "" }) }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-500", children: newPlanPrice !== null ? formatCurrencyNumber(newPlanPrice) : "--" })
+      ] }),
+      calculatedPlanExtras.filter((extra) => extra.quantity > 0 && extra.value > 0).map((extra, index) => {
+        const addonName = addons[extra.id_addon]?.name ?? `Addon ${extra.id_addon}`;
+        const domainLabel = extra.quantity === 1 ? translateSummary("alternativeBuckets.domainSingular") : translateSummary("alternativeBuckets.domainPlural");
+        const label = extra.id_addon === ADDON_IDS.DOMAINS ? `${extra.quantity} ${domainLabel}${extra.value_original ? ` ${translateSummary("summary.domainAddonSuffix", {
+          price: formatCurrencyNumber(extra.value_original * periodMonths)
+        })}` : ""}` : extra.id_addon === ADDON_IDS.AI ? translateSummary("summary.aiAddon", {
+          credits: extra.quantity.toLocaleString("pt-BR")
+        }) : addonName;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: label }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-500", children: formatCurrencyNumber(extra.value * periodMonths) })
+            ]
+          },
+          `${extra.id_addon}_${extra.value_original}_${index}`
+        );
+      }),
+      discountAmount > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-green-600", children: translateSummary("summary.periodDiscount", {
+          pct: `${periodDiscountPercent}%`,
+          period: billingLabelFull
+        }) }),
+        /* @__PURE__ */ jsxs("span", { className: "paragraph-small-semibold text-green-600", children: [
+          "-",
+          formatCurrencyNumber(discountAmount)
+        ] })
+      ] }),
+      couponDiscountAmount > 0 && appliedCouponCode && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-green-600", children: translateSummary("summary.couponDiscount", { code: appliedCouponCode }) }),
+        /* @__PURE__ */ jsxs("span", { className: "paragraph-small-semibold text-green-600", children: [
+          "-",
+          formatCurrencyNumber(couponDiscountAmount)
+        ] })
+      ] }),
+      immediateCharge && immediateCharge.total > 0 && /* @__PURE__ */ jsx(ImmediateChargeBlock, { immediateCharge, isCalculating }),
+      /* @__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: translateSummary("summary.billingRow", { period: billingLabel }) }),
+        isCalculating ? /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-24 rounded" }) : totalPrice !== null ? /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950", children: formatCurrencyNumber(totalPrice) }) : /* @__PURE__ */ jsx("span", { className: "paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-400", children: "--" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  SummaryBlock
+};
+//# sourceMappingURL=SummaryBlock.mjs.map

package/dist/components/account/sections/subscription/change-plan/components/SummaryBlock.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/SummaryBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Separator } from '../../../../../ui/data-display/Separator';\nimport { Skeleton } from '../../../../../ui/feedback/Skeleton';\nimport { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { ADDON_IDS, getAddonLabels } from '../../../../../../modules/subscriptions/constants/addons.constants';\nimport { roundDiscountPercent } from '../../../../../../modules/subscriptions/utils/periodicity';\nimport { cn } from '../../../../../../infra/utils/clsx';\nimport { useChangePlan } from '../useChangePlanState';\n\nfunction ImmediateChargeBlock({\n  immediateCharge,\n  isCalculating,\n}: {\n  immediateCharge: { total: number; items: { description: string; value: number }[] };\n  isCalculating: boolean;\n}) {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n  const [expanded, setExpanded] = useState(false);\n\n  return (\n    <>\n      <Separator className=\"bg-zinc-200\" />\n      <button\n        type=\"button\"\n        onClick={() => setExpanded((value) => !value)}\n        className=\"flex items-center justify-between cursor-pointer\"\n      >\n        <span className=\"paragraph-small-medium text-zinc-950 flex items-center gap-1\">\n          {translate('summary.immediateCharge')}\n          <IconChevronDown\n            size={16}\n            className={cn('text-zinc-500 transition-transform duration-200', expanded && 'rotate-180')}\n          />\n        </span>\n        {isCalculating ? (\n          <Skeleton className=\"h-7 w-24 rounded\" />\n        ) : (\n          <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950\">\n            {formatCurrencyNumber(immediateCharge.total)}\n          </span>\n        )}\n      </button>\n\n      {expanded && (\n        <div className=\"flex flex-col gap-3\">\n          {immediateCharge.items.map((item, index) => (\n            <div key={`${item.description}-${index}`} className=\"flex items-center justify-between\">\n              <span className=\"paragraph-xsmall-medium text-zinc-400\">{item.description}</span>\n              <span className=\"paragraph-xsmall-semibold text-zinc-400\">\n                {item.value < 0 ? '-' : ''}\n                {formatCurrencyNumber(Math.abs(item.value))}\n              </span>\n            </div>\n          ))}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** Extrato do que vai ser cobrado: plano, adicionais, descontos e cobrança imediata. */\nexport function SummaryBlock() {\n  const translate = useTranslations();\n  const translateSummary = useTranslations('common.account.workspace.subscription.changePlan');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const {\n    planName,\n    newPlanPrice,\n    billingLabel,\n    billingLabelFull,\n    periodMonths,\n    isCalculating,\n    totalPrice,\n    discountAmount,\n    couponDiscountAmount,\n    appliedCouponCode,\n    immediateCharge,\n    calculatedPlanExtras,\n  } = useChangePlan();\n\n  // Percentual do desconto de periodicidade derivado do próprio valor exibido ao lado — o badge\n  // da vitrine compara com a âncora e daria um número que não fecha com esta linha.\n  const periodDiscountPercent = roundDiscountPercent(\n    (discountAmount / ((totalPrice ?? 0) + discountAmount + couponDiscountAmount)) * 100\n  );\n\n  const addons = getAddonLabels(translate);\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <span className=\"paragraph-medium-semibold text-zinc-950\">{translateSummary('summary.title')}</span>\n\n      <div className=\"flex flex-col gap-4 p-4 border border-zinc-200 rounded-lg\">\n        <div className=\"flex items-center justify-between\">\n          <span className=\"paragraph-small-medium text-zinc-500\">\n            {translateSummary('summary.planRow', { planName: planName ?? '' })}\n          </span>\n          <span className=\"paragraph-small-semibold text-zinc-500\">\n            {newPlanPrice !== null ? formatCurrencyNumber(newPlanPrice) : '--'}\n          </span>\n        </div>\n\n        {calculatedPlanExtras\n          .filter((extra) => extra.quantity > 0 && extra.value > 0)\n          .map((extra, index) => {\n            const addonName = addons[extra.id_addon]?.name ?? `Addon ${extra.id_addon}`;\n            const domainLabel =\n              extra.quantity === 1\n                ? translateSummary('alternativeBuckets.domainSingular')\n                : translateSummary('alternativeBuckets.domainPlural');\n\n            const label =\n              extra.id_addon === ADDON_IDS.DOMAINS\n                ? `${extra.quantity} ${domainLabel}${\n                    extra.value_original\n                      ? ` ${translateSummary('summary.domainAddonSuffix', {\n                          price: formatCurrencyNumber(extra.value_original * periodMonths),\n                        })}`\n                      : ''\n                  }`\n                : extra.id_addon === ADDON_IDS.AI\n                  ? translateSummary('summary.aiAddon', {\n                      credits: extra.quantity.toLocaleString('pt-BR'),\n                    })\n                  : addonName;\n\n            return (\n              <div\n                key={`${extra.id_addon}_${extra.value_original}_${index}`}\n                className=\"flex items-center justify-between\"\n              >\n                <span className=\"paragraph-small-medium text-zinc-500\">{label}</span>\n                <span className=\"paragraph-small-semibold text-zinc-500\">\n                  {formatCurrencyNumber(extra.value * periodMonths)}\n                </span>\n              </div>\n            );\n          })}\n\n        {discountAmount > 0 && (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-medium text-green-600\">\n              {translateSummary('summary.periodDiscount', {\n                pct: `${periodDiscountPercent}%`,\n                period: billingLabelFull,\n              })}\n            </span>\n            <span className=\"paragraph-small-semibold text-green-600\">\n              -{formatCurrencyNumber(discountAmount)}\n            </span>\n          </div>\n        )}\n\n        {couponDiscountAmount > 0 && appliedCouponCode && (\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-medium text-green-600\">\n              {translateSummary('summary.couponDiscount', { code: appliedCouponCode })}\n            </span>\n            <span className=\"paragraph-small-semibold text-green-600\">\n              -{formatCurrencyNumber(couponDiscountAmount)}\n            </span>\n          </div>\n        )}\n\n        {immediateCharge && immediateCharge.total > 0 && (\n          <ImmediateChargeBlock immediateCharge={immediateCharge} isCalculating={isCalculating} />\n        )}\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            {translateSummary('summary.billingRow', { period: billingLabel })}\n          </span>\n          {isCalculating ? (\n            <Skeleton className=\"h-7 w-24 rounded\" />\n          ) : totalPrice !== null ? (\n            <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-950\">\n              {formatCurrencyNumber(totalPrice)}\n            </span>\n          ) : (\n            <span className=\"paragraph-xlarge-semibold md:title-xsmall-semibold text-zinc-400\">--</span>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account/sections/subscription/change-plan/plan-comparison.mjs

@@ -0,0 +1,38 @@
+import { mapApiPlanToUiPlan } from "../../../../../modules/plans/utils/map-api-plan-to-ui";
+function getLostFeatures(translate) {
+  const domains15 = translate("common.account.workspace.subscription.changePlan.lostFeatures.domains15");
+  const projectManagement = translate(
+    "common.account.workspace.subscription.changePlan.lostFeatures.projectManagement"
+  );
+  const onboardingMeeting = translate(
+    "common.account.workspace.subscription.changePlan.lostFeatures.onboardingMeeting"
+  );
+  return {
+    3: {
+      2: [domains15, projectManagement, onboardingMeeting],
+      1: [domains15, projectManagement, onboardingMeeting]
+    },
+    2: {
+      1: [
+        translate("common.account.workspace.subscription.changePlan.lostFeatures.domains3"),
+        translate("common.account.workspace.subscription.changePlan.lostFeatures.unlimitedPages")
+      ]
+    }
+  };
+}
+function toUiPlan(plan, translate) {
+  return "planId" in plan ? plan : mapApiPlanToUiPlan(plan, translate);
+}
+function getNewFeatures(currentPlan, newPlan, translate) {
+  const currentUiPlan = toUiPlan(currentPlan, translate);
+  const newUiPlan = toUiPlan(newPlan, translate);
+  const currentTexts = new Set(
+    currentUiPlan.features.filter((feature) => feature.icon === "check").map((feature) => feature.text)
+  );
+  return newUiPlan.features.filter((feature) => feature.icon === "check" && !currentTexts.has(feature.text)).map((feature) => ({ text: feature.text, tooltip: feature.tooltip }));
+}
+export {
+  getLostFeatures,
+  getNewFeatures
+};
+//# sourceMappingURL=plan-comparison.mjs.map

package/dist/components/account/sections/subscription/change-plan/plan-comparison.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/account/sections/subscription/change-plan/plan-comparison.ts"],"sourcesContent":["import { mapApiPlanToUiPlan } from '../../../../../modules/plans/utils/map-api-plan-to-ui';\nimport type { Plan, UiPlan } from '../../../../../modules/plans/types/plan.type';\n\n// `key: any`: os apps tipam `useTranslations()` contra o catálogo deles, e uma chave literal\n// mais estreita não é atribuível a `string` (contravariância) — mesmo padrão dos demais helpers.\ntype TranslateFn = (key: any, values?: Record<string, string | number>) => string;\n\n/** O que o cliente perde ao descer de plano (Essencial = 1, Negócio = 2, Agência = 3). */\nexport function getLostFeatures(translate: TranslateFn): Record<number, Record<number, string[]>> {\n  const domains15 = translate('common.account.workspace.subscription.changePlan.lostFeatures.domains15');\n  const projectManagement = translate(\n    'common.account.workspace.subscription.changePlan.lostFeatures.projectManagement'\n  );\n  const onboardingMeeting = translate(\n    'common.account.workspace.subscription.changePlan.lostFeatures.onboardingMeeting'\n  );\n\n  return {\n    3: {\n      2: [domains15, projectManagement, onboardingMeeting],\n      1: [domains15, projectManagement, onboardingMeeting],\n    },\n    2: {\n      1: [\n        translate('common.account.workspace.subscription.changePlan.lostFeatures.domains3'),\n        translate('common.account.workspace.subscription.changePlan.lostFeatures.unlimitedPages'),\n      ],\n    },\n  };\n}\n\nfunction toUiPlan(plan: Plan | UiPlan, translate?: TranslateFn): UiPlan {\n  return 'planId' in plan ? plan : mapApiPlanToUiPlan(plan, translate);\n}\n\n/** O que o plano novo acrescenta em relação ao atual. */\nexport function getNewFeatures(\n  currentPlan: Plan | UiPlan,\n  newPlan: Plan | UiPlan,\n  translate?: TranslateFn\n) {\n  const currentUiPlan = toUiPlan(currentPlan, translate);\n  const newUiPlan = toUiPlan(newPlan, translate);\n\n  const currentTexts = new Set(\n    currentUiPlan.features.filter((feature) => feature.icon === 'check').map((feature) => feature.text)\n  );\n\n  return newUiPlan.features\n    .filter((feature) => feature.icon === 'check' && !currentTexts.has(feature.text))\n    .map((feature) => ({ text: feature.text, tooltip: feature.tooltip }));\n}\n"],"mappings":"AAAA,SAAS,0BAA0B;AAQ5B,SAAS,gBAAgB,WAAkE;AAChG,QAAM,YAAY,UAAU,yEAAyE;AACrG,QAAM,oBAAoB;AAAA,IACxB;AAAA,EACF;AACA,QAAM,oBAAoB;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL,GAAG;AAAA,MACD,GAAG,CAAC,WAAW,mBAAmB,iBAAiB;AAAA,MACnD,GAAG,CAAC,WAAW,mBAAmB,iBAAiB;AAAA,IACrD;AAAA,IACA,GAAG;AAAA,MACD,GAAG;AAAA,QACD,UAAU,wEAAwE;AAAA,QAClF,UAAU,8EAA8E;AAAA,MAC1F;AAAA,IACF;AAAA,EACF;AACF;AAEA,SAAS,SAAS,MAAqB,WAAiC;AACtE,SAAO,YAAY,OAAO,OAAO,mBAAmB,MAAM,SAAS;AACrE;AAGO,SAAS,eACd,aACA,SACA,WACA;AACA,QAAM,gBAAgB,SAAS,aAAa,SAAS;AACrD,QAAM,YAAY,SAAS,SAAS,SAAS;AAE7C,QAAM,eAAe,IAAI;AAAA,IACvB,cAAc,SAAS,OAAO,CAAC,YAAY,QAAQ,SAAS,OAAO,EAAE,IAAI,CAAC,YAAY,QAAQ,IAAI;AAAA,EACpG;AAEA,SAAO,UAAU,SACd,OAAO,CAAC,YAAY,QAAQ,SAAS,WAAW,CAAC,aAAa,IAAI,QAAQ,IAAI,CAAC,EAC/E,IAAI,CAAC,aAAa,EAAE,MAAM,QAAQ,MAAM,SAAS,QAAQ,QAAQ,EAAE;AACxE;","names":[]}

package/dist/components/account/sections/subscription/change-plan/steps/PaymentSummaryStep.mjs

@@ -0,0 +1,127 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconInfoCircle } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../../../ui/buttons/Button";
+import { PaymentInfoCard } from "../../../../../ui/data-display/PaymentInfoCard";
+import { PaymentMethodToggle } from "../../../../../ui/form/PaymentMethodToggle";
+import { SheetFooter } from "../../../../../ui/overlay/Sheet";
+import { useIsDefaultWhitelabel } from "../../../../../../providers/whitelabel.provider";
+import { cn } from "../../../../../../infra/utils/clsx";
+import { CouponBlock } from "../components/CouponBlock";
+import { SummaryBlock } from "../components/SummaryBlock";
+import { useChangePlan } from "../useChangePlanState";
+function PaymentSummaryStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    "common.account.workspace.subscription.changePlan.paymentSummary"
+  );
+  const translateMethods = useTranslations(
+    "common.account.workspace.subscription.changePlan.paymentMethodLabels"
+  );
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const {
+    isDowngrade,
+    form,
+    paymentMethod,
+    selectedCardId,
+    billingPeriod,
+    isSubmitting,
+    isCalculating,
+    immediateCharge,
+    handleBack,
+    disabledPaymentMethods,
+    allowedPaymentMethod,
+    couponUnlocksAllMethods,
+    allowBoletoFromCurrentSubscription,
+    allowPixFromCurrentSubscription,
+    boletoAvailable,
+    pixAvailable,
+    hasChangedPaymentMethod,
+    hasChanges,
+    hasPendingAuth
+  } = useChangePlan();
+  const hasImmediateCharge = immediateCharge && immediateCharge.total > 0;
+  const paymentMethodLabel = paymentMethod === "card" ? translateMethods("card") : paymentMethod === "boleto" ? translateMethods("boleto") : translateMethods("pix");
+  const disableCard = disabledPaymentMethods.includes("card");
+  const disableBoleto = disabledPaymentMethods.includes("boleto") || billingPeriod !== "annual" && allowedPaymentMethod !== "boleto" && !couponUnlocksAllMethods && !allowBoletoFromCurrentSubscription;
+  const disablePix = disabledPaymentMethods.includes("pix") || billingPeriod !== "annual" && allowedPaymentMethod !== "pix" && !couponUnlocksAllMethods && !allowPixFromCurrentSubscription;
+  const infoBoxClasses = cn(
+    "flex items-center gap-3 p-4 rounded-lg",
+    isDefaultWhitelabel ? "bg-cyan-50" : "bg-zinc-50"
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:gap-6 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 px-4 lg:px-5 py-4 lg:py-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translateStep("paymentTitle") }),
+        /* @__PURE__ */ jsx(
+          PaymentMethodToggle,
+          {
+            value: paymentMethod,
+            onChange: (value) => form.setValue("paymentMethod", value),
+            disableBoleto: disableBoleto || hasPendingAuth,
+            disableCard: disableCard || hasPendingAuth,
+            disablePix: disablePix || hasPendingAuth,
+            hideBoleto: !boletoAvailable,
+            hidePix: !pixAvailable
+          }
+        ),
+        paymentMethod === "card" ? /* @__PURE__ */ jsx(
+          PaymentInfoCard,
+          {
+            selectedCardId,
+            onCardSelect: hasPendingAuth ? () => {
+            } : (id) => form.setValue("selectedCardId", id)
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: infoBoxClasses, children: [
+          /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "text-zinc-950 shrink-0" }),
+          /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-950", children: paymentMethod === "boleto" ? translateStep.rich("boletoInfo", {
+            b: (chunks) => /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: chunks })
+          }) : translateStep.rich("pixInfo", {
+            b: (chunks) => /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: chunks })
+          }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CouponBlock, {}),
+      /* @__PURE__ */ jsx(SummaryBlock, {}),
+      /* @__PURE__ */ jsxs("div", { className: infoBoxClasses, children: [
+        /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "text-zinc-950 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-950", children: hasImmediateCharge ? translateStep("immediateChargeNote") : isDowngrade ? translateStep("downgradeNote") : translateStep("defaultNote") })
+      ] }),
+      hasChangedPaymentMethod && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-100", children: [
+        /* @__PURE__ */ jsx(IconInfoCircle, { size: 16, className: "text-yellow-600 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-950", children: translateStep.rich("paymentMethodChangeNote", {
+          method: paymentMethodLabel,
+          b: (chunks) => /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: chunks })
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(SheetFooter, { className: "flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          className: "h-10!",
+          onClick: handleBack,
+          disabled: hasPendingAuth,
+          children: translate("common.actions.back")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          className: "h-10!",
+          loading: isSubmitting,
+          disabled: isCalculating || paymentMethod === "card" && !selectedCardId || !hasChanges,
+          children: hasPendingAuth ? translateStep("retryAuthButton") : translateStep("submitButton")
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  PaymentSummaryStep
+};
+//# sourceMappingURL=PaymentSummaryStep.mjs.map

package/dist/components/account/sections/subscription/change-plan/steps/PaymentSummaryStep.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/steps/PaymentSummaryStep.tsx"],"sourcesContent":["'use client';\n\nimport { IconInfoCircle } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../../../ui/buttons/Button';\nimport { PaymentInfoCard } from '../../../../../ui/data-display/PaymentInfoCard';\nimport { PaymentMethodToggle } from '../../../../../ui/form/PaymentMethodToggle';\nimport { SheetFooter } from '../../../../../ui/overlay/Sheet';\nimport { useIsDefaultWhitelabel } from '../../../../../../providers/whitelabel.provider';\nimport { cn } from '../../../../../../infra/utils/clsx';\nimport { CouponBlock } from '../components/CouponBlock';\nimport { SummaryBlock } from '../components/SummaryBlock';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Passo final: forma de pagamento, cupom e extrato antes de confirmar a alteração. */\nexport function PaymentSummaryStep() {\n  const translate = useTranslations();\n  const translateStep = useTranslations(\n    'common.account.workspace.subscription.changePlan.paymentSummary'\n  );\n  const translateMethods = useTranslations(\n    'common.account.workspace.subscription.changePlan.paymentMethodLabels'\n  );\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n\n  const {\n    isDowngrade,\n    form,\n    paymentMethod,\n    selectedCardId,\n    billingPeriod,\n    isSubmitting,\n    isCalculating,\n    immediateCharge,\n    handleBack,\n    disabledPaymentMethods,\n    allowedPaymentMethod,\n    couponUnlocksAllMethods,\n    allowBoletoFromCurrentSubscription,\n    allowPixFromCurrentSubscription,\n    boletoAvailable,\n    pixAvailable,\n    hasChangedPaymentMethod,\n    hasChanges,\n    hasPendingAuth,\n  } = useChangePlan();\n\n  const hasImmediateCharge = immediateCharge && immediateCharge.total > 0;\n  const paymentMethodLabel =\n    paymentMethod === 'card'\n      ? translateMethods('card')\n      : paymentMethod === 'boleto'\n        ? translateMethods('boleto')\n        : translateMethods('pix');\n\n  // Cupom tem precedência sobre \"boleto/pix só no anual\"; sub que já usa o método também mantém.\n  const disableCard = disabledPaymentMethods.includes('card');\n  const disableBoleto =\n    disabledPaymentMethods.includes('boleto') ||\n    (billingPeriod !== 'annual' &&\n      allowedPaymentMethod !== 'boleto' &&\n      !couponUnlocksAllMethods &&\n      !allowBoletoFromCurrentSubscription);\n  const disablePix =\n    disabledPaymentMethods.includes('pix') ||\n    (billingPeriod !== 'annual' &&\n      allowedPaymentMethod !== 'pix' &&\n      !couponUnlocksAllMethods &&\n      !allowPixFromCurrentSubscription);\n\n  const infoBoxClasses = cn(\n    'flex items-center gap-3 p-4 rounded-lg',\n    isDefaultWhitelabel ? 'bg-cyan-50' : 'bg-zinc-50'\n  );\n\n  return (\n    <>\n      <div className=\"flex flex-col gap-4 lg:gap-6 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 px-4 lg:px-5 py-4 lg:py-6\">\n        <div className=\"flex flex-col gap-4\">\n          <span className=\"paragraph-medium-semibold text-zinc-950\">{translateStep('paymentTitle')}</span>\n\n          <PaymentMethodToggle\n            value={paymentMethod}\n            onChange={(value) => form.setValue('paymentMethod', value)}\n            disableBoleto={disableBoleto || hasPendingAuth}\n            disableCard={disableCard || hasPendingAuth}\n            disablePix={disablePix || hasPendingAuth}\n            hideBoleto={!boletoAvailable}\n            hidePix={!pixAvailable}\n          />\n\n          {paymentMethod === 'card' ? (\n            <PaymentInfoCard\n              selectedCardId={selectedCardId}\n              onCardSelect={hasPendingAuth ? () => {} : (id) => form.setValue('selectedCardId', id)}\n            />\n          ) : (\n            <div className={infoBoxClasses}>\n              <IconInfoCircle size={16} className=\"text-zinc-950 shrink-0\" />\n              <p className=\"paragraph-small-regular text-zinc-950\">\n                {paymentMethod === 'boleto'\n                  ? translateStep.rich('boletoInfo', {\n                      b: (chunks) => <span className=\"paragraph-small-semibold\">{chunks}</span>,\n                    })\n                  : translateStep.rich('pixInfo', {\n                      b: (chunks) => <span className=\"paragraph-small-semibold\">{chunks}</span>,\n                    })}\n              </p>\n            </div>\n          )}\n        </div>\n\n        <CouponBlock />\n        <SummaryBlock />\n\n        <div className={infoBoxClasses}>\n          <IconInfoCircle size={16} className=\"text-zinc-950 shrink-0\" />\n          <span className=\"paragraph-small-regular text-zinc-950\">\n            {hasImmediateCharge\n              ? translateStep('immediateChargeNote')\n              : isDowngrade\n                ? translateStep('downgradeNote')\n                : translateStep('defaultNote')}\n          </span>\n        </div>\n\n        {hasChangedPaymentMethod && (\n          <div className=\"flex items-start gap-3 p-4 rounded-lg bg-yellow-50 border border-yellow-100\">\n            <IconInfoCircle size={16} className=\"text-yellow-600 shrink-0 mt-0.5\" />\n            <p className=\"paragraph-small-regular text-zinc-950\">\n              {translateStep.rich('paymentMethodChangeNote', {\n                method: paymentMethodLabel,\n                b: (chunks) => <span className=\"paragraph-small-semibold\">{chunks}</span>,\n              })}\n            </p>\n          </div>\n        )}\n      </div>\n\n      <SheetFooter className=\"flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200\">\n        <Button\n          type=\"button\"\n          variant=\"secondary\"\n          className=\"h-10!\"\n          onClick={handleBack}\n          disabled={hasPendingAuth}\n        >\n          {translate('common.actions.back')}\n        </Button>\n        <Button\n          type=\"submit\"\n          className=\"h-10!\"\n          loading={isSubmitting}\n          disabled={isCalculating || (paymentMethod === 'card' && !selectedCardId) || !hasChanges}\n        >\n          {hasPendingAuth ? translateStep('retryAuthButton') : translateStep('submitButton')}\n        </Button>\n      </SheetFooter>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}