npm package: @paritydeals/react-promotions-ui
Latest version: 1.3.0


# React Promotions UI
### description: A React SDK for integrating ParityDeals dynamic pricing and discounts directly into your React application.




## Installation

Install the package using npm:

```bash
npm install @paritydeals/react-promotions-ui
```

## Getting Started

To start using the SDK, wrap your app with the `ParityDealsProvider` at the root level. This sets up the necessary context.

```tsx
import { ParityDealsProvider } from '@paritydeals/react-promotions-ui';

function App() {
  return (
    <ParityDealsProvider productId="YOUR_PRODUCT_ID">
      {/* Your app components */}
    </ParityDealsProvider>
  );
}
```

## Attributes:

You can use the following attributes to customize the behavior of the components.

| Attribute | Type | Default | Description |
| --------- | ---- | ------- | ----------- |
| `productId` | string | '' | The product ID to display |
| `baseCurrencyCode` | string | USD | If you use any base currency other than USD, you must provide this. Currency conversion will be done using this code. |
| `baseCurrencySymbol` | string  | $     | If you use any base currency other than USD, you must provide this. Only for the displaying purpose, but still important.              


---

## Components

Use these ready-made UI components to easily show location-aware pricing and promotional content.

### `PDBanner`

Displays a location-aware discount banner. You can style and position it as needed.

```tsx
import { PDBanner } from '@paritydeals/react-promotions-ui';

<PDBanner
  backgroundColor="#f0f0f0"
  fontColor="#333"
  borderRadius="4px"
  fontSize="16px"
  noStyles={false}
  addCloseIcon={true}
  className="custom-banner"
  onClose={() => console.log('Banner closed')}
/>
```

---

### PDPriceFormatted

Simplified component to display discounted and original prices dynamically based on the user’s location.

#### Display Discounted Price

Use this to show the localized or discounted price. The price is automatically formatted based on the user's location, including currency symbols, decimal separators, and digit grouping — for example, ₹9,999.99 for India, ¥10,000 for Japan, and 9.999,99 € for Italy where the currency symbol appears on the right.

```tsx
<PDPriceFormatted
  price={99.99}
/>
```

##### Configuration Options

| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `price`    | number | 0    | The price of the product.               |
| `className`    | string | ''    | custom class name for the component               |
| `currencyDisplay`    | `symbol\|code\|name`  | symbol     | The currency display format. This only works on the `data-pd-price-formatted` element.            |
| `showDecimal`        | boolean | false   | Whether to show decimals                 |
| `minimumDecimalDigits` | number | 0        | The minimum number of decimal digits     |
| `maximumDecimalDigits` | number | 2        | The maximum number of decimal digits. Maximum is 2.     |
| `isOriginalDisplay`    | boolean | false    | Used to show the original price when there’s a discount, typically for comparison (e.g., strikethrough price). This price is not modified by discounts but may still be affected by currency conversions.|
| `displayPrice`    | number | 0    | The price to display. If not provided, the original price will be displayed.               |

#### Display Original Price (Strikethrough)

Optionally show the original price with a strikethrough effect:

```tsx
<PDPriceFormatted
  price={99.99}
  displayPrice={99.99}
  isOriginalDisplay={true}
/>
```

#### Example Usage

Combine both for a side-by-side comparison:

```tsx
<div className="price-container">
  <PDPriceFormatted price={89.99} />
  <PDPriceFormatted
    price={99.99}
    displayPrice={99.99}
    isOriginalDisplay={true}
  />
</div>
```

---

## Granular Price Components

Use these components individually to build custom price formats with full styling control.

### PDPriceInteger

Displays just the integer part of the price.

```tsx
<PDPriceInteger price={99.99} />
```
##### Configuration Options

| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `price`    | number | 0    | The price of the product.               |
| `className`    | string | ''    | custom class name for the component

---

### PDPriceDecimal

Displays just the decimal portion.

```tsx
<PDPriceDecimal price={99.99} />
```
##### Configuration Options
| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `price`    | number | 0    | The price of the product.               |
| `className`    | string | ''    | custom class name for the component
| `minimumDecimalDigits` | number | 0        | The minimum number of decimal digits     |
| `maximumDecimalDigits` | number | 2        | The maximum number of decimal digits. Maximum is 2.     |

---

### PDPriceCurrencySymbol

Renders the currency symbol (like \$, ₹, €).

```tsx
<PDPriceCurrencySymbol  className="currency-symbol" />
```
##### Configuration Options

| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `className`    | string | ''    | custom class name for the component

---

### `PDPriceCurrencyCode`

Renders the full currency code (like USD, INR, EUR).

```tsx
<PDPriceCurrencyCode />
```
##### Configuration Options
| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `className`    | string | ''    | custom class name for the component

---

### PDPriceDecimalSeparator

Renders the decimal separator based on the user's location (e.g., ".").

```tsx
<PDPriceDecimalSeparator />
```

##### Configuration Options
| Option               | Type    | Default  | Description                              |
| -------------------- | ------- | -------- | ---------------------------------------- |
| `localizePricing`    | boolean | true    | Convert to local currency               |
| `price`    | number | 0    | The price of the product.               |
| `className`    | string | ''    | custom class name for the component

### Custom Display Example

Example using all components to create a custom layout:

```tsx
<div className="custom-price-display">
  <PDPriceCurrencySymbol localizePricing={true} />
  <PDPriceInteger price={99.99} />
  <PDPriceDecimalSeparator />
  <PDPriceDecimal price={99.99} />
  <PDPriceCurrencyCode localizePricing={true} />
</div>
```

---

## Support

Need help or have questions? Reach out to us anytime at **[hi@paritydeals.com](mailto:hi@paritydeals.com)**.