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

package/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js

@@ -3,6 +3,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { object, shape, string } from 'prop-types';
 import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage';
 
+import { useLocation } from 'react-router-dom';
+import { fullPageLoadingIndicator } from '../../LoadingIndicator';
 import { useStyle } from '../../../classify';
 import { StoreTitle } from '../../../components/Head';
 import CreateAccount from './createAccount';
@@ -11,34 +13,19 @@ import defaultClasses from './orderConfirmationPage.module.css';
 
 const OrderConfirmationPage = props => {
     const classes = useStyle(defaultClasses, props.classes);
-    const { data, orderNumber } = props;
+    const location = useLocation();
+    const data = props.data;
+    const orderNumber = props.orderNumber || location.state.orderNumber;
+    const cartItems = data ? data.cart.items : location.state.items;
+
     const { formatMessage } = useIntl();
 
     const talonProps = useOrderConfirmationPage({
-        data
+        data,
+        orderNumber
     });
 
-    const { flatData, isSignedIn } = talonProps;
-
-    const {
-        city,
-        country,
-        email,
-        firstname,
-        lastname,
-        postcode,
-        region,
-        shippingMethod,
-        street
-    } = flatData;
-
-    const streetRows = street.map((row, index) => {
-        return (
-            <span key={index} className={classes.addressStreet}>
-                {row}
-            </span>
-        );
-    });
+    const { flatData, isSignedIn, loading } = talonProps;
 
     useEffect(() => {
         const { scrollTo } = globalThis;
@@ -52,90 +39,118 @@ const OrderConfirmationPage = props => {
         }
     }, []);
 
-    const createAccountForm = !isSignedIn ? (
-        <CreateAccount
-            firstname={firstname}
-            lastname={lastname}
-            email={email}
-        />
-    ) : null;
+    if (!flatData || loading) {
+        return fullPageLoadingIndicator;
+    } else {
+        const {
+            city,
+            country,
+            email,
+            firstname,
+            lastname,
+            postcode,
+            region,
+            shippingMethod,
+            street
+        } = flatData;
 
-    const nameString = `${firstname} ${lastname}`;
-    const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+        const streetRows = street.map((row, index) => {
+            return (
+                <span key={index} className={classes.addressStreet}>
+                    {row}
+                </span>
+            );
+        });
 
-    return (
-        <div className={classes.root} data-cy="OrderConfirmationPage-root">
-            <StoreTitle>
-                {formatMessage({
-                    id: 'checkoutPage.titleReceipt',
-                    defaultMessage: 'Receipt'
-                })}
-            </StoreTitle>
-            <div className={classes.mainContainer}>
-                <h2
-                    data-cy="OrderConfirmationPage-header"
-                    className={classes.heading}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.thankYou'}
-                        defaultMessage={'Thank you for your order!'}
-                    />
-                </h2>
-                <div
-                    data-cy="OrderConfirmationPage-orderNumber"
-                    className={classes.orderNumber}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.orderNumber'}
-                        defaultMessage={'Order Number: {orderNumber}'}
-                        values={{ orderNumber }}
-                    />
-                </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingInfoHeading"
-                    className={classes.shippingInfoHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingInformation'}
-                        defaultMessage={'Shipping Information'}
-                    />
-                </div>
-                <div className={classes.shippingInfo}>
-                    <span className={classes.email}>{email}</span>
-                    <span className={classes.name}>{nameString}</span>
-                    {streetRows}
-                    <span className={classes.addressAdditional}>
-                        {additionalAddressString}
-                    </span>
-                </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingMethodHeading"
-                    className={classes.shippingMethodHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingMethod'}
-                        defaultMessage={'Shipping Method'}
-                    />
-                </div>
-                <div className={classes.shippingMethod}>{shippingMethod}</div>
-                <div className={classes.itemsReview}>
-                    <ItemsReview data={data} />
+        const createAccountForm = !isSignedIn ? (
+            <CreateAccount
+                firstname={firstname}
+                lastname={lastname}
+                email={email}
+            />
+        ) : null;
+
+        const nameString = `${firstname} ${lastname}`;
+        const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+
+        return (
+            <div className={classes.root} data-cy="OrderConfirmationPage-root">
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'checkoutPage.titleReceipt',
+                        defaultMessage: 'Receipt'
+                    })}
+                </StoreTitle>
+                <div className={classes.mainContainer}>
+                    <h2
+                        data-cy="OrderConfirmationPage-header"
+                        className={classes.heading}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.thankYou'}
+                            defaultMessage={'Thank you for your order!'}
+                        />
+                    </h2>
+                    <div
+                        data-cy="OrderConfirmationPage-orderNumber"
+                        className={classes.orderNumber}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.orderNumber'}
+                            defaultMessage={'Order Number: {orderNumber}'}
+                            values={{ orderNumber }}
+                        />
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-shippingInfoHeading"
+                        className={classes.shippingInfoHeading}
+                    >
+                        <FormattedMessage
+                            id={'global.shippingInformation'}
+                            defaultMessage={'Shipping Information'}
+                        />
+                    </div>
+                    <div className={classes.shippingInfo}>
+                        <span className={classes.email}>{email}</span>
+                        <span className={classes.name}>{nameString}</span>
+                        {streetRows}
+                        <span className={classes.addressAdditional}>
+                            {additionalAddressString}
+                        </span>
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-shippingMethodHeading"
+                        className={classes.shippingMethodHeading}
+                    >
+                        <FormattedMessage
+                            id={'global.shippingMethod'}
+                            defaultMessage={'Shipping Method'}
+                        />
+                    </div>
+                    <div className={classes.shippingMethod}>
+                        {shippingMethod}
+                    </div>
+                    <div className={classes.itemsReview}>
+                        <ItemsReview items={cartItems} />
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-additionalText"
+                        className={classes.additionalText}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.additionalText'}
+                            defaultMessage={
+                                'You will also receive an email with the details and we will let you know when your order has shipped.'
+                            }
+                        />
+                    </div>
                 </div>
-                <div
-                    data-cy="OrderConfirmationPage-additionalText"
-                    className={classes.additionalText}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.additionalText'}
-                        defaultMessage={
-                            'You will also receive an email with the details and we will let you know when your order has shipped.'
-                        }
-                    />
+                <div className={classes.sidebarContainer}>
+                    {createAccountForm}
                 </div>
             </div>
-            <div className={classes.sidebarContainer}>{createAccountForm}</div>
-        </div>
-    );
+        );
+    }
 };
 
 export default OrderConfirmationPage;
