@riosst100/pwa-marketplace 1.2.4 → 1.2.5

package/src/overwrites/venia-ui/lib/components/SearchBar/__tests__/suggestions.spec.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import Suggestions from '../suggestions';
+
+jest.mock('../suggestedCategories', () => () => null);
+jest.mock('../suggestedProducts', () => () => null);
+
+test('renders correctly', () => {
+    const products = {
+        items: [{}]
+    };
+
+    const filters = [];
+
+    const instance = createTestInstance(
+        <Suggestions
+            displayResult={true}
+            filters={filters}
+            products={products}
+            visible={true}
+        />
+    );
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders null if there are no items', () => {
+    const products = {
+        aggregations: [],
+        items: null
+    };
+
+    const { root } = createTestInstance(
+        <Suggestions displayResult={true} products={products} visible={true} />
+    );
+
+    expect(root.children).toEqual([]);
+});
+
+test('renders null if displayResult is false', () => {
+    const products = {
+        aggregations: [],
+        items: []
+    };
+
+    const { root } = createTestInstance(
+        <Suggestions displayResult={false} products={products} visible={true} />
+    );
+
+    expect(root.children).toEqual([]);
+});
+
+test('renders null if visible is false', () => {
+    const products = {
+        items: []
+    };
+    const filters = [];
+
+    const { root } = createTestInstance(
+        <Suggestions
+            displayResult={true}
+            filters={filters}
+            products={products}
+            visible={false}
+        />
+    );
+
+    expect(root.children).toEqual([]);
+});
+
+test('renders null if items array is empty', () => {
+    const products = {
+        items: []
+    };
+    const filters = [];
+
+    const { root } = createTestInstance(
+        <Suggestions
+            displayResult={true}
+            filters={filters}
+            products={products}
+            visible={true}
+        />
+    );
+
+    expect(root.children).toEqual([]);
+});
+
+test('renders a category list', () => {
+    const filters = [
+        { label: 'Color', options: [] },
+        { label: 'Category', options: [] }
+    ];
+
+    const products = {
+        items: [{}]
+    };
+
+    const { root } = createTestInstance(
+        <Suggestions
+            displayResult={true}
+            filters={filters}
+            products={products}
+            visible={true}
+        />
+    );
+
+    expect(root.findByProps({ categories: filters[1].options })).toBeTruthy();
+});

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.js

