diff --git a/.changeset/gentle-windows-juggle.md b/.changeset/gentle-windows-juggle.md new file mode 100644 index 00000000..dbe8682f --- /dev/null +++ b/.changeset/gentle-windows-juggle.md @@ -0,0 +1,5 @@ +--- +'@shopify/discount-app-components': minor +--- + +Add DiscountAppStrategyCard diff --git a/locales/en.json b/locales/en.json index 809a005b..501e3cde 100644 --- a/locales/en.json +++ b/locales/en.json @@ -557,6 +557,17 @@ "oncePerOrder": "Only apply discount once per order", "oncePerOrderHelpText": "If not selected, the amount will be taken off each eligible item in an order.", "oncePerOrderHelpTextWithAmount": "If not selected, {fixedAmountValue} will be taken off each eligible item in an order." + }, + "DiscountAppStrategyCard": { + "title": "Discount Application Strategy", + "first": { + "label": "First", + "helpText": "Only apply the first discount with conditions that are satisfied." + }, + "maximum": { + "label": "Maximum", + "helpText": "Only apply the discount that offers the maximum reduction." + } } } } diff --git a/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx b/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx new file mode 100644 index 00000000..2f02be53 --- /dev/null +++ b/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx @@ -0,0 +1,55 @@ +import React, {useCallback, useState} from 'react'; +import {Box, Card, ChoiceList, Text, VerticalStack} from '@shopify/polaris'; +import {useI18n} from '@shopify/react-i18n'; + +import {DiscountApplicationStrategy} from '../../types'; + +export interface DiscountAppStrategyProps { + /** + * The discount application strategy. + */ + strategy: DiscountApplicationStrategy; +} + +const I18N_SCOPE = { + scope: 'DiscountAppComponents.DiscountAppStrategyCard', +}; + +export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) { + const [i18n] = useI18n(); + const [selected, setSelected] = useState([ + JSON.stringify(strategy), + ]); + + const handleChange = useCallback((value: string[]) => setSelected(value), []); + + return ( + + + + + {i18n.translate('title', I18N_SCOPE)} + + + + + + ); +} diff --git a/src/components/DiscountAppStrategyCard/README.md b/src/components/DiscountAppStrategyCard/README.md new file mode 100644 index 00000000..e94dde85 --- /dev/null +++ b/src/components/DiscountAppStrategyCard/README.md @@ -0,0 +1,19 @@ +# DiscountAppStategyCard + +The Discount Application Strategy Card enables users to toggle between `discountApplicationStrategy`s to select between `All`, `First`, and `Maximum` strategies. + +--- + +## Usage and best practices + +- The discount code length only adjusts the default length of generated codes, and does not set a max length for the text input + +## Examples + +### Basic usage + +```jsx +