@magento/venia-ui 11.5.0-beta.2 → 11.6.0-alpha.4

package/lib/components/RangeSlider/rangeSlider.module.css

@@ -0,0 +1,76 @@
+.slider {
+    position: relative;
+}
+
+.trackslider,
+.rangeslider {
+    position: absolute;
+}
+
+.trackslider,
+.rangeslider {
+    border-radius: 4px;
+    height: 6px;
+}
+
+.trackslider {
+    background-color: #022140;
+    width: 100%;
+    z-index: 1;
+}
+
+.rangeslider {
+    z-index: 2;
+}
+
+.thumb,
+.thumb::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.thumb {
+    pointer-events: none;
+    position: absolute;
+    height: 0;
+    outline: none;
+}
+
+.thumbleft {
+    z-index: 3;
+}
+
+.thumbright {
+    z-index: 4;
+}
+
+.thumb::-webkit-slider-thumb {
+    background-color: #2954fe;
+    border-radius: 50%;
+    /* box-shadow: 0 0 1px 1px #f50707; */
+    /* border: 4px solid #ff0303; */
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+    margin-top: 4.5px;
+    pointer-events: all;
+    position: relative;
+    transition: transform 0.3s ease-in-out;
+}
+
+.thumb::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.thumb::-moz-range-thumb {
+    background-color: #0a0a0a;
+    border-radius: 50%;
+    /* box-shadow: 0 0 1px 1px #f50707; */
+    border: 4px solid #ff0303;
+    cursor: pointer;
+    height: 28px;
+    width: 28px;
+    margin-top: 4.5px;
+    pointer-events: all;
+    position: relative;
+}

package/lib/components/SearchBar/__tests__/__snapshots__/suggestedProduct.spec.js.snap

