Merge branch 'develop' into rugh/pwa-1071-i18n-pack

packages/pagebuilder/lib/parseStorageHtml.js

@@ -74,6 +74,48 @@ const walk = (rootEl, contentTypeStructureObj) => {
     return contentTypeStructureObj;
 };
 
+const pbStyleAttribute = 'data-pb-style';
+const bodyId = 'html-body';
+
+/**
+ * Convert styles block to inline styles.
+ * @param {HTMLDocument} document
+ */
+const convertToInlineStyles = document => {
+    const styleBlocks = document.getElementsByTagName('style');
+    const styles = {};
+
+    if (styleBlocks.length > 0) {
+        Array.from(styleBlocks).forEach(styleBlock => {
+            const cssRules = styleBlock.sheet.cssRules;
+
+            Array.from(cssRules).forEach(rule => {
+                const selectors = rule.selectorText
+                    .split(',')
+                    .map(selector => selector.trim());
+                selectors.forEach(selector => {
+                    if (!styles[selector]) {
+                        styles[selector] = [];
+                    }
+                    styles[selector].push(rule.style);
+                });
+            });
+        });
+    }
+
+    Object.keys(styles).map(selector => {
+        const element = document.querySelector(selector);
+
+        styles[selector].map(style => {
+            element.setAttribute(
+                'style',
+                element.style.cssText + style.cssText
+            );
+        });
+        element.removeAttribute(pbStyleAttribute);
+    });
+};
+
 /**
  * Parse the master format storage HTML
  *
@@ -85,6 +127,9 @@ const parseStorageHtml = htmlStr => {
 
     const stageContentType = createContentTypeObject('root-container');
 
+    container.body.id = bodyId;
+    convertToInlineStyles(container);
+
     return walk(container.body, stageContentType);
 };
 

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/usePaymentInformation.spec.js

@@ -3,23 +3,13 @@ import { useQuery, useMutation, useApolloClient } from '@apollo/client';
 
 import { usePaymentInformation } from '../usePaymentInformation';
 import createTestInstance from '../../../../util/createTestInstance';
-import { useAppContext } from '../../../../context/app';
 import { CHECKOUT_STEP } from '../../useCheckoutPage';
 import CheckoutError from '../../CheckoutError';
 
 jest.mock('../../../../context/cart', () => ({
     useCartContext: jest.fn().mockReturnValue([{ cartId: '123' }])
 }));
 
-jest.mock('../../../../context/app', () => ({
-    useAppContext: jest
-        .fn()
-        .mockReturnValue([
-            {},
-            { toggleDrawer: () => {}, closeDrawer: () => {} }
-        ])
-}));
-
 jest.mock('@apollo/client', () => {
     return {
         useApolloClient: jest.fn(),
@@ -120,32 +110,22 @@ test('Should return correct shape', () => {
     expect(talonProps).toMatchSnapshot();
 });
 
-test('hideEditModal should call closeDrawer from app context', () => {
-    const closeDrawer = jest.fn();
-    useAppContext.mockReturnValueOnce([
-        {},
-        { toggleDrawer: () => {}, closeDrawer }
-    ]);
-
+test('hideEditModal should call to close dialog', () => {
     const { talonProps } = getTalonProps({ ...defaultTalonProps });
 
     talonProps.hideEditModal();
 
-    expect(closeDrawer).toHaveBeenCalledWith('edit.payment');
+    expect(talonProps.isEditModalActive).toBeFalsy();
 });
 
-test('showEditModal should call toggleDrawer from app context', () => {
-    const toggleDrawer = jest.fn();
-    useAppContext.mockReturnValueOnce([
-        {},
-        { closeDrawer: () => {}, toggleDrawer }
-    ]);
-
-    const { talonProps } = getTalonProps({ ...defaultTalonProps });
+test('showEditModal should call to open dialog', () => {
+    const { talonProps, update } = getTalonProps({ ...defaultTalonProps });
 
     talonProps.showEditModal();
 
-    expect(toggleDrawer).toHaveBeenCalledWith('edit.payment');
+    const { talonProps: newTalonProps } = update({});
+
+    expect(newTalonProps.isEditModalActive).toBeTruthy();
 });
 
 test('resets to payment step when selected method is not available', () => {

packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentInformation.js

@@ -1,7 +1,6 @@
 import { useCallback, useState, useEffect } from 'react';
 import { useQuery, useApolloClient, useMutation } from '@apollo/client';
 
-import { useAppContext } from '../../../context/app';
 import { useCartContext } from '../../../context/cart';
 import CheckoutError from '../CheckoutError';
 import { CHECKOUT_STEP } from '../useCheckoutPage';
@@ -17,16 +16,7 @@ import { CHECKOUT_STEP } from '../useCheckoutPage';
  * @param {DocumentNode} props.mutation.setBillingAddressMutation
  * @param {DocumentNode} props.mutation.setFreePaymentMethodMutation
  *
- * @returns {
- *   doneEditing: Boolean,
- *   isEditModalActive: Boolean,
- *   showEditModal: Function,
- *   hideEditModal: Function,
- *   handlePaymentError: Function,
- *   handlePaymentSuccess: Function,
- *   checkoutStep: Number,
- *
- * }
+ * @returns {PaymentInformationTalonProps}
  */
 export const usePaymentInformation = props => {
     const {
@@ -49,8 +39,7 @@ export const usePaymentInformation = props => {
      */
 
     const [doneEditing, setDoneEditing] = useState(false);
-    const [{ drawer }, { toggleDrawer, closeDrawer }] = useAppContext();
-    const isEditModalActive = drawer === 'edit.payment';
+    const [isEditModalActive, setIsEditModalActive] = useState(false);
     const [{ cartId }] = useCartContext();
     const client = useApolloClient();
 
@@ -59,12 +48,12 @@ export const usePaymentInformation = props => {
      */
 
     const showEditModal = useCallback(() => {
-        toggleDrawer('edit.payment');
-    }, [toggleDrawer]);
+        setIsEditModalActive(true);
+    }, []);
 
     const hideEditModal = useCallback(() => {
-        closeDrawer('edit.payment');
-    }, [closeDrawer]);
+        setIsEditModalActive(false);
+    }, []);
 
     const handlePaymentSuccess = useCallback(() => {
         setDoneEditing(true);
@@ -251,11 +240,25 @@ export const usePaymentInformation = props => {
 
     return {
         doneEditing,
-        isEditModalActive,
-        isLoading,
         handlePaymentError,
         handlePaymentSuccess,
         hideEditModal,
+        isEditModalActive,
+        isLoading,
         showEditModal
     };
 };
+
+/**
+ * Props data to use when rendering a cart page component.
+ *
+ * @typedef {Object} PaymentInformationTalonProps
+ *
+ * @property {boolean} doneEditing Indicates payment information has been provided
+ * @property {function} handlePaymentError Error handler passed to payment methods
+ * @property {function} handlePaymentSuccess Success handler passed to payment methods
+ * @property {function} hideEditModal Callback to close the edit dialog
+ * @property {boolean} isEditModalActive State for keeping track of edit dialog visibility
+ * @property {boolean} isLoading Derived state that keeps track if any mutation is in flight
+ * @property {function} showEditModal Callback to display the edit dialog
+ */

packages/pwa-buildpack/lib/Utilities/__tests__/__snapshots__/addImgOptMiddleware.spec.js.snap

@@ -16,9 +16,7 @@ https://github.com/nodejs/node-gyp#installation",
 exports[`recovers from missing hastily dep 1`] = `
 Array [
   "Cannot add image optimization middleware due to dependencies that are not installed or are not compatible with this environment:
-- apicache: Reason: apicache not here
 - hastily: Reason: hastily was not compatible
-- apicache: Reason: Cannot read property 'hasSupportedExtension' of undefined
 - hastily: Reason: Cannot read property 'imageopto' of undefined
 
 Images will be served uncompressed.

packages/pwa-buildpack/lib/Utilities/__tests__/addImgOptMiddleware.spec.js

@@ -81,7 +81,9 @@ test('recovers from missing apicache dep', () => {
 test('recovers from missing hastily dep', () => {
     jest.resetModules();
     jest.spyOn(console, 'warn').mockImplementation(() => {});
-    jest.doMock('apicache');
+    jest.doMock('apicache', () => ({
+        middleware: mockCacheMiddleware
+    }));
     jest.doMock('hastily', () => {
         throw new Error('hastily was not compatible');
     });

packages/pwa-buildpack/lib/Utilities/addImgOptMiddleware.js

@@ -29,9 +29,15 @@ function addImgOptMiddleware(app, config) {
     let cacheMiddleware;
     let imageopto;
     try {
-        cacheMiddleware = cache(cacheExpires, hastily.hasSupportedExtension, {
-            debug: cacheDebug
-        });
+        cacheMiddleware = cache(
+            cacheExpires,
+            (req, res) =>
+                hastily.hasSupportedExtension(req) && res.statusCode === 200,
+            {
+                debug: cacheDebug,
+                appendKey: req => req.get('accept')
+            }
+        );
     } catch (e) {
         markDepInvalid('apicache', e);
     }

packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/editModal.spec.js.snap

@@ -1,26 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Should return correct shape 1`] = `
-<aside
-  className="root_open"
+<mock-Dialog
+  confirmText="Update"
+  confirmTranslationId="global.updateButton"
+  onCancel={[Function]}
+  onConfirm={[Function]}
+  shouldDisableAllButtons={false}
+  shouldDisableConfirmButton={false}
+  shouldUnmountOnHide={true}
+  title="Edit Payment Information"
 >
-  <div
-    className="header"
-  >
-    <span
-      className="header_text"
-    >
-      Edit Payment Information
-    </span>
-    <button
-      className="close_button"
-      onClick={[Function]}
-    >
-      <mock-ChecIconkbox
-        src={[Function]}
-      />
-    </button>
-  </div>
   <div
     className="body"
   >
@@ -29,24 +19,6 @@ exports[`Should return correct shape 1`] = `
       onPaymentSuccess={[Function]}
       shouldSubmit={false}
     />
-    <div
-      className="actions_container"
-    >
-      <mock-Button
-        disabled={false}
-        onClick={[Function]}
-        priority="low"
-      >
-        Cancel
-      </mock-Button>
-      <mock-Button
-        disabled={false}
-        onClick={[Function]}
-        priority="high"
-      >
-        Update
-      </mock-Button>
-    </div>
   </div>
-</aside>
+</mock-Dialog>
 `;