chore: update StrategyCard to conditionally render for Order, Product…

… and Shipping strategies
Shopify · Nov 28, 2023 · ced222b · ced222b
1 parent a7d804e
commit ced222b
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 21 deletions.
diff --git a/src/components/DiscountApplicationStrategyCard/DiscountApplicationStrategyCard.tsx b/src/components/DiscountApplicationStrategyCard/DiscountApplicationStrategyCard.tsx
@@ -3,12 +3,14 @@ import {Box, Card, ChoiceList, Text, BlockStack} from '@shopify/polaris';
 import {useI18n} from '@shopify/react-i18n';
 
 import {DiscountApplicationStrategy, Field} from '../../types';
+import {DiscountClass} from '../../constants';
 
 export interface DiscountAppStrategyProps {
   /**
    * The discount application strategy.
    */
   strategy: Field<DiscountApplicationStrategy>;
+  discountClass: DiscountClass;
 }
 
 const I18N_SCOPE = {
@@ -17,12 +19,43 @@ const I18N_SCOPE = {
 
 export function DiscountApplicationStrategyCard({
   strategy,
+  discountClass,
 }: DiscountAppStrategyProps) {
   const [i18n] = useI18n();
 
   const handleChange = (strategies: DiscountApplicationStrategy[]) =>
     strategy.onChange(strategies[0]);
 
+  const isProduct = discountClass === DiscountClass.Product;
+  const isOrder = discountClass === DiscountClass.Order;
+  const isShipping = discountClass === DiscountClass.Shipping;
+
+  const choices = [
+    ...(isProduct || isOrder
+      ? [
+          {
+            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),
+          },
+        ]
+      : []),
+    ...(isProduct || isShipping
+      ? [
+          {
+            value: DiscountApplicationStrategy.All,
+            label: i18n.translate('all.label', I18N_SCOPE),
+            helpText: i18n.translate('all.helpText', I18N_SCOPE),
+          },
+        ]
+      : []),
+  ];
+
   return (
     <Box paddingBlockEnd="400">
       <Card padding="400">
@@ -33,23 +66,7 @@ export function DiscountApplicationStrategyCard({
           <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),
-              },
-              {
-                value: DiscountApplicationStrategy.All,
-                label: i18n.translate('all.label', I18N_SCOPE),
-                helpText: i18n.translate('all.helpText', I18N_SCOPE),
-              },
-            ]}
+            choices={choices}
             selected={[strategy.value]}
             onChange={handleChange}
           />

diff --git a/...components/DiscountApplicationStrategyCard/tests/DiscountApplicationStrategyCard.test.tsx b/...components/DiscountApplicationStrategyCard/tests/DiscountApplicationStrategyCard.test.tsx
@@ -4,10 +4,12 @@ import {mockField, mountWithApp} from 'tests/utilities';
 
 import {DiscountApplicationStrategyCard} from '../DiscountApplicationStrategyCard';
 import {DiscountApplicationStrategy} from '../../../types';
+import {DiscountClass} from '../../../constants';
 
 describe('<DiscountApplicationStrategyCard />', () => {
   const mockProps = {
     strategy: mockField(DiscountApplicationStrategy.First),
+    discountClass: DiscountClass.Order,
   };
 
   afterEach(() => {
@@ -37,4 +39,105 @@ describe('<DiscountApplicationStrategyCard />', () => {
       DiscountApplicationStrategy.Maximum,
     );
   });
+
+  it('renders first strategy if discountClass is Order', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard
+        {...mockProps}
+        discountClass={DiscountClass.Order}
+      />,
+    );
+
+    expect(methodCard).toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.First,
+        }),
+      ]),
+    });
+  });
+
+  it('renders first strategy if discountClass is Product', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard
+        {...mockProps}
+        discountClass={DiscountClass.Product}
+      />,
+    );
+
+    expect(methodCard).toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.First,
+        }),
+      ]),
+    });
+  });
+
+  it('does not render all strategy if discountClass is not Product', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard
+        {...mockProps}
+        discountClass={DiscountClass.Order}
+      />,
+    );
+
+    expect(methodCard).not.toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.All,
+        }),
+      ]),
+    });
+  });
+
+  it('renders all strategy if discountClass is Product', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard
+        {...mockProps}
+        discountClass={DiscountClass.Product}
+      />,
+    );
+
+    expect(methodCard).toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.All,
+        }),
+      ]),
+    });
+  });
+
+  it('only renders all strategy if discountClass is Shipping', () => {
+    const methodCard = mountWithApp(
+      <DiscountApplicationStrategyCard
+        {...mockProps}
+        discountClass={DiscountClass.Shipping}
+      />,
+    );
+
+    expect(methodCard).toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.All,
+        }),
+      ]),
+    });
+
+    expect(methodCard).not.toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.First,
+        }),
+      ]),
+    });
+
+    expect(methodCard).not.toContainReactComponent(ChoiceList, {
+      choices: expect.arrayContaining([
+        expect.objectContaining({
+          value: DiscountApplicationStrategy.Maximum,
+        }),
+      ]),
+    });
+  });
 });
diff --git a/...DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.stories.tsx b/...DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {Provider} from '../../foundation/Provider';
 import DiscountApplicationStrategyCard from './DiscountApplicationStrategyCardPattern';
+import {DiscountClass} from '../../../constants';
 
 // eslint-disable-next-line import/no-default-export, import/no-anonymous-default-export
 export default {
@@ -10,10 +11,20 @@ export default {
   },
 };
 
-const ApplicationStrategyCardPattern = () => (
+export const ApplicationStrategyCardOrderPattern = () => (
   <Provider>
-    <DiscountApplicationStrategyCard />
+    <DiscountApplicationStrategyCard discountClass={DiscountClass.Order} />
   </Provider>
 );
 
-export {ApplicationStrategyCardPattern};
+export const ApplicationStrategyCardProductPattern = () => (
+  <Provider>
+    <DiscountApplicationStrategyCard discountClass={DiscountClass.Product} />
+  </Provider>
+);
+
+export const ApplicationStrategyCardShippingPattern = () => (
+  <Provider>
+    <DiscountApplicationStrategyCard discountClass={DiscountClass.Shipping} />
+  </Provider>
+);
diff --git a/...atterns/DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.tsx b/...atterns/DiscountApplicationStrategyCardPattern/DiscountApplicationStrategyCardPattern.tsx
@@ -3,8 +3,15 @@ import React, {useState} from 'react';
 import {Page} from '@shopify/polaris';
 import {DiscountApplicationStrategyCard} from '../../../components/DiscountApplicationStrategyCard';
 import {DiscountApplicationStrategy} from '../../../types';
+import {DiscountClass} from '../../../constants';
 
-export default function MethodCardPattern() {
+interface Props {
+  discountClass: DiscountClass;
+}
+
+export default function DiscountApplicationStrategyCardPattern({
+  discountClass,
+}: Props) {
   const [strategy, setStrategy] = useState<DiscountApplicationStrategy>(
     DiscountApplicationStrategy.First,
   );
@@ -15,6 +22,7 @@ export default function MethodCardPattern() {
           value: strategy,
           onChange: setStrategy,
         }}
+        discountClass={discountClass}
       />
     </Page>
   );