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

package/lib/components/CheckoutPage/checkoutPage.js

@@ -27,6 +27,7 @@ import ShippingMethod from './ShippingMethod';
 import ShippingInformation from './ShippingInformation';
 import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
+import GoogleReCaptcha from '../GoogleReCaptcha';
 
 import defaultClasses from './checkoutPage.module.css';
 import ScrollAnchor from '../ScrollAnchor/scrollAnchor';
@@ -60,6 +61,7 @@ const CheckoutPage = props => {
         orderDetailsLoading,
         orderNumber,
         placeOrderLoading,
+        placeOrderButtonClicked,
         setCheckoutStep,
         setGuestSignInUsername,
         setIsUpdating,
@@ -73,6 +75,7 @@ const CheckoutPage = props => {
         resetReviewOrderButtonClicked,
         handleReviewOrder,
         reviewOrderButtonClicked,
+        recaptchaWidgetProps,
         toggleAddressBookContent,
         toggleSignInContent
     } = talonProps;
@@ -149,7 +152,9 @@ const CheckoutPage = props => {
             </div>
         );
     } else {
-        const signInContainerElement = isGuestCheckout ? (
+        const signInContainerVisible =
+            isGuestCheckout && checkoutStep !== CHECKOUT_STEP.REVIEW;
+        const signInContainerElement = signInContainerVisible ? (
             <div className={classes.signInContainer}>
                 <span className={classes.signInLabel}>
                     <FormattedMessage
@@ -268,7 +273,10 @@ const CheckoutPage = props => {
                     className={classes.place_order_button}
                     data-cy="CheckoutPage-placeOrderButton"
                     disabled={
-                        isUpdating || placeOrderLoading || orderDetailsLoading
+                        isUpdating ||
+                        placeOrderLoading ||
+                        orderDetailsLoading ||
+                        placeOrderButtonClicked
                     }
                 >
                     <FormattedMessage
@@ -284,7 +292,17 @@ const CheckoutPage = props => {
         );
 
         const orderSummary = shouldRenderPriceSummary ? (
-            <div className={classes.summaryContainer}>
+            <div
+                className={
+                    classes.summaryContainer +
+                    (signInContainerVisible
+                        ? ' ' + classes.signInContainerVisible
+                        : '') +
+                    (recaptchaWidgetProps.shouldRender
+                        ? ' ' + classes.reCaptchaMargin
+                        : '')
+                }
+            >
                 <OrderSummary isUpdating={isUpdating} />
             </div>
         ) : null;
@@ -377,6 +395,7 @@ const CheckoutPage = props => {
                 {itemsReview}
                 {orderSummary}
                 {placeOrderButton}
+                <GoogleReCaptcha {...recaptchaWidgetProps} />
             </div>
         );
     }
@@ -438,6 +457,8 @@ CheckoutPage.propTypes = {
         summaryContainer: string,
         formErrors: string,
         review_order_button: string,
-        place_order_button: string
+        place_order_button: string,
+        signInContainerVisible: string,
+        reCaptchaMargin: string
     })
 };

package/lib/components/CheckoutPage/checkoutPage.module.css

@@ -18,6 +18,7 @@
 .heading_container {
     display: grid;
     row-gap: 1rem;
+    grid-column: 1 / span 1;
 }
 
 .heading {
@@ -46,6 +47,7 @@
 }
 
 .signInContainer {
+    grid-row-start: 1;
     align-items: center;
     border: 2px solid rgb(var(--venia-global-color-gray-400));
     border-radius: 0.375rem;
@@ -113,6 +115,12 @@
         top: 5.5rem;
         height: min-content;
     }
+    .reCaptchaMargin {
+        margin-bottom: 5.5rem;
+    }
+    .signInContainerVisible {
+        grid-row: 1 / span 3;
+    }
 }
 
 .review_order_button {
@@ -144,7 +152,6 @@
     }
 
     .signInContainer {
-        grid-row-start: 1;
         grid-auto-flow: row;
         justify-items: center;
         margin-bottom: 1rem;

package/lib/components/CmsDynamicBlock/__tests__/__snapshots__/cmsDynamicBlock.ce.spec.js.snap

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

package/lib/components/CmsDynamicBlock/__tests__/__snapshots__/cmsDynamicBlock.ee.spec.js.snap

@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type catalogrule 1`] = `
+<mock-DynamicBlock
+  content={
+    Object {
+      "html": "<div>Item 1</div>",
+    }
+  }
+  index={0}
+  uid="itemUid1"
+/>
+`;
+
+exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type fixed 1`] = `
+<mock-DynamicBlock
+  content={
+    Object {
+      "html": "<div>Item 1</div>",
+    }
+  }
+  index={0}
+  uid="itemUid1"
+/>
+`;
+
+exports[`#CmsDynamicBlock EE renders DynamicBlock when data with type salesrule 1`] = `
+<mock-DynamicBlock
+  content={
+    Object {
+      "html": "<div>Item 1</div>",
+    }
+  }
+  index={0}
+  uid="itemUid1"
+/>
+`;
+
+exports[`#CmsDynamicBlock EE renders DynamicBlock when data with unknown type 1`] = `
+<mock-DynamicBlock
+  content={
+    Object {
+      "html": "<div>Item 1</div>",
+    }
+  }
+  index={0}
+  uid="itemUid1"
+/>
+`;
+
+exports[`#CmsDynamicBlock EE renders ErrorView when error 1`] = `
+<mock-ErrorView
+  message="Error"
+/>
+`;
+
+exports[`#CmsDynamicBlock EE renders null when items are empty 1`] = `null`;
+
+exports[`#CmsDynamicBlock EE renders null when loading 1`] = `null`;
+
+exports[`#CmsDynamicBlock EE renders null when no data 1`] = `null`;

