Countries and Rates Card
The CountriesAndRatesCard component enables users to select whether a discount will apply to all countries or to specific countries. The user can also provide an upper bound for shipping rates so that a discount can be limited only to shipping situations that are financially viable for the user.
| Name | Type | Description | Required |
|---|---|---|---|
| countrySelectionType | Field<CountrySelectionType> |
Whether a discount applies to all countries or to specific countries. | Yes |
| selectedCountries | Field<CountryCode[]> |
The specific country codes that a discount applies to. | Yes |
| excludeShippingRates | Field<boolean> |
Whether the discount only applies when shipping rates are under a certain amount. | Yes |
| maximumShippingPrice | Field<PositiveNumericString> |
The maximum shipping rate where the discount applies. | Yes |
| countrySelector | React.ReactNode |
The widget the enables users to select countries. | Yes |
| currencyCode | CurrencyCode |
The currency code used for the maxiumum shipping price input. | Yes |
Example code
Anchor link to section titled "Example code"
CountrySelector
Anchor link to section titled "CountrySelector"The following code is an example of the CountrySelector component:
CountryPicker
Anchor link to section titled "CountryPicker"To load the list of countries where the app user can ship, we need to query the GraphQL API. In the following CountryPicker component, ./authenticatedGraphQL is used to proxy the GraphQL request: