@riosst100/pwa-marketplace 1.6.9 → 1.7.1

package/src/overwrites/pagebuilder/lib/utils.js

@@ -0,0 +1,224 @@
+/**
+ * Retrieve background images from a master format node
+ *
+ * @param node
+ * @returns {{mobileImage: null, desktopImage: null}}
+ */
+export function getBackgroundImages(node) {
+    const images = node.getAttribute('data-background-images');
+    const response = {
+        desktopImage: null,
+        mobileImage: null,
+        backgroundSize: node.style.backgroundSize,
+        backgroundPosition: node.style.backgroundPosition,
+        backgroundAttachment: node.style.backgroundAttachment,
+        backgroundRepeat: node.style.backgroundRepeat || 'repeat'
+    };
+
+    if (images) {
+        const imagesStructure = JSON.parse(images.replace(/\\"/g, '"'));
+        if (imagesStructure.desktop_image) {
+            response.desktopImage = imagesStructure.desktop_image;
+        }
+        if (imagesStructure.mobile_image) {
+            response.mobileImage = imagesStructure.mobile_image;
+        }
+    }
+
+    return response;
+}
+
+const alignmentToFlex = {
+    top: 'flex-start',
+    middle: 'center',
+    bottom: 'flex-end'
+};
+
+/**
+ * Retrieve vertical alignment from a master format node
+ *
+ * @param node
+ * @returns {{verticalAlignment: null}}
+ */
+export function getVerticalAlignment(node) {
+    let verticalAlignment = null;
+    if (node.style.justifyContent) {
+        verticalAlignment = flexToVerticalAlignment(node.style.justifyContent);
+    }
+
+    return {
+        verticalAlignment
+    };
+}
+
+/**
+ * Convert vertical alignment values to flex values
+ *
+ * @param alignment
+ * @returns {*}
+ */
+export function verticalAlignmentToFlex(alignment) {
+    return alignmentToFlex[alignment];
+}
+
+/**
+ * Convert flex to vertical alignment values
+ *
+ * @param flex
+ * @returns {*}
+ */
+export function flexToVerticalAlignment(flex) {
+    const flexToAlignment = Object.assign(
+        {},
+        ...Object.entries(alignmentToFlex).map(([a, b]) => ({ [b]: a }))
+    );
+    return flexToAlignment[flex];
+}
+
+/**
+ * Retrieve advanced props from content type node
+ *
+ * @param node
+ * @returns {{border: (string|string[]|string), marginRight: (*|string), borderColor: *, paddingBottom: (*|number|string), borderRadius: *, borderWidth: *, paddingRight: (*|number|string), marginBottom: (*|string), paddingTop: (*|string), paddingLeft: (*|string), marginTop: (*|string), marginLeft: (*|string|{get}|number)}}
+ */
+export function getAdvanced(node) {
+    return {
+        ...getPadding(node),
+        ...getMargin(node),
+        ...getBorder(node),
+        ...getTextAlign(node),
+        ...getCssClasses(node),
+        ...getIsHidden(node)
+    };
+}
+
+/**
+ * Retrieve the padding from a content type node
+ *
+ * @param node
+ * @returns {{paddingBottom: *, paddingRight: *, paddingTop: *, paddingLeft: *}}
+ */
+export function getPadding(node) {
+    return {
+        paddingTop: node.style.paddingTop,
+        paddingRight: node.style.paddingRight,
+        paddingBottom: node.style.paddingBottom,
+        paddingLeft: node.style.paddingLeft
+    };
+}
+
+/**
+ * Retrieve the margin from a content type node
+ *
+ * @param node
+ * @returns {{marginRight: *, marginBottom: *, marginTop: *, marginLeft: *}}
+ */
+export function getMargin(node) {
+    return {
+        marginTop: node.style.marginTop,
+        marginRight: node.style.marginRight,
+        marginBottom: node.style.marginBottom,
+        marginLeft: node.style.marginLeft
+    };
+}
+
+/**
+ * Retrieve the border from a content type node
+ *
+ * @param node
+ * @returns {{border: (string|string), borderColor: *, borderRadius: *, borderWidth: *}}
+ */
+export function getBorder(node) {
+    return {
+        border: node.style.borderStyle,
+        borderColor: node.style.borderColor,
+        borderWidth: node.style.borderWidth,
+        borderRadius: node.style.borderRadius
+    };
+}
+
+/**
+ * Retrieve the text align from a content type node
+ *
+ * @param node
+ * @returns {{textAlign: *}}
+ */
+export function getTextAlign(node) {
+    return {
+        textAlign: node.style.textAlign
+    };
+}
+
+/**
+ * Retrieve the CSS classes from a content type node
+ * @param node
+ * @returns {{cssClasses: any}}
+ */
+export function getCssClasses(node) {
+    return {
+        cssClasses: node.getAttribute('class')
+            ? node.getAttribute('class').split(' ')
+            : []
+    };
+}
+
+/**
+ * Retrieve if CSS display property is set to none from a content type node
+ *
+ * @param node
+ * @returns {{isHidden: boolean}}
+ */
+export function getIsHidden(node) {
+    return {
+        isHidden: node.style.display === 'none'
+    };
+}
+
+/**
+ * Converts a CSS string style into a JSX object inline style
+ *
+ * @param {String} style
+ * @returns {Object}
+ */
+export function cssToJSXStyle(style) {
+    const toCamelCase = str => str.replace(/-(.)/g, (_, p) => p.toUpperCase());
+    const result = {};
+    style.split(';').forEach(el => {
+        const [prop, value] = el.split(':');
+        if (prop) {
+            result[toCamelCase(prop.trim())] = value.trim();
+        }
+    });
+
+    return result;
+}
+
+/**
+ * Retrieve media queries from a master format node
+ *
+ * @param node
+ * @param {Array} mediaQueries
+ *
+ * @returns {{mediaQueries: {media: string, style: string}}}
+ */
+export function getMediaQueries(node) {
+    const response = [];
+    const dataset = Object.keys(node.dataset);
+
+    const medias = dataset
+        .filter(key => key.match(/media-/))
+        .map(key => node.dataset[key]);
+
+    const styles = dataset
+        .filter(key => key.match(/mediaStyle/))
+        .map(key => node.dataset[key]);
+
+    medias.forEach((media, i) => {
+        response.push({
+            media,
+            style: cssToJSXStyle(styles[i])
+        });
+    });
+
+    return { mediaQueries: response };
+}

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -148,6 +148,66 @@ export const useFilterSidebar = props => {
             }
         }
 
+        const productTabs = [
+            {
+                'label': 'All Products',
+                'value': 'all',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Sale',
+                'value': 'special_price',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Preorder',
+                'value': 'lof_preorder',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            },
+            {
+                'label': 'Auction',
+                'value': 'auction',
+                'path': '',
+                'options': [
+                    {'value':'0','label':'No','title':'No'},
+                    {'value':'1','label':'Yes','title':'Yes'}
+                ]
+            }
+        ];
+
+        if (productTabs) {
+            productTabs.map(({ value, options }, index) => {
+                
+
+                const items = [];
+
+                names.set(value, '');
+                frontendInput.set(value, null);
+
+                // add filter key permutations
+                keys.add(`${value}[filter]`);
+
+                // add items
+                for (const { label, value, path } of options) {
+                    items.push({ title: stripHtml(label), value, path });
+                }
+
+                itemsByGroup.set(value, items);
+            })
+        }
+
         return [names, keys, itemsByGroup, frontendInput];
     }, [filters, possibleFilters]);
 

