@greatapps/common 1.1.790 → 1.1.792

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/account/sections/subscription/UsageReportSheet.tsx"],"sourcesContent":["'use client';\n\nimport { IconCornerDownRight, IconExternalLink } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../ui/buttons/Button';\nimport { Separator } from '../../../ui/data-display/Separator';\nimport { Skeleton } from '../../../ui/feedback/Skeleton';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/overlay/Sheet';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../../../ui/overlay/Tooltip';\nimport { useIaCreditOperations } from '../../../../modules/ia-credits/hooks/ia-credit-operations.hook';\nimport { useWhitelabel } from '../../../../providers/whitelabel.provider';\nimport useIsMobile from '../../../../hooks/useIsMobile';\nimport { cn } from '../../../../infra/utils/clsx';\nimport { useSubscriptionFlows } from '../../../../store/useSubscriptionFlows';\n\ntype UsageItem = {\n  description: string;\n  author: string;\n  credits: number;\n};\n\ntype UsageGroup = {\n  date: string;\n  items: UsageItem[];\n};\n\ntype CreditPurchase = {\n  id: string;\n  addedCredits: number;\n  consumedCredits: number;\n  purchaseDateLabel: string;\n  expiresInDays: number | null;\n  expired: boolean;\n  groups: UsageGroup[];\n};\n\n/** O consumo guarda a página em `operation_ref` (\"… - Página ID: 123\"). */\nfunction extractPageId(description: string): string | null {\n  const pageId = description.split('-')[1]?.replace('Página ID: ', ' ').trim();\n  return pageId || null;\n}\n\nfunction UsageItemRow({ item }: { item: UsageItem }) {\n  const translate = useTranslations('common.account.workspace.subscription.usageReport');\n  const { whitelabel } = useWhitelabel();\n  const pageId = extractPageId(item.description);\n  const pageUrl = pageId && whitelabel?.pages_url ? `${whitelabel.pages_url}/pages/${pageId}` : null;\n\n  return (\n    <div className=\"flex items-center gap-4\">\n      <IconCornerDownRight size={18} className=\"text-zinc-400 shrink-0\" />\n      <div className=\"flex flex-col gap-1 flex-1\">\n        <span className=\"paragraph-small-semibold text-zinc-950\">{item.description.split('-')[0]}</span>\n        <p className=\"paragraph-small-regular text-zinc-600\">\n          {translate.rich('madeBy', {\n            author: item.author,\n            b: (chunks) => <span className=\"paragraph-small-medium\">{chunks}</span>,\n          })}\n        </p>\n      </div>\n      <span className=\"paragraph-small-semibold text-zinc-950 text-right shrink-0\">\n        {translate('creditsLabel', { credits: String(item.credits) })}\n      </span>\n      {pageUrl && (\n        <Tooltip delayDuration={300}>\n          <TooltipTrigger asChild>\n            <Button\n              variant=\"secondary\"\n              size=\"icon-lg\"\n              className=\"size-8 shrink-0\"\n              onClick={() => window.open(pageUrl, '_blank', 'noopener,noreferrer')}\n            >\n              <IconExternalLink size={16} className=\"text-zinc-950\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>{translate('viewPage')}</TooltipContent>\n        </Tooltip>\n      )}\n    </div>\n  );\n}\n\nfunction PurchaseSection({ purchase }: { purchase: CreditPurchase }) {\n  const translate = useTranslations('common.account.workspace.subscription.usageReport');\n\n  const expiresLabel = purchase.expired\n    ? translate('expired')\n    : purchase.expiresInDays != null\n      ? purchase.expiresInDays === 1\n        ? translate('expiresInOneDay')\n        : translate('expiresInDays', { days: String(purchase.expiresInDays) })\n      : '';\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-1\">\n        <span className=\"paragraph-medium-semibold text-zinc-950\">\n          {translate('creditsAdded', { count: String(purchase.addedCredits) })}\n        </span>\n        <span className=\"paragraph-small-regular text-zinc-600\">{purchase.purchaseDateLabel}</span>\n      </div>\n\n      <div className=\"flex items-start justify-between\">\n        <span className=\"paragraph-small-regular text-zinc-600\">\n          {translate('creditsUsed', {\n            consumed: String(purchase.consumedCredits),\n            total: String(purchase.addedCredits),\n          })}\n        </span>\n        {expiresLabel && <span className=\"paragraph-small-medium text-zinc-950\">{expiresLabel}</span>}\n      </div>\n\n      {purchase.groups.map((group) => (\n        <div key={group.date} className=\"flex flex-col gap-5 p-4 bg-zinc-50 rounded-lg\">\n          <span className=\"paragraph-small-semibold text-zinc-600\">{group.date}</span>\n          {group.items.map((item, index) => (\n            <div key={`${group.date}-${index}`}>\n              {index > 0 && <Separator className=\"mb-5\" />}\n              <UsageItemRow item={item} />\n            </div>\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** Consumo de créditos de IA lote a lote, com quem gastou e em qual página. */\nexport function UsageReportSheet() {\n  const translate = useTranslations('common.account.workspace.subscription.usageReport');\n  const isMobile = useIsMobile();\n  const isOpen = useSubscriptionFlows((state) => state.isUsageReportOpen);\n  const close = useSubscriptionFlows((state) => state.closeUsageReport);\n\n  const { operations, isLoading } = useIaCreditOperations();\n\n  // Agrupa os consumos (subtract) sob o lote que os originou (add), via `consumed_from_add_id`.\n  const adds = operations.filter((operation) => operation.operation === 'add');\n  const subtracts = operations.filter((operation) => operation.operation === 'subtract');\n\n  const purchases: CreditPurchase[] = adds.map((add) => {\n    const purchaseDate = add.datetime_add ? new Date(add.datetime_add) : new Date();\n    const today = new Date();\n    const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());\n\n    const expiration = add.expiration_time ? new Date(add.expiration_time) : null;\n    const expirationDate =\n      expiration && new Date(expiration.getFullYear(), expiration.getMonth(), expiration.getDate());\n    const expired = add.has_expired || (expirationDate != null && expirationDate.getTime() < todayDate.getTime());\n\n    let expiresInDays: number | null = null;\n    if (!expired && expirationDate) {\n      const diffMs = expirationDate.getTime() - todayDate.getTime();\n      expiresInDays = Math.max(0, Math.ceil(diffMs / (1000 * 60 * 60 * 24)));\n    }\n\n    const relatedSubtracts = subtracts.filter(\n      (subtract) => String(subtract.consumed_from_add_id) === String(add.id)\n    );\n    const consumedCredits = relatedSubtracts.reduce(\n      (sum, subtract) => sum + subtract.operation_value,\n      0\n    );\n\n    const groupsMap = new Map<string, UsageGroup>();\n    for (const subtract of relatedSubtracts) {\n      const date = subtract.datetime_add ? new Date(subtract.datetime_add) : new Date();\n      const dateLabel = date.toLocaleDateString('pt-BR');\n      const item: UsageItem = {\n        description: subtract.operation_ref || translate('defaultRef'),\n        author: subtract.user_name || translate('defaultUser'),\n        credits: subtract.operation_value,\n      };\n\n      const existing = groupsMap.get(dateLabel);\n      if (existing) existing.items.push(item);\n      else groupsMap.set(dateLabel, { date: dateLabel, items: [item] });\n    }\n\n    return {\n      id: String(add.id),\n      addedCredits: add.operation_value,\n      consumedCredits,\n      purchaseDateLabel: purchaseDate.toLocaleDateString('pt-BR'),\n      expiresInDays,\n      expired,\n      groups: Array.from(groupsMap.values()),\n    };\n  });\n\n  return (\n    <Sheet open={isOpen} onOpenChange={(nextOpen) => !nextOpen && close()}>\n      <SheetContent\n        side={isMobile ? 'bottom' : 'right'}\n        onOpenAutoFocus={(event) => event.preventDefault()}\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      >\n        <SheetHeader className=\"px-4 sm:px-5 py-3 border-b border-zinc-200\">\n          <SheetTitle className=\"paragraph-medium-semibold text-zinc-950\">{translate('title')}</SheetTitle>\n        </SheetHeader>\n\n        <div className=\"flex flex-col gap-5 sm: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 sm:px-5 py-5 sm:py-6\">\n          {isLoading && purchases.length === 0 && (\n            <div className=\"flex flex-col gap-6\">\n              {[0, 1, 2].map((key) => (\n                <div key={key} className=\"flex flex-col gap-4\">\n                  <div className=\"flex flex-col gap-2\">\n                    <Skeleton className=\"h-4 w-40 rounded\" />\n                    <Skeleton className=\"h-3 w-28 rounded\" />\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <Skeleton className=\"h-3 w-40 rounded\" />\n                    <Skeleton className=\"h-3 w-24 rounded\" />\n                  </div>\n                  <div className=\"flex flex-col gap-3 p-4 bg-zinc-50 rounded-lg\">\n                    <Skeleton className=\"h-3 w-32 rounded\" />\n                    <Skeleton className=\"h-3 w-full rounded\" />\n                    <Skeleton className=\"h-3 w-2/3 rounded\" />\n                  </div>\n                </div>\n              ))}\n            </div>\n          )}\n\n          {!isLoading && purchases.length === 0 && (\n            <span className=\"paragraph-small-regular text-zinc-500\">{translate('noHistory')}</span>\n          )}\n\n          {purchases.map((purchase, index) => (\n            <div key={purchase.id}>\n              {index > 0 && <Separator className=\"mb-6\" />}\n              <PurchaseSection purchase={purchase} />\n            </div>\n          ))}\n        </div>\n      </SheetContent>\n    </Sheet>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,75 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { useTranslations } from "next-intl";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../../../../ui/overlay/Sheet";
+import { useExternalContracting } from "../../../../../providers/whitelabel.provider";
+import useIsMobile from "../../../../../hooks/useIsMobile";
+import { cn } from "../../../../../infra/utils/clsx";
+import { AbTestDetailsDialog } from "./components/AbTestDetailsDialog";
+import { CouponDialog } from "./components/CouponDialog";
+import { PaymentSummaryStep } from "./steps/PaymentSummaryStep";
+import { PlanComparisonStep } from "./steps/PlanComparisonStep";
+import { PlanViewStep } from "./steps/PlanViewStep";
+import { ReactivationConfigStep } from "./steps/ReactivationConfigStep";
+import { ReactivationPaymentStep } from "./steps/ReactivationPaymentStep";
+import { ChangePlanProvider, useChangePlanLogic } from "./useChangePlanState";
+function ChangePlanSheet() {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const isMobile = useIsMobile();
+  const state = useChangePlanLogic();
+  const { isExternalContracting, redirectToExternal } = useExternalContracting();
+  const { open, isReactivation, isDowngrade, targetPlan, currentStep, handleClose, form, handleSubmit } = state;
+  useEffect(() => {
+    if (open && isExternalContracting) {
+      handleClose();
+      redirectToExternal("contracting");
+    }
+  }, [open, isExternalContracting, handleClose, redirectToExternal]);
+  if (isExternalContracting) return null;
+  const isPlanManagement = !isReactivation && !isDowngrade && !targetPlan;
+  const renderStep = () => {
+    if (isReactivation) {
+      if (currentStep === 1) return /* @__PURE__ */ jsx(ReactivationConfigStep, {});
+      if (currentStep === 2) return /* @__PURE__ */ jsx(ReactivationPaymentStep, {});
+      return null;
+    }
+    if (targetPlan) {
+      if (currentStep === 1) return /* @__PURE__ */ jsx(PlanComparisonStep, {});
+      if (currentStep === 2) return /* @__PURE__ */ jsx(PaymentSummaryStep, {});
+      return null;
+    }
+    if (currentStep === 1) return /* @__PURE__ */ jsx(PlanViewStep, {});
+    if (currentStep === 2) return /* @__PURE__ */ jsx(PaymentSummaryStep, {});
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(ChangePlanProvider, { value: state, children: [
+    /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: (nextOpen) => !nextOpen && handleClose(), 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-120! sm:max-w-120!"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(SheetHeader, { className: "px-4 sm:px-5 py-3 border-b border-zinc-200", children: /* @__PURE__ */ jsx(SheetTitle, { className: "paragraph-medium-semibold text-zinc-950", children: isPlanManagement ? translate("titleManagement") : translate("titleChange") }) }),
+          /* @__PURE__ */ jsx("div", { className: "h-1 bg-zinc-100 w-full", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full transition-all duration-300 ease-in-out bg-primary",
+              style: { width: currentStep === 1 ? "50%" : "100%" }
+            }
+          ) }),
+          /* @__PURE__ */ jsx("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col flex-1 min-h-0", children: renderStep() })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(AbTestDetailsDialog, {}),
+    /* @__PURE__ */ jsx(CouponDialog, {})
+  ] });
+}
+export {
+  ChangePlanSheet
+};
+//# sourceMappingURL=ChangePlanSheet.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/components/account/sections/subscription/change-plan/ChangePlanSheet.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { useTranslations } from 'next-intl';\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../../ui/overlay/Sheet';\nimport { useExternalContracting } from '../../../../../providers/whitelabel.provider';\nimport useIsMobile from '../../../../../hooks/useIsMobile';\nimport { cn } from '../../../../../infra/utils/clsx';\nimport { AbTestDetailsDialog } from './components/AbTestDetailsDialog';\nimport { CouponDialog } from './components/CouponDialog';\nimport { PaymentSummaryStep } from './steps/PaymentSummaryStep';\nimport { PlanComparisonStep } from './steps/PlanComparisonStep';\nimport { PlanViewStep } from './steps/PlanViewStep';\nimport { ReactivationConfigStep } from './steps/ReactivationConfigStep';\nimport { ReactivationPaymentStep } from './steps/ReactivationPaymentStep';\nimport { ChangePlanProvider, useChangePlanLogic } from './useChangePlanState';\n\n/**\n * Troca de plano e gerenciamento de adicionais, em dois passos. Sem plano-alvo é só o\n * gerenciamento do plano atual; com plano-alvo, compara os dois antes do pagamento.\n */\nexport function ChangePlanSheet() {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const isMobile = useIsMobile();\n  const state = useChangePlanLogic();\n  const { isExternalContracting, redirectToExternal } = useExternalContracting();\n\n  const { open, isReactivation, isDowngrade, targetPlan, currentStep, handleClose, form, handleSubmit } =\n    state;\n\n  useEffect(() => {\n    if (open && isExternalContracting) {\n      handleClose();\n      redirectToExternal('contracting');\n    }\n  }, [open, isExternalContracting, handleClose, redirectToExternal]);\n\n  if (isExternalContracting) return null;\n\n  const isPlanManagement = !isReactivation && !isDowngrade && !targetPlan;\n\n  const renderStep = () => {\n    if (isReactivation) {\n      if (currentStep === 1) return <ReactivationConfigStep />;\n      if (currentStep === 2) return <ReactivationPaymentStep />;\n      return null;\n    }\n\n    if (targetPlan) {\n      if (currentStep === 1) return <PlanComparisonStep />;\n      if (currentStep === 2) return <PaymentSummaryStep />;\n      return null;\n    }\n\n    if (currentStep === 1) return <PlanViewStep />;\n    if (currentStep === 2) return <PaymentSummaryStep />;\n    return null;\n  };\n\n  return (\n    <ChangePlanProvider value={state}>\n      <Sheet open={open} onOpenChange={(nextOpen) => !nextOpen && handleClose()}>\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-120! sm:max-w-120!'\n          )}\n        >\n          <SheetHeader className=\"px-4 sm:px-5 py-3 border-b border-zinc-200\">\n            <SheetTitle className=\"paragraph-medium-semibold text-zinc-950\">\n              {isPlanManagement ? translate('titleManagement') : translate('titleChange')}\n            </SheetTitle>\n          </SheetHeader>\n\n          <div className=\"h-1 bg-zinc-100 w-full\">\n            <div\n              className=\"h-full transition-all duration-300 ease-in-out bg-primary\"\n              style={{ width: currentStep === 1 ? '50%' : '100%' }}\n            />\n          </div>\n\n          <form onSubmit={form.handleSubmit(handleSubmit)} className=\"flex flex-col flex-1 min-h-0\">\n            {renderStep()}\n          </form>\n        </SheetContent>\n      </Sheet>\n\n      <AbTestDetailsDialog />\n      <CouponDialog />\n    </ChangePlanProvider>\n  );\n}\n"],"mappings":";AA2CoC,cAmB5B,YAnB4B;AAzCpC,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB;AAChC,SAAS,OAAO,cAAc,aAAa,kBAAkB;AAC7D,SAAS,8BAA8B;AACvC,OAAO,iBAAiB;AACxB,SAAS,UAAU;AACnB,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,oBAAoB,0BAA0B;AAMhD,SAAS,kBAAkB;AAChC,QAAM,YAAY,gBAAgB,kDAAkD;AACpF,QAAM,WAAW,YAAY;AAC7B,QAAM,QAAQ,mBAAmB;AACjC,QAAM,EAAE,uBAAuB,mBAAmB,IAAI,uBAAuB;AAE7E,QAAM,EAAE,MAAM,gBAAgB,aAAa,YAAY,aAAa,aAAa,MAAM,aAAa,IAClG;AAEF,YAAU,MAAM;AACd,QAAI,QAAQ,uBAAuB;AACjC,kBAAY;AACZ,yBAAmB,aAAa;AAAA,IAClC;AAAA,EACF,GAAG,CAAC,MAAM,uBAAuB,aAAa,kBAAkB,CAAC;AAEjE,MAAI,sBAAuB,QAAO;AAElC,QAAM,mBAAmB,CAAC,kBAAkB,CAAC,eAAe,CAAC;AAE7D,QAAM,aAAa,MAAM;AACvB,QAAI,gBAAgB;AAClB,UAAI,gBAAgB,EAAG,QAAO,oBAAC,0BAAuB;AACtD,UAAI,gBAAgB,EAAG,QAAO,oBAAC,2BAAwB;AACvD,aAAO;AAAA,IACT;AAEA,QAAI,YAAY;AACd,UAAI,gBAAgB,EAAG,QAAO,oBAAC,sBAAmB;AAClD,UAAI,gBAAgB,EAAG,QAAO,oBAAC,sBAAmB;AAClD,aAAO;AAAA,IACT;AAEA,QAAI,gBAAgB,EAAG,QAAO,oBAAC,gBAAa;AAC5C,QAAI,gBAAgB,EAAG,QAAO,oBAAC,sBAAmB;AAClD,WAAO;AAAA,EACT;AAEA,SACE,qBAAC,sBAAmB,OAAO,OACzB;AAAA,wBAAC,SAAM,MAAY,cAAc,CAAC,aAAa,CAAC,YAAY,YAAY,GACtE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,WAAW,WAAW;AAAA,QAC5B,WAAW;AAAA,UACT;AAAA,UACA,WACI,wGACA;AAAA,QACN;AAAA,QAEA;AAAA,8BAAC,eAAY,WAAU,8CACrB,8BAAC,cAAW,WAAU,2CACnB,6BAAmB,UAAU,iBAAiB,IAAI,UAAU,aAAa,GAC5E,GACF;AAAA,UAEA,oBAAC,SAAI,WAAU,0BACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,OAAO,gBAAgB,IAAI,QAAQ,OAAO;AAAA;AAAA,UACrD,GACF;AAAA,UAEA,oBAAC,UAAK,UAAU,KAAK,aAAa,YAAY,GAAG,WAAU,gCACxD,qBAAW,GACd;AAAA;AAAA;AAAA,IACF,GACF;AAAA,IAEA,oBAAC,uBAAoB;AAAA,IACrB,oBAAC,gBAAa;AAAA,KAChB;AAEJ;","names":[]}

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

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconExternalLink, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Dialog, DialogContent, DialogTitle } from "../../../../../ui/overlay/Dialog";
+import { ADDON_IDS, getAddonLabels } from "../../../../../../modules/subscriptions/constants/addons.constants";
+import { useChangePlan } from "../useChangePlanState";
+function AbTestDetailsDialog() {
+  const translate = useTranslations();
+  const translateDialog = useTranslations("common.account.workspace.subscription.changePlan");
+  const { abTestDetailsOpen, setAbTestDetailsOpen } = useChangePlan();
+  const abTestAddon = getAddonLabels(translate)[ADDON_IDS.AB_TEST];
+  return /* @__PURE__ */ jsx(Dialog, { open: abTestDetailsOpen, onOpenChange: setAbTestDetailsOpen, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "p-0 w-[calc(100%-32px)] max-w-109 overflow-hidden flex flex-col gap-0",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 h-14 md:h-16 relative", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAbTestDetailsOpen(false),
+              "aria-label": translate("common.actions.close"),
+              className: "absolute right-3 md:right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors",
+              children: /* @__PURE__ */ jsx(IconX, { size: 18, className: "text-zinc-400" })
+            }
+          ),
+          /* @__PURE__ */ jsx(DialogTitle, { className: "paragraph-medium-semibold text-zinc-950 text-center", children: abTestAddon.name })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5 px-4 md:px-5 pt-2 pb-4 md:pb-5", children: [
+          abTestAddon.description && /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-500 text-center", children: abTestAddon.description }),
+          abTestAddon.detailsUrl && /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: abTestAddon.detailsUrl,
+              className: "flex items-center gap-1.5 paragraph-small-semibold text-zinc-950 hover:underline",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: [
+                translateDialog("abTestDialog.learnMore"),
+                /* @__PURE__ */ jsx(IconExternalLink, { size: 20, className: "text-zinc-950" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  AbTestDetailsDialog
+};
+//# sourceMappingURL=AbTestDetailsDialog.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/AbTestDetailsDialog.tsx"],"sourcesContent":["'use client';\n\nimport { IconExternalLink, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Dialog, DialogContent, DialogTitle } from '../../../../../ui/overlay/Dialog';\nimport { ADDON_IDS, getAddonLabels } from '../../../../../../modules/subscriptions/constants/addons.constants';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** O que é o Teste A/B, aberto pelo \"Ver detalhes\" do adicional. */\nexport function AbTestDetailsDialog() {\n  const translate = useTranslations();\n  const translateDialog = useTranslations('common.account.workspace.subscription.changePlan');\n  const { abTestDetailsOpen, setAbTestDetailsOpen } = useChangePlan();\n  const abTestAddon = getAddonLabels(translate)[ADDON_IDS.AB_TEST];\n\n  return (\n    <Dialog open={abTestDetailsOpen} onOpenChange={setAbTestDetailsOpen}>\n      <DialogContent\n        showCloseButton={false}\n        className=\"p-0 w-[calc(100%-32px)] max-w-109 overflow-hidden flex flex-col gap-0\"\n      >\n        <div className=\"flex items-center justify-center px-4 py-3 h-14 md:h-16 relative\">\n          <button\n            type=\"button\"\n            onClick={() => setAbTestDetailsOpen(false)}\n            aria-label={translate('common.actions.close')}\n            className=\"absolute right-3 md:right-4 size-8 flex items-center justify-center rounded-lg cursor-pointer hover:bg-zinc-100 transition-colors\"\n          >\n            <IconX size={18} className=\"text-zinc-400\" />\n          </button>\n          <DialogTitle className=\"paragraph-medium-semibold text-zinc-950 text-center\">\n            {abTestAddon.name}\n          </DialogTitle>\n        </div>\n\n        <div className=\"flex flex-col items-center gap-5 px-4 md:px-5 pt-2 pb-4 md:pb-5\">\n          {abTestAddon.description && (\n            <p className=\"paragraph-small-regular text-zinc-500 text-center\">\n              {abTestAddon.description}\n            </p>\n          )}\n          {abTestAddon.detailsUrl && (\n            <a\n              href={abTestAddon.detailsUrl}\n              className=\"flex items-center gap-1.5 paragraph-small-semibold text-zinc-950 hover:underline\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {translateDialog('abTestDialog.learnMore')}\n              <IconExternalLink size={20} className=\"text-zinc-950\" />\n            </a>\n          )}\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";AAqBQ,SAOI,KAPJ;AAnBR,SAAS,kBAAkB,aAAa;AACxC,SAAS,uBAAuB;AAChC,SAAS,QAAQ,eAAe,mBAAmB;AACnD,SAAS,WAAW,sBAAsB;AAC1C,SAAS,qBAAqB;AAGvB,SAAS,sBAAsB;AACpC,QAAM,YAAY,gBAAgB;AAClC,QAAM,kBAAkB,gBAAgB,kDAAkD;AAC1F,QAAM,EAAE,mBAAmB,qBAAqB,IAAI,cAAc;AAClE,QAAM,cAAc,eAAe,SAAS,EAAE,UAAU,OAAO;AAE/D,SACE,oBAAC,UAAO,MAAM,mBAAmB,cAAc,sBAC7C;AAAA,IAAC;AAAA;AAAA,MACC,iBAAiB;AAAA,MACjB,WAAU;AAAA,MAEV;AAAA,6BAAC,SAAI,WAAU,oEACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,qBAAqB,KAAK;AAAA,cACzC,cAAY,UAAU,sBAAsB;AAAA,cAC5C,WAAU;AAAA,cAEV,8BAAC,SAAM,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UAC7C;AAAA,UACA,oBAAC,eAAY,WAAU,uDACpB,sBAAY,MACf;AAAA,WACF;AAAA,QAEA,qBAAC,SAAI,WAAU,mEACZ;AAAA,sBAAY,eACX,oBAAC,OAAE,WAAU,qDACV,sBAAY,aACf;AAAA,UAED,YAAY,cACX;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,YAAY;AAAA,cAClB,WAAU;AAAA,cACV,QAAO;AAAA,cACP,KAAI;AAAA,cAEH;AAAA,gCAAgB,wBAAwB;AAAA,gBACzC,oBAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA;AAAA,UACxD;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,188 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAtom, IconMinus, IconPlus, IconWorld } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Skeleton } from "../../../../../ui/feedback/Skeleton";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../../../../../ui/form/Select";
+import { Switch } from "../../../../../ui/form/Switch";
+import { useCurrencyFormatter } from "../../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { useIsDefaultWhitelabel } from "../../../../../../providers/whitelabel.provider";
+import { cn } from "../../../../../../infra/utils/clsx";
+import { IconBox } from "../../../shared/IconBox";
+import { useChangePlan } from "../useChangePlanState";
+import { AlternativeBucketsSection } from "./AlternativeBucketsSection";
+function AddonsBlock() {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const {
+    selectedCreditIndex,
+    setSelectedCreditIndex,
+    selectedCredit,
+    aiCreditOptions,
+    domains,
+    planIncludedDomains,
+    isAtMin,
+    domainsCountLoading,
+    hasDomainsAddon,
+    domainPriceMonthly,
+    handleDecreaseDomains,
+    handleIncreaseDomains,
+    handleDomainsChange,
+    alternativeBuckets,
+    hasAlternativeBuckets,
+    canDecreaseTotal,
+    handleAlternativeDecrease,
+    handleAlternativeIncrease,
+    minDomains,
+    abTestEnabled,
+    setAbTestEnabled,
+    hasAbTestAddon,
+    abTestIncludedInPlan,
+    abTestPriceMonthly,
+    periodMonths,
+    periodLabel,
+    setAbTestDetailsOpen
+  } = useChangePlan();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: translate("addons.title") }),
+      isDefaultWhitelabel && /* @__PURE__ */ jsxs(
+        Select,
+        {
+          value: String(selectedCreditIndex),
+          onValueChange: (value) => setSelectedCreditIndex(Number(value)),
+          children: [
+            /* @__PURE__ */ jsxs(SelectTrigger, { className: "w-full h-12 bg-white border border-zinc-200 rounded-lg px-4 py-6 gap-2 shadow-none [&_svg]:text-zinc-950 [&_svg]:opacity-100 [&_svg]:size-5", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950 flex-1 text-left", children: translate("addons.credits.option", {
+                credits: selectedCredit.credits.toLocaleString("pt-BR")
+              }) }),
+              /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-zinc-500", children: [
+                selectedCredit.price === 0 ? translate("addons.credits.priceDefault") : formatCurrencyNumber(selectedCredit.price * periodMonths),
+                selectedCredit.price > 0 && periodLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(SelectContent, { side: "bottom", align: "start", children: aiCreditOptions.map((option, index) => /* @__PURE__ */ jsxs(
+              SelectItem,
+              {
+                value: String(index),
+                className: "[&>span:last-child]:flex [&>span:last-child]:w-full [&>span:last-child]:justify-between",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex-1", children: translate("addons.credits.option", {
+                    credits: option.credits.toLocaleString("pt-BR")
+                  }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-zinc-500 shrink-0", children: option.price === 0 ? translate("addons.credits.priceDefault") : `${formatCurrencyNumber(option.price * periodMonths)}${periodLabel}` })
+                ]
+              },
+              option.credits
+            )) })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-zinc-50 rounded-lg", !hasDomainsAddon && "opacity-50"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+        /* @__PURE__ */ jsx(IconBox, { icon: IconWorld }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate("addons.domains.included", { count: String(planIncludedDomains) }) }),
+          domains > planIncludedDomains && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate("addons.domains.extras", { count: String(domains - planIncludedDomains) }) }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: translate("addons.domains.extraPrice", {
+              price: formatCurrencyNumber(domainPriceMonthly * periodMonths),
+              period: periodMonths > 1 ? `${periodLabel} ` : " "
+            }) })
+          ] })
+        ] }),
+        hasDomainsAddon && (domainsCountLoading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-24 rounded-xl" }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-white rounded-xl p-1 shadow-sm", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleDecreaseDomains,
+              disabled: isAtMin,
+              className: cn(
+                "size-8 flex items-center justify-center transition-colors rounded-lg",
+                isAtMin ? "opacity-30 cursor-not-allowed" : "cursor-pointer hover:bg-zinc-50"
+              ),
+              children: /* @__PURE__ */ jsx(IconMinus, { className: "size-4.5 text-zinc-800" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "number",
+              inputMode: "numeric",
+              min: minDomains,
+              value: domains,
+              onChange: handleDomainsChange,
+              className: "paragraph-small-semibold text-zinc-950 w-8 text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleIncreaseDomains,
+              className: "size-8 flex items-center justify-center transition-colors rounded-lg cursor-pointer hover:bg-zinc-50",
+              children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4.5 text-zinc-800" })
+            }
+          )
+        ] }))
+      ] }),
+      hasDomainsAddon && !domainsCountLoading && hasAlternativeBuckets && /* @__PURE__ */ jsx(
+        AlternativeBucketsSection,
+        {
+          buckets: alternativeBuckets,
+          periodMonths,
+          periodLabel,
+          canDecrease: canDecreaseTotal,
+          onDecrease: handleAlternativeDecrease,
+          onIncrease: handleAlternativeIncrease
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex flex-col gap-3 p-4 bg-zinc-50 rounded-lg",
+          !hasAbTestAddon && !abTestIncludedInPlan && "opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(IconBox, { icon: IconAtom }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 flex-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translate("addons.abTest.name") }),
+              abTestIncludedInPlan ? /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: translate("addons.abTest.includedInPlan") }) : abTestPriceMonthly > 0 && /* @__PURE__ */ jsxs("span", { className: "paragraph-small-regular text-zinc-500", children: [
+                formatCurrencyNumber(abTestPriceMonthly * periodMonths),
+                periodMonths > 1 && periodLabel
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                checked: abTestIncludedInPlan || hasAbTestAddon && abTestEnabled,
+                onCheckedChange: setAbTestEnabled,
+                disabled: abTestIncludedInPlan || !hasAbTestAddon,
+                className: "data-[state=checked]:bg-zinc-950"
+              }
+            )
+          ] }),
+          hasAbTestAddon && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setAbTestDetailsOpen(true),
+              className: "paragraph-small-semibold text-zinc-950 underline text-left cursor-pointer",
+              children: translate("addons.abTest.details")
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  AddonsBlock
+};
+//# sourceMappingURL=AddonsBlock.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/AddonsBlock.tsx"],"sourcesContent":["'use client';\n\nimport { IconAtom, IconMinus, IconPlus, IconWorld } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Skeleton } from '../../../../../ui/feedback/Skeleton';\nimport { Select, SelectContent, SelectItem, SelectTrigger } from '../../../../../ui/form/Select';\nimport { Switch } from '../../../../../ui/form/Switch';\nimport { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { useIsDefaultWhitelabel } from '../../../../../../providers/whitelabel.provider';\nimport { cn } from '../../../../../../infra/utils/clsx';\nimport { IconBox } from '../../../shared/IconBox';\nimport { useChangePlan } from '../useChangePlanState';\nimport { AlternativeBucketsSection } from './AlternativeBucketsSection';\n\n/** Créditos de IA, domínios extras e Teste A/B — os adicionais editáveis do plano. */\nexport function AddonsBlock() {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n\n  const {\n    selectedCreditIndex,\n    setSelectedCreditIndex,\n    selectedCredit,\n    aiCreditOptions,\n    domains,\n    planIncludedDomains,\n    isAtMin,\n    domainsCountLoading,\n    hasDomainsAddon,\n    domainPriceMonthly,\n    handleDecreaseDomains,\n    handleIncreaseDomains,\n    handleDomainsChange,\n    alternativeBuckets,\n    hasAlternativeBuckets,\n    canDecreaseTotal,\n    handleAlternativeDecrease,\n    handleAlternativeIncrease,\n    minDomains,\n    abTestEnabled,\n    setAbTestEnabled,\n    hasAbTestAddon,\n    abTestIncludedInPlan,\n    abTestPriceMonthly,\n    periodMonths,\n    periodLabel,\n    setAbTestDetailsOpen,\n  } = useChangePlan();\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div className=\"flex flex-col gap-4\">\n        <span className=\"paragraph-medium-semibold text-zinc-950\">{translate('addons.title')}</span>\n\n        {isDefaultWhitelabel && (\n          <Select\n            value={String(selectedCreditIndex)}\n            onValueChange={(value) => setSelectedCreditIndex(Number(value))}\n          >\n            <SelectTrigger className=\"w-full h-12 bg-white border border-zinc-200 rounded-lg px-4 py-6 gap-2 shadow-none [&_svg]:text-zinc-950 [&_svg]:opacity-100 [&_svg]:size-5\">\n              <span className=\"paragraph-small-medium text-zinc-950 flex-1 text-left\">\n                {translate('addons.credits.option', {\n                  credits: selectedCredit.credits.toLocaleString('pt-BR'),\n                })}\n              </span>\n              <span className=\"paragraph-small-medium text-zinc-500\">\n                {selectedCredit.price === 0\n                  ? translate('addons.credits.priceDefault')\n                  : formatCurrencyNumber(selectedCredit.price * periodMonths)}\n                {selectedCredit.price > 0 && periodLabel}\n              </span>\n            </SelectTrigger>\n            <SelectContent side=\"bottom\" align=\"start\">\n              {aiCreditOptions.map((option, index) => (\n                <SelectItem\n                  key={option.credits}\n                  value={String(index)}\n                  className=\"[&>span:last-child]:flex [&>span:last-child]:w-full [&>span:last-child]:justify-between\"\n                >\n                  <span className=\"flex-1\">\n                    {translate('addons.credits.option', {\n                      credits: option.credits.toLocaleString('pt-BR'),\n                    })}\n                  </span>\n                  <span className=\"text-zinc-500 shrink-0\">\n                    {option.price === 0\n                      ? translate('addons.credits.priceDefault')\n                      : `${formatCurrencyNumber(option.price * periodMonths)}${periodLabel}`}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n        )}\n      </div>\n\n      <div className={cn('flex flex-col bg-zinc-50 rounded-lg', !hasDomainsAddon && 'opacity-50')}>\n        <div className=\"flex items-center gap-3 p-4\">\n          <IconBox icon={IconWorld} />\n          <div className=\"flex flex-col gap-0.5 flex-1\">\n            <span className=\"paragraph-small-semibold text-zinc-950\">\n              {translate('addons.domains.included', { count: String(planIncludedDomains) })}\n            </span>\n            {domains > planIncludedDomains && (\n              <>\n                <span className=\"paragraph-small-semibold text-zinc-950\">\n                  {translate('addons.domains.extras', { count: String(domains - planIncludedDomains) })}\n                </span>\n                <span className=\"paragraph-small-regular text-zinc-500\">\n                  {translate('addons.domains.extraPrice', {\n                    price: formatCurrencyNumber(domainPriceMonthly * periodMonths),\n                    period: periodMonths > 1 ? `${periodLabel} ` : ' ',\n                  })}\n                </span>\n              </>\n            )}\n          </div>\n\n          {hasDomainsAddon &&\n            (domainsCountLoading ? (\n              <Skeleton className=\"h-10 w-24 rounded-xl\" />\n            ) : (\n              <div className=\"flex items-center bg-white rounded-xl p-1 shadow-sm\">\n                <button\n                  type=\"button\"\n                  onClick={handleDecreaseDomains}\n                  disabled={isAtMin}\n                  className={cn(\n                    'size-8 flex items-center justify-center transition-colors rounded-lg',\n                    isAtMin ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'\n                  )}\n                >\n                  <IconMinus className=\"size-4.5 text-zinc-800\" />\n                </button>\n                <input\n                  type=\"number\"\n                  inputMode=\"numeric\"\n                  min={minDomains}\n                  value={domains}\n                  onChange={handleDomainsChange}\n                  className=\"paragraph-small-semibold text-zinc-950 w-8 text-center bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none\"\n                />\n                <button\n                  type=\"button\"\n                  onClick={handleIncreaseDomains}\n                  className=\"size-8 flex items-center justify-center transition-colors rounded-lg cursor-pointer hover:bg-zinc-50\"\n                >\n                  <IconPlus className=\"size-4.5 text-zinc-800\" />\n                </button>\n              </div>\n            ))}\n        </div>\n\n        {hasDomainsAddon && !domainsCountLoading && hasAlternativeBuckets && (\n          <AlternativeBucketsSection\n            buckets={alternativeBuckets}\n            periodMonths={periodMonths}\n            periodLabel={periodLabel}\n            canDecrease={canDecreaseTotal}\n            onDecrease={handleAlternativeDecrease}\n            onIncrease={handleAlternativeIncrease}\n          />\n        )}\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <div\n          className={cn(\n            'flex flex-col gap-3 p-4 bg-zinc-50 rounded-lg',\n            !hasAbTestAddon && !abTestIncludedInPlan && 'opacity-50'\n          )}\n        >\n          <div className=\"flex items-center gap-3\">\n            <IconBox icon={IconAtom} />\n            <div className=\"flex flex-col gap-0.5 flex-1\">\n              <span className=\"paragraph-small-semibold text-zinc-950\">\n                {translate('addons.abTest.name')}\n              </span>\n              {abTestIncludedInPlan ? (\n                <span className=\"paragraph-small-regular text-zinc-500\">\n                  {translate('addons.abTest.includedInPlan')}\n                </span>\n              ) : (\n                abTestPriceMonthly > 0 && (\n                  <span className=\"paragraph-small-regular text-zinc-500\">\n                    {formatCurrencyNumber(abTestPriceMonthly * periodMonths)}\n                    {periodMonths > 1 && periodLabel}\n                  </span>\n                )\n              )}\n            </div>\n            <Switch\n              checked={abTestIncludedInPlan || (hasAbTestAddon && abTestEnabled)}\n              onCheckedChange={setAbTestEnabled}\n              disabled={abTestIncludedInPlan || !hasAbTestAddon}\n              className=\"data-[state=checked]:bg-zinc-950\"\n            />\n          </div>\n\n          {hasAbTestAddon && (\n            <button\n              type=\"button\"\n              onClick={() => setAbTestDetailsOpen(true)}\n              className=\"paragraph-small-semibold text-zinc-950 underline text-left cursor-pointer\"\n            >\n              {translate('addons.abTest.details')}\n            </button>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconMinus, IconPlus } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { useCurrencyFormatter } from "../../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { cn } from "../../../../../../infra/utils/clsx";
+function AlternativeBucketsSection({
+  buckets,
+  periodMonths,
+  periodLabel,
+  canDecrease,
+  onDecrease,
+  onIncrease
+}) {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  if (buckets.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 bg-zinc-100 rounded-b-lg px-4 py-3 max-h-50 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+    /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500", children: translate("alternativeBuckets.sectionTitle") }),
+    buckets.map((bucket) => {
+      const isAtMin = bucket.quantity <= 0 || !canDecrease;
+      const isAtMax = bucket.quantity >= bucket.originalQuantity;
+      const priceLabel = periodMonths > 1 ? `${formatCurrencyNumber(bucket.value * periodMonths)}${periodLabel}` : formatCurrencyNumber(bucket.value);
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-950", children: translate("alternativeBuckets.bucketLabel", {
+          count: String(bucket.quantity),
+          domainLabel: bucket.quantity === 1 ? translate("alternativeBuckets.domainSingular") : translate("alternativeBuckets.domainPlural"),
+          price: priceLabel
+        }) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center bg-white rounded-xl p-1 shadow-sm", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onDecrease(bucket),
+              disabled: isAtMin,
+              className: cn(
+                "size-8 flex items-center justify-center transition-colors rounded-lg",
+                isAtMin ? "opacity-30 cursor-not-allowed" : "cursor-pointer hover:bg-zinc-50"
+              ),
+              children: /* @__PURE__ */ jsx(IconMinus, { className: "size-4.5 text-zinc-800" })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950 w-8 text-center", children: bucket.quantity }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onIncrease(bucket),
+              disabled: isAtMax,
+              className: cn(
+                "size-8 flex items-center justify-center transition-colors rounded-lg",
+                isAtMax ? "opacity-30 cursor-not-allowed" : "cursor-pointer hover:bg-zinc-50"
+              ),
+              children: /* @__PURE__ */ jsx(IconPlus, { className: "size-4.5 text-zinc-800" })
+            }
+          )
+        ] })
+      ] }, bucket.key);
+    })
+  ] });
+}
+export {
+  AlternativeBucketsSection
+};
+//# sourceMappingURL=AlternativeBucketsSection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/AlternativeBucketsSection.tsx"],"sourcesContent":["'use client';\n\nimport { IconMinus, IconPlus } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport type { AddonBucket } from '../../../../../../modules/subscriptions/utils/addon-buckets';\nimport { cn } from '../../../../../../infra/utils/clsx';\n\ntype AlternativeBucketsSectionProps = {\n  buckets: AddonBucket[];\n  periodMonths: number;\n  periodLabel: string;\n  canDecrease: boolean;\n  onDecrease: (bucket: AddonBucket) => void;\n  onIncrease: (bucket: AddonBucket) => void;\n};\n\n/** Domínios extras contratados em preços antigos (promoções), geridos separados do preço base. */\nexport function AlternativeBucketsSection({\n  buckets,\n  periodMonths,\n  periodLabel,\n  canDecrease,\n  onDecrease,\n  onIncrease,\n}: AlternativeBucketsSectionProps) {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  if (buckets.length === 0) return null;\n\n  return (\n    <div className=\"flex flex-col gap-2 bg-zinc-100 rounded-b-lg px-4 py-3 max-h-50 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      <span className=\"paragraph-xsmall-medium text-zinc-500\">\n        {translate('alternativeBuckets.sectionTitle')}\n      </span>\n\n      {buckets.map((bucket) => {\n        const isAtMin = bucket.quantity <= 0 || !canDecrease;\n        const isAtMax = bucket.quantity >= bucket.originalQuantity;\n        const priceLabel =\n          periodMonths > 1\n            ? `${formatCurrencyNumber(bucket.value * periodMonths)}${periodLabel}`\n            : formatCurrencyNumber(bucket.value);\n\n        return (\n          <div key={bucket.key} className=\"flex items-center gap-3 py-2\">\n            <div className=\"flex flex-col flex-1\">\n              <span className=\"paragraph-small-medium text-zinc-950\">\n                {translate('alternativeBuckets.bucketLabel', {\n                  count: String(bucket.quantity),\n                  domainLabel:\n                    bucket.quantity === 1\n                      ? translate('alternativeBuckets.domainSingular')\n                      : translate('alternativeBuckets.domainPlural'),\n                  price: priceLabel,\n                })}\n              </span>\n            </div>\n            <div className=\"flex items-center bg-white rounded-xl p-1 shadow-sm\">\n              <button\n                type=\"button\"\n                onClick={() => onDecrease(bucket)}\n                disabled={isAtMin}\n                className={cn(\n                  'size-8 flex items-center justify-center transition-colors rounded-lg',\n                  isAtMin ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'\n                )}\n              >\n                <IconMinus className=\"size-4.5 text-zinc-800\" />\n              </button>\n              <span className=\"paragraph-small-semibold text-zinc-950 w-8 text-center\">\n                {bucket.quantity}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => onIncrease(bucket)}\n                disabled={isAtMax}\n                className={cn(\n                  'size-8 flex items-center justify-center transition-colors rounded-lg',\n                  isAtMax ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:bg-zinc-50'\n                )}\n              >\n                <IconPlus className=\"size-4.5 text-zinc-800\" />\n              </button>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAiCM,cA0BM,YA1BN;AA/BN,SAAS,WAAW,gBAAgB;AACpC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AAErC,SAAS,UAAU;AAYZ,SAAS,0BAA0B;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmC;AACjC,QAAM,YAAY,gBAAgB,kDAAkD;AACpF,QAAM,EAAE,qBAAqB,IAAI,qBAAqB;AAEtD,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE,qBAAC,SAAI,WAAU,sQACb;AAAA,wBAAC,UAAK,WAAU,yCACb,oBAAU,iCAAiC,GAC9C;AAAA,IAEC,QAAQ,IAAI,CAAC,WAAW;AACvB,YAAM,UAAU,OAAO,YAAY,KAAK,CAAC;AACzC,YAAM,UAAU,OAAO,YAAY,OAAO;AAC1C,YAAM,aACJ,eAAe,IACX,GAAG,qBAAqB,OAAO,QAAQ,YAAY,CAAC,GAAG,WAAW,KAClE,qBAAqB,OAAO,KAAK;AAEvC,aACE,qBAAC,SAAqB,WAAU,gCAC9B;AAAA,4BAAC,SAAI,WAAU,wBACb,8BAAC,UAAK,WAAU,wCACb,oBAAU,kCAAkC;AAAA,UAC3C,OAAO,OAAO,OAAO,QAAQ;AAAA,UAC7B,aACE,OAAO,aAAa,IAChB,UAAU,mCAAmC,IAC7C,UAAU,iCAAiC;AAAA,UACjD,OAAO;AAAA,QACT,CAAC,GACH,GACF;AAAA,QACA,qBAAC,SAAI,WAAU,uDACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,WAAW,MAAM;AAAA,cAChC,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,kCAAkC;AAAA,cAC9C;AAAA,cAEA,8BAAC,aAAU,WAAU,0BAAyB;AAAA;AAAA,UAChD;AAAA,UACA,oBAAC,UAAK,WAAU,0DACb,iBAAO,UACV;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,WAAW,MAAM;AAAA,cAChC,UAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA,UAAU,kCAAkC;AAAA,cAC9C;AAAA,cAEA,8BAAC,YAAS,WAAU,0BAAyB;AAAA;AAAA,UAC/C;AAAA,WACF;AAAA,WAvCQ,OAAO,GAwCjB;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}

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

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconTicket, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { useChangePlan } from "../useChangePlanState";
+function CouponBlock() {
+  const translate = useTranslations("common.account.workspace.subscription.changePlan");
+  const { appliedCouponCode, handleRemoveCoupon, handleOpenCouponDialog, hasPendingAuth } = useChangePlan();
+  if (appliedCouponCode) {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleRemoveCoupon,
+        disabled: hasPendingAuth,
+        className: "flex items-center h-8 w-fit px-2 bg-zinc-100 rounded-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-40",
+        children: [
+          /* @__PURE__ */ jsx(IconTicket, { size: 18, className: "text-zinc-950" }),
+          /* @__PURE__ */ jsx("span", { className: "px-1.5 paragraph-small-semibold text-zinc-950", children: appliedCouponCode }),
+          /* @__PURE__ */ jsx(IconX, { className: "size-4.5 text-zinc-950" })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleOpenCouponDialog,
+      disabled: hasPendingAuth,
+      className: "flex items-center gap-2 h-8 px-2 w-fit paragraph-small-semibold text-zinc-950 cursor-pointer hover:bg-zinc-100 rounded-lg transition-colors disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent",
+      children: [
+        /* @__PURE__ */ jsx(IconTicket, { size: 18, className: "text-zinc-950" }),
+        /* @__PURE__ */ jsx("span", { children: translate("coupon.addButton") })
+      ]
+    }
+  ) });
+}
+export {
+  CouponBlock
+};
+//# sourceMappingURL=CouponBlock.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/components/CouponBlock.tsx"],"sourcesContent":["'use client';\n\nimport { IconTicket, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Cupom aplicado (removível) ou o atalho para digitar um. */\nexport function CouponBlock() {\n  const translate = useTranslations('common.account.workspace.subscription.changePlan');\n  const { appliedCouponCode, handleRemoveCoupon, handleOpenCouponDialog, hasPendingAuth } = useChangePlan();\n\n  if (appliedCouponCode) {\n    return (\n      <div>\n        <button\n          type=\"button\"\n          onClick={handleRemoveCoupon}\n          disabled={hasPendingAuth}\n          className=\"flex items-center h-8 w-fit px-2 bg-zinc-100 rounded-lg cursor-pointer disabled:cursor-not-allowed disabled:opacity-40\"\n        >\n          <IconTicket size={18} className=\"text-zinc-950\" />\n          <span className=\"px-1.5 paragraph-small-semibold text-zinc-950\">{appliedCouponCode}</span>\n          <IconX className=\"size-4.5 text-zinc-950\" />\n        </button>\n      </div>\n    );\n  }\n\n  return (\n    <div>\n      <button\n        type=\"button\"\n        onClick={handleOpenCouponDialog}\n        disabled={hasPendingAuth}\n        className=\"flex items-center gap-2 h-8 px-2 w-fit paragraph-small-semibold text-zinc-950 cursor-pointer hover:bg-zinc-100 rounded-lg transition-colors disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:bg-transparent\"\n      >\n        <IconTicket size={18} className=\"text-zinc-950\" />\n        <span>{translate('coupon.addButton')}</span>\n      </button>\n    </div>\n  );\n}\n"],"mappings":";AAcQ,SAME,KANF;AAZR,SAAS,YAAY,aAAa;AAClC,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAGvB,SAAS,cAAc;AAC5B,QAAM,YAAY,gBAAgB,kDAAkD;AACpF,QAAM,EAAE,mBAAmB,oBAAoB,wBAAwB,eAAe,IAAI,cAAc;AAExG,MAAI,mBAAmB;AACrB,WACE,oBAAC,SACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,WAAU;AAAA,QAEV;AAAA,8BAAC,cAAW,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAChD,oBAAC,UAAK,WAAU,iDAAiD,6BAAkB;AAAA,UACnF,oBAAC,SAAM,WAAU,0BAAyB;AAAA;AAAA;AAAA,IAC5C,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,SACC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,UAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,4BAAC,cAAW,MAAM,IAAI,WAAU,iBAAgB;AAAA,QAChD,oBAAC,UAAM,oBAAU,kBAAkB,GAAE;AAAA;AAAA;AAAA,EACvC,GACF;AAEJ;","names":[]}