@riosst100/pwa-marketplace 1.3.2 → 1.3.4

package/src/overwrites/venia-ui/lib/components/FilterModal/filterModal.module.css

@@ -0,0 +1,87 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: max-w-modal from global;
+    composes: opacity-0 from global;
+    composes: overflow-hidden from global;
+    composes: fixed from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
+    grid-template-rows: 1fr 7rem;
+    transform: translate3d(-100%, 0, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+    transition-property: opacity, transform, visibility;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+}
+
+.root_open {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: shadow-modal from global;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.body {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+    composes: pb-0 from global;
+    composes: pt-5 from global;
+    composes: px-5 from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-none from global;
+    composes: text-xl from global;
+}
+
+.action {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-sm from global; */
+    font-size: 0.875rem;
+    /* composes: no-underline from global; */
+    text-decoration: none;
+}
+
+.blocks {
+    composes: pb-0 from global;
+    composes: pt-xs from global;
+    composes: px-xs from global;
+}
+
+/* TODO @TW: cannot compose */
+.blocks > li:last-child {
+    /* composes: border-b-2 from global; */
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
+    border-bottom: 2px solid rgb(var(--venia-global-color-border));
+}

package/src/overwrites/venia-ui/lib/components/FilterModal/filterSearch.module.css

@@ -0,0 +1,3 @@
+.root {
+    composes: pb-xs from global;
+}

package/src/overwrites/venia-ui/lib/components/FilterModal/index.js

@@ -0,0 +1 @@
+export { default } from './filterModal';

package/src/overwrites/venia-ui/lib/components/FilterSidebar/__tests__/filterSidebar.spec.js

@@ -0,0 +1,246 @@
+import React from 'react';
+import { act } from 'react-test-renderer';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import FilterBlock, { mockFilterBlock } from '../../FilterModal/filterBlock';
+import { mockCurrentFilters } from '../../FilterModal/CurrentFilters';
+import LinkButton from '../../LinkButton';
+import FilterSidebar from '../filterSidebar';
+
+const mockFilters = [
+    {
+        attribute_code: 'foo',
+        label: 'Foo',
+        options: [
+            {
+                label: 'value 1',
+                value: 1
+            }
+        ]
+    },
+    {
+        attribute_code: 'bar',
+        label: 'Bar',
+        options: [
+            {
+                label: 'value 1',
+                value: 1
+            },
+            {
+                label: 'value 2',
+                value: 2
+            }
+        ]
+    },
+    {
+        attribute_code: 'baz',
+        label: 'Baz',
+        options: [
+            {
+                label: 'value 1',
+                value: 1
+            }
+        ]
+    }
+];
+
+const mockFiltersOpenCount = 2;
+
+const mockHandleApply = jest.fn();
+
+const mockScrollTo = jest.fn();
+
+const mockGetBoundingClientRect = jest.fn();
+
+let mockFilterState;
+
+jest.mock('../../LinkButton', () => props => <mock-LinkButton {...props} />);
+
+jest.mock('@magento/peregrine/lib/talons/FilterSidebar', () => ({
+    useFilterSidebar: jest.fn(({ filters }) => {
+        const names = new Map();
+        const itemsByGroup = new Map();
+        const filterFrontendInput = new Map();
+
+        for (const filter of filters) {
+            const {
+                options,
+                label: name,
+                attribute_code: group,
+                frontend_input
+            } = filter;
+            const items = [];
+            // add filter name
+            names.set(group, name);
+            filterFrontendInput.set(group, frontend_input);
+            // add items
+            for (const { label, value } of options) {
+                items.push({ title: label, value });
+            }
+            itemsByGroup.set(group, items);
+        }
+
+        return {
+            filterApi: null,
+            filterItems: itemsByGroup,
+            filterNames: names,
+            filterFrontendInput,
+            filterState: mockFilterState,
+            handleApply: mockHandleApply,
+            handleReset: jest.fn()
+        };
+    })
+}));
+
+jest.mock('../../FilterModal/filterBlock', () => {
+    const mockedFilterBlock = jest.fn(() => {
+        return null;
+    });
+
+    return {
+        __esModule: true,
+        default: mockedFilterBlock,
+        mockFilterBlock: mockedFilterBlock
+    };
+});
+
+jest.mock('../../FilterModal/CurrentFilters', () => {
+    const mockedCurrentFilters = jest.fn(() => {
+        return null;
+    });
+
+    return {
+        __esModule: true,
+        default: mockedCurrentFilters,
+        mockCurrentFilters: mockedCurrentFilters
+    };
+});
+
+let inputProps = {};
+
+const Component = () => {
+    return <FilterSidebar {...inputProps} />;
+};
+
+const givenDefaultValues = () => {
+    inputProps = {
+        filters: []
+    };
+
+    mockFilterState = new Map();
+};
+
+const givenFilters = () => {
+    inputProps = {
+        filters: mockFilters
+    };
+};
+
+const givenSelectedFilters = () => {
+    inputProps = {
+        filters: mockFilters
+    };
+
+    mockFilterState = new Map([['group', 'item']]);
+};
+
+const givenFiltersAndAmountToShow = () => {
+    inputProps = {
+        filters: mockFilters,
+        filterCountToOpen: mockFiltersOpenCount
+    };
+};
+
+describe('#FilterSidebar', () => {
+    beforeEach(() => {
+        mockFilterBlock.mockClear();
+        mockCurrentFilters.mockClear();
+
+        givenDefaultValues();
+    });
+
+    it('renders without filters', () => {
+        createTestInstance(<Component />);
+
+        expect(mockFilterBlock).not.toHaveBeenCalled();
+        expect(mockCurrentFilters).toHaveBeenCalled();
+    });
+
+    it('renders with filters and no selected filters', () => {
+        givenFilters();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).toThrow();
+        expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
+    });
+
+    it('renders with filters and selected filter', () => {
+        givenSelectedFilters();
+
+        const { root } = createTestInstance(<Component />);
+
+        expect(() => root.findByType(LinkButton)).not.toThrow();
+        expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
+    });
+
+    it('handles when a user applies a filter and ref is not provided', () => {
+        givenSelectedFilters();
+
+        const { root } = createTestInstance(<Component />);
+
+        act(() => {
+            root.findAllByType(FilterBlock)[0].props.onApply();
+        });
+
+        expect(mockHandleApply).toHaveBeenCalled();
+    });
+
+    it('handles when a user applies a filter and ref is provided', () => {
+        givenSelectedFilters();
+
+        Object.defineProperty(window, 'scrollTo', {
+            configurable: true,
+            writable: true,
+            value: mockScrollTo
+        });
+
+        const { root } = createTestInstance(<Component />, {
+            createNodeMock: () => {
+                return {
+                    getBoundingClientRect: mockGetBoundingClientRect.mockReturnValue(
+                        {
+                            top: 250
+                        }
+                    )
+                };
+            }
+        });
+
+        act(() => {
+            root.findAllByType(FilterBlock)[0].props.onApply();
+        });
+
+        expect(mockGetBoundingClientRect).toBeCalledTimes(1);
+        expect(window.scrollTo).toBeCalledTimes(1);
+        expect(mockHandleApply).toHaveBeenCalled();
+    });
+
+    it('accepts configurable amount of open filters', () => {
+        givenFiltersAndAmountToShow();
+        createTestInstance(<Component />);
+
+        expect(mockFilterBlock).toHaveBeenCalledTimes(mockFilters.length);
+
+        for (let i = 1; i <= mockFilters.length; i++) {
+            expect(mockFilterBlock).toHaveBeenNthCalledWith(
+                i,
+                expect.objectContaining({
+                    initialOpen: i <= mockFiltersOpenCount
+                }),
+                expect.any(Object)
+            );
+        }
+    });
+});

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -3,12 +3,13 @@ import { FormattedMessage } from 'react-intl';
 import { array, arrayOf, shape, string, number } from 'prop-types';
 import { useFilterSidebar } from '@magento/peregrine/lib/talons/FilterSidebar';
 
