@riosst100/pwa-marketplace 1.2.3 → 1.2.5

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
+};

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

@@ -0,0 +1,204 @@
+import { gql } from '@apollo/client';
+
+export const GET_STORE_CONFIG_DATA = gql`
+    query getStoreConfigData {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            product_url_suffix
+        }
+    }
+`;
+
+export const GET_SELLER_DETAIL_QUERY = gql`
+    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
+            company
+            term_and_conditions
+            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
+            country
+            image
+            thumbnail
+            city
+            region
+            group
+            group_id
+            url
+            email
+            name
+            sale
+            creation_time
+            page_layout
+            status
+            position
+            twitter_id
+            facebook_id
+            gplus_id
+            youtube_id
+            vimeo_id
+            instagram_id
+            pinterest_id
+            linkedin_id
+            tw_active
+            fb_active
+            gplus_active
+            vimeo_active
+            instagram_active
+            pinterest_active
+            linkedin_active
+            banner_pic
+            shop_url
+            url_key
+            logo_pic
+            verify_status
+            product_count
+            telephone
+            creation_time
+            update_time
+            country_id
+            total_sold
+            operating_time
+            order_processing_time
+            shipping_partners
+            offers
+            benefits
+            product_shipping_info
+            prepare_time
+            response_ratio
+            response_time
+            store_id
+            seller_rates {
+                total_count
+                page_info {
+                    page_size
+                    current_page
+                }
+                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 {
+                    page_size
+                    current_page
+                }
+                items {
+                    id
+                    name
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getStoreConfigData: GET_STORE_CONFIG_DATA,
+    getSellerDetailQuery: GET_SELLER_DETAIL_QUERY
+};

package/src/talons/Seller/useSeller.js

@@ -0,0 +1,71 @@
+import { useQuery } from '@apollo/client';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './seller.gql';
+
+export const useSeller = props => {
+    const { mapSeller } = props;
+
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getStoreConfigData, getSellerDetailQuery } = operations;
+    const { pathname } = useLocation();
+    const [
+        ,
+        {
+            actions: { setPageLoading }
+        }
+    ] = useAppContext();
+
+    const { data: storeConfigData } = useQuery(getStoreConfigData, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first'
+    });
+
+    const slug = pathname.split('/').pop();
+    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,
+            getOtherInfo,
+            getProducts
+        }
+    });
+
+    const isBackgroundLoading = !!data && loading;
+
+    const seller = useMemo(() => {
+        if (!data) {
+            return null;
+        }
+        
+        const seller = data.sellerByUrl;
+
+        if (!seller) {
+            return null;
+        }
+
+        return mapSeller(seller);
+    }, [data, mapSeller, urlKey]);
+
+    // Update the page indicator if the GraphQL query is in flight.
+    useEffect(() => {
+        setPageLoading(isBackgroundLoading);
+    }, [isBackgroundLoading, setPageLoading]);
+
+    return {
+        error,
+        loading,
+        seller
+    };
+};