Merge branch 'main' into applies-to-section

Signed-off-by: Thomas Devisscher <[email protected]>

.changeset/gentle-windows-juggle.md

@@ -0,0 +1,5 @@
+---
+'@shopify/discount-app-components': minor
+---
+
+Add DiscountApplicationStrategyCard, which allows the user to select the discount application strategy, MAXIMUM or FIRST.

locales/en.json

@@ -566,6 +566,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."
+    },
+    "DiscountApplicationStrategyCard": {
+      "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."
+      }
     }
   }
 }

src/components/DiscountApplicationStrategyCard/DiscountApplicationStrategyCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import {Box, Card, ChoiceList, Text, VerticalStack} from '@shopify/polaris';
+import {useI18n} from '@shopify/react-i18n';
+
+import {DiscountApplicationStrategy, Field} from '../../types';
+
+export interface DiscountAppStrategyProps {
+  /**
+   * The discount application strategy.
+   */
+  strategy: Field<DiscountApplicationStrategy>;
+}
+
+const I18N_SCOPE = {
+  scope: 'DiscountAppComponents.DiscountApplicationStrategyCard',
+};
+
+export function DiscountApplicationStrategyCard({
+  strategy,
+}: DiscountAppStrategyProps) {
+  const [i18n] = useI18n();
+
+  const handleChange = (strategies: DiscountApplicationStrategy[]) =>
+    strategy.onChange(strategies[0]);
+
+  return (
+    <Box paddingBlockEnd="4">
+      <Card padding="4">
+        <VerticalStack gap="4">
+          <Text variant="headingMd" as="h2">
+            {i18n.translate('title', I18N_SCOPE)}
+          </Text>
+          <ChoiceList
+            title={i18n.translate('title', I18N_SCOPE)}
+            titleHidden
+            choices={[
+              {
+                value: DiscountApplicationStrategy.First,
+                label: i18n.translate('first.label', I18N_SCOPE),
+                helpText: i18n.translate('first.helpText', I18N_SCOPE),
+              },
+              {
+                value: DiscountApplicationStrategy.Maximum,
+                label: i18n.translate('maximum.label', I18N_SCOPE),
+                helpText: i18n.translate('maximum.helpText', I18N_SCOPE),
+              },
+            ]}
+            selected={[strategy.value]}
+            onChange={handleChange}
+          />
+        </VerticalStack>
+      </Card>
+    </Box>
+  );
+}

src/components/DiscountApplicationStrategyCard/README.md

@@ -0,0 +1,13 @@
+# DiscountAppStategyCard
+
+The Discount Application Strategy Card enables users to toggle between `discountApplicationStrategy`s to select between `FIRST` or `MAXIMUM` strategies.
+
+---
+
+## Examples
+
+### Basic usage
+
+```jsx
+<DiscountAppStategyCard strategy={strategyField} />
+```

src/components/DiscountApplicationStrategyCard/index.ts

@@ -0,0 +1 @@
+export * from './DiscountApplicationStrategyCard';

src/components/DiscountApplicationStrategyCard/tests/DiscountApplicationStrategyCard.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import {ChoiceList, TextField} from '@shopify/polaris';
+import {mockField, mountWithApp} from 'tests/utilities';
+
+import {DiscountApplicationStrategyCard} from '../DiscountApplicationStrategyCard';
+import {DiscountApplicationStrategy} from '../../../types';
+
+describe('<DiscountApplicationStrategyCard />', () => {
+  const mockProps = {
+    strategy: mockField(DiscountApplicationStrategy.First),
+  };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('renders a DiscountApplicationStrategyCard', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard {...mockProps} />,
+    );
+
+    expect(methodCard).not.toContainReactComponent(TextField, {
+      label: 'Title',
+    });
+  });
+
+  it('calls onChange when the strategy is changed', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard {...mockProps} />,
+    );
+
+    methodCard
+      .find(ChoiceList)
+      ?.trigger('onChange', [DiscountApplicationStrategy.Maximum]);
+
+    expect(mockProps.strategy.onChange).toHaveBeenCalledWith(
+      DiscountApplicationStrategy.Maximum,
+    );
+  });
+});

src/index.ts

@@ -111,3 +111,5 @@ export {generateRandomDiscountCode} from './components/DiscountCodeGenerator/uti
 export {ValueCard} from './components/ValueCard';
 
 export {AppliesTo} from './components/AppliesTo';
+
+export {DiscountApplicationStrategyCard} from './components/DiscountApplicationStrategyCard';

src/stories/patterns/DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import {Provider} from '../../foundation/Provider';
+import DiscountApplicationStrategyCard from './DiscountApplicationStrategyCardPattern';
+
+// eslint-disable-next-line import/no-default-export, import/no-anonymous-default-export
+export default {
+  title: 'DiscountApplicationStrategyCard pattern',
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+const ApplicationStrategyCardPattern = () => (
+  <Provider>
+    <DiscountApplicationStrategyCard />
+  </Provider>
+);
+
+export {ApplicationStrategyCardPattern};

src/stories/patterns/DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.tsx

@@ -0,0 +1,21 @@
+import React, {useState} from 'react';
+
+import {Page} from '@shopify/polaris';
+import {DiscountApplicationStrategyCard} from '../../../components/DiscountApplicationStrategyCard';
+import {DiscountApplicationStrategy} from '../../../types';
+
+export default function MethodCardPattern() {
+  const [strategy, setStrategy] = useState<DiscountApplicationStrategy>(
+    DiscountApplicationStrategy.First,
+  );
+  return (
+    <Page>
+      <DiscountApplicationStrategyCard
+        strategy={{
+          value: strategy,
+          onChange: setStrategy,
+        }}
+      />
+    </Page>
+  );
+}

src/types.ts

@@ -87,3 +87,8 @@ export type CountryCode = SupportedCountryCode | typeof REST_OF_WORLD;
 export interface ProductOrCollectionResource extends Resource {
   title: string;
 }
+
+export enum DiscountApplicationStrategy {
+  First = 'FIRST',
+  Maximum = 'MAXIMUM',
+}