@@ -157,6 +172,6 @@ OrderConfirmationPage.propTypes = {
         additionalText: string,
         sidebarContainer: string
     }),
-    data: object.isRequired,
+    data: object,
     orderNumber: string
 };

package/lib/components/CheckoutPage/checkoutPage.js

@@ -2,14 +2,13 @@ import React, { Fragment, useEffect } from 'react';
 import { shape, string } from 'prop-types';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { AlertCircle as AlertCircleIcon } from 'react-feather';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { useWindowSize, useToasts } from '@magento/peregrine';
 import {
     CHECKOUT_STEP,
     useCheckoutPage
 } from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
-
 import { useStyle } from '../../classify';
 import Button from '../Button';
 import { StoreTitle } from '../Head';
@@ -25,8 +24,8 @@ import payments from './PaymentInformation/paymentMethodCollection';
 import PriceAdjustments from './PriceAdjustments';
 import ShippingMethod from './ShippingMethod';
 import ShippingInformation from './ShippingInformation';
-import OrderConfirmationPage from './OrderConfirmationPage';
 import ItemsReview from './ItemsReview';
+import OrderConfirmationPage from './OrderConfirmationPage';
 import GoogleReCaptcha from '../GoogleReCaptcha';
 
 import defaultClasses from './checkoutPage.module.css';