@@ -10,7 +10,7 @@ Array [
       aria-hidden="true"
       className="image placeholder"
       loading="eager"
-      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
       style={
         Object {
           "--width": "60px",

package/lib/components/SignIn/__tests__/signIn.spec.js

@@ -8,6 +8,8 @@ import SignIn from '../signIn';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 import { useMutation } from '@apollo/client';
 
+import { useHistory, useLocation } from 'react-router-dom';
+
 jest.mock('@apollo/client', () => ({
     gql: jest.fn(),
     useApolloClient: jest.fn().mockImplementation(() => {}),
@@ -23,6 +25,17 @@ jest.mock('@apollo/client', () => ({
         loading: false
     }))
 }));
+
+// Mocking the react-router hooks
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
+
 jest.mock('../../../classify');
 jest.mock('../../Button', () => () => <i />);
 jest.mock('../../FormError/formError', () => 'FormError');
@@ -67,6 +80,24 @@ jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));
 
+// Mocking useLocation and useHistory for the tests
+
+beforeEach(() => {
+    useHistory.mockReturnValue({
+        push: jest.fn() // mock any methods you need from useHistory
+    });
+
+    useLocation.mockReturnValue({
+        pathname: '/mock-path', // mock the location properties
+
+        search: '',
+
+        hash: '',
+
+        state: null
+    });
+});
+
 const props = {
     setDefaultUsername: jest.fn(),
     showCreateAccount: jest.fn(),

package/lib/components/SignIn/signIn.js

@@ -19,7 +19,6 @@ import GoogleRecaptcha from '../GoogleReCaptcha';
 const SignIn = props => {
     const classes = useStyle(defaultClasses, props.classes);
     const {
-        handleTriggerClick,
         setDefaultUsername,
         showCreateAccount,
         showForgotPassword,
@@ -28,7 +27,6 @@ const SignIn = props => {
 
     const { formatMessage } = useIntl();
     const talonProps = useSignIn({
-        handleTriggerClick,
         getCartDetailsQuery: GET_CART_DETAILS_QUERY,
         setDefaultUsername,
         showCreateAccount,

package/lib/components/WishlistPage/__tests__/__snapshots__/wishlistItem.spec.js.snap

@@ -20,7 +20,7 @@ exports[`it renders a configurable wishlist item 1`] = `
       aria-hidden="true"
       className="image placeholder"
       loading="eager"
-      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
       style={
         Object {
           "--width": "400px",
@@ -137,7 +137,7 @@ exports[`it renders a simple wishlist item 1`] = `
       aria-hidden="true"
       className="image placeholder"
       loading="eager"
-      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc0JyBoZWlnaHQ9JzUnPjxyZWN0IHdpZHRoPSc0JyBoZWlnaHQ9JzUnIHN0eWxlPSdmaWxsOiBub25lJyAvPjwvc3ZnPg=="
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjUiIHZpZXdCb3g9Ii0yNSAtMjUgMzEyIDMxMiI+CiAgICA8ZyBpZD0iTGF5ZXJfMi0yIj4KICAgICAgICA8cGF0aCBjbGFzcz0ic3QwIiBzdHlsZT0iZmlsbDogI2YwZjBmMDsgZmlsbC1ydWxlOiBldmVub2RkOyIgZD0iTTM2LDE4OS40di0xMDkuMWMwLTAuNywwLjQtMS42LDEuMS0ybDk0LjctNTcuMWMwLjctMC41LDEuNy0wLjUsMi41LDBsOTEuNSw1N2MwLjcsMC40LDEuMSwxLjEsMS4xLDJ2MTA3LjljMCwwLjctMC40LDEuNS0xLjEsMmwtMTkuMywxMi42Yy0xLjUsMS0zLjYsMC0zLjYtMnYtMTA1LjljMC0wLjctMC40LTEuNi0xLjEtMmwtNjcuNS00MS4zYy0wLjctMC41LTEuNi0wLjUtMi4zLDBsLTY5LjYsNDEuM2MtMC43LDAuNC0xLjEsMS4xLTEuMSwydjEwNS45YzAsMS45LTIsMy0zLjYsMmwtMjEuNS0xMy41aDB2LjJaTTg2LDExMC45djEwNi4zYzAsMC45LDAuNCwxLjYsMS4xLDJsNDQuNSwyNi43YzAuNywwLjUsMS43LDAuNCwyLjUsMGw0Mi41LTI2LjdjMC43LTAuNCwxLjEtMS4xLDEuMS0ydi0xMDUuOGMwLTAuNy0wLjQtMS41LTEuMS0ybC0yOC43LTE3LjljLTEuNS0xLTMuNiwwLjEtMy42LDJ2MTIxLjZjMCwwLjctMC40LDEuNS0xLjEsMmwtOS4zLDUuOWMtMC43LDAuNS0xLjYsMC41LTIuMywwbC0xMS4xLTUuOWMtMC43LTAuNC0xLjItMS4yLTEuMi0yLjF2LTEyMS43YzAtMS43LTItMy0zLjUtMmwtMjguOCwxNi4yYy0wLjcsMC40LTEuMSwxLjEtMS4xLDJ2MS41aC4xWiIvPgogICAgPC9nPgo8L3N2Zz4K"
       style={
         Object {
           "--width": "400px",

package/lib/defaultRoutes.json

@@ -53,6 +53,12 @@
         "exact": true,
         "path": "../ForgotPasswordPage"
     },
+    {
+        "name": "OrderConfirmation",
+        "pattern": "/order-confirmation",
+        "exact": true,
+        "path": "../CheckoutPage/OrderConfirmationPage"
+    },
     {
         "name": "OrderHistory",
         "pattern": "/order-history",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magento/venia-ui",
-  "version": "11.5.0-beta.2",
+  "version": "11.6.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
@@ -80,10 +80,10 @@
   "peerDependencies": {
     "@apollo/client": "~3.5.0",
     "@magento/babel-preset-peregrine": "~1.3.3",
-    "@magento/peregrine": "14.4.1-beta.2",
-    "@magento/pwa-buildpack": "~11.5.3",
+    "@magento/peregrine": "14.5.1-alpha.4",
+    "@magento/pwa-buildpack": "11.5.4-alpha.4",
     "apollo-cache-persist": "~0.1.1",
-    "braintree-web-drop-in": "~1.33.3",
+    "braintree-web-drop-in": "~1.43.0",
     "graphql": "~15.5.0",
     "react": "~17.0.1",
     "react-intl": "~5.20.0",

package/upward.yml

@@ -23,6 +23,12 @@ veniaResponse:
         - matches:  urlResolver.redirect_code
           pattern: '(301|302)'
           use: dynamicRedirect
+        - matches: request.url.pathname
+          pattern: '^/(account-information|address-book|cart|checkout|communications|sign-in|contact-us|create-account|forgot-password|order-confirmation|order-history|customer/account/createPassword|saved-payments|search\.html|wishlist)$'
+          use: veniaAppShell
+        - matches:  urlResolver.redirect_code
+          pattern: '(404)'
+          use: notFoundResponse
     default: veniaAppShell
 
 # A FileResolver for serving certain files directly from document root,
@@ -255,4 +261,28 @@ dynamicRedirect:
             resolver: file
             file:
               resolver: inline
-              inline: './index.html'
+              inline: './index.html'
+
+notFoundResponse:
+  resolver: inline
+  inline:
+    status: urlResolver.redirect_code
+    headers:
+        resolver: inline
+        inline:
+            content-type:
+                inline: text/html
+            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'