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 (
    <CombinationCard
      combinableDiscountTypes={{
        value: combinesWith,
        onChange: setCombinesWith,
      }}
      combinableDiscountCounts={{
        orderDiscountsCount: 0,
        productDiscountsCount: 3,
        shippingDiscountsCount: 0,
      }}
      discountClass={DiscountClass.Product}
      discountDescriptor="Spring Sale - 20% off"
      discountId="gid://Shopify/DiscountNode/123456"
    />
  );
}

```

## 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<CombinableDiscountTypes>`|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`|