[FEATURE] Implement Checkmo #2927

jest.config.js

@@ -275,6 +275,16 @@ const jestConfig = {
                 path.join('<rootDir>', 'scripts', 'jest-backend-setup.js')
             ]
         })),
+        configureProject(
+            'extensions/venia-sample-payments-checkmo',
+            'Check Money Order Payment',
+            inPackage => ({
+                ...testReactComponents(inPackage),
+                setupFiles: [
+                    path.join('<rootDir>', 'scripts', 'jest-backend-setup.js')
+                ]
+            })
+        ),
         // Test any root CI scripts as well, to ensure stable CI behavior.
         configureProject('scripts', 'CI Scripts', () => ({
             testEnvironment: 'node',

packages/extensions/venia-sample-payments-checkmo/README.md

@@ -0,0 +1,11 @@
+# venia-sample-payments-checkmo
+
+This package provides a sample static `Check MO (Money Order)` payment method for Venia.
+_Note: Currently GraphQL configuration for `payment/checkmo/payable_to and payment/checkmo/mailing_address` is not implemented, so we mock them._
+
+## Installation
+
+To install this extension, add it as a `devDependency` to your app.
+project:
+
+`yarn add -D @magento/venia-sample-payments-checkmo`

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

@@ -0,0 +1,23 @@
+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 } = targets.of('@magento/venia-ui');
+    checkoutPagePaymentTypes.tap(payments =>
+        payments.add({
+            paymentCode: 'checkmo',
+            importPath:
+                '@magento/venia-sample-payments-checkmo/src/components/checkmo.js'
+        })
+    );
+};

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

@@ -0,0 +1,27 @@
+{
+  "name": "@magento/venia-sample-payments-checkmo",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Provides demo Check Money Order 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": "~9.0.0",
+    "@magento/pwa-buildpack": "~8.0.1",
+    "@magento/venia-ui": "~6.0.1",
+    "react": "~17.0.1",
+    "react-intl": "~5.7.0",
+    "react-router-dom": "~5.1.0"
+  },
+  "pwa-studio": {
+    "targets": {
+      "intercept": "./intercept.js"
+    }
+  }
+}

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

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Should render with mailingAddress payable 1`] = `
+<div
+  className="root"
+>
+  <p
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Make Check payable to:"
+      id="checkMo.payableToTitle"
+    />
+  </p>
+  <p
+    className="formatAddress"
+  >
+    Test Inc
+  </p>
+  <p
+    className="mailingAddressTitle"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Send Check to:"
+      id="checkMo.mailingAddressTitle"
+    />
+  </p>
+  <p
+    className="formatAddress"
+  >
+    <span
+      className="addressLine"
+    >
+      Test Inc
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      c/o Payment
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      PO 12
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      Austin Texas
+
+      <br />
+    </span>
+  </p>
+  <p
+    className="note"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Note: Your order will be shipped once the Check/Money Order has been received and processed."
+      id="checkMo.note"
+    />
+  </p>
+  <mock-BillingAddress
+    onBillingAddressChangedError={[MockFunction]}
+    onBillingAddressChangedSuccess={[MockFunction]}
+  />
+</div>
+`;
+
+exports[`Should return correct shape 1`] = `
+<div
+  className="root"
+>
+  <p
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Make Check payable to:"
+      id="checkMo.payableToTitle"
+    />
+  </p>
+  <p
+    className="formatAddress"
+  >
+    Venia Inc
+  </p>
+  <p
+    className="mailingAddressTitle"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Send Check to:"
+      id="checkMo.mailingAddressTitle"
+    />
+  </p>
+  <p
+    className="formatAddress"
+  >
+    <span
+      className="addressLine"
+    >
+      Venia Inc
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      c/o Payment
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      PO 122334
+
+      <br />
+    </span>
+    <span
+      className="addressLine"
+    >
+      Austin Texas
+
+      <br />
+    </span>
+  </p>
+  <p
+    className="note"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Note: Your order will be shipped once the Check/Money Order has been received and processed."
+      id="checkMo.note"
+    />
+  </p>
+  <mock-BillingAddress
+    onBillingAddressChangedError={[MockFunction]}
+    onBillingAddressChangedSuccess={[MockFunction]}
+  />
+</div>
+`;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+import { useCheckmo } from '../../talons/useCheckmo';
+
+import CheckMo from '../checkmo';
+
+jest.mock('@magento/venia-ui/lib/classify');
+jest.mock('../../talons/useCheckmo', () => {
+    return {
+        useCheckmo: jest.fn().mockReturnValue({
+            payableTo: '',
+            mailingAddress: '',
+            onBillingAddressChangedError: jest.fn(),
+            onBillingAddressChangedSuccess: jest.fn()
+        })
+    };
+});
+
+jest.mock(
+    '@magento/venia-ui/lib/components/CheckoutPage/BillingAddress',
+    () => props => <mock-BillingAddress {...props} />
+);
+
+const useCheckmoReturnValue = {
+    payableTo: '',
+    mailingAddress: '',
+    onBillingAddressChangedError: jest.fn(),
+    onBillingAddressChangedSuccess: jest.fn()
+};
+
+test('Should return correct shape', () => {
+    useCheckmo.mockReturnValueOnce({
+        ...useCheckmoReturnValue
+    });
+
+    const tree = createTestInstance(<CheckMo />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('Should render with mailingAddress payable', () => {
+    useCheckmo.mockReturnValueOnce({
+        ...useCheckmoReturnValue,
+        payableTo: 'Test Inc',
+        mailingAddress: 'Test Inc\r\nc/o Payment\r\nPO 12\r\nAustin Texas'
+    });
+
+    const tree = createTestInstance(<CheckMo />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

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

@@ -0,0 +1,25 @@
+.root {
+    padding-top: 1.125rem;
+}
+
+.title {
+    font-weight: var(--venia-global-fontWeight-semibold);
+}
+
+.mailingAddressTitle {
+    font-weight: var(--venia-global-fontWeight-semibold);
+    padding-top: 1rem;
+}
+
+.note {
+    padding: 1rem 0;
+}
+
+.formatAddress {
+    padding: 0.5rem 0;
+}
+
+.addressLine {
+    display: block;
+    padding-bottom: 0.5rem;
+}