@@ -0,0 +1,172 @@
+import React from 'react';
+import { gql } from '@apollo/client';
+import { bool, func, shape, string } from 'prop-types';
+import { useAutocomplete } from '@magento/peregrine/lib/talons/SearchBar';
+import { useIntl } from 'react-intl';
+
+import defaultClasses from './autocomplete.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Suggestions from './suggestions';
+
+const GET_AUTOCOMPLETE_RESULTS = gql`
+    query getAutocompleteResults($inputText: String!) {
+        # Limit results to first three.
+        products(search: $inputText, currentPage: 1, pageSize: 3) {
+            aggregations {
+                label
+                count
+                attribute_code
+                options {
+                    label
+                    value
+                }
+                position
+            }
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            items {
+                id
+                uid
+                sku
+                name
+                small_image {
+                    url
+                }
+                url_key
+                url_suffix
+                price {
+                    regularPrice {
+                        amount {
+                            value
+                            currency
+                        }
+                    }
+                }
+                price_range {
+                    maximum_price {
+                        final_price {
+                            currency
+                            value
+                        }
+                        discount {
+                            amount_off
+                        }
+                    }
+                }
+            }
+            page_info {
+                total_pages
+            }
+            total_count
+        }
+    }
+`;
+
+const Autocomplete = props => {
+    const { setVisible, valid, visible } = props;
+    const talonProps = useAutocomplete({
+        queries: {
+            getAutocompleteResults: GET_AUTOCOMPLETE_RESULTS
+        },
+        valid,
+        visible
+    });
+    const {
+        displayResult,
+        filters,
+        messageType,
+        products,
+        resultCount,
+        value
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = visible ? classes.root_visible : classes.root_hidden;
+
+    const { formatMessage } = useIntl();
+    const MESSAGES = new Map()
+        .set(
+            'ERROR',
+            formatMessage({
+                id: 'autocomplete.error',
+                defaultMessage: 'An error occurred while fetching results.'
+            })
+        )
+        .set(
+            'LOADING',
+            formatMessage({
+                id: 'autocomplete.loading',
+                defaultMessage: 'Fetching results...'
+            })
+        )
+        .set(
+            'PROMPT',
+            formatMessage({
+                id: 'autocomplete.prompt',
+                defaultMessage: 'Search for a product'
+            })
+        )
+        .set(
+            'EMPTY_RESULT',
+            formatMessage({
+                id: 'autocomplete.emptyResult',
+                defaultMessage: 'No results were found.'
+            })
+        )
+        .set('RESULT_SUMMARY', (_, resultCount) =>
+            formatMessage(
+                {
+                    id: 'autocomplete.resultSummary',
+                    defaultMessage: '{resultCount} items'
+                },
+                { resultCount: resultCount }
+            )
+        )
+        .set(
+            'INVALID_CHARACTER_LENGTH',
+            formatMessage({
+                id: 'autocomplete.invalidCharacterLength',
+                defaultMessage: 'Search term must be at least three characters'
+            })
+        );
+
+    const messageTpl = MESSAGES.get(messageType);
+    const message =
+        typeof messageTpl === 'function'
+            ? messageTpl`${resultCount}`
+            : messageTpl;
+
+    return (
+        <div data-cy="Autocomplete-root" className={rootClassName}>
+            <label
+                id="search_query"
+                data-cy="Autocomplete-message"
+                className={classes.message}
+            >
+                {message}
+            </label>
+            <div className={classes.suggestions}>
+                <Suggestions
+                    displayResult={displayResult}
+                    products={products || {}}
+                    filters={filters}
+                    searchValue={value}
+                    setVisible={setVisible}
+                    visible={visible}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default Autocomplete;
+
+Autocomplete.propTypes = {
+    classes: shape({
+        message: string,
+        root_hidden: string,
+        root_visible: string,
+        suggestions: string
+    }),
+    setVisible: func,
+    visible: bool
+};

package/src/overwrites/venia-ui/lib/components/SearchBar/autocomplete.module.css

@@ -0,0 +1,62 @@
+.root {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: border-2 from global;
+    composes: border-input from global;
+    composes: border-solid from global;
+    composes: border-t-0 from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: left-0 from global;
+    composes: p-xs from global;
+    composes: right-0 from global;
+    composes: rounded-b-md from global;
+    composes: rounded-t-none from global;
+    composes: shadow-inputFocus from global;
+    composes: text-sm from global;
+    composes: top-9 from global;
+    composes: z-menu from global;
+    transition-property: opacity, transform, visibility;
+}
+
+.root_hidden {
+    composes: root;
+
+    composes: invisible from global;
+    composes: opacity-0 from global;
+    transform: translate3d(0, -2rem, 0);
+    transition-duration: 192ms;
+    transition-timing-function: var(--venia-global-anim-out);
+}
+
+.root_visible {
+    composes: root;
+
+    composes: opacity-100 from global;
+    composes: visible from global;
+    transform: translate3d(0, 0, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+}
+
+.message {
+    composes: px-3 from global;
+    composes: py-0 from global;
+    composes: text-center from global;
+    composes: text-subtle from global;
+}
+
+/* TODO @TW: cannot compose */
+.message:empty {
+    padding: 0;
+}
+
+.suggestions {
+    composes: gap-2xs from global;
+    composes: grid from global;
+}
+
+/* TODO @TW: cannot compose */
+.suggestions:empty {
+    display: none;
+}

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

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

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { bool, shape, string } from 'prop-types';
+import { Form } from 'informed';
+import { useIntl } from 'react-intl';
+import { useSearchBar } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Autocomplete from './autocomplete';
+import SearchField from './searchField';
+import defaultClasses from './searchBar.module.css';
+
+const SearchBar = React.forwardRef((props, ref) => {
+    const { isOpen } = props;
+    const talonProps = useSearchBar();
+    const {
+        containerRef,
+        handleChange,
+        handleFocus,
+        handleSubmit,
+        initialValues,
+        isAutoCompleteOpen,
+        setIsAutoCompleteOpen,
+        valid
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = isOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+    return (
+        <div className={rootClassName} data-cy="SearchBar-root" ref={ref}>
+            <div ref={containerRef} className={classes.container}>
+                <Form
+                    autoComplete="off"
+                    className={classes.form}
+                    initialValues={initialValues}
+                    onSubmit={handleSubmit}
+                >
+                    <div className={classes.search}>
+                        <SearchField
+                            addLabel={formatMessage({
+                                id: 'global.clearText',
+                                defaultMessage: 'Clear Text'
+                            })}
+                            isSearchOpen={isAutoCompleteOpen}
+                            onChange={handleChange}
+                            onFocus={handleFocus}
+                        />
+                        <div className={classes.autocomplete}>
+                            <Autocomplete
+                                setVisible={setIsAutoCompleteOpen}
+                                valid={valid}
+                                visible={isAutoCompleteOpen}
+                            />
+                        </div>
+                    </div>
+                </Form>
+            </div>
+        </div>
+    );
+});
+
+export default SearchBar;
+
+SearchBar.propTypes = {
+    classes: shape({
+        autocomplete: string,
+        container: string,
+        form: string,
+        root: string,
+        root_open: string,
+        search: string
+    }),
+    isOpen: bool
+};

package/src/overwrites/venia-ui/lib/components/SearchBar/searchBar.module.css

@@ -0,0 +1,50 @@
+.root {
+    composes: items-center from global;
+    composes: justify-items-center from global;
+    composes: justify-self-center from global;
+    composes: max-w-site from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+    composes: w-full from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: hidden from global; */
+    display: none;
+}
+
+.root_open {
+    composes: root;
+
+    composes: z-dropdown from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: grid from global; */
+    display: grid;
+}
+
+.form {
+    composes: grid from global;
+    composes: items-center from global;
+    composes: justify-items-stretch from global;
+    composes: w-full from global;
+}
+
+.container {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: max-w-[24rem] from global;
+    composes: relative from global;
+    composes: w-full from global;
+}
+
+.search {
+    composes: grid from global;
+    composes: relative from global;
+}
+
+.autocomplete {
+    composes: grid from global;
+    /* composes: relative from global; */
+    composes: z-menu from global;
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/searchField.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { func } from 'prop-types';
+import { useSearchField } from '@magento/peregrine/lib/talons/SearchBar';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import Trigger from '@magento/venia-ui/lib/components/Trigger';
+import { SearchNormal } from 'iconsax-react';
+import cn from 'classnames';
+
+const SearchField = props => {
+    const { isSearchOpen, onChange, onFocus, addLabel } = props;
+    const { inputRef, resetForm, value } = useSearchField({ isSearchOpen });
+
+    const handleSearch = () => {
+        console.log('search');
+    }
+    const searchButton =
+        <Trigger action={handleSearch} addLabel={addLabel}>
+            <SearchNormal size="18" color="#280135" variant="Outline" />
+        </Trigger>
+
+    return (
+        <TextInput
+            id="search_query"
+            after={searchButton}
+            field="search_query"
+            data-cy="SearchField-textInput"
+            onFocus={onFocus}
+            onValueChange={onChange}
+            forwardedRef={inputRef}
+            classes={cn('search input')}
+        />
+    );
+};
+
+export default SearchField;
+
+SearchField.propTypes = {
+    onChange: func,
+    onFocus: func
+};

package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { arrayOf, func, number, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import SuggestedCategory from './suggestedCategory';
+import defaultClasses from './suggestedCategories.module.css';
+
+const SuggestedCategories = props => {
+    const { categories, limit, onNavigate, value } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const items = categories
+        .slice(0, limit)
+        .map(({ label, value: categoryId }) => (
+            <li key={categoryId} className={classes.item}>
+                <SuggestedCategory
+                    categoryId={categoryId}
+                    label={label}
+                    onNavigate={onNavigate}
+                    value={value}
+                />
+            </li>
+        ));
+
+    return <ul className={classes.root}>{items}</ul>;
+};
+
+export default SuggestedCategories;
+
+SuggestedCategories.defaultProps = {
+    limit: 4
+};
+
+SuggestedCategories.propTypes = {
+    categories: arrayOf(
+        shape({
+            label: string.isRequired,
+            value: string.isRequired
+        })
+    ).isRequired,
+    classes: shape({
+        item: string,
+        root: string
+    }),
+    limit: number.isRequired,
+    onNavigate: func,
+    value: string
+};

package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategories.module.css

@@ -0,0 +1,13 @@
+.root {
+    composes: border-t from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: gap-3 from global;
+    composes: grid from global;
+    composes: pt-3 from global;
+}
+
+/* TODO @TW: cannot compose */
+.root:empty {
+    display: none;
+}

package/src/overwrites/venia-ui/lib/components/SearchBar/suggestedCategory.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { func, shape, string } from 'prop-types';
+import { Link } from 'react-router-dom';
+import { useSuggestedCategory } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './suggestedCategory.module.css';
+
+const SuggestedCategory = props => {
+    const { categoryId, label, onNavigate, value } = props;
+    const talonProps = useSuggestedCategory({
+        categoryId,
+        label,
+        onNavigate,
+        searchValue: value
+    });
+    const { destination, handleClick } = talonProps;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <Link className={classes.root} to={destination} onClick={handleClick}>
+            <strong className={classes.value}>{value}</strong>
+            <span className={classes.label}>
+                <FormattedMessage
+                    id={'searchBar.label'}
+                    defaultMessage={' in {label}'}
+                    values={{
+                        label
+                    }}
+                />
+            </span>
+        </Link>
+    );
+};
+
+export default SuggestedCategory;
+
+SuggestedCategory.propTypes = {
+    categoryId: string,
+    classes: shape({
+        label: string,
+        root: string,
+        value: string
+    }),
+    label: string.isRequired,
+    onNavigate: func,
+    value: string.isRequired
+};