-import { useStyle } from '../../classify';
-import LinkButton from '../LinkButton';
-import CurrentFilters from '../FilterModal/CurrentFilters';
-import FilterBlock from '../FilterModal/filterBlock';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LinkButton from '@magento/venia-ui/lib/components/LinkButton';
+import CurrentFilters from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/CurrentFilters';
+import FilterBlock from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterModal/filterBlock';
 import defaultClasses from './filterSidebar.module.css';
-import ShopByCategory from '@riosst100/pwa-marketplace/src/components/ShopByCategory';
+import { Filter } from 'iconsax-react';
+import cn from 'classnames';
 
 const SCROLL_OFFSET = 150;
 
@@ -18,8 +19,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { categoryName, children, parent, filters, filterCountToOpen } = props;
-
+    const { filters, filterCountToOpen } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -106,15 +106,16 @@ const FilterSidebar = props => {
             aria-busy="false"
         >
             <div className={classes.body}>
-                <div className={classes.header}>
+                <div className={cn(classes.header)}>
                     <h2
                         data-cy="FilterSidebar-headerTitle"
-                        className={classes.headerTitle}
+                        className={cn(classes.headerTitle, 'flex w-full justify-between items-center')}
                     >
                         <FormattedMessage
                             id={'filterModal.headerTitle'}
                             defaultMessage={'Filters'}
                         />
+                        <Filter size={15} className='text-gray-900' />
                     </h2>
                 </div>
                 <CurrentFilters
@@ -125,7 +126,6 @@ const FilterSidebar = props => {
                 />
                 {clearAll}
                 <ul className={classes.blocks}>{filtersList}</ul>
-                <ul className={classes.blocks}><ShopByCategory categoryName={categoryName} children={children} parent={parent} /></ul>
             </div>
         </aside>
     );

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.module.css

@@ -0,0 +1,57 @@
+.root {
+    composes: bg-white from global;
+    composes: bottom-0 from global;
+    composes: hidden from global;
+    composes: max-w-modal from global;
+    composes: w-full from global;
+    composes: z-foreground from global;
+    grid-template-rows: 1fr 7rem;
+
+    composes: lg_grid from global;
+    composes: border from global;
+    composes: border-gray-100 from global;
+    composes: shadow-type-1 from global;
+    composes: rounded-[6px] from global;
+    composes: py-2.5 from global;
+
+}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.header {
+    composes: flex from global;
+    composes: justify-between from global;
+}
+
+.headerTitle {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: leading-normal from global;
+    composes: text-[16px] from global;
+    composes: font-semibold from global;
+    composes: px-2.5 from global;
+    composes: mb-2.5 from global;
+}
+
+.action {
+    composes: px-2.5 from global;
+    composes: py-[5px] from global;
+}
+
+/* TODO @TW: cannot compose */
+.action button {
+    /* composes: text-sm from global; */
+    font-size: 13px;
+    /* composes: no-underline from global; */
+    font-weight: 500;
+    text-decoration: underline;
+}
+
+.blocks {
+    composes: px-2.5 from global;
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: gap-2.5 from global;
+}

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from './filterSidebar.module.css';
+
+const FilterSidebar = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <aside className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="95%" height="70vh" style={{ marginBottom: 25 }} />
+        </aside>
+    );
+};
+
+FilterSidebar.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default FilterSidebar;

