@riosst100/pwa-marketplace 1.2.4 → 1.2.6

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { func, number, shape, string } from 'prop-types';
+import { Link } from 'react-router-dom';
+import Price from '@magento/venia-ui/lib/components/Price';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './suggestedProduct.module.css';
+import { useSuggestedProduct } from '@magento/peregrine/lib/talons/SearchBar';
+
+const IMAGE_WIDTH = 60;
+
+const SuggestedProduct = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+    const {
+        url_key,
+        small_image,
+        name,
+        onNavigate,
+        price,
+        price_range,
+        url_suffix,
+        sku
+    } = props;
+
+    const talonProps = useSuggestedProduct({
+        name,
+        price,
+        price_range,
+        onNavigate,
+        url_key,
+        url_suffix,
+        sku
+    });
+
+    const { priceProps, handleClick, uri } = talonProps;
+
+    return (
+        <Link
+            className={classes.root}
+            to={uri}
+            onClick={handleClick}
+            data-cy="SuggestedProduct-root"
+        >
+            <Image
+                alt={name}
+                classes={{ image: classes.thumbnail, root: classes.image }}
+                resource={small_image}
+                width={IMAGE_WIDTH}
+                data-cy="SuggestedProduct-image"
+            />
+            <span className={classes.name}>{name}</span>
+            <span data-cy="SuggestedProduct-price" className={classes.price}>
+                <Price {...priceProps} />
+            </span>
+        </Link>
+    );
+};
+
+SuggestedProduct.propTypes = {
+    url_key: string.isRequired,
+    small_image: string.isRequired,
+    name: string.isRequired,
+    onNavigate: func,
+    price: shape({
+        regularPrice: shape({
+            amount: shape({
+                currency: string,
+                value: number
+            })
+        })
+    }).isRequired,
+    price_range: shape({
+        maximum_price: shape({
+            final_price: shape({
+                currency: string,
+                value: number
+            }),
+            regular_price: shape({
+                currency: string,
+                value: number
+            }),
+            discount: shape({
+                amount_off: number
+            })
+        })
+    }),
+    classes: shape({
+        root: string,
+        image: string,
+        name: string,
+        price: string,
+        thumbnail: string
+    })
+};
+
+export default SuggestedProduct;

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

@@ -0,0 +1,24 @@
+.root {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    grid-template-columns: 60px 1fr;
+}
+
+.image {
+    composes: items-center from global;
+    composes: inline-flex from global;
+    composes: justify-center from global;
+}
+
+.thumbnail {
+    composes: h-[75px] from global;
+    composes: max-h-[75px] from global;
+    composes: object-contain from global;
+    composes: object-center from global;
+}
+
+.name {
+    composes: break-words from global;
+}

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { arrayOf, func, number, oneOfType, shape, string } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import mapProduct from '@magento/venia-ui/lib/util/mapProduct';
+import SuggestedProduct from './suggestedProduct';
+import defaultClasses from './suggestedProducts.module.css';
+
+const SuggestedProducts = props => {
+    const { limit, onNavigate, products } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const items = products.slice(0, limit).map(product => (
+        <li key={product.id} className={classes.item}>
+            <SuggestedProduct
+                {...mapProduct(product)}
+                onNavigate={onNavigate}
+            />
+        </li>
+    ));
+
+    return <ul className={classes.root}>{items}</ul>;
+};
+
+export default SuggestedProducts;
+
+SuggestedProducts.defaultProps = {
+    limit: 3
+};
+
+SuggestedProducts.propTypes = {
+    classes: shape({
+        item: string,
+        root: string
+    }),
+    limit: number.isRequired,
+    onNavigate: func,
+    products: arrayOf(
+        shape({
+            id: oneOfType([number, string]).isRequired
+        })
+    ).isRequired
+};

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

