@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenu.module.css

@@ -0,0 +1,73 @@
+.root {
+    composes: absolute from global;
+    composes: h-0 from global;
+    composes: left-[-100vw] from global;
+    composes: max-w-[100vw] from global;
+    composes: opacity-0 from global;
+    composes: overflow-visible from global;
+    composes: top-full from global;
+    composes: z-menu from global;
+    transition: opacity 192ms var(--venia-global-anim-out),
+        visibility 192ms var(--venia-global-anim-out),
+        /* Adding delay to move container off the screen after previous transitions happened */
+            left 0s 192ms;
+    width: calc(100vw - 2rem); /* TODO @TW: cannot compose */
+    transform: translate3d(-50%, 0, 0);
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+}
+
+.root_open {
+    composes: root;
+
+    composes: left-1/2 from global;
+    composes: opacity-100 from global;
+    transition: opacity 224ms var(--venia-global-anim-in),
+        visibility 224ms var(--venia-global-anim-in), left 0s;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+}
+
+.contents {
+    composes: absolute from global;
+    composes: bg-white from global;
+    composes: grid from global;
+    composes: right-0 from global;
+    composes: rounded-sm from global;
+    composes: shadow-menu from global;
+    composes: top-0 from global;
+    composes: w-[27.5rem] from global;
+    min-height: 10rem;
+    transform: translate3d(0, -8px, 0);
+    transition-duration: 192ms;
+    transition-property: transform;
+    transition-timing-function: var(--venia-global-anim-out);
+}
+
+.contents_open {
+    composes: contents;
+
+    transform: translate3d(0, 4px, 0);
+    transition-duration: 224ms;
+    transition-timing-function: var(--venia-global-anim-in);
+}
+
+.createAccount {
+    composes: grid from global;
+    composes: gap-xs from global;
+    composes: justify-items-stretch from global;
+    composes: px-sm from global;
+    composes: py-xs from global;
+}
+
+.forgotPassword {
+    composes: p-md from global;
+}
+
+.loading {
+    composes: p-md from global;
+}

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenuItems.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { func, shape, string } from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { useAccountMenuItems } from '@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems';
+
+import defaultClasses from './accountMenuItems.module.css';
+
+const AccountMenuItems = props => {
+    const { onSignOut } = props;
+
+    const talonProps = useAccountMenuItems({ onSignOut });
+    const { handleSignOut, menuItems } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const menu = menuItems.map(item => {
+        return (
+            <Link
+                data-cy="AccountMenuItems-link"
+                className={classes.link}
+                key={item.name}
+                to={item.url}
+            >
+                <FormattedMessage id={item.id} defaultMessage={item.name} />
+            </Link>
+        );
+    });
+
+    return (
+        <div className={classes.root} data-cy="AccountMenuItems-root">
+            {menu}
+            <button
+                className={classes.signOut}
+                onClick={handleSignOut}
+                type="button"
+                data-cy="AccountMenuItems-signOut"
+            >
+                <FormattedMessage
+                    id={'accountMenu.signOutButtonText'}
+                    defaultMessage={'Sign Out'}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default AccountMenuItems;
+
+AccountMenuItems.propTypes = {
+    classes: shape({
+        link: string,
+        signOut: string
+    }),
+    onSignOut: func
+};

package/src/overwrites/venia-ui/lib/components/AccountMenu/accountMenuItems.module.css

@@ -0,0 +1,31 @@
+.root {
+    composes: gap-y-sm from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-stretch from global;
+    composes: p-sm from global;
+}
+
+.link {
+    composes: cursor-pointer from global;
+    composes: font-medium from global;
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: leading-tight from global;
+    composes: max-w-full from global;
+    composes: no-underline from global;
+    composes: pointer-events-auto from global;
+    composes: text-subtle from global;
+
+    composes: hover_text-colorDefault from global;
+}
+
+.signOut {
+    composes: link;
+
+    composes: border-t-2 from global;
+    composes: border-solid from global;
+    composes: border-light from global;
+    composes: pt-xs from global;
+}

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

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

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -41,6 +41,9 @@ const Adapter = props => {
     let websiteCodeInUrl = websiteCodes.find((str) => str === match);
 
     const { getWebsiteByUserIp } = useWebsiteByIp(websiteCodeInUrl);
+    // const getWebsiteByUserIp = {
+        // countryCode: 'SG'
+    // }
     
     useEffect(() => {
         if (websiteCodeInUrl) {

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;

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.js

@@ -0,0 +1,189 @@
+import React, { Fragment, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { string } from 'prop-types';
+import { Link } from 'react-router-dom';
+
+import { useBreadcrumbs } from '@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Shimmer from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css';
+import { ArrowRight2 } from 'iconsax-react';
+import cn from 'classnames';
+import { getFiltersFromSearch } from '@magento/peregrine/lib/talons/FilterModal/helpers';
+import { useLocation } from 'react-router-dom';
+
+/**
+ * Breadcrumbs! Generates a sorted display of category links.
+ *
+ * @param {String} props.categoryId the uid of the category for which to generate breadcrumbs
+ * @param {String} props.currentProduct the name of the product we're currently on, if any.
+ */
+const Breadcrumbs = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const { categoryId, currentProduct, customPage, currentFilter } = props;
+
+    const talonProps = useBreadcrumbs({ categoryId });
+
+    const DELIMITER = <ArrowRight2 size={13} className='inline-flex text-gray-200' />
+
+    const {
+        currentCategory,
+        currentCategoryPath,
+        hasError,
+        isLoading,
+        normalizedData,
+        handleClick
+    } = talonProps;
+
+    // For all links generate a fragment like "/ Text"
+    const links = useMemo(() => {
+        return normalizedData.map(({ text, path }) => {
+            if (text == "dCollectible Card Games") {
+                return '';
+            }
+            
+            return (
+                <Fragment key={text}>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <Link
+                        className={classes.link}
+                        to={resourceUrl(path)}
+                        onClick={handleClick}
+                    >
+                        {text}
+                    </Link>
+                </Fragment>
+            );
+        });
+    }, [classes.divider, classes.link, handleClick, normalizedData]);
+
+    if (isLoading) {
+        return <Shimmer />;
+    }
+
+    // Don't display anything but the empty, static height div when there's an error.
+    if (hasError) {
+        return (
+            <div
+                className={classes.root}
+                aria-live="polite"
+                aria-busy="false"
+            />
+        );
+    }
+
+    // console.log(currentFilter)
+
+    const filterBreadcrumbsElement = [];
+
+    const lastIndex = currentFilter ? currentFilter.length - 1 : 0;
+    // const filterpath = ;
+    
+    currentFilter && currentFilter.length && currentFilter.map((filter, index) => {
+        console.log(filter)
+        currentProduct ? (
+            filterBreadcrumbsElement.push(
+                <>
+                <span className={classes.divider}>{DELIMITER}</span>
+                <Link
+                    key={index}
+                    className={classes.link}
+                    to={resourceUrl('/'+currentCategoryPath)}
+                    onClick={handleClick}
+                >
+                    {filter.label}
+                </Link>
+                </>
+            )
+        ) : (
+            customPage ? (
+                filterBreadcrumbsElement.push(
+                    <>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <Link
+                        key={index}
+                        className={classes.link}
+                        to={resourceUrl('/'+currentCategoryPath)}
+                        onClick={handleClick}
+                    >
+                        {filter.label}
+                    </Link>
+                    </>
+                )
+            ) : filterBreadcrumbsElement.push(
+                index == lastIndex ?
+                <span key={index}>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{filter.label}</span>
+                </span> : <>
+                    <span className={classes.divider}>{DELIMITER}</span>
+                    <Link
+                        key={index}
+                        className={classes.link}
+                        to={resourceUrl('/'+currentCategoryPath+'?' + filter.code + '[filter]=' + filter.label + ',' + filter.option_id)}
+                        onClick={handleClick}
+                    >
+                        {filter.label}
+                    </Link>
+                    </>
+            )
+        );
+    });
+
+    // If we have a "currentProduct" it means we're on a PDP so we want the last
+    // category text to be a link. If we don't have a "currentProduct" we're on
+    // a category page so it should be regular text.
+    const currentCategoryLink = currentCategory == "dCollectible Card Games" ? '' : (customPage || currentProduct || currentFilter && currentFilter.length ? (
+        <>
+        <span className={classes.divider}>{DELIMITER}</span>
+        <Link
+            className={classes.link}
+            to={'/'+resourceUrl(currentCategoryPath)}
+            onClick={handleClick}
+        >
+            {currentCategory}
+        </Link>
+        </>
+    ) : (
+        <>
+        <span className={classes.divider}>{DELIMITER}</span>
+        <span className={cn(classes.currentCategory, 'text-blue-700 font-medium')}>{currentCategory}</span>
+        </>
+    ));
+
+    const currentProductNode = currentProduct ? (
+        <Fragment>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <span className={classes.text}>{currentProduct}</span>
+        </Fragment>
+    ) : null;
+
+    const customPageNode = customPage ? (
+        <Fragment>
+            <span className={classes.divider}>{DELIMITER}</span>
+            <span className={classes.text}>{customPage}</span>
+        </Fragment>
+    ) : null;
+    
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="false">
+            <Link className={classes.link} to="/">
+                <FormattedMessage id={'global.home'} defaultMessage={'Home'} />
+            </Link>
+            {links}
+            {currentCategoryLink}
+            {filterBreadcrumbsElement}
+            {currentProductNode}
+            {customPageNode}
+        </div>
+    );
+};
+
+export default Breadcrumbs;
+
+Breadcrumbs.propTypes = {
+    categoryId: string.isRequired,
+    currentProduct: string
+};

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -0,0 +1,71 @@
+.root {
+    /* Permanent height to prevent pop-in. */
+    /* Show ellipses when overflowing. */
+    composes: flex from global;
+    composes: items-center from global;
+    composes: gap-[6px] from global;
+    composes: mt-[10px] from global;
+    composes: mb-[24px] from global;
+    composes: my-[10px] from global;
+    padding-top: 20px;
+    margin-bottom: 40px;
+}
+
+.text {
+    composes: text-base from global;
+    composes: leading-[13px] from global;
+    composes: text-blue-700 from global;
+    composes: font-medium from global;
+}
+
+.divider {
+    composes: text-base from global;
+    composes: leading-[13px] from global;
+}
+
+.link {
+    composes: text-base from global;
+    composes: leading-[13px] from global;
+    composes: text-gray-200 from global;
+}
+
+.currentCategory {
+    composes: text-base from global;
+    composes: leading-[13px] from global;
+}
+
+@media only screen and (max-width: 1023px) {
+    .text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 160px;
+    }
+
+    .link {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 160px;
+    }
+}
+
+@media only screen and (max-width: 767px) {
+    .text {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 100px;
+    }
+
+    .link {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        max-width: 100px;
+    }
+}

package/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import defaultClasses from '@magento/venia-ui/lib/components/Breadcrumbs/breadcrumbs.module.css';
+
+const BreadcrumbsShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer width={5} />
+        </div>
+    );
+};
+
+BreadcrumbsShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default BreadcrumbsShimmer;

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

@@ -0,0 +1,2 @@
+export { default } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs';
+export { default as BreadcrumbShimmer } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs/breadcrumbs.shimmer';

package/src/overwrites/venia-ui/lib/components/Button/button.js

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import { useButton } from 'react-aria';
+import { oneOf, shape, string, bool } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './button.module.css';
+import cn from 'classnames';
+
+const getRootClassName = (priority, negative) =>
+    `root_${priority}Priority${negative ? 'Negative' : ''}`;
+
+/**
+ * A component for buttons.
+ *
+ * @typedef Button
+ * @kind functional component
+ *
+ * @param {props} props React component props
+ *
+ * @returns {React.Element} A React component that displays a single button.
+ */
+const Button = props => {
+    const {
+        children,
+        classes: propClasses,
+        priority,
+        negative,
+        disabled,
+        onPress,
+        ...restProps
+    } = props;
+
+    const buttonRef = useRef();
+
+    const { buttonProps } = useButton(
+        {
+            isDisabled: disabled,
+            onPress,
+            ...restProps
+        },
+        buttonRef
+    );
+
+    const classes = useStyle(defaultClasses, propClasses);
+    const rootClassName = classes[getRootClassName(priority, negative)];
+
+    return (
+        <button
+            ref={buttonRef}
+            className={cn(rootClassName, classes.rootClass)}
+            {...buttonProps}
+            {...restProps}
+        >
+            <span className={cn(classes.content)}>{children}</span>
+        </button>
+    );
+};
+
+/**
+ * Props for {@link Button}
+ *
+ * @typedef props
+ *
+ * @property {Object} classes An object containing the class names for the
+ * Button component.
+ * @property {string} classes.content classes for the button content
+ * @property {string} classes.root classes for root container
+ * @property {string} classes.root_highPriority classes for Button if
+ * high priority.
+ * @property {string} classes.root_lowPriority classes for Button if
+ * low priority.
+ * @property {string} classes.root_normalPriority classes for Button if
+ * normal priority.
+ * @property {string} priority the priority/importance of the Button
+ * @property {string} type the type of the Button
+ * @property {bool} negative whether the button should be displayed in red for a negative action
+ * @property {bool} disabled is the button disabled
+ */
+Button.propTypes = {
+    classes: shape({
+        content: string,
+        root: string,
+        root_highPriority: string,
+        root_lowPriority: string,
+        root_normalPriority: string
+    }),
+    priority: oneOf(['high', 'low', 'normal']).isRequired,
+    type: oneOf(['button', 'reset', 'submit']).isRequired,
+    negative: bool,
+    disabled: bool
+};
+
+Button.defaultProps = {
+    priority: 'normal',
+    type: 'button',
+    negative: false,
+    disabled: false
+};
+
+export default Button;