@greatapps/common 1.1.790 → 1.1.792

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

@@ -0,0 +1,111 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronRight, IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Button } from "../../../../../ui/buttons/Button";
+import { SheetFooter } from "../../../../../ui/overlay/Sheet";
+import { useCurrencyFormatter } from "../../../../../../modules/accounts/hooks/use-currency-formatter.hook";
+import { usePlanById } from "../../../../../../modules/plans/hooks/use-plan-by-id.hook";
+import { useCurrentSubscription } from "../../../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import {
+  getBillingPeriodMonths,
+  getPeriodPricingKey
+} from "../../../../../../modules/subscriptions/utils/periodicity";
+import { resolvePlanNameById } from "../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name";
+import { getLostFeatures, getNewFeatures } from "../plan-comparison";
+import { AddonsBlock } from "../components/AddonsBlock";
+import { PricePreview } from "../components/PricePreview";
+import { useChangePlan } from "../useChangePlanState";
+function PlanComparisonStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    "common.account.workspace.subscription.changePlan.planComparison"
+  );
+  const { formatCurrencyNumber } = useCurrencyFormatter();
+  const {
+    isDowngrade,
+    isReactivation,
+    targetPlan,
+    periodLabel,
+    currentPeriodLabel,
+    currentBillingPeriod,
+    newPlanChargedPrice,
+    newPlanListPrice,
+    handleClose,
+    handleBack,
+    handleContinue
+  } = useChangePlan();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const activeSubscription = subscriptionData?.data?.[0];
+  const { data: planData } = usePlanById(activeSubscription?.id_plan);
+  const plan = planData?.data;
+  const newFeatures = !isDowngrade && !isReactivation && plan && targetPlan ? getNewFeatures(plan, targetPlan, translate) : [];
+  const currentPlanId = plan?.id ?? activeSubscription?.id_plan;
+  const lostFeatures = isDowngrade && currentPlanId && targetPlan ? getLostFeatures(translate)[currentPlanId]?.[targetPlan.planId] ?? [] : [];
+  const currentPeriodMonths = getBillingPeriodMonths(currentBillingPeriod);
+  const currentPeriodPricingKey = getPeriodPricingKey(currentBillingPeriod);
+  const currentPrice = plan?.pricing ? plan.pricing[currentPeriodPricingKey].charged : plan?.value != null ? plan.value * currentPeriodMonths : null;
+  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 rounded-lg", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 p-4 sm:p-6 bg-zinc-50 border-zinc-200 rounded-t-lg", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-600", children: resolvePlanNameById(plan?.id ?? activeSubscription?.id_plan, plan?.name, translate) }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-600 bg-white border border-zinc-200 px-1.5 h-6 flex items-center rounded-lg", children: translateStep("badgeCurrent") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-large-semibold text-zinc-950", children: currentPrice !== null ? formatCurrencyNumber(currentPrice) : "--" }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: currentPeriodLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "hidden sm:flex items-center justify-center size-6 border border-zinc-200 rounded-full bg-white shrink-0", children: /* @__PURE__ */ jsx(IconChevronRight, { size: 16, className: "text-zinc-950" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 flex-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-600", children: targetPlan?.name }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-zinc-950 px-1.5 h-6 flex items-center rounded-lg bg-primary", children: translateStep("badgeNew") })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+              newPlanListPrice != null && newPlanChargedPrice != null && newPlanListPrice > newPlanChargedPrice && /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-zinc-500 line-through", children: formatCurrencyNumber(newPlanListPrice) }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-large-semibold text-zinc-950", children: newPlanChargedPrice !== null ? formatCurrencyNumber(newPlanChargedPrice) : "--" }),
+              /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: periodLabel })
+            ] })
+          ] })
+        ] }),
+        !isDowngrade && newFeatures.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 sm:p-6 bg-zinc-50 rounded-b-lg", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translateStep("newFeaturesTitle") }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: newFeatures.map((feature) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(IconCheck, { size: 24, className: "text-green-500 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: feature.text })
+          ] }, feature.text)) })
+        ] }),
+        isDowngrade && lostFeatures.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4 sm:p-6 pt-0 sm:pt-0 bg-zinc-50 rounded-b-lg", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-zinc-950", children: translateStep("lostFeaturesTitle") }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 max-h-40 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: lostFeatures.map((feature) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(IconX, { size: 16, className: "text-red-500 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-zinc-500", children: feature })
+          ] }, feature)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(AddonsBlock, {}),
+      /* @__PURE__ */ jsx(PricePreview, {})
+    ] }),
+    /* @__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: isDowngrade ? handleBack : handleClose,
+          children: isDowngrade ? translate("common.actions.back") : translate("common.actions.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", onClick: handleContinue, children: translate("common.actions.continue") })
+    ] })
+  ] });
+}
+export {
+  PlanComparisonStep
+};
+//# sourceMappingURL=PlanComparisonStep.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/steps/PlanComparisonStep.tsx"],"sourcesContent":["'use client';\n\nimport { IconCheck, IconChevronRight, IconX } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Button } from '../../../../../ui/buttons/Button';\nimport { SheetFooter } from '../../../../../ui/overlay/Sheet';\nimport { useCurrencyFormatter } from '../../../../../../modules/accounts/hooks/use-currency-formatter.hook';\nimport { usePlanById } from '../../../../../../modules/plans/hooks/use-plan-by-id.hook';\nimport { useCurrentSubscription } from '../../../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport {\n  getBillingPeriodMonths,\n  getPeriodPricingKey,\n} from '../../../../../../modules/subscriptions/utils/periodicity';\nimport { resolvePlanNameById } from '../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name';\nimport { getLostFeatures, getNewFeatures } from '../plan-comparison';\nimport { AddonsBlock } from '../components/AddonsBlock';\nimport { PricePreview } from '../components/PricePreview';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Comparação entre o plano atual e o escolhido, com o que entra (upgrade) ou sai (downgrade). */\nexport function PlanComparisonStep() {\n  const translate = useTranslations();\n  const translateStep = useTranslations(\n    'common.account.workspace.subscription.changePlan.planComparison'\n  );\n  const { formatCurrencyNumber } = useCurrencyFormatter();\n\n  const {\n    isDowngrade,\n    isReactivation,\n    targetPlan,\n    periodLabel,\n    currentPeriodLabel,\n    currentBillingPeriod,\n    newPlanChargedPrice,\n    newPlanListPrice,\n    handleClose,\n    handleBack,\n    handleContinue,\n  } = useChangePlan();\n\n  const { data: subscriptionData } = useCurrentSubscription();\n  const activeSubscription = subscriptionData?.data?.[0];\n  const { data: planData } = usePlanById(activeSubscription?.id_plan);\n  const plan = planData?.data;\n\n  const newFeatures =\n    !isDowngrade && !isReactivation && plan && targetPlan ? getNewFeatures(plan, targetPlan, translate) : [];\n  const currentPlanId = plan?.id ?? activeSubscription?.id_plan;\n  const lostFeatures =\n    isDowngrade && currentPlanId && targetPlan\n      ? (getLostFeatures(translate)[currentPlanId]?.[targetPlan.planId] ?? [])\n      : [];\n\n  // Mesma base do newPlanChargedPrice: as duas colunas precisam falar a mesma língua.\n  const currentPeriodMonths = getBillingPeriodMonths(currentBillingPeriod);\n  const currentPeriodPricingKey = getPeriodPricingKey(currentBillingPeriod);\n  const currentPrice = plan?.pricing\n    ? plan.pricing[currentPeriodPricingKey].charged\n    : plan?.value != null\n      ? plan.value * currentPeriodMonths\n      : null;\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 rounded-lg\">\n          <div className=\"flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6 p-4 sm:p-6 bg-zinc-50 border-zinc-200 rounded-t-lg\">\n            <div className=\"flex flex-col gap-1 flex-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"paragraph-small-semibold text-zinc-600\">\n                  {resolvePlanNameById(plan?.id ?? activeSubscription?.id_plan, plan?.name, translate)}\n                </span>\n                <span className=\"paragraph-xsmall-semibold text-zinc-600 bg-white border border-zinc-200 px-1.5 h-6 flex items-center rounded-lg\">\n                  {translateStep('badgeCurrent')}\n                </span>\n              </div>\n              <div className=\"flex flex-col\">\n                <span className=\"paragraph-large-semibold text-zinc-950\">\n                  {currentPrice !== null ? formatCurrencyNumber(currentPrice) : '--'}\n                </span>\n                <span className=\"paragraph-small-regular text-zinc-500\">{currentPeriodLabel}</span>\n              </div>\n            </div>\n\n            <div className=\"hidden sm:flex items-center justify-center size-6 border border-zinc-200 rounded-full bg-white shrink-0\">\n              <IconChevronRight size={16} className=\"text-zinc-950\" />\n            </div>\n\n            <div className=\"flex flex-col gap-1 flex-1\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"paragraph-small-semibold text-zinc-600\">{targetPlan?.name}</span>\n                <span className=\"paragraph-xsmall-semibold text-zinc-950 px-1.5 h-6 flex items-center rounded-lg bg-primary\">\n                  {translateStep('badgeNew')}\n                </span>\n              </div>\n              <div className=\"flex flex-col\">\n                {newPlanListPrice != null &&\n                  newPlanChargedPrice != null &&\n                  newPlanListPrice > newPlanChargedPrice && (\n                    <span className=\"paragraph-xsmall-medium text-zinc-500 line-through\">\n                      {formatCurrencyNumber(newPlanListPrice)}\n                    </span>\n                  )}\n                <span className=\"paragraph-large-semibold text-zinc-950\">\n                  {newPlanChargedPrice !== null ? formatCurrencyNumber(newPlanChargedPrice) : '--'}\n                </span>\n                <span className=\"paragraph-small-regular text-zinc-500\">{periodLabel}</span>\n              </div>\n            </div>\n          </div>\n\n          {!isDowngrade && newFeatures.length > 0 && (\n            <div className=\"flex flex-col gap-4 p-4 sm:p-6 bg-zinc-50 rounded-b-lg\">\n              <span className=\"paragraph-small-semibold text-zinc-950\">\n                {translateStep('newFeaturesTitle')}\n              </span>\n              <div className=\"flex flex-col gap-2\">\n                {newFeatures.map((feature) => (\n                  <div key={feature.text} className=\"flex items-center gap-2\">\n                    <IconCheck size={24} className=\"text-green-500 shrink-0\" />\n                    <span className=\"paragraph-small-medium text-zinc-500\">{feature.text}</span>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n\n          {isDowngrade && lostFeatures.length > 0 && (\n            <div className=\"flex flex-col gap-3 p-4 sm:p-6 pt-0 sm:pt-0 bg-zinc-50 rounded-b-lg\">\n              <span className=\"paragraph-small-semibold text-zinc-950\">\n                {translateStep('lostFeaturesTitle')}\n              </span>\n              <div className=\"flex flex-col gap-2 max-h-40 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                {lostFeatures.map((feature) => (\n                  <div key={feature} className=\"flex items-center gap-2\">\n                    <IconX size={16} className=\"text-red-500 shrink-0\" />\n                    <span className=\"paragraph-small-medium text-zinc-500\">{feature}</span>\n                  </div>\n                ))}\n              </div>\n            </div>\n          )}\n        </div>\n\n        <AddonsBlock />\n        <PricePreview />\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={isDowngrade ? handleBack : handleClose}\n        >\n          {isDowngrade ? translate('common.actions.back') : translate('common.actions.cancel')}\n        </Button>\n        <Button type=\"button\" className=\"h-10!\" onClick={handleContinue}>\n          {translate('common.actions.continue')}\n        </Button>\n      </SheetFooter>\n    </>\n  );\n}\n"],"mappings":";AAgEI,mBAMY,KADF,YALV;AA9DJ,SAAS,WAAW,kBAAkB,aAAa;AACnD,SAAS,uBAAuB;AAChC,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,2BAA2B;AACpC,SAAS,iBAAiB,sBAAsB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAGvB,SAAS,qBAAqB;AACnC,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB;AAAA,IACpB;AAAA,EACF;AACA,QAAM,EAAE,qBAAqB,IAAI,qBAAqB;AAEtD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,QAAM,EAAE,MAAM,iBAAiB,IAAI,uBAAuB;AAC1D,QAAM,qBAAqB,kBAAkB,OAAO,CAAC;AACrD,QAAM,EAAE,MAAM,SAAS,IAAI,YAAY,oBAAoB,OAAO;AAClE,QAAM,OAAO,UAAU;AAEvB,QAAM,cACJ,CAAC,eAAe,CAAC,kBAAkB,QAAQ,aAAa,eAAe,MAAM,YAAY,SAAS,IAAI,CAAC;AACzG,QAAM,gBAAgB,MAAM,MAAM,oBAAoB;AACtD,QAAM,eACJ,eAAe,iBAAiB,aAC3B,gBAAgB,SAAS,EAAE,aAAa,IAAI,WAAW,MAAM,KAAK,CAAC,IACpE,CAAC;AAGP,QAAM,sBAAsB,uBAAuB,oBAAoB;AACvE,QAAM,0BAA0B,oBAAoB,oBAAoB;AACxE,QAAM,eAAe,MAAM,UACvB,KAAK,QAAQ,uBAAuB,EAAE,UACtC,MAAM,SAAS,OACb,KAAK,QAAQ,sBACb;AAEN,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,oQACb;AAAA,2BAAC,SAAI,WAAU,4BACb;AAAA,6BAAC,SAAI,WAAU,+GACb;AAAA,+BAAC,SAAI,WAAU,8BACb;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,UAAK,WAAU,0CACb,8BAAoB,MAAM,MAAM,oBAAoB,SAAS,MAAM,MAAM,SAAS,GACrF;AAAA,cACA,oBAAC,UAAK,WAAU,mHACb,wBAAc,cAAc,GAC/B;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,iBACb;AAAA,kCAAC,UAAK,WAAU,0CACb,2BAAiB,OAAO,qBAAqB,YAAY,IAAI,MAChE;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAyC,8BAAmB;AAAA,eAC9E;AAAA,aACF;AAAA,UAEA,oBAAC,SAAI,WAAU,2GACb,8BAAC,oBAAiB,MAAM,IAAI,WAAU,iBAAgB,GACxD;AAAA,UAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,iCAAC,SAAI,WAAU,2BACb;AAAA,kCAAC,UAAK,WAAU,0CAA0C,sBAAY,MAAK;AAAA,cAC3E,oBAAC,UAAK,WAAU,8FACb,wBAAc,UAAU,GAC3B;AAAA,eACF;AAAA,YACA,qBAAC,SAAI,WAAU,iBACZ;AAAA,kCAAoB,QACnB,uBAAuB,QACvB,mBAAmB,uBACjB,oBAAC,UAAK,WAAU,sDACb,+BAAqB,gBAAgB,GACxC;AAAA,cAEJ,oBAAC,UAAK,WAAU,0CACb,kCAAwB,OAAO,qBAAqB,mBAAmB,IAAI,MAC9E;AAAA,cACA,oBAAC,UAAK,WAAU,yCAAyC,uBAAY;AAAA,eACvE;AAAA,aACF;AAAA,WACF;AAAA,QAEC,CAAC,eAAe,YAAY,SAAS,KACpC,qBAAC,SAAI,WAAU,0DACb;AAAA,8BAAC,UAAK,WAAU,0CACb,wBAAc,kBAAkB,GACnC;AAAA,UACA,oBAAC,SAAI,WAAU,uBACZ,sBAAY,IAAI,CAAC,YAChB,qBAAC,SAAuB,WAAU,2BAChC;AAAA,gCAAC,aAAU,MAAM,IAAI,WAAU,2BAA0B;AAAA,YACzD,oBAAC,UAAK,WAAU,wCAAwC,kBAAQ,MAAK;AAAA,eAF7D,QAAQ,IAGlB,CACD,GACH;AAAA,WACF;AAAA,QAGD,eAAe,aAAa,SAAS,KACpC,qBAAC,SAAI,WAAU,uEACb;AAAA,8BAAC,UAAK,WAAU,0CACb,wBAAc,mBAAmB,GACpC;AAAA,UACA,oBAAC,SAAI,WAAU,mOACZ,uBAAa,IAAI,CAAC,YACjB,qBAAC,SAAkB,WAAU,2BAC3B;AAAA,gCAAC,SAAM,MAAM,IAAI,WAAU,yBAAwB;AAAA,YACnD,oBAAC,UAAK,WAAU,wCAAwC,mBAAQ;AAAA,eAFxD,OAGV,CACD,GACH;AAAA,WACF;AAAA,SAEJ;AAAA,MAEA,oBAAC,eAAY;AAAA,MACb,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,qBAAC,eAAY,WAAU,6EACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,cAAc,aAAa;AAAA,UAEnC,wBAAc,UAAU,qBAAqB,IAAI,UAAU,uBAAuB;AAAA;AAAA,MACrF;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,SAAS,gBAC9C,oBAAU,yBAAyB,GACtC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,69 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconBolt } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Badge } from "../../../../../ui/data-display/Badge";
+import { Button } from "../../../../../ui/buttons/Button";
+import { SheetFooter } from "../../../../../ui/overlay/Sheet";
+import { useCurrentSubscription } from "../../../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import { isApiSubscription } from "../../../../../../modules/subscriptions/utils/is-api-subscription";
+import { getPeriodicityLabel } from "../../../../../../modules/subscriptions/utils/periodicity";
+import { resolveSubscriptionPlanName } from "../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name";
+import { IconBox } from "../../../shared/IconBox";
+import { AddonsBlock } from "../components/AddonsBlock";
+import { PricePreview } from "../components/PricePreview";
+import { useChangePlan } from "../useChangePlanState";
+function PlanViewStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations("common.account.workspace.subscription.changePlan.planView");
+  const { isDowngrade, handleClose, handleBack, handleContinue, handleOpenPlansCatalog } = useChangePlan();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const isApiPlan = isApiSubscription(subscription);
+  const periodicityLabel = getPeriodicityLabel(subscription?.periodicity, translate);
+  const planName = resolveSubscriptionPlanName(subscription, translate);
+  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-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: translateStep("currentPlanLabel") }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg md:hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconBolt, { size: 24, className: "text-zinc-950" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: planName }),
+              /* @__PURE__ */ jsx(Badge, { className: "text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold shrink-0", children: periodicityLabel })
+            ] })
+          ] }),
+          !isApiPlan && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10 w-fit", onClick: handleOpenPlansCatalog, children: translateStep("changePlanButton") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center gap-4 p-4 border border-zinc-200 rounded-lg", children: [
+          /* @__PURE__ */ jsx(IconBox, { icon: IconBolt }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: planName }),
+            /* @__PURE__ */ jsx(Badge, { className: "text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold", children: periodicityLabel })
+          ] }),
+          !isApiPlan && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10", onClick: handleOpenPlansCatalog, children: translateStep("changePlanButton") })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(AddonsBlock, {}),
+      /* @__PURE__ */ jsx(PricePreview, {})
+    ] }),
+    /* @__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: isDowngrade ? handleBack : handleClose,
+          children: isDowngrade ? translate("common.actions.back") : translate("common.actions.cancel")
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", onClick: handleContinue, children: translate("common.actions.continue") })
+    ] })
+  ] });
+}
+export {
+  PlanViewStep
+};
+//# sourceMappingURL=PlanViewStep.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/steps/PlanViewStep.tsx"],"sourcesContent":["'use client';\n\nimport { IconBolt } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Badge } from '../../../../../ui/data-display/Badge';\nimport { Button } from '../../../../../ui/buttons/Button';\nimport { SheetFooter } from '../../../../../ui/overlay/Sheet';\nimport { useCurrentSubscription } from '../../../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport { isApiSubscription } from '../../../../../../modules/subscriptions/utils/is-api-subscription';\nimport { getPeriodicityLabel } from '../../../../../../modules/subscriptions/utils/periodicity';\nimport { resolveSubscriptionPlanName } from '../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name';\nimport { IconBox } from '../../../shared/IconBox';\nimport { AddonsBlock } from '../components/AddonsBlock';\nimport { PricePreview } from '../components/PricePreview';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Gerenciamento do plano atual: adicionais e atalho para o catálogo. */\nexport function PlanViewStep() {\n  const translate = useTranslations();\n  const translateStep = useTranslations('common.account.workspace.subscription.changePlan.planView');\n  const { isDowngrade, handleClose, handleBack, handleContinue, handleOpenPlansCatalog } = useChangePlan();\n\n  const { data: subscriptionData } = useCurrentSubscription();\n  const subscription = subscriptionData?.data?.[0];\n  const isApiPlan = isApiSubscription(subscription);\n  const periodicityLabel = getPeriodicityLabel(subscription?.periodicity, translate);\n  const planName = resolveSubscriptionPlanName(subscription, translate);\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-2\">\n          <span className=\"paragraph-small-regular text-zinc-500\">{translateStep('currentPlanLabel')}</span>\n\n          <div className=\"flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg md:hidden\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0\">\n                <IconBolt size={24} className=\"text-zinc-950\" />\n              </div>\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                <span className=\"paragraph-medium-semibold text-zinc-950\">{planName}</span>\n                <Badge className=\"text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold shrink-0\">\n                  {periodicityLabel}\n                </Badge>\n              </div>\n            </div>\n            {!isApiPlan && (\n              <Button type=\"button\" variant=\"secondary\" className=\"h-10 w-fit\" onClick={handleOpenPlansCatalog}>\n                {translateStep('changePlanButton')}\n              </Button>\n            )}\n          </div>\n\n          <div className=\"hidden md:flex items-center gap-4 p-4 border border-zinc-200 rounded-lg\">\n            <IconBox icon={IconBolt} />\n            <div className=\"flex items-center gap-2 flex-1\">\n              <span className=\"paragraph-medium-semibold text-zinc-950\">{planName}</span>\n              <Badge className=\"text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold\">\n                {periodicityLabel}\n              </Badge>\n            </div>\n            {!isApiPlan && (\n              <Button type=\"button\" variant=\"secondary\" className=\"h-10\" onClick={handleOpenPlansCatalog}>\n                {translateStep('changePlanButton')}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        <AddonsBlock />\n        <PricePreview />\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={isDowngrade ? handleBack : handleClose}\n        >\n          {isDowngrade ? translate('common.actions.back') : translate('common.actions.cancel')}\n        </Button>\n        <Button type=\"button\" className=\"h-10!\" onClick={handleContinue}>\n          {translate('common.actions.continue')}\n        </Button>\n      </SheetFooter>\n    </>\n  );\n}\n"],"mappings":";AA6BI,mBAGM,KAOI,YAVV;AA3BJ,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAGvB,SAAS,eAAe;AAC7B,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB,gBAAgB,2DAA2D;AACjG,QAAM,EAAE,aAAa,aAAa,YAAY,gBAAgB,uBAAuB,IAAI,cAAc;AAEvG,QAAM,EAAE,MAAM,iBAAiB,IAAI,uBAAuB;AAC1D,QAAM,eAAe,kBAAkB,OAAO,CAAC;AAC/C,QAAM,YAAY,kBAAkB,YAAY;AAChD,QAAM,mBAAmB,oBAAoB,cAAc,aAAa,SAAS;AACjF,QAAM,WAAW,4BAA4B,cAAc,SAAS;AAEpE,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,oQACb;AAAA,2BAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAK,WAAU,yCAAyC,wBAAc,kBAAkB,GAAE;AAAA,QAE3F,qBAAC,SAAI,WAAU,2DACb;AAAA,+BAAC,SAAI,WAAU,2BACb;AAAA,gCAAC,SAAI,WAAU,mFACb,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAChD;AAAA,YACA,qBAAC,SAAI,WAAU,0CACb;AAAA,kCAAC,UAAK,WAAU,2CAA2C,oBAAS;AAAA,cACpE,oBAAC,SAAM,WAAU,iGACd,4BACH;AAAA,eACF;AAAA,aACF;AAAA,UACC,CAAC,aACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,cAAa,SAAS,wBACvE,wBAAc,kBAAkB,GACnC;AAAA,WAEJ;AAAA,QAEA,qBAAC,SAAI,WAAU,2EACb;AAAA,8BAAC,WAAQ,MAAM,UAAU;AAAA,UACzB,qBAAC,SAAI,WAAU,kCACb;AAAA,gCAAC,UAAK,WAAU,2CAA2C,oBAAS;AAAA,YACpE,oBAAC,SAAM,WAAU,wFACd,4BACH;AAAA,aACF;AAAA,UACC,CAAC,aACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,QAAO,SAAS,wBACjE,wBAAc,kBAAkB,GACnC;AAAA,WAEJ;AAAA,SACF;AAAA,MAEA,oBAAC,eAAY;AAAA,MACb,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,qBAAC,eAAY,WAAU,6EACrB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAU;AAAA,UACV,SAAS,cAAc,aAAa;AAAA,UAEnC,wBAAc,UAAU,qBAAqB,IAAI,UAAU,uBAAuB;AAAA;AAAA,MACrF;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,SAAS,gBAC9C,oBAAU,yBAAyB,GACtC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,88 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconBolt } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import { Badge } from "../../../../../ui/data-display/Badge";
+import { Button } from "../../../../../ui/buttons/Button";
+import { BillingPeriodSelector } from "../../../../../ui/form/BillingPeriodSelector";
+import { SheetFooter } from "../../../../../ui/overlay/Sheet";
+import { useCurrentSubscription } from "../../../../../../modules/subscriptions/hooks/use-current-subscription.hook";
+import { isApiSubscription } from "../../../../../../modules/subscriptions/utils/is-api-subscription";
+import { getPeriodicityLabel } from "../../../../../../modules/subscriptions/utils/periodicity";
+import { resolveSubscriptionPlanName } from "../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name";
+import { IconBox } from "../../../shared/IconBox";
+import { AddonsBlock } from "../components/AddonsBlock";
+import { PricePreview } from "../components/PricePreview";
+import { useChangePlan } from "../useChangePlanState";
+function ReactivationConfigStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    "common.account.workspace.subscription.changePlan.reactivationConfig"
+  );
+  const {
+    handleClose,
+    handleContinue,
+    handleOpenPlansCatalog,
+    targetPlan,
+    billingLabelFull,
+    contractingBillingPeriod,
+    setContractingBillingPeriod,
+    calculatedPricing,
+    billingDiscounts,
+    firstPeriodPricingByPeriod,
+    planPricing,
+    disabledBillingPeriods
+  } = useChangePlan();
+  const { data: subscriptionData } = useCurrentSubscription();
+  const subscription = subscriptionData?.data?.[0];
+  const isApiPlan = isApiSubscription(subscription);
+  const periodicityLabel = targetPlan ? billingLabelFull : getPeriodicityLabel(subscription?.periodicity, translate);
+  const planName = targetPlan?.name ?? resolveSubscriptionPlanName(subscription, translate);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4 md:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-regular text-zinc-500", children: translateStep("currentPlanLabel") }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center gap-4 p-4 border border-zinc-200 rounded-lg", children: [
+          /* @__PURE__ */ jsx(IconBox, { icon: IconBolt }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: planName }),
+            /* @__PURE__ */ jsx(Badge, { className: "text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold", children: periodicityLabel })
+          ] }),
+          !isApiPlan && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10", onClick: handleOpenPlansCatalog, children: translateStep("changePlanButton") })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "md:hidden flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(IconBolt, { size: 24, className: "text-zinc-950" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-zinc-950", children: planName }),
+              /* @__PURE__ */ jsx(Badge, { className: "text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold shrink-0", children: periodicityLabel })
+            ] })
+          ] }),
+          !isApiPlan && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10 w-fit", onClick: handleOpenPlansCatalog, children: translateStep("changePlanButton") })
+        ] })
+      ] }),
+      targetPlan && /* @__PURE__ */ jsx(
+        BillingPeriodSelector,
+        {
+          value: contractingBillingPeriod,
+          onChange: setContractingBillingPeriod,
+          disabledOptions: disabledBillingPeriods,
+          calculatedPricing,
+          billingDiscounts,
+          firstPeriodPricingByPeriod,
+          planPricing
+        }
+      ),
+      /* @__PURE__ */ jsx(AddonsBlock, {}),
+      /* @__PURE__ */ jsx(PricePreview, {})
+    ] }),
+    /* @__PURE__ */ jsxs(SheetFooter, { className: "flex-row items-center justify-between p-4 lg:p-5 border-t border-zinc-200", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", className: "h-10!", onClick: handleClose, children: translate("common.actions.cancel") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", className: "h-10!", onClick: handleContinue, children: translate("common.actions.continue") })
+    ] })
+  ] });
+}
+export {
+  ReactivationConfigStep
+};
+//# sourceMappingURL=ReactivationConfigStep.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/steps/ReactivationConfigStep.tsx"],"sourcesContent":["'use client';\n\nimport { IconBolt } from '@tabler/icons-react';\nimport { useTranslations } from 'next-intl';\nimport { Badge } from '../../../../../ui/data-display/Badge';\nimport { Button } from '../../../../../ui/buttons/Button';\nimport { BillingPeriodSelector } from '../../../../../ui/form/BillingPeriodSelector';\nimport { SheetFooter } from '../../../../../ui/overlay/Sheet';\nimport { useCurrentSubscription } from '../../../../../../modules/subscriptions/hooks/use-current-subscription.hook';\nimport { isApiSubscription } from '../../../../../../modules/subscriptions/utils/is-api-subscription';\nimport { getPeriodicityLabel } from '../../../../../../modules/subscriptions/utils/periodicity';\nimport { resolveSubscriptionPlanName } from '../../../../../../modules/subscriptions/utils/resolve-subscription-plan-name';\nimport { IconBox } from '../../../shared/IconBox';\nimport { AddonsBlock } from '../components/AddonsBlock';\nimport { PricePreview } from '../components/PricePreview';\nimport { useChangePlan } from '../useChangePlanState';\n\n/** Primeiro passo da reativação: confere o plano e ajusta os adicionais. */\nexport function ReactivationConfigStep() {\n  const translate = useTranslations();\n  const translateStep = useTranslations(\n    'common.account.workspace.subscription.changePlan.reactivationConfig'\n  );\n  const {\n    handleClose,\n    handleContinue,\n    handleOpenPlansCatalog,\n    targetPlan,\n    billingLabelFull,\n    contractingBillingPeriod,\n    setContractingBillingPeriod,\n    calculatedPricing,\n    billingDiscounts,\n    firstPeriodPricingByPeriod,\n    planPricing,\n    disabledBillingPeriods,\n  } = useChangePlan();\n\n  const { data: subscriptionData } = useCurrentSubscription();\n  const subscription = subscriptionData?.data?.[0];\n  const isApiPlan = isApiSubscription(subscription);\n  // Vindo da vitrine o plano em contratação é o escolhido lá, não o que a conta tem hoje.\n  const periodicityLabel = targetPlan\n    ? billingLabelFull\n    : getPeriodicityLabel(subscription?.periodicity, translate);\n  const planName = targetPlan?.name ?? resolveSubscriptionPlanName(subscription, translate);\n\n  return (\n    <>\n      <div className=\"flex flex-col gap-6 p-4 md:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300\">\n        <div className=\"flex flex-col gap-2\">\n          <span className=\"paragraph-small-regular text-zinc-500\">{translateStep('currentPlanLabel')}</span>\n\n          <div className=\"hidden md:flex items-center gap-4 p-4 border border-zinc-200 rounded-lg\">\n            <IconBox icon={IconBolt} />\n            <div className=\"flex items-center gap-2 flex-1\">\n              <span className=\"paragraph-medium-semibold text-zinc-950\">{planName}</span>\n              <Badge className=\"text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold\">\n                {periodicityLabel}\n              </Badge>\n            </div>\n            {!isApiPlan && (\n              <Button type=\"button\" variant=\"secondary\" className=\"h-10\" onClick={handleOpenPlansCatalog}>\n                {translateStep('changePlanButton')}\n              </Button>\n            )}\n          </div>\n\n          <div className=\"md:hidden flex flex-col gap-4 p-4 bg-zinc-50 rounded-lg\">\n            <div className=\"flex items-center gap-4\">\n              <div className=\"size-10 bg-white rounded-lg shadow-sm flex items-center justify-center shrink-0\">\n                <IconBolt size={24} className=\"text-zinc-950\" />\n              </div>\n              <div className=\"flex items-center gap-2 flex-1 min-w-0\">\n                <span className=\"paragraph-medium-semibold text-zinc-950\">{planName}</span>\n                <Badge className=\"text-blue-700 border border-blue-100 bg-blue-50 rounded-lg paragraph-xsmall-semibold shrink-0\">\n                  {periodicityLabel}\n                </Badge>\n              </div>\n            </div>\n            {!isApiPlan && (\n              <Button type=\"button\" variant=\"secondary\" className=\"h-10 w-fit\" onClick={handleOpenPlansCatalog}>\n                {translateStep('changePlanButton')}\n              </Button>\n            )}\n          </div>\n        </div>\n\n        {/* Contratação vinda da vitrine escolhe o período aqui — a reativação simples herda o\n            período da assinatura e não mostra o seletor. */}\n        {targetPlan && (\n          <BillingPeriodSelector\n            value={contractingBillingPeriod}\n            onChange={setContractingBillingPeriod}\n            disabledOptions={disabledBillingPeriods}\n            calculatedPricing={calculatedPricing}\n            billingDiscounts={billingDiscounts}\n            firstPeriodPricingByPeriod={firstPeriodPricingByPeriod}\n            planPricing={planPricing}\n          />\n        )}\n\n        <AddonsBlock />\n        <PricePreview />\n      </div>\n\n      <SheetFooter className=\"flex-row items-center justify-between p-4 lg:p-5 border-t border-zinc-200\">\n        <Button type=\"button\" variant=\"secondary\" className=\"h-10!\" onClick={handleClose}>\n          {translate('common.actions.cancel')}\n        </Button>\n        <Button type=\"button\" className=\"h-10!\" onClick={handleContinue}>\n          {translate('common.actions.continue')}\n        </Button>\n      </SheetFooter>\n    </>\n  );\n}\n"],"mappings":";AAgDI,mBAGM,KAIE,YAPR;AA9CJ,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,cAAc;AACvB,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAC5B,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,qBAAqB;AAGvB,SAAS,yBAAyB;AACvC,QAAM,YAAY,gBAAgB;AAClC,QAAM,gBAAgB;AAAA,IACpB;AAAA,EACF;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,cAAc;AAElB,QAAM,EAAE,MAAM,iBAAiB,IAAI,uBAAuB;AAC1D,QAAM,eAAe,kBAAkB,OAAO,CAAC;AAC/C,QAAM,YAAY,kBAAkB,YAAY;AAEhD,QAAM,mBAAmB,aACrB,mBACA,oBAAoB,cAAc,aAAa,SAAS;AAC5D,QAAM,WAAW,YAAY,QAAQ,4BAA4B,cAAc,SAAS;AAExF,SACE,iCACE;AAAA,yBAAC,SAAI,WAAU,4OACb;AAAA,2BAAC,SAAI,WAAU,uBACb;AAAA,4BAAC,UAAK,WAAU,yCAAyC,wBAAc,kBAAkB,GAAE;AAAA,QAE3F,qBAAC,SAAI,WAAU,2EACb;AAAA,8BAAC,WAAQ,MAAM,UAAU;AAAA,UACzB,qBAAC,SAAI,WAAU,kCACb;AAAA,gCAAC,UAAK,WAAU,2CAA2C,oBAAS;AAAA,YACpE,oBAAC,SAAM,WAAU,wFACd,4BACH;AAAA,aACF;AAAA,UACC,CAAC,aACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,QAAO,SAAS,wBACjE,wBAAc,kBAAkB,GACnC;AAAA,WAEJ;AAAA,QAEA,qBAAC,SAAI,WAAU,2DACb;AAAA,+BAAC,SAAI,WAAU,2BACb;AAAA,gCAAC,SAAI,WAAU,mFACb,8BAAC,YAAS,MAAM,IAAI,WAAU,iBAAgB,GAChD;AAAA,YACA,qBAAC,SAAI,WAAU,0CACb;AAAA,kCAAC,UAAK,WAAU,2CAA2C,oBAAS;AAAA,cACpE,oBAAC,SAAM,WAAU,iGACd,4BACH;AAAA,eACF;AAAA,aACF;AAAA,UACC,CAAC,aACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,cAAa,SAAS,wBACvE,wBAAc,kBAAkB,GACnC;AAAA,WAEJ;AAAA,SACF;AAAA,MAIC,cACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,iBAAiB;AAAA,UACjB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MAGF,oBAAC,eAAY;AAAA,MACb,oBAAC,gBAAa;AAAA,OAChB;AAAA,IAEA,qBAAC,eAAY,WAAU,6EACrB;AAAA,0BAAC,UAAO,MAAK,UAAS,SAAQ,aAAY,WAAU,SAAQ,SAAS,aAClE,oBAAU,uBAAuB,GACpC;AAAA,MACA,oBAAC,UAAO,MAAK,UAAS,WAAU,SAAQ,SAAS,gBAC9C,oBAAU,yBAAyB,GACtC;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -0,0 +1,115 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAlertTriangle, 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 ReactivationPaymentStep() {
+  const translate = useTranslations();
+  const translateStep = useTranslations(
+    "common.account.workspace.subscription.changePlan.reactivationPayment"
+  );
+  const isDefaultWhitelabel = useIsDefaultWhitelabel();
+  const {
+    form,
+    paymentMethod,
+    selectedCardId,
+    billingPeriod,
+    disabledPaymentMethods,
+    allowedPaymentMethod,
+    couponUnlocksAllMethods,
+    boletoAvailable,
+    pixAvailable,
+    handleBack,
+    handleReactivate,
+    isReactivating,
+    isCalculating,
+    requiresBillingData,
+    openBillingAddress,
+    hasPendingAuth,
+    canReactivate
+  } = useChangePlan();
+  const disableCard = disabledPaymentMethods.includes("card");
+  const disableBoleto = disabledPaymentMethods.includes("boleto") || billingPeriod !== "annual" && allowedPaymentMethod !== "boleto" && !couponUnlocksAllMethods;
+  const disablePix = disabledPaymentMethods.includes("pix") || billingPeriod !== "annual" && allowedPaymentMethod !== "pix" && !couponUnlocksAllMethods;
+  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-6 p-4 md:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", 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,
+            disableCard,
+            disablePix,
+            hideBoleto: !boletoAvailable,
+            hidePix: !pixAvailable
+          }
+        ),
+        requiresBillingData && paymentMethod !== "card" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-lg bg-amber-50", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx(IconAlertTriangle, { size: 16, className: "text-amber-600 shrink-0 mt-0.5" }),
+            /* @__PURE__ */ jsx("p", { className: "paragraph-small-regular text-zinc-950", children: translateStep("billingDataRequired") })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              className: "h-9 w-fit",
+              onClick: openBillingAddress,
+              children: translateStep("billingDataAction")
+            }
+          )
+        ] }),
+        paymentMethod === "card" ? /* @__PURE__ */ jsx(
+          PaymentInfoCard,
+          {
+            selectedCardId,
+            onCardSelect: (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(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, children: translate("common.actions.back") }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          className: "h-10!",
+          onClick: handleReactivate,
+          loading: isReactivating,
+          disabled: !canReactivate || isCalculating || requiresBillingData || paymentMethod === "card" && !selectedCardId,
+          children: hasPendingAuth ? translateStep("retryAuthButton") : translateStep("submitButton")
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ReactivationPaymentStep
+};
+//# sourceMappingURL=ReactivationPaymentStep.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/components/account/sections/subscription/change-plan/steps/ReactivationPaymentStep.tsx"],"sourcesContent":["'use client';\n\nimport { IconAlertTriangle, 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 de pagamento da reativação da assinatura cancelada. */\nexport function ReactivationPaymentStep() {\n  const translate = useTranslations();\n  const translateStep = useTranslations(\n    'common.account.workspace.subscription.changePlan.reactivationPayment'\n  );\n  const isDefaultWhitelabel = useIsDefaultWhitelabel();\n\n  const {\n    form,\n    paymentMethod,\n    selectedCardId,\n    billingPeriod,\n    disabledPaymentMethods,\n    allowedPaymentMethod,\n    couponUnlocksAllMethods,\n    boletoAvailable,\n    pixAvailable,\n    handleBack,\n    handleReactivate,\n    isReactivating,\n    isCalculating,\n    requiresBillingData,\n    openBillingAddress,\n    hasPendingAuth,\n    canReactivate,\n  } = useChangePlan();\n\n  const disableCard = disabledPaymentMethods.includes('card');\n  const disableBoleto =\n    disabledPaymentMethods.includes('boleto') ||\n    (billingPeriod !== 'annual' && allowedPaymentMethod !== 'boleto' && !couponUnlocksAllMethods);\n  const disablePix =\n    disabledPaymentMethods.includes('pix') ||\n    (billingPeriod !== 'annual' && allowedPaymentMethod !== 'pix' && !couponUnlocksAllMethods);\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-6 p-4 md:p-5 flex-1 overflow-y-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300\">\n        <div className=\"flex flex-col gap-4\">\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}\n            disableCard={disableCard}\n            disablePix={disablePix}\n            hideBoleto={!boletoAvailable}\n            hidePix={!pixAvailable}\n          />\n\n          {/* Boleto e pix emitem nota fiscal: sem cadastro fiscal completo a cobrança é recusada\n              pelo backend, então o passo manda completar antes. */}\n          {requiresBillingData && paymentMethod !== 'card' && (\n            <div className=\"flex flex-col gap-3 p-4 rounded-lg bg-amber-50\">\n              <div className=\"flex items-start gap-3\">\n                <IconAlertTriangle size={16} className=\"text-amber-600 shrink-0 mt-0.5\" />\n                <p className=\"paragraph-small-regular text-zinc-950\">\n                  {translateStep('billingDataRequired')}\n                </p>\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"secondary\"\n                className=\"h-9 w-fit\"\n                onClick={openBillingAddress}\n              >\n                {translateStep('billingDataAction')}\n              </Button>\n            </div>\n          )}\n\n          {paymentMethod === 'card' ? (\n            <PaymentInfoCard\n              selectedCardId={selectedCardId}\n              onCardSelect={(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      </div>\n\n      <SheetFooter className=\"flex-row items-center justify-between p-4 sm:p-5 border-t border-zinc-200\">\n        <Button type=\"button\" variant=\"secondary\" className=\"h-10!\" onClick={handleBack}>\n          {translate('common.actions.back')}\n        </Button>\n        <Button\n          type=\"button\"\n          className=\"h-10!\"\n          onClick={handleReactivate}\n          loading={isReactivating}\n          disabled={\n            !canReactivate ||\n            isCalculating ||\n            requiresBillingData ||\n            (paymentMethod === 'card' && !selectedCardId)\n          }\n        >\n          {hasPendingAuth ? translateStep('retryAuthButton') : translateStep('submitButton')}\n        </Button>\n      </SheetFooter>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}