@riosst100/pwa-marketplace 2.0.9 → 2.1.1

package/src/overwrites/peregrine/lib/talons/RootComponents/Product/productDetailFragment.gql.js

@@ -0,0 +1,235 @@
+import { gql } from '@apollo/client';
+
+export const ProductDetailsFragment = gql`
+    fragment ProductDetailsFragment on ProductInterface {
+        __typename
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        categories {
+            uid
+            breadcrumbs {
+                category_uid
+            }
+        }
+        seller {
+            name
+            url_key
+            city
+            country
+        }
+        description {
+            html
+        }
+        short_description {
+            html
+        }
+        id
+        uid
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        media_gallery_entries {
+            uid
+            label
+            position
+            disabled
+            file
+        }
+        meta_description
+        name
+        special_price
+        special_from_date
+        special_to_date
+        price {
+            regularPrice {
+                amount {
+                    currency
+                    value
+                }
+            }
+        }
+        price_range {
+            maximum_price {
+                final_price {
+                    currency
+                    value
+                }
+                regular_price {
+                    currency
+                    value
+                }
+                discount {
+                    amount_off
+                }
+            }
+        }
+        sku
+        auction_data {
+            is_auction
+            status
+            customer_id
+            starting_price
+            reserve_price
+            days
+            min_qty
+            max_qty
+            start_auction_time
+            stop_auction_time
+            auction_status
+            increment_opt
+            increment_price
+            auto_auction_opt
+            featured_auction
+            buy_it_now
+            max_amount
+            min_amount
+            current_time_stamp
+            continue_time
+            limit_bids
+            time_zone
+            stop_auction_utc_time
+            start_auction_utc_time
+            today_time
+            start_auction_time_stamp
+            stop_auction_time_stamp
+            new_auction_start
+            customer_name
+            max_bids
+        }
+        preorder {
+            is_preorder
+            preorder_notes
+            preorder_availability
+        }
+        term_and_conditions
+        shipping_policy
+        return_policy
+        small_image {
+            url
+        }
+        stock_status
+        url_key
+        custom_attributes {
+            selected_attribute_options {
+                attribute_option {
+                    uid
+                    label
+                    is_default
+                }
+            }
+            entered_attribute_value {
+                value
+            }
+            attribute_metadata {
+                uid
+                code
+                label
+                attribute_labels {
+                    store_code
+                    label
+                }
+                data_type
+                is_system
+                entity_type
+                ui_input {
+                    ui_input_type
+                    is_html_allowed
+                }
+                ... on ProductAttributeMetadata {
+                    used_in_components
+                }
+            }
+        }
+        ... on ConfigurableProduct {
+            # eslint-disable-next-line @graphql-eslint/require-id-when-available
+            configurable_options {
+                attribute_code
+                attribute_id
+                uid
+                label
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                values {
+                    uid
+                    default_label
+                    label
+                    store_label
+                    use_default_value
+                    value_index
+                    swatch_data {
+                        ... on ImageSwatchData {
+                            thumbnail
+                        }
+                        value
+                    }
+                }
+            }
+            variants {
+                attributes {
+                    code
+                    value_index
+                }
+                # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                product {
+                    uid
+                    # eslint-disable-next-line @graphql-eslint/require-id-when-available
+                    media_gallery_entries {
+                        uid
+                        disabled
+                        file
+                        label
+                        position
+                    }
+                    sku
+                    stock_status
+                    price {
+                        regularPrice {
+                            amount {
+                                currency
+                                value
+                            }
+                        }
+                    }
+                    price_range {
+                        maximum_price {
+                            final_price {
+                                currency
+                                value
+                            }
+                            discount {
+                                amount_off
+                            }
+                        }
+                    }
+                    custom_attributes {
+                        selected_attribute_options {
+                            attribute_option {
+                                uid
+                                label
+                                is_default
+                            }
+                        }
+                        entered_attribute_value {
+                            value
+                        }
+                        attribute_metadata {
+                            uid
+                            code
+                            label
+                            attribute_labels {
+                                store_code
+                                label
+                            }
+                            data_type
+                            is_system
+                            entity_type
+                            ui_input {
+                                ui_input_type
+                                is_html_allowed
+                            }
+                            ... on ProductAttributeMetadata {
+                                used_in_components
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;

package/src/overwrites/venia-ui/lib/RootComponents/CMS/cms.js

@@ -0,0 +1,73 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+
+import CMSPageShimmer from './cms.shimmer';
+import { useCmsPage } from '@magento/peregrine/lib/talons/Cms/useCmsPage';
+import RichContent from '@magento/venia-ui/lib/components/RichContent';
+import { Meta, StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { toCamelCase } from '@magento/venia-ui/lib/util/toCamelCase';
+
+import defaultClasses from './cms.module.css';
+
+const CMSPage = props => {
+    const { identifier } = props;
+
+    const talonProps = useCmsPage({ identifier });
+    const { cmsPage, shouldShowLoadingIndicator } = talonProps;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (shouldShowLoadingIndicator) {
+        return <CMSPageShimmer classes={classes} />;
+    }
+
+    const {
+        content_heading,
+        title,
+        meta_title,
+        meta_description,
+        page_layout,
+        content
+    } = cmsPage;
+
+    const headingElement =
+        content_heading !== '' ? (
+            <h1 data-cy="Cms-contentHeading" className={classes.heading}>
+                {content_heading}
+            </h1>
+        ) : null;
+
+    const pageTitle = meta_title || title;
+    const rootClassName = page_layout
+        ? classes[`root_${toCamelCase(page_layout)}`]
+        : classes.root;
+    return (
+        <Fragment>
+            <StoreTitle>{pageTitle}</StoreTitle>
+            <Meta name="title" content={pageTitle} />
+            <Meta name="description" content={meta_description} />
+            <article className={rootClassName}>
+                {headingElement}
+                <RichContent html={content} />
+            </article>
+        </Fragment>
+    );
+};
+
+CMSPage.propTypes = {
+    identifier: string,
+    classes: shape({
+        root: string,
+        heading: string,
+        root_empty: string,
+        root_1column: string,
+        root_2columnsLeft: string,
+        root_2columnsRight: string,
+        root_3columns: string,
+        root_cmsFullWidth: string,
+        root_categoryFullWidth: string,
+        root_productFullWidth: string
+    })
+};
+
+export default CMSPage;

package/src/overwrites/venia-ui/lib/RootComponents/CMS/cms.module.css

@@ -0,0 +1,25 @@
+.root {
+    composes: px-0 from global;
+}
+
+.heading {
+    composes: mb-2 from global;
+    composes: mt-4 from global;
+    composes: text-center from global;
+    composes: text-3xl from global;
+
+    /* Medium */
+    composes: md_mb-10 from global;
+    composes: md_text-4xl from global;
+}
+
+.root_empty,
+.root_1column,
+.root_2columnsLeft,
+.root_2columnsRight,
+.root_3columns,
+.root_cmsFullWidth,
+.root_categoryFullWidth,
+.root_productFullWidth {
+    composes: root;
+}

package/src/overwrites/venia-ui/lib/RootComponents/CMS/cms.shimmer.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer/shimmer.js';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import defaultClasses from './cms.module.css';
+
+const CMSPageShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width="100%" height="880px" key="banner" />
+        </div>
+    );
+};
+
+export default CMSPageShimmer;

package/src/overwrites/venia-ui/lib/RootComponents/CMS/index.js

@@ -0,0 +1,7 @@
+/**
+ * @RootComponent
+ * description = 'Basic CMS Page'
+ * pageTypes = CMS_PAGE
+ */
+
+export { default } from './cms';

package/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound/index.js

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

package/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound/noProductsFound.js

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { number, string, shape } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+import { useNoProductsFound } from '@magento/peregrine/lib/talons/RootComponents/Category';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import Image from '@magento/venia-ui/lib/components/Image';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import noProductsFound from './noProductsFound.png';
+import defaultClasses from './noProductsFound.module.css';
+
+const NoProductsFound = props => {
+    const { categoryId } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { formatMessage } = useIntl();
+    const talonProps = useNoProductsFound({
+        categoryId
+    });
+
+    const { recommendedCategories } = talonProps;
+
+    const categoryItems = useMemo(() => {
+        return recommendedCategories.map(category => {
+            const uri = resourceUrl(
+                `/${category.url_path}${category.url_suffix}`
+            );
+
+            return (
+                <li key={category.uid} className={classes.listItem}>
+                    <Link to={uri}>{category.name}</Link>
+                </li>
+            );
+        });
+    }, [classes, recommendedCategories]);
+
+    const headerText = formatMessage({
+        id: 'noProductsFound.noProductsFound',
+        defaultMessage: "Sorry! We couldn't find any products."
+    });
+
+    return (
+        <div className={classes.root} data-cy="NoProductsFound-root">
+            <Image
+                alt={headerText}
+                classes={{ image: classes.image, root: classes.imageContainer }}
+                src={noProductsFound}
+            />
+            <h2 className={classes.title}>{headerText}</h2>
+            <div className={classes.categories}>
+                <p>
+                    <FormattedMessage
+                        id={'noProductsFound.tryOneOfTheseCategories'}
+                        defaultMessage={'Try one of these categories'}
+                    />
+                </p>
+                <ul className={classes.list}>{categoryItems}</ul>
+            </div>
+        </div>
+    );
+};
+
+export default NoProductsFound;

package/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound/noProductsFound.module.css

@@ -0,0 +1,39 @@
+.root {
+    composes: flex from global;
+    composes: flex-col from global;
+    composes: h-screen from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+}
+
+.title {
+    composes: font-medium from global;
+    composes: text-colorDefault from global;
+    composes: text-center from global;
+}
+
+.categories {
+    composes: mt-md from global;
+}
+
+.list {
+    composes: mt-xs from global;
+}
+
+.listItem {
+    composes: mb-2xs from global;
+    composes: text-center from global;
+    composes: underline from global;
+
+    composes: last_mb-0 from global;
+}
+
+.imageContainer {
+    composes: mb-md from global;
+}
+
+.image {
+    composes: h-[200px] from global;
+    composes: max-w-[200px] from global;
+    composes: w-[200px] from global;
+}

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.gql.js

@@ -0,0 +1,17 @@
+import { gql } from '@apollo/client';
+
+export const GET_PAGE_SIZE = gql`
+    query getPageSize {
+        # eslint-disable-next-line @graphql-eslint/require-id-when-available
+        storeConfig {
+            store_code
+            grid_per_page
+        }
+    }
+`;
+
+export default {
+    queries: {
+        getPageSize: GET_PAGE_SIZE
+    }
+};

package/src/overwrites/venia-ui/lib/RootComponents/Category/category.js

@@ -0,0 +1,142 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import CategoryContent from './categoryContent';
+import defaultClasses from './category.module.css';
+import { Meta } from '@magento/venia-ui/lib/components/Head';
+import { GET_PAGE_SIZE } from './category.gql';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { useIntl } from 'react-intl';
+import ShopBy from '@riosst100/pwa-marketplace/src/components/ShopBy/shopBy';
+import SubCategoryPage from '@riosst100/pwa-marketplace/src/components/CustomSubCategoryPage/subCategoryPage';
+import ShopBySets from '@riosst100/pwa-marketplace/src/components/ShopBySets/shopBySets';
+import ShopByCard from '@riosst100/pwa-marketplace/src/components/ShopByCard/shopByCard';
+import { useLocation } from 'react-router-dom';
+import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCardsSets/sportCardsSets';
+import NonSportCardsSets from '@riosst100/pwa-marketplace/src/components/NonSportCardsSets/nonSportCardsSets';
+import LegoSets from '@riosst100/pwa-marketplace/src/components/LegoSets/legoSets';
+import TrainsSets from '@riosst100/pwa-marketplace/src/components/TrainsSets/trainsSets';
+import ShopByBrands from '@riosst100/pwa-marketplace/src/components/ShopByBrands/shopByBrands';
+
+const MESSAGES = new Map().set(
+    'NOT_FOUND',
+    "Looks like the category you were hoping to find doesn't exist. Sorry about that."
+);
+
+const Category = props => {
+    const { uid } = props;
+    const { formatMessage } = useIntl();
+
+    const { location } = globalThis;
+
+    const { pathname } = useLocation();
+
+    const pathnameArr = pathname.split('/');
+
+    const parentCategoryUrlKey = pathnameArr[pathnameArr.length - 2].replace('.html','');
+
+    const query = new URLSearchParams(location.search);
+    const shopby = query.get('shopby') || null;
+    const showSubcategory = query.get('show_subcategory') || null;
+
+    const talonProps = useCategory({
+        id: uid,
+        queries: {
+            getPageSize: GET_PAGE_SIZE
+        }
+    });
+
+    const {
+        error,
+        metaDescription,
+        loading,
+        categoryData,
+        pageControl,
+        sortProps,
+        pageSize,
+        categoryNotFound
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!categoryData) {
+        if (error && pageControl.currentPage === 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(error);
+            }
+
+            return <ErrorView />;
+        }
+    }
+    if (categoryNotFound) {
+        return (
+            <ErrorView
+                message={formatMessage({
+                    id: 'category.notFound',
+                    defaultMessage: MESSAGES.get('NOT_FOUND')
+                })}
+            />
+        );
+    }
+
+    return (
+        <Fragment>
+            <Meta name="description" content={metaDescription} />
+            {showSubcategory ? (
+                <SubCategoryPage
+                categoryId={uid}
+                isLoading={loading} />
+            ) : (
+                shopby == "singles" || shopby == "lego_set_name" && parentCategoryUrlKey == "lego" ? <LegoSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby && parentCategoryUrlKey == "non-sports-cards" ? <NonSportCardsSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "sc_baseball_players" || shopby == "sc_baseball_teams" || shopby == "release" && parentCategoryUrlKey == "sport-cards" ? <SportCardsSets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : shopby == "card" ? <ShopByCard
+                categoryId={uid}
+                shopby={shopby}
+                isLoading={loading} /> : (shopby && shopby != "gauge" ? (
+                    <ShopBy
+                    categoryId={uid}
+                    shopby={shopby}
+                    isLoading={loading} />
+                ) : (
+                    <CategoryContent
+                    categoryId={uid}
+                    classes={classes}
+                    data={categoryData}
+                    shopby={shopby}
+                    isLoading={loading}
+                    pageControl={pageControl}
+                    sortProps={sortProps}
+                    pageSize={pageSize}
+                    />
+                ))
+            )}
+        </Fragment>
+    );
+};
+
+Category.propTypes = {
+    classes: shape({
+        gallery: string,
+        root: string,
+        title: string
+    }),
+    uid: string
+};
+
+Category.defaultProps = {
+    uid: 'Mg=='
+};
+
+export default Category;