@magento/venia-ui 9.2.0 → 9.3.0-alpha.1

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftCardSection.ee.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#GiftCardSection EE renders 1`] = `
+<mock-Section
+  id="gift_card"
+  title="Apply Gift Card"
+>
+  <require('../GiftCards')
+    setIsCartUpdating={false}
+  />
+</mock-Section>
+`;

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftOptionsSection.ce.spec.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#GiftOptionsSection CE renders 1`] = `null`;

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/giftOptionsSection.ee.spec.js.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#GiftOptionsSection EE renders loading 1`] = `null`;
+
+exports[`#GiftOptionsSection EE renders not loading and not visible 1`] = `null`;
+
+exports[`#GiftOptionsSection EE renders not loading and visible 1`] = `
+<mock-Section
+  id="gift_options"
+  title="See Gift Options"
+>
+  <require('./GiftOptions')
+    giftOptionsConfigData={Object {}}
+  />
+</mock-Section>
+`;

package/lib/components/CartPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap

@@ -68,38 +68,7 @@ exports[`it renders Venia price adjustments 1`] = `
       </div>
     </div>
     <GiftCardSection />
-    <div>
-      <button
-        onClick={[Function]}
-        type="button"
-      >
-        <span>
-          <span>
-            See Gift Options
-          </span>
-          <span>
-            <svg
-              fill="none"
-              height={24}
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              viewBox="0 0 24 24"
-              width={24}
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <polyline
-                points="6 9 12 15 18 9"
-              />
-            </svg>
-          </span>
-        </span>
-      </button>
-      <div>
-        <require('./GiftOptions') />
-      </div>
-    </div>
+    <GiftOptionsSection />
   </div>
 </div>
 `;

package/lib/components/CartPage/PriceAdjustments/__tests__/giftCardSection.ce.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftCardSection from '../giftCardSection.ce';
+
+const Component = () => {
+    return <GiftCardSection />;
+};
+
+describe('#GiftCardSection CE', () => {
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toBe(null);
+    });
+});

package/lib/components/CartPage/PriceAdjustments/__tests__/giftCardSection.ee.spec.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftCardSection from '../giftCardSection.ee';
+
+jest.mock('../../../Accordion', () => ({
+    Section: ({ children, ...rest }) => (
+        <mock-Section {...rest}>{children}</mock-Section>
+    )
+}));
+jest.mock('../../GiftCards', () => props => <mock-GiftCards {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <GiftCardSection {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        setIsCartUpdating: false
+    };
+};
+
+describe('#GiftCardSection EE', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceAdjustments/__tests__/giftOptionsSection.ce.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftOptionsSection from '../giftOptionsSection.ce';
+
+const Component = () => {
+    return <GiftOptionsSection />;
+};
+
+describe('#GiftOptionsSection CE', () => {
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceAdjustments/__tests__/giftOptionsSection.ee.spec.js

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useGiftOptionsSection } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useGiftOptionsSection';
+
+import GiftOptionsSection from '../giftOptionsSection.ee';
+
+jest.mock(
+    '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useGiftOptionsSection'
+);
+jest.mock('../../../Accordion', () => ({
+    Section: ({ children, ...rest }) => (
+        <mock-Section {...rest}>{children}</mock-Section>
+    )
+}));
+
+const Component = () => {
+    return <GiftOptionsSection />;
+};
+
+describe('#GiftOptionsSection EE', () => {
+    it('renders loading', () => {
+        useGiftOptionsSection.mockReturnValueOnce({
+            giftOptionsConfigData: {},
+            isLoading: true,
+            isVisible: false
+        });
+
+        const tree = createTestInstance(<Component />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders not loading and not visible', () => {
+        useGiftOptionsSection.mockReturnValueOnce({
+            giftOptionsConfigData: {},
+            isLoading: false,
+            isVisible: false
+        });
+
+        const tree = createTestInstance(<Component />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders not loading and visible', () => {
+        useGiftOptionsSection.mockReturnValueOnce({
+            giftOptionsConfigData: {},
+            isLoading: false,
+            isVisible: true
+        });
+
+        const tree = createTestInstance(<Component />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceAdjustments/__tests__/priceAdjustments.spec.js

@@ -6,7 +6,7 @@ import PriceAdjustments from '../priceAdjustments';
 jest.mock('../ShippingMethods', () => 'ShippingMethods');
 jest.mock('../CouponCode', () => 'CouponCode');
 jest.mock('../giftCardSection', () => 'GiftCardSection');
-jest.mock('../GiftOptions', () => 'GiftOptions');
+jest.mock('../giftOptionsSection', () => 'GiftOptionsSection');
 
 test('it renders Venia price adjustments', () => {
     // Act.

package/lib/components/CartPage/PriceAdjustments/giftOptionsSection.ce.js

@@ -0,0 +1,7 @@
+/**
+ * Gift Options support is an EE-only feature for now.
+ * Here in CE, don't render the Accordion section at all.
+ */
+export default () => {
+    return null;
+};

package/lib/components/CartPage/PriceAdjustments/giftOptionsSection.ee.js

@@ -0,0 +1,38 @@
+import React, { Suspense } from 'react';
+import { useIntl } from 'react-intl';
+
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import { Section } from '@magento/venia-ui/lib/components/Accordion';
+import { useGiftOptionsSection } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/useGiftOptionsSection';
+
+const GiftOptions = React.lazy(() => import('./GiftOptions'));
+
+const GiftOptionsSection = () => {
+    const { formatMessage } = useIntl();
+    const {
+        giftOptionsConfigData,
+        isLoading,
+        isVisible
+    } = useGiftOptionsSection();
+
+    if (isLoading || !isVisible) {
+        return null;
+    }
+
+    return (
+        <Section
+            id={'gift_options'}
+            data-cy="PriceAdjustments-giftOptionsSection"
+            title={formatMessage({
+                id: 'priceAdjustments.giftOptions',
+                defaultMessage: 'See Gift Options'
+            })}
+        >
+            <Suspense fallback={<LoadingIndicator />}>
+                <GiftOptions giftOptionsConfigData={giftOptionsConfigData} />
+            </Suspense>
+        </Section>
+    );
+};
+
+export default GiftOptionsSection;

package/lib/components/CartPage/PriceAdjustments/priceAdjustments.js

@@ -6,11 +6,10 @@ import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator'
 import { useStyle } from '../../../classify';
 import { Accordion, Section } from '../../Accordion';
 import GiftCardSection from './giftCardSection';
-
+import GiftOptionsSection from './giftOptionsSection';
 import defaultClasses from './priceAdjustments.module.css';
 
 const CouponCode = React.lazy(() => import('./CouponCode'));
-const GiftOptions = React.lazy(() => import('./GiftOptions'));
 const ShippingMethods = React.lazy(() => import('./ShippingMethods'));
 
 /**
@@ -65,18 +64,7 @@ const PriceAdjustments = props => {
                     </Suspense>
                 </Section>
                 <GiftCardSection setIsCartUpdating={setIsCartUpdating} />
-                <Section
-                    id={'gift_options'}
-                    data-cy="PriceAdjustments-giftOptionsSection"
-                    title={formatMessage({
-                        id: 'priceAdjustments.giftOptions',
-                        defaultMessage: 'See Gift Options'
-                    })}
-                >
-                    <Suspense fallback={<LoadingIndicator />}>
-                        <GiftOptions />
-                    </Suspense>
-                </Section>
+                <GiftOptionsSection />
             </Accordion>
         </div>
     );