@@ -35,6 +34,7 @@ import ScrollAnchor from '../ScrollAnchor/scrollAnchor';
 const errorIcon = <Icon src={AlertCircleIcon} size={20} />;
 
 const CheckoutPage = props => {
+    const history = useHistory();
     const { classes: propClasses } = props;
     const { formatMessage } = useIntl();
     const talonProps = useCheckoutPage();
@@ -58,8 +58,8 @@ const CheckoutPage = props => {
         isGuestCheckout,
         isLoading,
         isUpdating,
-        orderDetailsData,
         orderDetailsLoading,
+        orderDetailsData,
         orderNumber,
         placeOrderLoading,
         placeOrderButtonClicked,
@@ -83,7 +83,15 @@ const CheckoutPage = props => {
     } = talonProps;
 
     const [, { addToast }] = useToasts();
-
+    const orderCount = localStorage.getItem('orderCount');
+    useEffect(() => {
+        if (isGuestCheckout && !orderDetailsData) {
+            if (orderCount === '1') {
+                history.push('/');
+                localStorage.setItem('orderCount', '0');
+            }
+        }
+    }, [isGuestCheckout, history, orderDetailsData, orderCount]);
     useEffect(() => {
         if (hasError) {
             const message =
@@ -125,7 +133,7 @@ const CheckoutPage = props => {
               defaultMessage: 'Checkout'
           });
 
-    if (orderNumber && orderDetailsData) {
+    if (isGuestCheckout && orderDetailsData && orderNumber) {
         return (
             <OrderConfirmationPage
                 data={orderDetailsData}
@@ -265,7 +273,7 @@ const CheckoutPage = props => {
         const itemsReview =
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <div className={classes.items_review_container}>
-                    <ItemsReview />
+                    <ItemsReview items={cartItems} />
                 </div>
             ) : null;
 

package/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -4,6 +4,8 @@ import { createTestInstance } from '@magento/peregrine';
 
 import CreateAccount from '../createAccount';
 
+import { useHistory, useLocation } from 'react-router-dom';
+
 jest.mock('@apollo/client', () => ({
     gql: jest.fn(),
     useApolloClient: jest.fn().mockImplementation(() => {}),
@@ -24,6 +26,16 @@ jest.mock('@apollo/client', () => ({
     }))
 }));
 
+// Mocking the react-router hooks
+
+jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+
+    useHistory: jest.fn(),
+
+    useLocation: jest.fn()
+}));
+
 jest.mock('../../../util/formValidators');
 jest.mock('@magento/peregrine/lib/context/user', () => {
     const userState = {
@@ -58,6 +70,24 @@ jest.mock('@magento/peregrine/lib/hooks/useAwaitQuery', () => {
     return { useAwaitQuery };
 });
 
+// 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
+    });
+});
+
 jest.mock('@magento/peregrine/lib/context/eventing', () => ({
     useEventingContext: jest.fn().mockReturnValue([{}, { dispatch: jest.fn() }])
 }));

package/lib/components/FilterModal/CurrentFilters/__tests__/currentFilter.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-test-renderer';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -19,7 +20,11 @@ jest.mock('../../../Trigger', () => props => <mock-Trigger {...props} />);
 let inputProps = {};
 
 const Component = () => {
-    return <CurrentFilter {...inputProps} />;
+    return (
+        <MemoryRouter>
+            <CurrentFilter {...inputProps} />
+        </MemoryRouter>
+    );
 };
 
 const givenDefaultValues = () => {

package/lib/components/FilterModal/CurrentFilters/currentFilter.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useIntl } from 'react-intl';
 import { shape, string, func } from 'prop-types';
 import { X as Remove } from 'react-feather';
+import { useHistory, useLocation } from 'react-router-dom';
 
 import { useStyle } from '../../../classify';
 import Icon from '../../Icon';
@@ -12,13 +13,22 @@ const CurrentFilter = props => {
     const { group, item, removeItem, onRemove } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const { formatMessage } = useIntl();
+    const location = useLocation();
+    const history = useHistory();
 
     const handleClick = useCallback(() => {
         removeItem({ group, item });
         if (typeof onRemove === 'function') {
             onRemove(group, item);
         }
-    }, [group, item, removeItem, onRemove]);
+
+        if (group == 'price') {
+            // preserve all existing params
+            const params = new URLSearchParams(location.search);
+            params.delete('price[filter]');
+            history.replace({ search: params.toString() });
+        }
+    }, [group, item, removeItem, onRemove, history, location.search]);
 
     const ariaLabel = formatMessage(
         {

package/lib/components/FilterModal/FilterList/__tests__/filterList.spec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 import { createTestInstance } from '@magento/peregrine';
 
@@ -67,7 +68,11 @@ describe('#FilterList', () => {
     });
 
     it('renders without show more button', () => {
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(root.findAllByType(FilterItem)).toHaveLength(2);
         expect(() => root.findByType('button')).toThrow();
@@ -76,7 +81,11 @@ describe('#FilterList', () => {
     it('renders with show more button', () => {
         givenShowMore();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowMore);
@@ -86,7 +95,11 @@ describe('#FilterList', () => {
         givenShowMore();
         givenExpanded();
 
-        const { root } = createTestInstance(<Component />);
+        const { root } = createTestInstance(
+            <MemoryRouter>
+                <Component />
+            </MemoryRouter>
+        );
 
         expect(() => root.findByType('button')).not.toThrow();
         expect(root.findByType('button').children[0]).toBe(mockShowLess);

package/lib/components/FilterModal/FilterList/filterList.js

@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo } from 'react';
+import React, { Fragment, useMemo, useCallback } from 'react';
 import { array, func, number, shape, string } from 'prop-types';
 import { useIntl } from 'react-intl';
 import setValidator from '@magento/peregrine/lib/validators/set';
@@ -8,6 +8,8 @@ import { useStyle } from '../../../classify';
 import FilterItem from './filterItem';
 import defaultClasses from './filterList.module.css';
 import FilterItemRadioGroup from './filterItemRadioGroup';
+import RangeSlider from '../../RangeSlider/rangeSlider';
+import { useHistory, useLocation } from 'react-router-dom';
 
 const labels = new WeakMap();
 
@@ -22,13 +24,46 @@ const FilterList = props => {
         items,
         onApply
     } = props;
+    const { pathname, search } = useLocation();
+    const history = useHistory();
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = useFilterList({ filterState, items, itemCountToShow });
     const { isListExpanded, handleListToggle } = talonProps;
     const { formatMessage } = useIntl();
 
-    // memoize item creation
-    // search value is not referenced, so this array is stable
+    if (name === 'Price') {
+        var minRange = Number(items[0].value.split('_')[0]);
+        var maxRange = Number(items[items.length - 1].value.split('_')[1]);
+        if (filterState !== undefined) {
+            const filterArray = [...filterState];
+            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+        }
+    }
+
+    const handleChange = useCallback(
+        newValue => {
+            const test = String(search).split('&');
+            const filters = test.filter(element => {
+                return !element.includes('price');
+            });
+            const newSearch = filters.join('&');
+            const nextParams = new URLSearchParams(newSearch);
+
+            const DELIMITER = ',';
+            const title = String(newValue.min) + '-' + String(newValue.max);
+            const value = String(newValue.min) + '_' + String(newValue.max);
+            nextParams.append(
+                `${group}[filter]`,
+                `${title}${DELIMITER}${value}`
+            );
+
+            history.push({ pathname, search: String(nextParams) });
+        },
+        [group, history, pathname, search]
+    );
+
+    // Memoize item creation
     const itemElements = useMemo(() => {
         if (filterFrontendInput === 'boolean') {
             const key = `item-${group}`;
@@ -51,36 +86,46 @@ const FilterList = props => {
             );
         }
 
-        return items.map((item, index) => {
-            const { title, value } = item;
-            const key = `item-${group}-${value}`;
-
-            if (!isListExpanded && index >= itemCountToShow) {
-                return null;
-            }
-
-            // create an element for each item
-            const element = (
-                <li
-                    key={key}
-                    className={classes.item}
-                    data-cy="FilterList-item"
-                >
-                    <FilterItem
-                        filterApi={filterApi}
-                        filterState={filterState}
-                        group={group}
-                        item={item}
-                        onApply={onApply}
+        if (name === 'Price') {
+            return (
+                <div className={classes.root}>
+                    <RangeSlider
+                        min={minRange}
+                        max={maxRange}
+                        initialMin={currentMinVal}
+                        initialMax={currentMaxVal}
+                        onChange={handleChange}
                     />
-                </li>
+                </div>
             );
+        } else {
+            return items.map((item, index) => {
+                const { title, value } = item;
+                const key = `item-${group}-${value}`;
+
+                if (!isListExpanded && index >= itemCountToShow) {
+                    return null;
+                }
 
-            // associate each element with its normalized title
-            // titles are not unique, so use the element as the key
-            labels.set(element, title.toUpperCase());
-            return element;
-        });
+                const element = (
+                    <li
+                        key={key}
+                        className={classes.item}
+                        data-cy="FilterList-item"
+                    >
+                        <FilterItem
+                            filterApi={filterApi}
+                            filterState={filterState}
+                            group={group}
+                            item={item}
+                            onApply={onApply}
+                        />
+                    </li>
+                );
+                labels.set(element, title.toUpperCase());
+                return element;
+            });
+        }
     }, [
         classes,
         filterApi,
@@ -91,7 +136,12 @@ const FilterList = props => {
         items,
         isListExpanded,
         itemCountToShow,
-        onApply
+        onApply,
+        minRange,
+        maxRange,
+        currentMinVal,
+        currentMaxVal,
+        handleChange
     ]);
 
     const showMoreLessItem = useMemo(() => {

package/lib/components/FilterModal/filterBlock.js

@@ -28,7 +28,8 @@ const FilterBlock = props => {
     const talonProps = useFilterBlock({
         filterState,
         items,
-        initialOpen
+        initialOpen,
+        group
     });
     const { handleClick, isExpanded } = talonProps;
     const iconSrc = isExpanded ? ArrowUp : ArrowDown;