The `MethodCard` enables users to toggle between discount methods to select code or automatic discount, and provides inputs to enter or generate a `discountCode` and `discountTitle`.

## Example code

```jsx?title:'MyApp.jsx'

import React, { useState } from "react";
import {
  MethodCard,
  DiscountClass,
  DiscountMethod,
} from "@shopify/discount-app-components";

function MyApp() {
  const [discountMethod, setDiscountMethod] = useState(
    DiscountMethod.Automatic
  );
  const [discountTitle, setDiscountTitle] = useState("");
  const [discountCode, setDiscountCode] = useState("");

  return (
    <MethodCard
      title="Tiered discount"
      discountClass={DiscountClass.Product}
      discountMethod={{
        value: discountMethod,
        onChange: setDiscountMethod,
      }}
      discountTitle={{
        value: discountTitle,
        onChange: setDiscountTitle,
      }}
      discountCode={{
        value: discountCode,
        onChange: setDiscountCode,
      }}
    />
  );
}

```

## Properties

|Name|Type|Description|Required|
|---|---|---|---|
|title|`string`|Title of the discount type|Yes|
|discountClass|`DiscountClass`|The class of the current discount (`product`, `order` or `shipping`).|Yes|
|discountMethod|`Field<DiscountMethod>`|The discount method (either `code` or `automatic`). Used to control whether a text input or a code generator is shown.|Yes|
|discountMethodHidden|`boolean`|Whether the discount method picker is hidden.|No|
|discountTitle|`Field<string>`|The discount title.|Yes|
|discountCode|`Field<string>`|The discount code generated.|Yes|
|defaultDiscountCodeLength|`number`|The length of discount code to generate. Defaults to 12.|No|

## 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.|

## DiscountMethod

|Name|Value|Description|
|---|---|---|
|Code|`CODE`|Discount code|
|Automatic|`AUTOMATIC`|Automatic discount|