Adding New Extension to Add Cash On Delivery Payment Feature at Checkout

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

@@ -0,0 +1,41 @@
+module.exports = targets => {
+    const { specialFeatures } = targets.of('@magento/pwa-buildpack');
+    specialFeatures.tap(flags => {
+        /**
+         *  Wee need to activate esModules, cssModules and GQL Queries to allow build pack to load our extension
+         * {@link https://magento.github.io/pwa-studio/pwa-buildpack/reference/configure-webpack/#special-flags}.
+         */
+        flags[targets.name] = {
+            esModules: true,
+            cssModules: true,
+            graphqlQueries: true
+        };
+    });
+
+    const {
+        checkoutPagePaymentTypes,
+        editablePaymentTypes,
+        summaryPagePaymentTypes
+    } = targets.of('@magento/venia-ui');
+    checkoutPagePaymentTypes.tap(payments =>
+        payments.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/cashondelivery.js'
+        })
+    );
+    editablePaymentTypes.tap(editablePaymentTypes => {
+        editablePaymentTypes.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/editcod.js'
+        });
+    });
+    summaryPagePaymentTypes.tap(paymentSummaries =>
+        paymentSummaries.add({
+            paymentCode: 'cashondelivery',
+            importPath:
+                '@magento/venia-sample-payments-cashondelivery/src/components/summarycod.js'
+        })
+    );
+};

packages/extensions/venia-sample-payments-cashondelivery/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@magento/venia-sample-payments-cashondelivery",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Provides demo Cash On Delivery Payment Method for PWA Studio.",
+  "main": "./intercept.js",
+  "scripts": {
+    "clean": " "
+  },
+  "repository": "github:magento/pwa-studio",
+  "license": "(OSL-3.0 OR AFL-3.0)",
+  "peerDependencies": {
+    "@magento/peregrine": "~14.4.1",
+    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/venia-ui": "~11.5.0",
+    "react": "~17.0.1",
+    "react-intl": "~5.20.0",
+    "react-router-dom": "~5.2.0"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept"
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render CashOnDelivery component correctly`] = `
+<div
+  className="cod_root"
+>
+  <mock-BillingAddress
+    onBillingAddressChangedError={[MockFunction]}
+    onBillingAddressChangedSuccess={[MockFunction]}
+  />
+</div>
+`;

packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/editcod.spec.js.snap

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

packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/__snapshots__/summarycod.spec.js.snap

@@ -0,0 +1,67 @@
+// 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={
+          Object {
+            "$$typeof": Symbol(react.forward_ref),
+            "propTypes": Object {
+              "color": [Function],
+              "size": [Function],
+            },
+            "render": [Function],
+          }
+        }
+      />
+      <span
+        className="edit_text"
+      >
+        <div
+          componentName="Formatted Message Component"
+          defaultMessage="Edit"
+          id="global.editButton"
+        />
+      </span>
+    </mock-LinkButton>
+  </div>
+  <div
+    className="cod_details_container"
+  >
+    <span
+      className="payment_type"
+    >
+      <div
+        componentName="Formatted Message Component"
+        defaultMessage="Cash On Delivery"
+        id="CashOnDelivery.paymentType"
+      />
+    </span>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { useCashondelivery } from '../../talons/useCashondelivery';
+
+import CashOnDelivery from '../cashondelivery';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../../talons/useCashondelivery', () => {
+    return {
+        useCashondelivery: jest.fn().mockReturnValue({
+            onBillingAddressChangedError: jest.fn(),
+            onBillingAddressChangedSuccess: jest.fn()
+        })
+    };
+});
+
+jest.mock(
+    '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress',
+    () => props => <mock-BillingAddress {...props} />
+);
+
+const useCashondeliveryReturnValue = {
+    onBillingAddressChangedError: jest.fn(),
+    onBillingAddressChangedSuccess: jest.fn()
+};
+
+test('Should render CashOnDelivery component correctly', () => {
+    useCashondelivery.mockReturnValueOnce({
+        ...useCashondeliveryReturnValue
+    });
+
+    const tree = createTestInstance(<CashOnDelivery />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/editcod.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import EditCod from '../editcod';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../cashondelivery', () => props => (
+    <mock-CashOnDelivery {...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(<EditCod {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/extensions/venia-sample-payments-cashondelivery/src/components/__tests__/summarycod.spec.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import SummaryCod from '../summarycod';
+
+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(<SummaryCod {...props} />);
+
+    // Assert.
+    expect(tree.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,46 @@
+import React from 'react';
+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';
+import { useCashondelivery } from '../talons/useCashondelivery';
+import defaultClasses from './cashondelivery.module.css';
+
+/**
+ * The CashOnDelivery component renders all information to handle cashondelivery payment.
+ *
+ * @param {Boolean} props.shouldSubmit boolean value which represents if a payment nonce request has been submitted
+ * @param {Function} props.onPaymentSuccess callback to invoke when the a payment nonce has been generated
+ * @param {Function} props.onPaymentReady callback to invoke when the component is ready
+ * @param {Function} props.onPaymentError callback to invoke when component throws an error
+ * @param {Function} props.resetShouldSubmit callback to reset the shouldSubmit flag
+ */
+const CashOnDelivery = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const {
+        onBillingAddressChangedError,
+        onBillingAddressChangedSuccess
+    } = useCashondelivery(props);
+
+    return (
+        <div className={classes.cod_root}>
+            <BillingAddress
+                resetShouldSubmit={props.resetShouldSubmit}
+                shouldSubmit={props.shouldSubmit}
+                onBillingAddressChangedError={onBillingAddressChangedError}
+                onBillingAddressChangedSuccess={onBillingAddressChangedSuccess}
+            />
+        </div>
+    );
+};
+
+CashOnDelivery.propTypes = {
+    classes: shape({ root: string }),
+    shouldSubmit: bool.isRequired,
+    onPaymentSuccess: func,
+    onPaymentReady: func,
+    onPaymentError: func,
+    resetShouldSubmit: func.isRequired
+};
+
+export default CashOnDelivery;

packages/extensions/venia-sample-payments-cashondelivery/src/components/cashondelivery.module.css

@@ -0,0 +1,3 @@
+.cod_root {
+    padding-top: 1.125rem;
+}

packages/extensions/venia-sample-payments-cashondelivery/src/components/editcod.js

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