@vtex/faststore 0.0.1

package/dist/matter/pricing/pricing.js

@@ -0,0 +1,793 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { useStorefrontContext } from "../../sdk/context/storefront-context.js";
+import { graphql } from "../../sdk/generated/gql.js";
+import { useDataOverride } from "../../sdk/data/data-override-context.js";
+import { HotDataProvider } from "../../sdk/data/hot-data-provider.js";
+import { resolveDefaultSeller } from "../../sdk/seller.js";
+import { publishedVariantIdFor, selectedVariantVar } from "../../sdk/state/variant-selector.js";
+import { PopoverTrigger } from "../../particles/popover/popover.js";
+import { TabsPanel, TabsTab } from "../../particles/tabs/tabs.js";
+import { useReactiveVar } from "@apollo/client/react";
+import { Suspense, createContext, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/pricing/pricing.tsx
+const fragment = `
+  fragment PricingData on Query {
+    productBySlug(slug: $slug) {
+      __typename
+      id
+      variants(first: 1) {
+        edges {
+          node {
+            sellers {
+              isDefault
+              offer {
+                price { amount currencyCode }
+                listPrice { amount currencyCode }
+                spotPrice { amount currencyCode }
+                installmentPlans {
+                  paymentMethod
+                  paymentType
+                  installments {
+                    count
+                    value { amount currencyCode }
+                    totalAmount { amount currencyCode }
+                    interestRate
+                    interestFree
+                  }
+                }
+                discountHighlights
+                promotions {
+                  name
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+graphql(`
+  fragment VariantPricingData on Variant {
+    __typename
+    id
+    sellers {
+      isDefault
+      offer {
+        price { amount currencyCode }
+        listPrice { amount currencyCode }
+        spotPrice { amount currencyCode }
+        installmentPlans {
+          paymentMethod
+          paymentType
+          installments {
+            count
+            value { amount currencyCode }
+            totalAmount { amount currencyCode }
+            interestRate
+            interestFree
+          }
+        }
+        discountHighlights
+        promotions {
+          name
+        }
+      }
+    }
+  }
+`);
+const variantQuery = graphql(`
+  query VariantPricingQuery($id: ID!) {
+    node(id: $id) {
+      __typename
+      ... on Variant {
+        ...VariantPricingData
+      }
+    }
+  }
+`);
+const PRICING_CONTEXT_UNSET = Symbol("PricingContextUnset");
+const PricingContext = createContext(PRICING_CONTEXT_UNSET);
+const InstallmentItemContext = createContext(null);
+const InstallmentPlanItemContext = createContext(null);
+const HighlightItemContext = createContext(null);
+const PromotionItemContext = createContext(null);
+function usePricing() {
+	const ctx = useContext(PricingContext);
+	if (ctx === PRICING_CONTEXT_UNSET) throw new Error("Pricing components must be used inside PricingRoot.");
+	return ctx;
+}
+function useInstallmentItem() {
+	const ctx = useContext(InstallmentItemContext);
+	if (!ctx) throw new Error("PricingInstallment must be used inside PricingInstallments.");
+	return ctx;
+}
+function useInstallmentPlanItem(caller = "PricingInstallmentPlan", parent = "PricingInstallmentPlans") {
+	const ctx = useContext(InstallmentPlanItemContext);
+	if (!ctx) throw new Error(`${caller} must be used inside ${parent}.`);
+	return ctx;
+}
+function useHighlightItem() {
+	const ctx = useContext(HighlightItemContext);
+	if (ctx === null) throw new Error("PricingHighlight must be used inside PricingHighlights.");
+	return ctx;
+}
+function usePromotionItem() {
+	const ctx = useContext(PromotionItemContext);
+	if (!ctx) throw new Error("PricingPromotion must be used inside PricingPromotions.");
+	return ctx;
+}
+function formatPrice(value, locale, currency) {
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency
+	}).format(value);
+}
+function findBestInstallment(plans) {
+	const allInstallments = plans.flatMap((plan) => plan.installments);
+	if (allInstallments.length === 0) return null;
+	const interestFree = allInstallments.filter((i) => i.interestFree);
+	if (interestFree.length > 0) return interestFree.reduce((best, current) => current.count > best.count ? current : best);
+	return allInstallments.reduce((best, current) => current.count > best.count ? current : best);
+}
+function normalizeOffer(offer) {
+	return {
+		price: offer.price.amount,
+		listPrice: offer.listPrice.amount,
+		spotPrice: offer.spotPrice.amount,
+		currency: offer.price.currencyCode,
+		installmentPlans: offer.installmentPlans.map((plan) => ({
+			paymentMethod: plan.paymentMethod,
+			paymentType: plan.paymentType,
+			installments: plan.installments.map((inst) => ({
+				count: inst.count,
+				value: inst.value.amount,
+				totalAmount: inst.totalAmount.amount,
+				interestRate: inst.interestRate,
+				interestFree: inst.interestFree
+			}))
+		})),
+		discountHighlights: offer.discountHighlights,
+		promotions: offer.promotions.map((promotion) => ({ name: promotion.name }))
+	};
+}
+function pricingOfferFromVariant(variant) {
+	const offer = resolveDefaultSeller(variant.sellers)?.offer;
+	if (!offer) return null;
+	return normalizeOffer(offer);
+}
+function transformPricingData(data) {
+	const edge = data.variants.edges[0];
+	if (!edge) return null;
+	return pricingOfferFromVariant(edge.node);
+}
+function transformVariantPricingData(variant) {
+	return pricingOfferFromVariant(variant);
+}
+const PricingRootDefinition = defineComponent({
+	name: "PricingRoot",
+	importPath: "@vtex/faststore/components",
+	component: PricingRoot,
+	fragment,
+	fetchStrategy: "lazy",
+	skeleton: PricingSkeleton,
+	editor: {
+		label: "Pricing",
+		category: "commerce"
+	},
+	schema: { selectedVariantId: {
+		type: "string",
+		label: "Selected Variant ID"
+	} },
+	guideline: "Root container for the PDP pricing block; all other Pricing sub-components must be descendants of it. Automatically recomputes the offer when a shopper picks a VariantSelector swatch (it reads the published variant selection); the selectedVariantId prop is an optional pre-selection fallback. Falls back silently to the product-level offer on variant fetch error. See pricing.md."
+});
+const PricingSellingPriceDefinition = defineComponent({
+	name: "PricingSellingPrice",
+	importPath: "@vtex/faststore/components",
+	component: PricingSellingPrice,
+	editor: {
+		label: "Selling Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Displays the current selling price; must be a descendant of PricingRoot."
+});
+const PricingListPriceDefinition = defineComponent({
+	name: "PricingListPrice",
+	importPath: "@vtex/faststore/components",
+	component: PricingListPrice,
+	editor: {
+		label: "List Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Displays the original (strikethrough) list price; only renders when a discount exists. Must be a descendant of PricingRoot."
+});
+const PricingSpotPriceDefinition = defineComponent({
+	name: "PricingSpotPrice",
+	importPath: "@vtex/faststore/components",
+	component: PricingSpotPrice,
+	editor: {
+		label: "Spot Price",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Displays the best cash/instant-payment price (e.g. Pix); only renders when spotPrice is lower than the selling price. Must be a descendant of PricingRoot."
+});
+const PricingInstallmentsDefinition = defineComponent({
+	name: "PricingInstallments",
+	importPath: "@vtex/faststore/components",
+	component: PricingInstallments,
+	editor: {
+		label: "Installments",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Shortcut container that exposes the single best installment across all plans; use PricingInstallmentPlans instead when a per-payment-method breakdown is needed. Must be a descendant of PricingRoot."
+});
+const PricingInstallmentPlansDefinition = defineComponent({
+	name: "PricingInstallmentPlans",
+	importPath: "@vtex/faststore/components",
+	component: PricingInstallmentPlans,
+	editor: {
+		label: "Installment Plans",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders one row per payment method; use PricingInstallments instead when only the single best plan is needed. Must be a descendant of PricingRoot."
+});
+const PricingInstallmentPlanDefinition = defineComponent({
+	name: "PricingInstallmentPlan",
+	importPath: "@vtex/faststore/components",
+	component: PricingInstallmentPlan,
+	editor: {
+		label: "Installment Plan",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders a single plan row inside PricingInstallmentPlans; nest PricingInstallmentsForPlan inside it to list every installment tier instead of just the best one. Must be a descendant of PricingInstallmentPlans."
+});
+const PricingInstallmentsForPlanDefinition = defineComponent({
+	name: "PricingInstallmentsForPlan",
+	importPath: "@vtex/faststore/components",
+	component: PricingInstallmentsForPlan,
+	editor: {
+		label: "Installments For Plan",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Iterates every installment tier (1x, 2x, … Nx) of the enclosing plan; must be a descendant of PricingInstallmentPlan."
+});
+const PricingPaymentMethodsTriggerDefinition = defineComponent({
+	name: "PricingPaymentMethodsTrigger",
+	importPath: "@vtex/faststore/components",
+	component: PricingPaymentMethodsTrigger,
+	editor: {
+		label: "Payment Methods Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Button that opens the payment-methods disclosure panel; must be a descendant of PopoverRoot."
+});
+const PricingPaymentMethodsListDefinition = defineComponent({
+	name: "PricingPaymentMethodsList",
+	importPath: "@vtex/faststore/components",
+	component: PricingPaymentMethodsList,
+	editor: {
+		label: "Payment Methods List",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Flat disclosure panel content listing every payment plan; place inside PopoverPopup, DialogPopup, or DrawerPopup. Must be a descendant of PricingRoot."
+});
+const PricingPaymentMethodsTabListDefinition = defineComponent({
+	name: "PricingPaymentMethodsTabList",
+	importPath: "@vtex/faststore/components",
+	component: PricingPaymentMethodsTabList,
+	editor: {
+		label: "Payment Methods Tab List",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Emits one tab per payment plan for the tab-grouped disclosure pattern; must be a descendant of TabsList (which is inside TabsRoot). Pair with PricingPaymentMethodsTabPanels."
+});
+const PricingPaymentMethodsTabPanelsDefinition = defineComponent({
+	name: "PricingPaymentMethodsTabPanels",
+	importPath: "@vtex/faststore/components",
+	component: PricingPaymentMethodsTabPanels,
+	editor: {
+		label: "Payment Methods Tab Panels",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Emits one panel per payment plan for the tab-grouped disclosure pattern; must be a sibling of TabsList under TabsRoot (not nested inside TabsList). Pair with PricingPaymentMethodsTabList."
+});
+const PricingPaymentMethodNameDefinition = defineComponent({
+	name: "PricingPaymentMethodName",
+	importPath: "@vtex/faststore/components",
+	component: PricingPaymentMethodName,
+	editor: {
+		label: "Payment Method Name",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders the enclosing plan's payment method name (e.g. \"Visa\", \"Pix\"); must be inside a plan context — PricingInstallmentPlan, PricingPaymentMethodsTabList, or PricingPaymentMethodsTabPanels."
+});
+const PricingInstallmentDefinition = defineComponent({
+	name: "PricingInstallment",
+	importPath: "@vtex/faststore/components",
+	component: PricingInstallment,
+	editor: {
+		label: "Installment",
+		category: "commerce"
+	},
+	schema: {
+		template: {
+			type: "string",
+			default: "{count}x de {value}",
+			label: "Template"
+		},
+		interestFreeLabel: {
+			type: "string",
+			default: "sem juros",
+			label: "Interest-free label"
+		}
+	},
+	guideline: "Renders a single installment line using {count} and {value} template placeholders; must be a descendant of PricingInstallments, PricingInstallmentPlan, or PricingInstallmentsForPlan."
+});
+const PricingDiscountDefinition = defineComponent({
+	name: "PricingDiscount",
+	importPath: "@vtex/faststore/components",
+	component: PricingDiscount,
+	editor: {
+		label: "Discount Badge",
+		category: "commerce"
+	},
+	schema: {
+		format: {
+			type: ["percentage", "absolute"],
+			default: "percentage",
+			label: "Discount Format"
+		},
+		template: {
+			type: "string",
+			label: "Template"
+		}
+	},
+	guideline: "Discount badge for the listPrice-vs-price markdown; use PricingSpotDiscount instead for the spotPrice-vs-price (Pix/cash) percentage. The format prop switches between a percentage (-25%, default) and an absolute amount (-R$ 10,00); the template supports {percentage} and {amount} placeholders and defaults to the format-appropriate one. Recomputes automatically on swatch change. Must be a descendant of PricingRoot."
+});
+const PricingSpotDiscountDefinition = defineComponent({
+	name: "PricingSpotDiscount",
+	importPath: "@vtex/faststore/components",
+	component: PricingSpotDiscount,
+	editor: {
+		label: "Spot Discount Badge",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "-{percentage}%",
+		label: "Template"
+	} },
+	guideline: "Discount badge for the spotPrice-vs-price (cash/Pix) percentage; use PricingDiscount instead for the listPrice-vs-price percentage. Must be a descendant of PricingRoot."
+});
+const PricingHighlightsDefinition = defineComponent({
+	name: "PricingHighlights",
+	importPath: "@vtex/faststore/components",
+	component: PricingHighlights,
+	editor: {
+		label: "Highlights",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Iterates the offer's discount highlight labels (e.g. \"Black Friday\", \"Exclusivo\"); place PricingHighlight as a child. Must be a descendant of PricingRoot."
+});
+const PricingHighlightDefinition = defineComponent({
+	name: "PricingHighlight",
+	importPath: "@vtex/faststore/components",
+	component: PricingHighlight,
+	editor: {
+		label: "Highlight",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Renders a single highlight label as a span; must be a descendant of PricingHighlights."
+});
+const PricingPromotionsDefinition = defineComponent({
+	name: "PricingPromotions",
+	importPath: "@vtex/faststore/components",
+	component: PricingPromotions,
+	editor: {
+		label: "Promotions",
+		category: "commerce"
+	},
+	schema: {},
+	guideline: "Iterates the offer's structured promotions (e.g. \"Compre 3 leve 2\"); place PricingPromotion as a child. Must be a descendant of PricingRoot."
+});
+const PricingPromotionDefinition = defineComponent({
+	name: "PricingPromotion",
+	importPath: "@vtex/faststore/components",
+	component: PricingPromotion,
+	editor: {
+		label: "Promotion",
+		category: "commerce"
+	},
+	schema: { template: {
+		type: "string",
+		default: "{name}",
+		label: "Template"
+	} },
+	guideline: "Renders a single promotion using the {name} template placeholder; must be a descendant of PricingPromotions."
+});
+function PricingRoot({ $data: $dataProp, selectedVariantId, children, ...props }) {
+	const { locale, currency } = useStorefrontContext();
+	const productSlice = useDataOverride($dataProp) ?? null;
+	const publishedSelection = useReactiveVar(selectedVariantVar);
+	const activeVariantId = publishedVariantIdFor(publishedSelection, productSlice?.id ?? null) ?? selectedVariantId;
+	if (activeVariantId) return /* @__PURE__ */ jsx(Suspense, {
+		fallback: null,
+		children: /* @__PURE__ */ jsx(HotDataProvider, {
+			query: variantQuery,
+			variables: { id: activeVariantId },
+			field: "node",
+			fallbackData: productSlice,
+			children: /* @__PURE__ */ jsx(PricingProvider, {
+				fallbackProductSlice: productSlice,
+				currency,
+				locale,
+				...props,
+				children
+			})
+		})
+	});
+	const transformed = productSlice ? transformPricingData(productSlice) : null;
+	return /* @__PURE__ */ jsx(PricingView, {
+		transformed,
+		currency,
+		locale,
+		...props,
+		children
+	});
+}
+function PricingProvider({ fallbackProductSlice, ...viewProps }) {
+	const override = useDataOverride(null);
+	const overrideTypename = override?.__typename;
+	let transformed = null;
+	if (overrideTypename === "Variant") transformed = transformVariantPricingData(override);
+	else if (fallbackProductSlice) transformed = transformPricingData(fallbackProductSlice);
+	return /* @__PURE__ */ jsx(PricingView, {
+		transformed,
+		...viewProps
+	});
+}
+function PricingView({ transformed, currency: currencyProp, locale: localeProp, className, children, ...props }) {
+	let contextValue = null;
+	if (transformed) {
+		const { price, listPrice, spotPrice, installmentPlans, discountHighlights, promotions } = transformed;
+		const currency = currencyProp ?? transformed.currency;
+		const locale = localeProp;
+		const hasDiscount = listPrice > price;
+		const hasSpotDiscount = spotPrice < price;
+		contextValue = {
+			price,
+			listPrice,
+			spotPrice,
+			currency,
+			locale,
+			installmentPlans,
+			discountHighlights,
+			promotions,
+			hasDiscount,
+			hasSpotDiscount,
+			discountPercentage: hasDiscount ? Math.round((listPrice - price) / listPrice * 100) : 0,
+			spotDiscountPercentage: hasSpotDiscount ? Math.round((price - spotPrice) / price * 100) : 0,
+			bestInstallment: findBestInstallment(installmentPlans)
+		};
+	}
+	return /* @__PURE__ */ jsx(PricingContext, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-pricing": "",
+			children
+		})
+	});
+}
+function PricingSellingPrice({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx) return null;
+	const formatted = formatPrice(ctx.price, ctx.locale, ctx.currency);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-selling-price": "",
+		children: children ?? formatted
+	});
+}
+function PricingListPrice({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || !ctx.hasDiscount) return null;
+	const formatted = formatPrice(ctx.listPrice, ctx.locale, ctx.currency);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-list-price": "",
+		children: children ?? formatted
+	});
+}
+function PricingSpotPrice({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || !ctx.hasSpotDiscount) return null;
+	const formatted = formatPrice(ctx.spotPrice, ctx.locale, ctx.currency);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-spot-price": "",
+		children: children ?? formatted
+	});
+}
+function PricingInstallments({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || !ctx.bestInstallment) return null;
+	return /* @__PURE__ */ jsx(InstallmentItemContext, {
+		value: ctx.bestInstallment,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-pricing-installments": "",
+			children
+		})
+	});
+}
+function PricingInstallmentPlans({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.installmentPlans.length === 0) return null;
+	const sortedPlans = ctx.installmentPlans.map((plan) => ({
+		plan,
+		bestInstallment: findBestInstallment([plan])
+	})).sort((a, b) => {
+		return (a.bestInstallment?.count ?? Number.POSITIVE_INFINITY) - (b.bestInstallment?.count ?? Number.POSITIVE_INFINITY);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-installment-plans": "",
+		children: sortedPlans.map(({ plan, bestInstallment }, index) => /* @__PURE__ */ jsx(InstallmentPlanItemContext, {
+			value: {
+				paymentMethod: plan.paymentMethod,
+				paymentType: plan.paymentType,
+				installments: plan.installments,
+				bestInstallment
+			},
+			children
+		}, `${plan.paymentType}-${plan.paymentMethod}-${index}`))
+	});
+}
+function PricingInstallmentPlan({ className, children, ...props }) {
+	const plan = useInstallmentPlanItem();
+	if (!plan.bestInstallment) return null;
+	return /* @__PURE__ */ jsx(InstallmentItemContext, {
+		value: plan.bestInstallment,
+		children: /* @__PURE__ */ jsx("div", {
+			...props,
+			className,
+			"data-fs-pricing-installment-plan": "",
+			"data-fs-pricing-installment-plan-type": plan.paymentType,
+			children
+		})
+	});
+}
+function PricingInstallmentsForPlan({ className, children, ...props }) {
+	const plan = useInstallmentPlanItem("PricingInstallmentsForPlan", "PricingInstallmentPlan");
+	if (plan.installments.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-installments-for-plan": "",
+		children: plan.installments.map((installment, index) => /* @__PURE__ */ jsx(InstallmentItemContext, {
+			value: installment,
+			children
+		}, `${installment.count}-${index}`))
+	});
+}
+function PricingPaymentMethodsTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		...props,
+		className,
+		"data-fs-pricing-payment-methods-trigger": "",
+		children
+	});
+}
+function PricingPaymentMethodsList({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.installmentPlans.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-payment-methods-list": "",
+		children: /* @__PURE__ */ jsx(PricingInstallmentPlans, { children })
+	});
+}
+function sortPlansForTabs(plans) {
+	return plans.map((plan) => ({
+		plan,
+		bestInstallment: findBestInstallment([plan]),
+		tabValue: `${plan.paymentType}-${plan.paymentMethod}`
+	})).sort((a, b) => {
+		return (a.bestInstallment?.count ?? Number.POSITIVE_INFINITY) - (b.bestInstallment?.count ?? Number.POSITIVE_INFINITY);
+	});
+}
+function PricingPaymentMethodsTabList({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.installmentPlans.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-payment-methods-tab-list": "",
+		children: sortPlansForTabs(ctx.installmentPlans).map(({ plan, bestInstallment, tabValue }) => /* @__PURE__ */ jsx(InstallmentPlanItemContext, {
+			value: {
+				paymentMethod: plan.paymentMethod,
+				paymentType: plan.paymentType,
+				installments: plan.installments,
+				bestInstallment
+			},
+			children: /* @__PURE__ */ jsx(TabsTab, {
+				value: tabValue,
+				children
+			})
+		}, tabValue))
+	});
+}
+function PricingPaymentMethodsTabPanels({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.installmentPlans.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-payment-methods-tab-panels": "",
+		children: sortPlansForTabs(ctx.installmentPlans).map(({ plan, bestInstallment, tabValue }) => /* @__PURE__ */ jsx(InstallmentPlanItemContext, {
+			value: {
+				paymentMethod: plan.paymentMethod,
+				paymentType: plan.paymentType,
+				installments: plan.installments,
+				bestInstallment
+			},
+			children: /* @__PURE__ */ jsx(TabsPanel, {
+				value: tabValue,
+				children
+			})
+		}, tabValue))
+	});
+}
+function PricingPaymentMethodName({ className, children, ...props }) {
+	const plan = useInstallmentPlanItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-payment-method-name": "",
+		children: children ?? plan.paymentMethod
+	});
+}
+function PricingInstallment({ template = "{count}x de {value}", interestFreeLabel = "sem juros", className, children, ...props }) {
+	const installment = useInstallmentItem();
+	const ctx = usePricing();
+	if (!ctx) return null;
+	const formattedValue = formatPrice(installment.value, ctx.locale, ctx.currency);
+	const base = template.replace("{count}", String(installment.count)).replace("{value}", formattedValue);
+	const text = installment.interestFree && interestFreeLabel ? `${base} ${interestFreeLabel}` : base;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-installment": "",
+		children: children ?? text
+	});
+}
+function PricingDiscount({ template, format = "percentage", className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || !ctx.hasDiscount) return null;
+	const formattedAmount = formatPrice(ctx.listPrice - ctx.price, ctx.locale, ctx.currency);
+	const text = (template ?? (format === "absolute" ? "-{amount}" : "-{percentage}%")).replaceAll("{percentage}", String(ctx.discountPercentage)).replaceAll("{amount}", formattedAmount);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-discount": "",
+		children: children ?? text
+	});
+}
+function PricingSpotDiscount({ template = "-{percentage}%", className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.spotDiscountPercentage <= 0) return null;
+	const text = template.replace("{percentage}", String(ctx.spotDiscountPercentage));
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-spot-discount": "",
+		children: children ?? text
+	});
+}
+function PricingHighlights({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.discountHighlights.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-highlights": "",
+		children: ctx.discountHighlights.map((highlight, index) => /* @__PURE__ */ jsx(HighlightItemContext, {
+			value: highlight,
+			children
+		}, `${highlight}-${index}`))
+	});
+}
+function PricingHighlight({ className, children, ...props }) {
+	const highlight = useHighlightItem();
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-highlight": "",
+		children: children ?? highlight
+	});
+}
+function PricingPromotions({ className, children, ...props }) {
+	const ctx = usePricing();
+	if (!ctx || ctx.promotions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className,
+		"data-fs-pricing-promotions": "",
+		children: ctx.promotions.map((promotion, index) => /* @__PURE__ */ jsx(PromotionItemContext, {
+			value: promotion,
+			children
+		}, `${promotion.name}-${index}`))
+	});
+}
+function PricingPromotion({ template = "{name}", className, children, ...props }) {
+	const promotion = usePromotionItem();
+	const text = template.replace("{name}", promotion.name);
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"data-fs-pricing-promotion": "",
+		children: children ?? text
+	});
+}
+function PricingSkeleton({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className,
+		"data-fs-pricing-skeleton": "",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("span", { "data-fs-pricing-skeleton-line": "" }), /* @__PURE__ */ jsx("span", { "data-fs-pricing-skeleton-line": "" })]
+	});
+}
+PricingRoot.Skeleton = PricingSkeleton;
+const Pricing = {
+	Root: PricingRoot,
+	SellingPrice: PricingSellingPrice,
+	ListPrice: PricingListPrice,
+	SpotPrice: PricingSpotPrice,
+	Installments: PricingInstallments,
+	InstallmentPlans: PricingInstallmentPlans,
+	InstallmentPlan: PricingInstallmentPlan,
+	InstallmentsForPlan: PricingInstallmentsForPlan,
+	Installment: PricingInstallment,
+	PaymentMethodsTrigger: PricingPaymentMethodsTrigger,
+	PaymentMethodsList: PricingPaymentMethodsList,
+	PaymentMethodsTabList: PricingPaymentMethodsTabList,
+	PaymentMethodsTabPanels: PricingPaymentMethodsTabPanels,
+	PaymentMethodName: PricingPaymentMethodName,
+	Discount: PricingDiscount,
+	SpotDiscount: PricingSpotDiscount,
+	Highlights: PricingHighlights,
+	Highlight: PricingHighlight,
+	Promotions: PricingPromotions,
+	Promotion: PricingPromotion,
+	Skeleton: PricingSkeleton
+};
+//#endregion
+export { Pricing, PricingDiscount, PricingDiscountDefinition, PricingHighlight, PricingHighlightDefinition, PricingHighlights, PricingHighlightsDefinition, PricingInstallment, PricingInstallmentDefinition, PricingInstallmentPlan, PricingInstallmentPlanDefinition, PricingInstallmentPlans, PricingInstallmentPlansDefinition, PricingInstallments, PricingInstallmentsDefinition, PricingInstallmentsForPlan, PricingInstallmentsForPlanDefinition, PricingListPrice, PricingListPriceDefinition, PricingPaymentMethodName, PricingPaymentMethodNameDefinition, PricingPaymentMethodsList, PricingPaymentMethodsListDefinition, PricingPaymentMethodsTabList, PricingPaymentMethodsTabListDefinition, PricingPaymentMethodsTabPanels, PricingPaymentMethodsTabPanelsDefinition, PricingPaymentMethodsTrigger, PricingPaymentMethodsTriggerDefinition, PricingPromotion, PricingPromotionDefinition, PricingPromotions, PricingPromotionsDefinition, PricingRoot, PricingRootDefinition, PricingSellingPrice, PricingSellingPriceDefinition, PricingSkeleton, PricingSpotDiscount, PricingSpotDiscountDefinition, PricingSpotPrice, PricingSpotPriceDefinition, transformVariantPricingData, useInstallmentPlanItem };
+
+//# sourceMappingURL=pricing.js.map