ProductPriceBadges

Component

Storybook

Figma Demo

Guidelines

Variations

ProductPriceBadges currently show either discount availability or price schedule changes.

Discounts:

Discounts are either available or not within ProductPriceBadges.

• If available, we use the pill/success/interactive badge variant with a label of “Discount” or “Post-Off” depending on the state in which the product is being sold.

• If not available, we use the pill/neutral/static badge variant with a label of “No Discount.”

Price Schedule:

Price schedule badging is shown via the pill/warning/interactive variant:

• Price Rise Soon: the price is going up next month for this SKU

• Price Drop Soon: the price is going down next month for this SKU

• No Price Change: the price is not changing next month for this SKU

• Price Changing: one of the prices in a split SKU is changing next month

Usage

Discount badging is always visible, whether available or unavailable.

Price schedule badging should be used only when we have price schedule information for a distributor and when changes are posted (typically during the last 1/3rd of the month).

Component Specs

API

• hasDiscount: boolean | Default: false
  Whether the product has a discount.
• priceSchedule: 'up' | 'down' | 'changing' | 'noChange' | Default: undefined The price schedule of the product. Use ‘up’ for price increase, ‘down’ for price decrease, ‘changing’ for price change, and ‘noChange’ for no price change.
• handleDiscountClick: () => void | Default: undefined A function to handle the discount click event to open a TaskPanel.
• handlePriceScheduleClick: () => void | Default: undefined A function to handle the price schedule click event to open a TaskPanel.

Example

<script>
	import { ProductPriceBadges } from '@getprovi/craft-svelte';
</script>

<ProductPriceBadges />
<ProductPriceBadges hasDiscount />
<ProductPriceBadges priceSchedule="up" />
<ProductPriceBadges priceSchedule="down" />
<ProductPriceBadges priceSchedule="changing" />
<ProductPriceBadges priceSchedule="noChange" />

Types

interface Props {
	hasDiscount?: boolean;
	priceSchedule?: 'noChange' | 'up' | 'down' | 'changing';
	handleDiscountClick?: () => void;
	handlePriceScheduleClick?: () => void;
}