package/src/overwrites/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js

@@ -552,10 +552,13 @@ export const useProductFullDetail = props => {
         shortDescription: product.short_description,
         name: product.name,
         price: productPrice?.final_price,
+        price_range: product?.price_range,
         sku: product.sku,
         term_and_conditions: product.term_and_conditions,
         shipping_policy: product.shipping_policy,
-        return_policy: product.return_policy
+        return_policy: product.return_policy,
+        preorder: product.preorder,
+        auction_data: product.auction_data
     };
 
     const sellerDetails = {

package/src/overwrites/peregrine/lib/talons/RootComponents/Category/categoryFragments.gql.js

@@ -16,6 +16,14 @@ export const ProductsFragment = gql`
             id
             uid
             name
+            preorder {
+                is_preorder
+                preorder_notes
+                preorder_availability
+            }
+            auction_data {
+                is_auction
+            }
             seller {
                 name
             }

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

@@ -34,6 +34,9 @@ export const ProductDetailsFragment = gql`
         }
         meta_description
         name
+        special_price
+        special_from_date
+        special_to_date
         price {
             regularPrice {
                 amount {
@@ -48,12 +51,53 @@ export const ProductDetailsFragment = gql`
                     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

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/category.js

@@ -12,6 +12,8 @@ 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 { useLocation } from 'react-router-dom';
+import SportCardsSets from '@riosst100/pwa-marketplace/src/components/SportCardsSets/sportCardsSets';
 
 const MESSAGES = new Map().set(
     'NOT_FOUND',
@@ -24,6 +26,12 @@ const Category = props => {
 
     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;
@@ -76,7 +84,10 @@ const Category = props => {
                 categoryId={uid}
                 isLoading={loading} />
             ) : (
-                shopby == "sets" || shopby == "expansion_sets" || shopby == "release_year" ? <ShopBySets
+                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 ? (

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

@@ -112,7 +112,7 @@ const CategoryContent = props => {
                     }
                 }
             }),
-        [items, activeLetter]
+        [items, activeLetter, activeTab]
     });
 
     const sidebarRef = useRef(null);
@@ -162,8 +162,8 @@ const CategoryContent = props => {
         <SortedByContainerShimmer />
     ) : null;
 
-    const maybeProductsTabContainer = shouldShowProductListTab ? (
-        <ProductListTab activeTab={activeTab} setActiveTab={setActiveTab} />
+    const maybeProductsTabContainer = !isLoading ? (
+        <ProductListTab filters={filters} activeTab={activeTab} setActiveTab={setActiveTab} />
     ) : shouldShowProductListTabShimmer ? (
         <ProductListTabShimmer />
     ) : null;

package/src/overwrites/venia-ui/lib/components/App/app.js

@@ -0,0 +1,131 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { array, func, shape, string } from 'prop-types';
+
+import { useToasts } from '@magento/peregrine';
+import { useDelayedTransition } from '@magento/peregrine/lib/hooks/useDelayedTransition';
+import { useApp } from '@magento/peregrine/lib/talons/App/useApp';
+
+import globalCSS from '../../index.module.css';
+import { HeadProvider, StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import Main from '../Main';
+import Mask from '@magento/venia-ui/lib/components/Mask';
+import Navigation from '@magento/venia-ui/lib/components/Navigation';
+import Routes from '@magento/venia-ui/lib/components/Routes';
+import ToastContainer from '@magento/venia-ui/lib/components/ToastContainer';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+
+import {
+    AlertCircle as AlertCircleIcon,
+    CloudOff as CloudOffIcon,
+    Wifi as WifiIcon
+} from 'react-feather';
+
+const OnlineIcon = <Icon src={WifiIcon} attrs={{ width: 18 }} />;
+const OfflineIcon = <Icon src={CloudOffIcon} attrs={{ width: 18 }} />;
+const ErrorIcon = <Icon src={AlertCircleIcon} attrs={{ width: 18 }} />;
+
+const App = props => {
+    const { markErrorHandled, renderError, unhandledErrors } = props;
+    const { formatMessage } = useIntl();
+    const [, { addToast }] = useToasts();
+    useDelayedTransition();
+
+    const ERROR_MESSAGE = formatMessage({
+        id: 'app.errorUnexpected',
+        defaultMessage: 'Sorry! An unexpected error occurred.'
+    });
+
+    const handleIsOffline = useCallback(() => {
+        addToast({
+            type: 'error',
+            icon: OfflineIcon,
+            message: formatMessage({
+                id: 'app.errorOffline',
+                defaultMessage:
+                    'You are offline. Some features may be unavailable.'
+            }),
+            timeout: 3000
+        });
+    }, [addToast, formatMessage]);
+
+    const handleIsOnline = useCallback(() => {
+        addToast({
+            type: 'info',
+            icon: OnlineIcon,
+            message: formatMessage({
+                id: 'app.infoOnline',
+                defaultMessage: 'You are online.'
+            }),
+            timeout: 3000
+        });
+    }, [addToast, formatMessage]);
+
+    const handleError = useCallback(
+        (error, id, loc, handleDismissError) => {
+            const errorToastProps = {
+                icon: ErrorIcon,
+                message: `${ERROR_MESSAGE}\nDebug: ${id} ${loc}`,
+                onDismiss: remove => {
+                    handleDismissError();
+                    remove();
+                },
+                timeout: 15000,
+                type: 'error'
+            };
+
+            addToast(errorToastProps);
+        },
+        [ERROR_MESSAGE, addToast]
+    );
+
+    const talonProps = useApp({
+        handleError,
+        handleIsOffline,
+        handleIsOnline,
+        markErrorHandled,
+        renderError,
+        unhandledErrors
+    });
+
+    const { hasOverlay, handleCloseDrawer } = talonProps;
+
+    if (renderError) {
+        return (
+            <HeadProvider>
+                <StoreTitle />
+                <Main isMasked={true} />
+                <Mask isActive={true} />
+                <ToastContainer />
+            </HeadProvider>
+        );
+    }
+
+    return (
+        <HeadProvider>
+            <StoreTitle />
+            <Main isMasked={hasOverlay}>
+                <Routes />
+            </Main>
+            <Mask
+                isActive={hasOverlay}
+                dismiss={handleCloseDrawer}
+                data-cy="App-Mask-button"
+            />
+            <Navigation />
+            <ToastContainer />
+        </HeadProvider>
+    );
+};
+
+App.propTypes = {
+    markErrorHandled: func.isRequired,
+    renderError: shape({
+        stack: string
+    }),
+    unhandledErrors: array
+};
+
+App.globalCSS = globalCSS;
+
+export default App;