Merge branch 'develop' into feature/issue-3192

docker/run-docker

@@ -49,7 +49,7 @@ create_certificate () {
   # make docker/certs folder if one does not already exist
   [ -d ./docker/certs ] || mkdir ./docker/certs
   # install devcert dependency
-  cd ./docker && yarn install && cd -
+  cd ./docker && yarn install --frozen-lockfile && cd -
   node ./docker/makeHostAndCert "$DEV_SERVER_HOST" || STATUS=$?
 }
 

jest.config.js

@@ -229,7 +229,13 @@ const jestConfig = {
         configureProject('babel-preset-peregrine', 'Babel Preset', () => ({
             testEnvironment: 'node'
         })),
-        configureProject('pagebuilder', 'Pagebuilder', testReactComponents),
+        configureProject('pagebuilder', 'Pagebuilder', inPackage => ({
+            ...testReactComponents(inPackage),
+            setupFiles: [
+                // Shim DOM properties not supported by jsdom
+                inPackage('scripts/shim.js')
+            ]
+        })),
         configureProject('peregrine', 'Peregrine', inPackage => ({
             // Make sure we can test extension files.
             moduleFileExtensions: [

packages/extensions/venia-sample-payments-checkmo/intercept.js

@@ -12,12 +12,30 @@ module.exports = targets => {
         };
     });
 
-    const { checkoutPagePaymentTypes } = targets.of('@magento/venia-ui');
+    const {
+        checkoutPagePaymentTypes,
+        editablePaymentTypes,
+        summaryPagePaymentTypes
+    } = targets.of('@magento/venia-ui');
     checkoutPagePaymentTypes.tap(payments =>
         payments.add({
             paymentCode: 'checkmo',
             importPath:
                 '@magento/venia-sample-payments-checkmo/src/components/checkmo.js'
         })
     );
+    editablePaymentTypes.tap(editablePaymentTypes => {
+        editablePaymentTypes.add({
+            paymentCode: 'checkmo',
+            importPath:
+                '@magento/venia-sample-payments-checkmo/src/components/edit.js'
+        });
+    });
+    summaryPagePaymentTypes.tap(paymentSummaries =>
+        paymentSummaries.add({
+            paymentCode: 'checkmo',
+            importPath:
+                '@magento/venia-sample-payments-checkmo/src/components/summary.js'
+        })
+    );
 };

packages/extensions/venia-sample-payments-checkmo/src/components/__tests__/__snapshots__/edit.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <mock-CheckMo
+    onPaymentError={[MockFunction onPaymentError]}
+    onPaymentReady={[MockFunction onPaymentReady]}
+    onPaymentSuccess={[MockFunction onPaymentSuccess]}
+    resetShouldSubmit={[MockFunction resetShouldSubmit]}
+    shouldSubmit={false}
+  />
+</div>
+`;

packages/extensions/venia-sample-payments-checkmo/src/components/__tests__/__snapshots__/summary.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="root"
+>
+  <div
+    className="heading_container"
+  >
+    <h5
+      className="heading"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Payment Information"
+        id="checkoutPage.paymentInformation"
+      />
+    </h5>
+    <mock-LinkButton
+      className="edit_button"
+      onClick={[MockFunction onEdit]}
+      type="button"
+    >
+      <mock-Icon
+        classes={
+          Object {
+            "icon": "edit_icon",
+          }
+        }
+        size={16}
+        src={[Function]}
+      />
+      <span
+        className="edit_text"
+      >
+        <div
+          componentName="Formatted Message Component"
+          defaultMessage="Edit"
+          id="global.editButton"
+        />
+      </span>
+    </mock-LinkButton>
+  </div>
+  <div
+    className="checkmo_details_container"
+  >
+    <span
+      className="payment_type"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Check / Money Order"
+        id="checkMo.paymentType"
+      />
+    </span>
+  </div>
+</div>
+`;

packages/extensions/venia-sample-payments-checkmo/src/components/__tests__/edit.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import Edit from '../edit';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../checkmo', () => props => <mock-CheckMo {...props} />);
+
+const mocks = {
+    onPaymentReady: jest.fn().mockName('onPaymentReady'),
+    onPaymentSuccess: jest.fn().mockName('onPaymentSuccess'),
+    onPaymentError: jest.fn().mockName('onPaymentError'),
+    resetShouldSubmit: jest.fn().mockName('resetShouldSubmit')
+};
+
+test('renders correctly', () => {
+    // Arrange.
+    const props = {
+        ...mocks,
+        shouldSubmit: false
+    };
+
+    // Act.
+    const tree = createTestInstance(<Edit {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/extensions/venia-sample-payments-checkmo/src/components/__tests__/summary.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import Summary from '../summary';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('react-intl', () => ({
+    FormattedMessage: props => (
+        <div componentName="Formatted Message Component" {...props} />
+    )
+}));
+jest.mock('@magento/venia-ui/lib/components/LinkButton', () => props => (
+    <mock-LinkButton {...props} />
+));
+jest.mock('@magento/venia-ui/lib/components/Icon', () => props => (
+    <mock-Icon {...props} />
+));
+
+test('renders correctly', () => {
+    // Arrange.
+    const props = {
+        onEdit: jest.fn().mockName('onEdit')
+    };
+
+    // Act.
+    const tree = createTestInstance(<Summary {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/extensions/venia-sample-payments-checkmo/src/components/checkmo.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mergeClasses } from '@magento/venia-ui/lib/classify';
+import { useStyle } from '@magento/venia-ui/lib/classify';
 import { shape, string, bool, func } from 'prop-types';
 import BillingAddress from '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress';
 
@@ -19,9 +19,8 @@ import { FormattedMessage } from 'react-intl';
  * @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
  */
 const CheckMo = props => {
-    const classes = mergeClasses(defaultClasses, props.classes);
+    const classes = useStyle(defaultClasses, props.classes);
 
-    const { resetShouldSubmit, onPaymentSuccess, onPaymentError } = props;
     const addressTemplate = str => (
         <span key={str} className={classes.addressLine}>
             {str} <br />
@@ -33,11 +32,7 @@ const CheckMo = props => {
         mailingAddress,
         onBillingAddressChangedError,
         onBillingAddressChangedSuccess
-    } = useCheckmo({
-        resetShouldSubmit,
-        onPaymentSuccess,
-        onPaymentError
-    });
+    } = useCheckmo(props);
 
     const formatAddress = mailingAddress
         ? mailingAddress.split('\n').map(str => addressTemplate(str))
@@ -70,6 +65,7 @@ const CheckMo = props => {
                 />
             </p>
             <BillingAddress
+                resetShouldSubmit={props.resetShouldSubmit}
                 shouldSubmit={props.shouldSubmit}
                 onBillingAddressChangedError={onBillingAddressChangedError}
                 onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}

packages/extensions/venia-sample-payments-checkmo/src/components/edit.css

@@ -0,0 +1,4 @@
+.root {
+    overflow: auto;
+    padding: 0.5rem 1rem;
+}

packages/extensions/venia-sample-payments-checkmo/src/components/edit.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { shape, string, bool, func } from 'prop-types';
+
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+
+import CheckMo from './checkmo';
+import defaultClasses from './edit.css';
+
+/**
+ * The edit view for the Checkmo payment method.
+ */
+const EditCheckMo = props => {
+    const {
+        onPaymentReady,
+        onPaymentSuccess,
+        onPaymentError,
+        resetShouldSubmit,
+        shouldSubmit
+    } = props;
+
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <CheckMo
+                onPaymentReady={onPaymentReady}
+                onPaymentSuccess={onPaymentSuccess}
+                onPaymentError={onPaymentError}
+                resetShouldSubmit={resetShouldSubmit}
+                shouldSubmit={shouldSubmit}
+            />
+        </div>
+    );
+};
+
+export default EditCheckMo;
+
+EditCheckMo.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    onPaymentReady: func.isRequired,
+    onPaymentSuccess: func.isRequired,
+    onPaymentError: func.isRequired,
+    resetShouldSubmit: func.isRequired,
+    shouldSubmit: bool
+};

packages/extensions/venia-sample-payments-checkmo/src/components/summary.css

@@ -0,0 +1,42 @@
+.root {
+    display: grid;
+    gap: 1.125rem;
+    padding: 2rem;
+}
+
+.heading_container {
+    display: grid;
+    grid-auto-flow: column;
+    grid-template-columns: 1fr;
+}
+
+.heading {
+    font-weight: 600;
+}
+
+.edit_button {
+    color: rgb(var(--venia-brand-color-1-700));
+    padding: 1rem;
+    margin: -1rem;
+}
+
+.edit_icon {
+    stroke: rgb(var(--venia-brand-color-1-700));
+}
+
+.edit_text {
+}
+
+.checkmo_details_container {
+    display: grid;
+    gap: 0.5rem;
+}
+
+.payment_type {
+}
+
+@media (max-width: 960px) {
+    .edit_text {
+        display: none;
+    }
+}

packages/extensions/venia-sample-payments-checkmo/src/components/summary.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { func, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Edit2 as EditIcon } from 'react-feather';
+
+import { mergeClasses } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+
+import defaultClasses from './summary.css';
+
+/**
+ * The Summary component of the Check / Money Order payment method extension.
+ */
+const Summary = props => {
+    const { onEdit } = props;
+
+    const classes = mergeClasses(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.heading_container}>
+                <h5 className={classes.heading}>
+                    <FormattedMessage
+                        id={'checkoutPage.paymentInformation'}
+                        defaultMessage={'Payment Information'}
+                    />
+                </h5>
+                <LinkButton
+                    className={classes.edit_button}
+                    onClick={onEdit}
+                    type="button"
+                >
+                    <Icon
+                        size={16}
+                        src={EditIcon}
+                        classes={{ icon: classes.edit_icon }}
+                    />
+                    <span className={classes.edit_text}>
+                        <FormattedMessage
+                            id={'global.editButton'}
+                            defaultMessage={'Edit'}
+                        />
+                    </span>
+                </LinkButton>
+            </div>
+            <div className={classes.checkmo_details_container}>
+                <span className={classes.payment_type}>
+                    <FormattedMessage
+                        id={'checkMo.paymentType'}
+                        defaultMessage={'Check / Money Order'}
+                    />
+                </span>
+            </div>
+        </div>
+    );
+};
+
+export default Summary;
+
+Summary.propTypes = {
+    classes: shape({
+        root: string,
+        checkmo_details_container: string,
+        edit_button: string,
+        edit_icon: string,
+        edit_text: string,
+        heading_container: string,
+        heading: string,
+        payment_type: string
+    }),
+    onEdit: func
+};