package/src/overwrites/venia-ui/lib/components/FilterSidebar/index.js

@@ -0,0 +1,2 @@
+export { default } from './filterSidebar';
+export { default as FilterSidebarShimmer } from './filterSidebar.shimmer';

package/src/overwrites/venia-ui/lib/components/Gallery/addToCartButton.js

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { string, number, shape } from 'prop-types';
+import { useAddToCartButton } from '@magento/peregrine/lib/talons/Gallery/useAddToCartButton';
+import { ShoppingBag, XSquare } from 'react-feather';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './addToCartButton.module.css';
+
+const AddToCartButton = props => {
+    const { item, urlSuffix } = props;
+    const talonProps = useAddToCartButton({
+        item,
+        urlSuffix
+    });
+    const { handleAddToCart, isDisabled, isInStock } = talonProps;
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const AddToCartIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={ShoppingBag}
+            attrs={{ width: 16 }}
+        />
+    );
+
+    const OutOfStockIcon = (
+        <Icon
+            classes={{ icon: classes.icon }}
+            src={XSquare}
+            attrs={{ width: 16 }}
+        />
+    );
+
+    const buttonInStock = (
+        <Button
+            data-cy="AddToCartButton-buttonInStock"
+            aria-label={formatMessage({
+                id: 'addToCartButton.addItemToCartAriaLabel',
+                defaultMessage: 'Add to Cart'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {AddToCartIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.addItemToCart"
+                    defaultMessage="ADD TO CART"
+                />
+            </span>
+        </Button>
+    );
+
+    const buttonOutOfStock = (
+        <Button
+            data-cy="AddtoCartButton-buttonOutOfStock"
+            aria-label={formatMessage({
+                id: 'addToCartButton.itemOutOfStockAriaLabel',
+                defaultMessage: 'Out of Stock'
+            })}
+            className={classes.root}
+            disabled={isDisabled}
+            onPress={handleAddToCart}
+            priority="high"
+            type="button"
+        >
+            {OutOfStockIcon}
+            <span className={classes.text}>
+                <FormattedMessage
+                    id="addToCartButton.itemOutOfStock"
+                    defaultMessage="OUT OF STOCK"
+                />
+            </span>
+        </Button>
+    );
+
+    return isInStock ? buttonInStock : buttonOutOfStock;
+};
+
+export default AddToCartButton;
+
+AddToCartButton.propTypes = {
+    classes: shape({
+        root: string,
+        root_selected: string
+    }),
+    item: shape({
+        id: number.isRequired,
+        uid: string.isRequired,
+        name: string.isRequired,
+        small_image: shape({
+            url: string
+        }),
+        stock_status: string.isRequired,
+        __typename: string.isRequired,
+        url_key: string.isRequired,
+        url_suffix: string,
+        sku: string.isRequired,
+        price: shape({
+            regularPrice: shape({
+                amount: shape({
+                    value: number,
+                    currency: string
+                })
+            })
+        })
+    }),
+    urlSuffix: string
+};

package/src/overwrites/venia-ui/lib/components/Gallery/addToCartButton.module.css

@@ -0,0 +1,38 @@
+.root {
+    composes: root;
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
+
+    composes: min-w-[6.125rem] from global;
+    composes: -ml-2xs from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: self-center from global;
+    min-height: 2rem;
+
+    composes: sm_min-w-[8rem] from global;
+    /* composes: md_min-w-0 from global; */
+}
+
+.icon {
+    composes: inline from global;
+    composes: stroke-white from global;
+
+    composes: xs_hidden from global;
+}
+
+.text {
+    composes: hidden from global;
+
+    composes: xs_inline from global;
+}

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.js

@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react';
+import { string, shape, array } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import GalleryItem from './item';
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './gallery.module.css';
+import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
+
+/**
+ * Renders a Gallery of items. If items is an array of nulls Gallery will render
+ * a placeholder item for each.
+ *
+ * @params {Array} props.items an array of items to render
+ */
+const Gallery = props => {
+    const { items } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useGallery();
+    const { storeConfig } = talonProps;
+
+    const galleryItems = useMemo(
+        () =>
+            items.map((item, index) => {
+                if (item === null) {
+                    return <GalleryItemShimmer key={index} />;
+                }
+                return (
+                    <GalleryItem
+                        key={item.id}
+                        item={item}
+                        storeConfig={storeConfig}
+                    />
+                );
+            }),
+        [items, storeConfig]
+    );
+
+    return (
+        <div data-cy="Gallery-root" className={classes.root} aria-busy="false">
+            <div className={classes.items}>{galleryItems}</div>
+        </div>
+    );
+};
+
+Gallery.propTypes = {
+    classes: shape({
+        filters: string,
+        items: string,
+        pagination: string,
+        root: string
+    }),
+    items: array.isRequired
+};
+
+export default Gallery;