The `CombinationCard` component enables app users to select other discount classes this discount can combine with.
## Example code
```jsx?title:'MyApp.jsx'
import React, { useState } from "react";
import {
CombinationCard,
DiscountClass,
} from "@shopify/discount-app-components";
function MyApp() {
const [combinesWith, setCombinesWith] = useState({
orderDiscounts: false,
productDiscounts: false,
shippingDiscounts: false,
});
return (
);
}
```
## Properties
|Name|Type|Description|Required|
|---|---|---|---|
|discountClass|`DiscountClass`|The class of the current discount (`product`, `order` or `shipping`).|Yes|
|discountDescriptor|`string`|The discount title for automatic discounts, or the discount code for code discounts.|Yes|
|combinableDiscountTypes|`Field`|Used for setting which discount classes can be combined with the discount|Yes|
|combinableDiscountCounts|`CombinableDiscountCounts`|Counts of existing combinable discounts on the shop.|No|
|discountId|`string`|The Shopify GID of the current discount.|No|
## CombinableDiscountCounts
|Name|Value|Description|
|---|---|---|
|productDiscountsCount|`number`|The total number of combinable `product` discounts for the current shop.|
|orderDiscountsCount|`number`|The total number of combinable `order` discounts for the current shop.|
|shippingDiscountsCount|`number`|The total number of combinable `shipping` discounts for the current shop.|
## DiscountClass
|Name|Value|Description|
|---|---|---|
|Product|`PRODUCT`|The discount applies to specific products or product variants.|
|Order|`ORDER`|The discount applies to the entire order.|
|Shipping|`SHIPPING`|The discount applies to shipping rates.|
## Supported combinations
|DiscountClass|Can combine with|
|---|---|
|`PRODUCT`|`PRODUCT`, `SHIPPING`|
|`ORDER`|`SHIPPING`|
|`SHIPPING`|`PRODUCT`, `ORDER`|