Adds methods needed for Magento 2 integration

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.12.2",
+  "version": "8.14.0-alpha.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",
@@ -78,7 +78,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "jest": "^25.4.0",
     "jest-enzyme": "^7.1.2",
-    "jest-fetch-mock": "^2.1.2",
+    "jest-fetch-mock": "^3.0.3",
     "jsdom": "^16.2.2",
     "next": "^9.4.4",
     "npm-watch": "^0.6.0",

src/Image.js

@@ -143,7 +143,12 @@ export default function Image({
             [classes.fit]: aspectRatio != null,
           })}
           {...imgAttributes}
-          onError={() => setPrimaryNotFound(true)}
+          // prevent render "onerror" as a DOM prop in case of amp-img tag
+          onError={
+            ImgElement !== 'amp-img'
+              ? () => setPrimaryNotFound(true)
+              : /* istanbul ignore next */ undefined
+          }
         />
       )}
     </div>

src/LazyHydrate.js

@@ -28,6 +28,7 @@ if (isBrowser()) {
   will be removed.
 */
 export function LazyStyles() {
+  /* istanbul ignore next */
   if (useAmp()) return null
 
   let styles = null
@@ -212,7 +213,9 @@ function LazyHydrateInstance({ id, className, ssrOnly, children, on, ...props })
  */
 
 function LazyHydrate({ children, ...props }) {
+  /* istanbul ignore next */
   if (useAmp()) return children
+
   return (
     <LazyHydrateInstance {...props}>
       {/* LazyStylesProvider should not be used in the browser. Once components 

src/hooks/useCartTotal.js

@@ -0,0 +1,14 @@
+import { useContext, useMemo } from 'react';
+import get from 'lodash/get';
+import SessionContext from '../session/SessionContext';
+
+function useCartTotal() {
+  const context = useContext(SessionContext);
+  const items = get(context, 'session.cart.items', []);
+  const total = useMemo(() => items
+    .reduce((totalAcc, item) => item.quantity + totalAcc, 0),
+  [items]);
+  return total;
+}
+
+export default useCartTotal;

src/mock-connector/account.js

@@ -0,0 +1,19 @@
+import fulfillAPIRequest from '..//props/fulfillAPIRequest'
+import createAppData from './utils/createAppData'
+
+export default async function account(req, res) {
+  return await fulfillAPIRequest(req, {
+    appData: createAppData,
+    pageData: () =>
+      Promise.resolve({
+        title: 'My Account',
+        account: {},
+        breadcrumbs: [
+          {
+            text: 'Home',
+            href: '/',
+          },
+        ],
+      }),
+  })
+}

src/mock-connector/addToCart.js

@@ -0,0 +1,10 @@
+export default async function addToCart(product, quantity, req, res) {
+  const { id, color, size } = product
+
+  console.log('product id: ', id)
+  console.log('color id: ', color || 'Not provided')
+  console.log('size id: ', size || 'Not provided')
+  console.log('quantity ', quantity)
+
+  return {}
+}

src/mock-connector/cart.js

@@ -1,37 +1,27 @@
 import createProduct from './utils/createProduct'
-import withAmpFormParser from '../middlewares/withAmpFormParser'
+import fulfillAPIRequest from '../props/fulfillAPIRequest'
+import createAppData from './utils/createAppData'
 
-const cart = (req, res) => {
-  if (req.method === 'POST') {
-    const { id, color, size, quantity } = req.body
+export default async function cart(req, res) {
+  const products = [createProduct(1), createProduct(2), createProduct(3)]
 
-    console.log('product id: ', id)
-    console.log('color id: ', color || 'Not provided')
-    console.log('size id: ', size || 'Not provided')
-    console.log('quantity ', quantity)
-
-    if (req.query['__amp_source_origin']) {
-      res.setHeader('AMP-Redirect-To', `${req.query['__amp_source_origin']}/cart`)
-    }
-
-    setTimeout(() => {
-      res.end(JSON.stringify({ response: 'success', cartCount: 4 }))
-    }, 1)
-  } else {
-    const products = [createProduct(1), createProduct(2), createProduct(3)]
-
-    res.end(
-      JSON.stringify({
-        pageData: { items: products.map((item, i) => ({ ...item, quantity: i + 1 })) },
+  return fulfillAPIRequest(req, {
+    appData: createAppData,
+    pageData: () =>
+      Promise.resolve({
+        title: 'My Cart',
+        breadcrumbs: [
+          {
+            text: 'Home',
+            href: '/',
+          },
+        ],
+        cart: {
+          items: products.map((item, i) => ({
+            ...item,
+            quantity: 1,
+          })),
+        },
       }),
-    )
-  }
+  })
 }
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-}
-
-export default withAmpFormParser(cart)

src/mock-connector/index.js

@@ -1,4 +1,7 @@
 export { default as cart } from './cart.js'
+export { default as account } from './account.js'
+export { default as addToCart } from './addToCart.js'
+export { default as updateCartItem } from './updateCartItem.js'
 export { default as home } from './home.js'
 export { default as product } from './product.js'
 export { default as productMedia } from './productMedia.js'

src/mock-connector/removeCartItem.js

@@ -0,0 +1,3 @@
+export default function removeCartItem(item, req, res) {
+  return {}
+}

src/mock-connector/routes.js

@@ -2,7 +2,5 @@ export default [
   { source: '/', destination: '/' },
   { source: '/s/:subcategoryId', destination: '/s/[subcategoryId]' },
   { source: '/p/:productId', destination: '/p/[productId]' },
-  { source: '/products/:productId', destination: '/p/[productId]' },
   { source: '/p/:productId/suggestions', destination: '/p/[productId]/suggestions' },
-  { source: '/foo', destination: '/' },
 ]

src/mock-connector/session.js

@@ -1,8 +1,17 @@
+import createProduct from './utils/createProduct'
+
 export default async function session(req, res) {
+  const products = [createProduct(1), createProduct(2), createProduct(3)]
+
   return {
     name: 'Mark',
     email: 'mark@domain.com',
-    itemsInCart: 0,
+    cart: {
+      items: products.map((item, i) => ({
+        ...item,
+        quantity: 1,
+      })),
+    },
     currency: 'USD',
   }
 }

src/mock-connector/subcategory.js

@@ -6,7 +6,7 @@ import fulfillAPIRequest from 'react-storefront/props/fulfillAPIRequest'
 import createAppData from './utils/createAppData'
 
 export default async function subcategory(params, req, res) {
-  let { q, id = '1', page = 0, filters, sort, more = false } = params
+  let { q, slug = '1', page = 0, filters, sort, more = false } = params
 
   if (filters) {
     filters = JSON.parse(filters)
@@ -18,9 +18,9 @@ export default async function subcategory(params, req, res) {
     appData: createAppData,
     pageData: () =>
       Promise.resolve({
-        id: id,
-        name: q != null ? `Results for "${q}"` : `Subcategory ${id}`,
-        title: q != null ? `Results for "${q}"` : `Subcategory ${id}`,
+        id: slug,
+        name: q != null ? `Results for "${q}"` : `Subcategory ${slug}`,
+        title: q != null ? `Results for "${q}"` : `Subcategory ${slug}`,
         total: 100,
         page: parseInt(page),
         totalPages: 5,

src/mock-connector/updateCartItem.js

@@ -0,0 +1,3 @@
+export default function updateCartItem(item, quantity, req, res) {
+  return {}
+}

src/mock-connector/utils/createMenu.js

@@ -34,7 +34,7 @@ function createSubcategoryItem(i) {
 
   return {
     text: `Subcategory ${i}`,
-    href: `/s/[subcategoryId]`,
+    href: `/s/[...categorySlug]`,
     as: `/s/${i}`,
     expanded: i === 1,
     items,

src/mock-connector/utils/createTabs.js

@@ -3,11 +3,16 @@ export default function createTabs() {
   const subcategories = []
 
   for (let i = 1; i <= 3; i++) {
-    subcategories.push({ as: `/s/${i}`, href: '/s/[subcategoryId]', text: `Subcategory ${i}` })
+    subcategories.push({ as: `/s/${i}`, href: '/s/[...categorySlug]', text: `Subcategory ${i}` })
   }
 
   for (let i = 1; i <= 10; i++) {
-    tabs.push({ as: `/s/${i}`, href: '/s/[subcategoryId]', text: `Category ${i}`, subcategories })
+    tabs.push({
+      as: `/s/${i}`,
+      href: '/s/[...categorySlug]',
+      text: `Category ${i}`,
+      items: subcategories,
+    })
   }
 
   return tabs