diff --git a/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx b/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx index af5e2e8d..8b329f46 100644 --- a/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx +++ b/src/components/DiscountAppStrategyCard/DiscountAppStrategyCard.tsx @@ -1,14 +1,14 @@ -import React, {useCallback, useState} from 'react'; +import React from 'react'; import {Box, Card, ChoiceList, Text, VerticalStack} from '@shopify/polaris'; import {useI18n} from '@shopify/react-i18n'; -import {DiscountApplicationStrategy} from '../../types'; +import {DiscountApplicationStrategy, Field} from '../../types'; export interface DiscountAppStrategyProps { /** * The discount application strategy. */ - strategy: DiscountApplicationStrategy; + strategy: Field; } const I18N_SCOPE = { @@ -17,9 +17,9 @@ const I18N_SCOPE = { export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) { const [i18n] = useI18n(); - const [selected, setSelected] = useState([strategy]); - const handleChange = useCallback((value: string[]) => setSelected(value), []); + const handleChange = (strategies: DiscountApplicationStrategy[]) => + strategy.onChange(strategies[0]); return ( @@ -43,7 +43,7 @@ export function DiscountAppStrategyCard({strategy}: DiscountAppStrategyProps) { helpText: i18n.translate('maximum.helpText', I18N_SCOPE), }, ]} - selected={selected} + selected={[strategy.value]} onChange={handleChange} /> diff --git a/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx b/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx index e25ac523..f3738511 100644 --- a/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx +++ b/src/components/DiscountAppStrategyCard/tests/DiscountAppStrategyCard.test.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import {TextField} from '@shopify/polaris'; -import {mountWithApp} from 'tests/utilities'; +import {ChoiceList, TextField} from '@shopify/polaris'; +import {mockField, mountWithApp} from 'tests/utilities'; import {DiscountAppStrategyCard} from '../DiscountAppStrategyCard'; import {DiscountApplicationStrategy} from '../../../types'; describe('', () => { const mockProps = { - strategy: DiscountApplicationStrategy.First, + strategy: mockField(DiscountApplicationStrategy.First), }; afterEach(() => { @@ -21,4 +21,16 @@ describe('', () => { label: 'Title', }); }); + + it('calls onChange when the strategy is changed', () => { + const methodCard = mountWithApp(); + + methodCard + .find(ChoiceList) + ?.trigger('onChange', [DiscountApplicationStrategy.Maximum]); + + expect(mockProps.strategy.onChange).toHaveBeenCalledWith( + DiscountApplicationStrategy.Maximum, + ); + }); });