package/lib/components/CmsDynamicBlock/__tests__/__snapshots__/dynamicBlock.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`#DynamicBlock renders 1`] = `
+<mock-RichContent
+  html="Hello World"
+/>
+`;

package/lib/components/CmsDynamicBlock/__tests__/cmsDynamicBlock.ce.spec.js

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

package/lib/components/CmsDynamicBlock/__tests__/cmsDynamicBlock.ee.spec.js

@@ -0,0 +1,211 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+import { useCmsDynamicBlock } from '@magento/peregrine/lib/talons/CmsDynamicBlock/useCmsDynamicBlock';
+
+import {
+    DISPLAY_MODE_FIXED_TYPE,
+    DISPLAY_MODE_SALES_RULE_TYPE,
+    DISPLAY_MODE_CATALOG_RULE_TYPE
+} from '../constants';
+import CmsDynamicBlock from '../cmsDynamicBlock.ee';
+
+const mockUids = 'uids';
+
+jest.mock('@magento/peregrine/lib/talons/CmsDynamicBlock/useCmsDynamicBlock');
+jest.mock('@magento/venia-ui/lib/components/ErrorView', () => props => (
+    <mock-ErrorView {...props} />
+));
+jest.mock('../dynamicBlock', () => props => <mock-DynamicBlock {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <CmsDynamicBlock {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        displayMode: DISPLAY_MODE_FIXED_TYPE,
+        uids: mockUids
+    };
+};
+
+const givenCatalogRuleType = () => {
+    inputProps = {
+        displayMode: DISPLAY_MODE_CATALOG_RULE_TYPE,
+        uids: mockUids
+    };
+};
+
+const givenSalesRuleType = () => {
+    inputProps = {
+        displayMode: DISPLAY_MODE_SALES_RULE_TYPE,
+        uids: mockUids
+    };
+};
+
+const givenUnknownType = () => {
+    inputProps = {
+        displayMode: 'test',
+        uids: mockUids
+    };
+};
+
+describe('#CmsDynamicBlock EE', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders null when loading', () => {
+        useCmsDynamicBlock.mockReturnValueOnce({
+            data: null,
+            error: undefined,
+            loading: true
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders ErrorView when error', () => {
+        useCmsDynamicBlock.mockReturnValueOnce({
+            data: null,
+            error: {
+                message: 'Error'
+            },
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders null when no data', () => {
+        useCmsDynamicBlock.mockReturnValueOnce({
+            data: null,
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders null when items are empty', () => {
+        useCmsDynamicBlock.mockReturnValue({
+            data: {
+                dynamicBlocks: {
+                    items: []
+                }
+            },
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders DynamicBlock when data with type fixed', () => {
+        useCmsDynamicBlock.mockReturnValue({
+            data: {
+                dynamicBlocks: {
+                    items: [
+                        {
+                            uid: 'itemUid1',
+                            content: {
+                                html: '<div>Item 1</div>'
+                            }
+                        }
+                    ]
+                }
+            },
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders DynamicBlock when data with type catalogrule', () => {
+        givenCatalogRuleType();
+
+        useCmsDynamicBlock.mockReturnValue({
+            data: {
+                dynamicBlocks: {
+                    items: [
+                        {
+                            uid: 'itemUid1',
+                            content: {
+                                html: '<div>Item 1</div>'
+                            }
+                        }
+                    ]
+                }
+            },
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders DynamicBlock when data with type salesrule', () => {
+        givenSalesRuleType();
+
+        useCmsDynamicBlock.mockReturnValue({
+            data: {
+                dynamicBlocks: {
+                    items: [
+                        {
+                            uid: 'itemUid1',
+                            content: {
+                                html: '<div>Item 1</div>'
+                            }
+                        }
+                    ]
+                }
+            },
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders DynamicBlock when data with unknown type', () => {
+        givenUnknownType();
+
+        useCmsDynamicBlock.mockReturnValue({
+            data: {
+                dynamicBlocks: {
+                    items: [
+                        {
+                            uid: 'itemUid1',
+                            content: {
+                                html: '<div>Item 1</div>'
+                            }
+                        }
+                    ]
+                }
+            },
+            error: undefined,
+            loading: false
+        });
+
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CmsDynamicBlock/__tests__/constants.spec.js

@@ -0,0 +1,37 @@
+import {
+    DISPLAY_MODE_FIXED_TYPE,
+    DYNAMIC_BLOCK_FIXED_TYPE,
+    DISPLAY_MODE_SALES_RULE_TYPE,
+    DYNAMIC_BLOCK_SALES_RULE_TYPE,
+    DISPLAY_MODE_CATALOG_RULE_TYPE,
+    DYNAMIC_BLOCK_CATALOG_RULE_TYPE
+} from '../constants';
+
+describe('#CmsDynamicBlock Constants', () => {
+    it('returns DISPLAY_MODE_FIXED_TYPE value', () => {
+        expect(DISPLAY_MODE_FIXED_TYPE).toMatchInlineSnapshot(`"fixed"`);
+    });
+    it('returns DYNAMIC_BLOCK_FIXED_TYPE value', () => {
+        expect(DYNAMIC_BLOCK_FIXED_TYPE).toMatchInlineSnapshot(`"SPECIFIED"`);
+    });
+    it('returns DISPLAY_MODE_SALES_RULE_TYPE value', () => {
+        expect(DISPLAY_MODE_SALES_RULE_TYPE).toMatchInlineSnapshot(
+            `"salesrule"`
+        );
+    });
+    it('returns DYNAMIC_BLOCK_SALES_RULE_TYPE value', () => {
+        expect(DYNAMIC_BLOCK_SALES_RULE_TYPE).toMatchInlineSnapshot(
+            `"CART_PRICE_RULE_RELATED"`
+        );
+    });
+    it('returns DISPLAY_MODE_CATALOG_RULE_TYPE value', () => {
+        expect(DISPLAY_MODE_CATALOG_RULE_TYPE).toMatchInlineSnapshot(
+            `"catalogrule"`
+        );
+    });
+    it('returns DYNAMIC_BLOCK_CATALOG_RULE_TYPE value', () => {
+        expect(DYNAMIC_BLOCK_CATALOG_RULE_TYPE).toMatchInlineSnapshot(
+            `"CATALOG_PRICE_RULE_RELATED"`
+        );
+    });
+});

package/lib/components/CmsDynamicBlock/__tests__/dynamicBlock.spec.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import DynamicBlock from '../dynamicBlock';
+
+jest.mock('../../RichContent', () => props => <mock-RichContent {...props} />);
+
+let inputProps = {};
+
+const Component = () => {
+    return <DynamicBlock {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        content: {
+            html: 'Hello World'
+        }
+    };
+};
+
+describe('#DynamicBlock', () => {
+    beforeEach(() => {
+        givenDefaultValues();
+    });
+
+    it('renders', () => {
+        const component = createTestInstance(<Component />);
+
+        expect(component.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CmsDynamicBlock/cmsDynamicBlock.ce.js

@@ -0,0 +1,5 @@
+/**
+ * Dynamic Block is an EE-only feature for now.
+ * Here in CE, don't render the component at all.
+ */
+export default () => null;

package/lib/components/CmsDynamicBlock/cmsDynamicBlock.ee.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { array, oneOf, oneOfType, string } from 'prop-types';
+
+import { useCmsDynamicBlock } from '@magento/peregrine/lib/talons/CmsDynamicBlock/useCmsDynamicBlock';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+
+import {
+    DISPLAY_MODE_FIXED_TYPE,
+    DYNAMIC_BLOCK_FIXED_TYPE,
+    DISPLAY_MODE_SALES_RULE_TYPE,
+    DYNAMIC_BLOCK_SALES_RULE_TYPE,
+    DISPLAY_MODE_CATALOG_RULE_TYPE,
+    DYNAMIC_BLOCK_CATALOG_RULE_TYPE
+} from './constants';
+import DynamicBlock from './dynamicBlock';
+
+const getDynamicBlockType = displayMode => {
+    if (displayMode === DISPLAY_MODE_FIXED_TYPE) {
+        return DYNAMIC_BLOCK_FIXED_TYPE;
+    } else if (displayMode === DISPLAY_MODE_SALES_RULE_TYPE) {
+        return DYNAMIC_BLOCK_SALES_RULE_TYPE;
+    } else if (displayMode === DISPLAY_MODE_CATALOG_RULE_TYPE) {
+        return DYNAMIC_BLOCK_CATALOG_RULE_TYPE;
+    }
+
+    return DYNAMIC_BLOCK_FIXED_TYPE;
+};
+
+const CmsDynamicBlockGroup = props => {
+    const { displayMode } = props;
+    const type = getDynamicBlockType(displayMode);
+
+    const { loading, error, data } = useCmsDynamicBlock({
+        ...props,
+        type
+    });
+
+    if (!data) {
+        if (loading) {
+            return null;
+        }
+
+        if (error) {
+            return <ErrorView message={error.message} />;
+        }
+    }
+
+    const { items } = data?.dynamicBlocks || {};
+
+    if (!Array.isArray(items) || !items.length) {
+        return null;
+    }
+
+    return items.map((item, index) => (
+        <DynamicBlock key={item.uid} index={index} {...item} />
+    ));
+};
+
+CmsDynamicBlockGroup.defaultProps = {
+    displayMode: 'fixed'
+};
+
+CmsDynamicBlockGroup.propTypes = {
+    displayMode: oneOf([
+        DISPLAY_MODE_FIXED_TYPE,
+        DISPLAY_MODE_SALES_RULE_TYPE,
+        DISPLAY_MODE_CATALOG_RULE_TYPE
+    ]),
+    locations: array,
+    uids: oneOfType([string, array]).isRequired
+};
+
+export default CmsDynamicBlockGroup;

package/lib/components/CmsDynamicBlock/constants.js

@@ -0,0 +1,6 @@
+export const DISPLAY_MODE_FIXED_TYPE = `fixed`;
+export const DYNAMIC_BLOCK_FIXED_TYPE = `SPECIFIED`;
+export const DISPLAY_MODE_SALES_RULE_TYPE = `salesrule`;
+export const DYNAMIC_BLOCK_SALES_RULE_TYPE = `CART_PRICE_RULE_RELATED`;
+export const DISPLAY_MODE_CATALOG_RULE_TYPE = `catalogrule`;
+export const DYNAMIC_BLOCK_CATALOG_RULE_TYPE = `CATALOG_PRICE_RULE_RELATED`;

package/lib/components/CmsDynamicBlock/dynamicBlock.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+
+import RichContent from '../RichContent';
+
+/**
+ * CMS Dynamic Block component.
+ *
+ * @typedef DynamicBlock
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a CMS Dynamic Block.
+ */
+const DynamicBlock = ({ content }) => <RichContent html={content.html} />;
+
+/**
+ * Props for {@link DynamicBlock}
+ *
+ * @typedef props
+ *
+ * @property {Object} content Content object of the Dynamic Block
+ * @property {String} content.html Rich content of the Dynamic Block
+ */
+DynamicBlock.propTypes = {
+    content: shape({
+        html: string
+    })
+};
+
+export default DynamicBlock;

package/lib/components/CmsDynamicBlock/index.js

@@ -0,0 +1,2 @@
+export { default } from './cmsDynamicBlock';
+export * from './constants';

package/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -12,7 +12,12 @@ jest.mock('@apollo/client', () => ({
         {
             error: null
         }
-    ])
+    ]),
+    useQuery: jest.fn().mockImplementation(() => ({
+        data: {},
+        loading: false,
+        error: null
+    }))
 }));
 
 jest.mock('../../../util/formValidators');

package/lib/components/CreateAccount/createAccount.js

@@ -18,6 +18,7 @@ import TextInput from '../TextInput';
 import defaultClasses from './createAccount.module.css';
 import FormError from '../FormError';
 import Password from '../Password';
+import GoogleRecaptcha from '../GoogleReCaptcha';
 
 const CreateAccount = props => {
     const talonProps = useCreateAccount({
@@ -31,13 +32,15 @@ const CreateAccount = props => {
         handleCancel,
         handleSubmit,
         isDisabled,
-        initialValues
+        initialValues,
+        recaptchaWidgetProps
     } = talonProps;
     const { formatMessage } = useIntl();
     const classes = useStyle(defaultClasses, props.classes);
 
     const cancelButton = props.isCancelButtonHidden ? null : (
         <Button
+            data-cy="CreateAccount-cancelButton"
             className={classes.cancelButton}
             disabled={isDisabled}
             type="button"
@@ -68,11 +71,12 @@ const CreateAccount = props => {
 
     return (
         <Form
+            data-cy="CreateAccount-form"
             className={classes.root}
             initialValues={initialValues}
             onSubmit={handleSubmit}
         >
-            <h2 className={classes.title}>
+            <h2 data-cy="CreateAccount-title" className={classes.title}>
                 <FormattedMessage
                     id={'createAccount.createAccountText'}
                     defaultMessage={'Create an Account'}
@@ -155,6 +159,7 @@ const CreateAccount = props => {
                     })}
                 />
             </div>
+            <GoogleRecaptcha {...recaptchaWidgetProps} />
             <div className={classes.actions}>
                 {submitButton}
                 {cancelButton}

package/lib/components/Field/field.module.css

@@ -35,6 +35,12 @@
     -webkit-appearance: none;
 }
 
+.input:disabled {
+    background: rgb(var(--venia-global-color-gray-100));
+    border-color: rgb(var(--venia-global-color-gray-400));
+    color: rgb(var(--venia-global-color-gray-darker));
+}
+
 .input:focus {
     box-shadow: -6px 6px rgb(var(--venia-brand-color-1-100));
     outline: none;