@@ -0,0 +1,13 @@
+.products {
+    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 */
+.products:empty {
+    display: none;
+}

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

@@ -0,0 +1,75 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { arrayOf, bool, func, shape, string } from 'prop-types';
+import { useSuggestions } from '@magento/peregrine/lib/talons/SearchBar';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import SuggestedCategories from './suggestedCategories';
+import SuggestedProducts from './suggestedProducts';
+import defaultClasses from './suggestions.module.css';
+
+const Suggestions = props => {
+    const {
+        displayResult,
+        filters,
+        products,
+        searchValue,
+        setVisible,
+        visible
+    } = props;
+    const { items } = products;
+
+    const talonProps = useSuggestions({
+        displayResult,
+        filters,
+        items,
+        setVisible,
+        visible
+    });
+    const { categories, onNavigate, shouldRender } = talonProps;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    // render null without data
+    if (!shouldRender) {
+        return null;
+    }
+
+    return (
+        <Fragment>
+            <SuggestedCategories
+                categories={categories}
+                onNavigate={onNavigate}
+                value={searchValue}
+            />
+            <h2 data-cy="Suggestions-heading" className={classes.heading}>
+                <span>
+                    <FormattedMessage
+                        id={'searchBar.heading'}
+                        defaultMessage={'Product Suggestions'}
+                    />
+                </span>
+            </h2>
+            <SuggestedProducts onNavigate={onNavigate} products={items} />
+        </Fragment>
+    );
+};
+
+export default Suggestions;
+
+Suggestions.propTypes = {
+    classes: shape({
+        heading: string
+    }),
+    products: shape({
+        filters: arrayOf(
+            shape({
+                filter_items: arrayOf(shape({})),
+                name: string.isRequired
+            }).isRequired
+        ),
+        items: arrayOf(shape({}))
+    }),
+    searchValue: string,
+    setVisible: func,
+    visible: bool
+};

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

@@ -0,0 +1,6 @@
+.heading {
+    composes: pt-3 from global;
+    composes: text-sm from global;
+    composes: text-subtle from global;
+    composes: uppercase from global;
+}

package/src/talons/Seller/seller.gql.js

@@ -11,8 +11,8 @@ export const GET_STORE_CONFIG_DATA = gql`
 `;
 
 export const GET_SELLER_DETAIL_QUERY = gql`
-    query getSellerDetailForSellerPage($urlKey: String!) {
-        sellerByUrl(seller_url: $urlKey) {
+    query getSellerDetailForSellerPage($urlKey: String!, $getOtherInfo: Boolean, $getProducts: Boolean) {
+        sellerByUrl(seller_url: $urlKey, get_other_info: $getOtherInfo, get_products: $getProducts) {
             seller_id
             contact_number
             shop_title
@@ -21,15 +21,81 @@ export const GET_SELLER_DETAIL_QUERY = gql`
             website_url
             ship_to
             ship_to_country
+            seller_rates {
+                total_count
+                page_info {
+                    current_page
+                    page_size
+                    total_pages
+                }
+                items {
+                    rating_id
+                    seller_id
+                    customer_id
+                    rate1
+                    rate2
+                    rate3
+                    rate4
+                    rate5
+                    rating
+                    email
+                    title
+                    status
+                    detail
+                    nickname
+                    created_at
+                    verified_buyer
+                    is_recommended
+                    is_hidden
+                    answer
+                    admin_note
+                    like_about
+                    not_like_about
+                    guest_email
+                    plus_review
+                    minus_review
+                    report_abuse
+                    country
+                }
+            }
+            products {
+                total_count
+                page_info {
+                    current_page
+                    page_size
+                    total_pages
+                }
+                items {
+                    name
+                    sku
+                }
+            }
             operating_hours {
                 day
+                status
                 time {
                     opening_time
                     closing_time
                 }
             }
+            store_locators {
+                name
+                country
+                region
+                address_line_1
+                address_line_2
+                city
+                postcode
+                operating_hours {
+                    day
+                    status
+                    time {
+                        opening_time
+                        closing_time
+                    }
+                }
+            }
             description
-            address
             country
             image
             thumbnail
@@ -38,11 +104,10 @@ export const GET_SELLER_DETAIL_QUERY = gql`
             group
             group_id
             url
-            customer_id
             email
             name
             sale
-            commission_id
+            creation_time
             page_layout
             status
             position

package/src/talons/Seller/useSeller.js

@@ -28,12 +28,17 @@ export const useSeller = props => {
     const productUrlSuffix = storeConfigData?.storeConfig?.product_url_suffix;
     const urlKey = productUrlSuffix ? slug.replace(productUrlSuffix, '') : slug;
 
+    const getOtherInfo = true;
+    const getProducts = true;
+
     const { error, loading, data } = useQuery(getSellerDetailQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         skip: !storeConfigData,
         variables: {
-            urlKey
+            urlKey,
+            getOtherInfo,
+            getProducts
         }
     });
 

package/src/talons/SellerProducts/useSellerProducts.js

@@ -0,0 +1,129 @@
+import { useEffect } from 'react';
+import { useLazyQuery, useQuery } from '@apollo/client';
+
+import mergeOperations from '../../../util/shallowMerge';
+import { useEventingContext } from '../../../context/eventing';
+
+import DEFAULT_OPERATIONS from './categoryContent.gql';
+
+/**
+ * Returns props necessary to render the categoryContent component.
+ *
+ * @param {object} props.data - The results of a getCategory GraphQL query.
+ *
+ * @returns {object} result
+ * @returns {string} result.categoryDescription - This category's description.
+ * @returns {string} result.categoryName - This category's name.
+ * @returns {object} result.filters - The filters object.
+ * @returns {object} result.items - The items in this category.
+ * @returns {number} result.totalPagesFromData - The total amount of pages for the query.
+ */
+export const useSellerProducts = props => {
+    const { categoryId, data, pageSize = 6 } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+
+    const {
+        getSellerProductsQuery,
+        getProductFiltersByCategoryQuery,
+        getCategoryAvailableSortMethodsQuery
+    } = operations;
+
+    const placeholderItems = Array.from({ length: pageSize }).fill(null);
+
+    const [getFilters, { data: filterData }] = useLazyQuery(
+        getProductFiltersByCategoryQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const [getSortMethods, { data: sortData }] = useLazyQuery(
+        getCategoryAvailableSortMethodsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first'
+        }
+    );
+
+    const { data: categoryData, loading: categoryLoading } = useQuery(
+        getSellerProductsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            skip: !categoryId,
+            variables: {
+                id: categoryId
+            }
+        }
+    );
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (categoryId) {
+            getFilters({
+                variables: {
+                    categoryIdFilter: {
+                        eq: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getFilters]);
+
+    useEffect(() => {
+        if (categoryId) {
+            getSortMethods({
+                variables: {
+                    categoryIdFilter: {
+                        in: categoryId
+                    }
+                }
+            });
+        }
+    }, [categoryId, getSortMethods]);
+
+    const filters = filterData ? filterData.products.aggregations : null;
+    const items = data ? data.products.items : placeholderItems;
+    const totalPagesFromData = data
+        ? data.products.page_info.total_pages
+        : null;
+    const totalCount = data ? data.products.total_count : null;
+    const categoryName =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].name
+            : null;
+    const categoryDescription =
+        categoryData && categoryData.categories.items.length
+            ? categoryData.categories.items[0].description
+            : null;
+    const availableSortMethods = sortData
+        ? sortData.products.sort_fields.options
+        : null;
+
+    useEffect(() => {
+        if (!categoryLoading && categoryData.categories.items.length > 0) {
+            dispatch({
+                type: 'CATEGORY_PAGE_VIEW',
+                payload: {
+                    id: categoryData.categories.items[0].uid,
+                    name: categoryData.categories.items[0].name,
+                    url_key: categoryData.categories.items[0].url_key,
+                    url_path: categoryData.categories.items[0].url_path
+                }
+            });
+        }
+    }, [categoryData, dispatch, categoryLoading]);
+
+    return {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        totalCount,
+        totalPagesFromData
+    };
+};

package/src/theme/vars.js

@@ -0,0 +1,7 @@
+export const textPrimary = '#1B1B1B';
+export const lightGray = '#E6E9EA';
+
+export default {
+    textPrimary,
+    lightGray,
+}