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