@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/WishlistPage/{wishlistEditFavoritesListDialog.css → wishlistEditFavoritesListDialog.module.css}

@@ -3,17 +3,17 @@
 }
 
 .cancelButton {
-    composes: root_lowPriority from '../Button/button.css';
+    composes: root_lowPriority from '../Button/button.module.css';
 
     min-width: 9rem;
 }
 
 .confirmButton {
-    composes: confirmButton from '../Dialog/dialog.css';
+    composes: confirmButton from '../Dialog/dialog.module.css';
 }
 
 .errorMessage {
-    composes: errorMessage from './wishlistConfirmRemoveProductDialog.css';
+    composes: errorMessage from './wishlistConfirmRemoveProductDialog.module.css';
 }
 
 .form {

package/lib/components/WishlistPage/wishlistItem.js

@@ -9,7 +9,7 @@ import Icon from '../Icon';
 import Image from '../Image';
 import Price from '../Price';
 
-import defaultClasses from './wishlistItem.css';
+import defaultClasses from './wishlistItem.module.css';
 
 const WishlistItem = props => {
     const { item } = props;
@@ -83,7 +83,7 @@ const WishlistItem = props => {
 
     const removeProductAriaLabel = formatMessage({
         id: 'wishlistItem.removeAriaLabel',
-        defaultMessage: 'Remove Product from whislist'
+        defaultMessage: 'Remove Product from wishlist'
     });
 
     const rootClass = isRemovalInProgress

package/lib/components/WishlistPage/{wishlistItem.css → wishlistItem.module.css}

@@ -44,7 +44,7 @@
 }
 
 .addToCart {
-    composes: root_highPriority from '../Button/button.css';
+    composes: root_highPriority from '../Button/button.module.css';
     justify-self: left;
     margin-top: 0.25rem;
 }

package/lib/components/WishlistPage/wishlistItems.js

@@ -2,7 +2,7 @@ import React, { Fragment, useMemo } from 'react';
 import { useWishlistItems } from '@magento/peregrine/lib/talons/WishlistPage/useWishlistItems';
 
 import { useStyle } from '../../classify';
-import defaultClasses from './wishlistItems.css';
+import defaultClasses from './wishlistItems.module.css';
 import WishlistItem from './wishlistItem';
 import AddToCartDialog from '../AddToCartDialog';
 

package/lib/components/WishlistPage/wishlistListActionsDialog.js

@@ -6,7 +6,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useStyle } from '../../classify';
 import Dialog from '../Dialog';
 import Icon from '../Icon';
-import defaultClasses from './wishlistMoreActionsDialog.css';
+import defaultClasses from './wishlistMoreActionsDialog.module.css';
 
 const WishlistListActionsDialog = props => {
     const { isOpen, onCancel, onEdit } = props;

package/lib/components/WishlistPage/wishlistMoreActionsDialog.js

@@ -6,7 +6,7 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useStyle } from '../../classify';
 import Dialog from '../Dialog';
 import Icon from '../Icon';
-import defaultClasses from './wishlistMoreActionsDialog.css';
+import defaultClasses from './wishlistMoreActionsDialog.module.css';
 
 const WishlistMoreActionsDialog = props => {
     const { isOpen, onCancel, onRemove } = props;

package/lib/components/WishlistPage/wishlistPage.js

@@ -6,7 +6,7 @@ import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessa
 import { useStyle } from '../../classify';
 import { fullPageLoadingIndicator } from '../LoadingIndicator';
 import Wishlist from './wishlist';
-import defaultClasses from './wishlistPage.css';
+import defaultClasses from './wishlistPage.module.css';
 
 import CreateWishlist from './createWishlist';
 

package/lib/defaultRoutes.json

@@ -3,13 +3,17 @@
         "name": "AccountInformationPage",
         "pattern": "/account-information",
         "exact": true,
-        "path": "../AccountInformationPage"
+        "path": "../AccountInformationPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     },
     {
         "name": "AddressBook",
         "pattern": "/address-book",
         "exact": true,
-        "path": "../AddressBookPage"
+        "path": "../AddressBookPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     },
     {
         "name": "Cart",
@@ -27,7 +31,9 @@
         "name": "CommunicationsPage",
         "pattern": "/communications",
         "exact": true,
-        "path": "../CommunicationsPage"
+        "path": "../CommunicationsPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     },
     {
         "name": "CreateAccountPage",
@@ -35,11 +41,19 @@
         "exact": true,
         "path": "../CreateAccountPage"
     },
+    {
+        "name": "ForgotPasswordPage",
+        "pattern": "/forgot-password",
+        "exact": true,
+        "path": "../ForgotPasswordPage"
+    },
     {
         "name": "OrderHistory",
         "pattern": "/order-history",
         "exact": true,
-        "path": "../OrderHistoryPage"
+        "path": "../OrderHistoryPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     },
     {
         "name": "Reset Password",
@@ -51,7 +65,9 @@
         "name": "SavedPayments",
         "pattern": "/saved-payments",
         "exact": true,
-        "path": "../SavedPaymentsPage"
+        "path": "../SavedPaymentsPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     },
     {
         "name": "Search",
@@ -59,10 +75,18 @@
         "exact": true,
         "path": "../../RootComponents/Search"
     },
+    {
+        "name": "SignInPage",
+        "pattern": "/sign-in",
+        "exact": true,
+        "path": "../SignInPage"
+    },
     {
         "name": "WishlistPage",
         "pattern": "/wishlist",
         "exact": true,
-        "path": "../WishlistPage"
+        "path": "../WishlistPage",
+        "authed": true,
+        "redirectTo": "/sign-in"
     }
-]
+]

package/lib/{index.css → index.module.css}

@@ -1,4 +1,4 @@
-@import './tokens.css';
+@import './tokens.module.css';
 
 :global(*) {
     box-sizing: border-box;

package/lib/targets/RootShimmerTypes.js

@@ -0,0 +1,31 @@
+/**
+ * Implementation of our 'RootShimmerTypes' target. This will gather
+ * RootShimmerTypes declarations { shimmerType, importPath } from all
+ * interceptors, and then inject them into the shimmer types export
+ *
+ * An instance of this class is made available when you use VeniaUI's
+ * `rootShimmerTypes` target.
+ *
+ * The RootShimmerTypes declarations collected as part of this target will be
+ * used to render the appropriate root shimmer component during page transition
+ * when using the useInternalLink hook.
+ */
+class RootShimmerTypes {
+    /** @hideconstructor */
+    constructor(venia) {
+        const registry = this;
+        this._shimmer = venia.esModuleObject({
+            module:
+                '@magento/venia-ui/lib/RootComponents/Shimmer/types/index.js',
+            publish(targets) {
+                targets.rootShimmerTypes.call(registry);
+            }
+        });
+    }
+
+    add({ shimmerType, importPath }) {
+        this._shimmer.add(`import ${shimmerType} from '${importPath}'`);
+    }
+}
+
+module.exports = RootShimmerTypes;

package/lib/targets/__tests__/RootShimmerTypes.spec.js

@@ -0,0 +1,22 @@
+const RootShimmerTypes = require('../RootShimmerTypes');
+
+const mockAdd = jest.fn();
+const targetable = {
+    esModuleObject: jest.fn(() => ({
+        add: mockAdd
+    }))
+};
+
+test('adds new root shimmer component', () => {
+    const target = new RootShimmerTypes(targetable);
+    target.add({
+        shimmerType: 'FOO_SHIMMER',
+        importPath: './dog.js'
+    });
+
+    expect(mockAdd.mock.calls[0]).toMatchInlineSnapshot(`
+        Array [
+          "import FOO_SHIMMER from './dog.js'",
+        ]
+    `);
+});

package/lib/targets/__tests__/makeRoutesTarget.spec.js

@@ -6,6 +6,7 @@ const makeRoutesTarget = require('../makeRoutesTarget');
 const TargetableSet = require('@magento/pwa-buildpack/lib/WebpackTools/targetables/TargetableSet');
 
 const FAKE_ADDED_ROUTE = 'ADDED_ROUTE';
+const FAKE_COMPONENT = 'Component';
 
 const targets = mockTargetProvider(
     '@magento/venia-ui',
@@ -23,6 +24,7 @@ const targets = mockTargetProvider(
 );
 const targetable = TargetableSet.using(targets);
 const mockPrependJSX = jest.fn();
+const mockInsertAfterSource = jest.fn();
 
 jest.mock(
     '../../defaultRoutes.json',
@@ -30,9 +32,16 @@ jest.mock(
         {
             name: 'Single path route',
             pattern: '/simple',
-            exact: true,
             path: '../AccountInformationPage'
         },
+        {
+            name: 'Single path route that needs authentication',
+            pattern: '/authed',
+            exact: true,
+            path: '../AccountInformationPage',
+            authed: true,
+            redirectTo: '/'
+        },
         {
             name: 'Multiple path route',
             pattern: ['/one', '/two'],
@@ -45,8 +54,10 @@ jest.mock(
 
 beforeAll(() => {
     jest.spyOn(targetable, 'reactComponent').mockImplementation(() => ({
+        addImport: () => FAKE_COMPONENT,
         addReactLazyImport: () => FAKE_ADDED_ROUTE,
-        prependJSX: mockPrependJSX
+        prependJSX: mockPrependJSX,
+        insertAfterSource: mockInsertAfterSource
     }));
 });
 
@@ -56,11 +67,26 @@ test('Call prependJSX with the correct path patterns', async () => {
     expect(mockPrependJSX).toHaveBeenNthCalledWith(
         1,
         'Switch',
-        `<Route exact path={"/simple"}><${FAKE_ADDED_ROUTE}/></Route>`
+        `<Route path={"/simple"}><${FAKE_ADDED_ROUTE}/></Route>`
+    );
+    expect(mockInsertAfterSource).toHaveBeenNthCalledWith(
+        1,
+        expect.stringContaining('availableRoutes'),
+        expect.stringContaining('/simple')
     );
     expect(mockPrependJSX).toHaveBeenNthCalledWith(
         2,
         'Switch',
+        `<${FAKE_COMPONENT} exact redirectTo={"/"} path={"/authed"}><${FAKE_ADDED_ROUTE}/></${FAKE_COMPONENT}>`
+    );
+    expect(mockPrependJSX).toHaveBeenNthCalledWith(
+        3,
+        'Switch',
         `<Route exact path={["/one","/two"]}><${FAKE_ADDED_ROUTE}/></Route>`
     );
+    expect(mockInsertAfterSource).toHaveBeenNthCalledWith(
+        3,
+        expect.stringContaining('availableRoutes'),
+        expect.stringContaining(JSON.stringify(['/one', '/two']))
+    );
 });

package/lib/targets/makeRoutesTarget.js

@@ -9,13 +9,29 @@ function makeRoutesTarget(venia) {
 }
 
 function addRoutes(routeList, routes) {
+    const AuthRouteComponent = routeList.addImport(
+        'import AuthRoute from "./authRoute"'
+    );
+
     for (const route of routes) {
         const AddedRoute = routeList.addReactLazyImport(route.path, route.name);
+        const exact = route.exact ? 'exact ' : '';
+        const path = JSON.stringify(route.pattern);
+        const redirectTo =
+            route.authed && route.redirectTo
+                ? JSON.stringify(route.redirectTo)
+                : null;
+        const redirectToProp = redirectTo ? `redirectTo={${redirectTo}} ` : '';
+        const Component = route.authed ? AuthRouteComponent : 'Route';
+
         routeList.prependJSX(
             'Switch',
-            `<Route ${route.exact ? 'exact ' : ''}path={${JSON.stringify(
-                route.pattern
-            )}}><${AddedRoute}/></Route>`
+            `<${Component} ${exact}${redirectToProp}path={${path}}><${AddedRoute}/></${Component}>`
+        );
+
+        routeList.insertAfterSource(
+            'const availableRoutes = [];',
+            'availableRoutes.push(' + JSON.stringify(route) + ');'
         );
     }
 }

package/lib/targets/venia-ui-declare.js

@@ -155,7 +155,9 @@ module.exports = targets => {
 
         categoryListProductAttributes: new targets.types.Sync([
             'categoryListProductAttributes'
-        ])
+        ]),
+
+        rootShimmerTypes: new targets.types.Sync(['rootShimmerTypes'])
     });
 };
 
@@ -209,8 +211,13 @@ module.exports = targets => {
  * Intercept function signature for the `routes` target.
  *
  * Interceptors of `routes` receive an array of {@link RouteDefinition}
- * objects, which Venia will use to generate React Router `<Route />` in the
- * final bundle.
+ * objects, which Venia will use to either generate a custom `<AuthRoute />`
+ * component or a React Router `<Route />` component in the final bundle based
+ * on the `authed` prop.
+ *
+ * The AuthRoute will either return a React Router `<Route />` component or a
+ * `<Redirect />` component depending if the user is signed in and if the route
+ * needs authentication or not.
  *
  * Interceptors **must** return an array of RouteDefinitions, either by
  * mutating and then returning the array they received, or by returning a new
@@ -243,6 +250,11 @@ module.exports = targets => {
  *   `path` prop for the `<Route/>` component.
  * @property {boolean} [exact] Tells the router whether it should match the route
  *   exactly or not. This property is optional.
+ * @property {boolean} [authed] Uses the custom AuthRoute component if the user
+ *   needs to be signed in to access the route. This property is optional.
+ * @property {string} [redirectTo] Url will be the redirection url when user are
+ *   not signed in and are trying to access an authed route.
+ *   This property is optional. Default is "/".
  *
  * @example <caption>A custom route with a URL parameter</caption>
  * const myCustomRoute = {
@@ -338,3 +350,31 @@ module.exports = targets => {
  *      importPath: '@partner/module/path_to_your_component'
  * }
  */
+
+/** Type definition related to: rootShimmerTypes */
+
+/**
+ * Intercept function signature for the `rootShimmerTypes` target.
+ *
+ * Interceptors of `rootShimmerTypes` should call `.add` on the provided [shimmer list]{@link #RootShimmerTypesDefinition}.
+ *
+ * @callback rootShimmerInterceptFunction
+ *
+ * @param {RootShimmerTypesDefinition} shimmers so far in the build.
+ *
+ */
+
+/**
+ * A root component shimmer object that can be used during page transitions on your storefront
+ *
+ * @typedef {Object} RootShimmerTypesDefinition
+ * @property {string} shimmerType is use to map your page type to the component
+ * @property {string} importPath Resolvable path to the component the
+ *   Shimmer component will render
+ *
+ * @example <caption>A CMS Page Shimmer</caption>
+ * const cmsShimmer = {
+ *      shimmerType: 'CMS_PAGE_SHIMMER',
+ *      importPath: '@partner/module/path_to_your_component'
+ * }
+ */

package/lib/targets/venia-ui-intercept.js

@@ -9,6 +9,7 @@ const CheckoutPagePaymentsList = require('./CheckoutPagePaymentsList');
 const SavedPaymentTypes = require('./SavedPaymentTypes');
 const EditablePaymentTypes = require('./EditablePaymentTypes');
 const SummaryPaymentTypes = require('./SummaryPaymentTypes');
+const RootShimmerTypes = require('./RootShimmerTypes');
 
 module.exports = veniaTargets => {
     const venia = Targetables.using(veniaTargets);
@@ -60,4 +61,11 @@ module.exports = veniaTargets => {
     });
 
     new CategoryListProductAttributes(venia);
+
+    const rootShimmerTypes = new RootShimmerTypes(venia);
+    rootShimmerTypes.add({
+        shimmerType: 'CATEGORY_SHIMMER',
+        importPath:
+            '@magento/venia-ui/lib/RootComponents/Category/categoryContent.shimmer'
+    });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "8.0.0-alpha.6",
+  "version": "9.0.0-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -33,7 +33,7 @@
   },
   "homepage": "https://github.com/magento/pwa-studio/tree/master/packages/venia-ui#readme",
   "dependencies": {
-    "informed": "~3.27.0",
+    "informed": "~3.29.0",
     "jarallax": "~1.11.1",
     "load-google-maps-api": "~2.0.1",
     "lodash.escape": "~4.0.1",
@@ -44,10 +44,10 @@
     "react-aria": "~3.4.0",
     "react-feather": "~2.0.3",
     "react-helmet-async": "^1.0.2",
-    "react-slick": "~0.25.2",
+    "react-slick": "~0.28.0",
     "redux-actions": "~2.6.4",
     "redux-thunk": "~2.3.0",
-    "uuid": "~3.3.2"
+    "uuid": "~8.3.2"
   },
   "devDependencies": {
     "@babel/cli": "~7.2.3",
@@ -60,33 +60,31 @@
     "@babel/plugin-transform-runtime": "~7.4.4",
     "@babel/preset-env": "~7.3.4",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.1",
-    "@storybook/react": "~6.1.14",
+    "@storybook/react": "~6.3.7",
     "@testing-library/react-hooks": "~5.0.3",
-    "@wojtekmaj/enzyme-adapter-react-17": "~0.4.1",
     "babel-core": "~7.0.0-bridge.0",
     "babel-jest": "~24.1.0",
     "babel-loader": "~8.0.5",
     "babel-plugin-dynamic-import-node": "~2.2.0",
     "babel-plugin-graphql-tag": "~2.0.0",
-    "enzyme": "~3.11.0",
     "identity-obj-proxy": "~3.0.0",
     "react": "~17.0.1",
-    "react-intl": "~5.7.0",
+    "react-intl": "~5.20.0",
     "react-test-renderer": "~17.0.1",
     "redux": "~4.0.1"
   },
   "peerDependencies": {
     "@apollo/client": "~3.1.2",
     "@magento/babel-preset-peregrine": "~1.1.0",
-    "@magento/peregrine": "11.0.0-alpha.6",
-    "@magento/pwa-buildpack": "10.0.0-alpha.6",
+    "@magento/peregrine": "12.0.0-alpha.3",
+    "@magento/pwa-buildpack": "11.0.0-alpha.3",
     "apollo-cache-persist": "~0.1.1",
     "braintree-web-drop-in": "~1.16.0",
     "graphql": "~15.3.0",
     "react": "~17.0.1",
-    "react-intl": "~5.7.0",
-    "react-redux": "~7.1.1",
-    "react-router-dom": "~5.1.0",
+    "react-intl": "~5.20.0",
+    "react-redux": "~7.2.2",
+    "react-router-dom": "~5.2.0",
     "redux": "~4.0.1",
     "webpack": "~4.46.0"
   },

package/upward.yml

@@ -100,6 +100,64 @@ veniaProxy:
       default:
         inline: true
 
+# Page type data for initial render
+veniaPageType:
+  resolver: inline
+  inline:
+    data:
+      resolver: conditional
+      when:
+        - matches: env.SCRIPT_NAME
+          pattern: '.*\.php$'
+          use:
+            resolver: computed
+            type:
+              resolver: inline
+              inline: pageType
+            additional:
+              - type: product
+                fetch: '__typename,id'
+              - type: cms_page
+                fetch: 'identifier'
+              - type: category
+                fetch: 'id'
+      default:
+        inline: ''
+
+# Nonce for page type inline script
+veniaPageTypeNonce:
+  resolver: inline
+  inline:
+    nonce:
+      resolver: conditional
+      when:
+        - matches: env.SCRIPT_NAME
+          pattern: '.*\.php$'
+          use:
+            resolver: computed
+            type:
+              resolver: inline
+              inline: pageTypeNonce
+      default:
+        inline: ''
+
+# Webpack chunks to preload on page based on page type
+veniaWebpackChunks:
+  resolver: inline
+  inline:
+    scripts:
+      resolver: conditional
+      when:
+        - matches: env.SCRIPT_NAME
+          pattern: '.*\.php$'
+          use:
+            resolver: computed
+            type:
+              resolver: inline
+              inline: webpackChunks
+      default:
+        inline: ''
+
 # The veniaAppShell object resolves to a response that returns server-side
 # rendered HTML containing the PWA application shell.
 # For SEO purposes, the appropriate meta tags in the HTML head element are also
@@ -120,10 +178,18 @@ veniaAppShell:
                 cache-control:
                     inline: s-maxage=60
         body:
+          resolver: template
+          engine: mustache
+          provide:
+            pageType: veniaPageType.data
+            pageTypeNonce: veniaPageTypeNonce.nonce
+            webpackChunks: veniaWebpackChunks.scripts
+          template:
             resolver: file
             file:
-                resolver: inline
-                inline: './index.html'
+              resolver: inline
+              inline: './index.html'
+
 
 # The veniaStatic object is a DirectoryResolver that allows access to the files
 # inside the project's compiled './dist' directory.

package/lib/components/CartPage/GiftCards/giftCardFragments.ee.js

@@ -1,14 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GiftCardFragment = gql`
-    fragment GiftCardFragment on Cart {
-        applied_gift_cards {
-            code
-            current_balance {
-                currency
-                value
-            }
-        }
-        id
-    }
-`;

package/lib/components/CartPage/GiftCards/giftCardFragments.js

@@ -1,8 +0,0 @@
-import { gql } from '@apollo/client';
-
-export const GiftCardFragment = gql`
-    fragment GiftCardFragment on Cart {
-        __typename
-        id
-    }
-`;