@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/Gallery/addToCartButton.module.css

@@ -0,0 +1,38 @@
+.root {
+    composes: root;
+
+    composes: bg-brand-dark from global;
+    composes: border-brand-dark from global;
+    composes: text-white from global;
+
+    composes: active_bg-brand-darkest from global;
+    composes: active_border-brand-darkest from global;
+    composes: active_text-white from global;
+
+    composes: hover_bg-brand-darkest from global;
+    composes: hover_border-brand-darkest from global;
+    composes: hover_text-white from global;
+
+    composes: min-w-[6.125rem] from global;
+    composes: -ml-2xs from global;
+    composes: px-2xs from global;
+    composes: py-0 from global;
+    composes: self-center from global;
+    min-height: 2rem;
+
+    composes: sm_min-w-[8rem] from global;
+    /* composes: md_min-w-0 from global; */
+}
+
+.icon {
+    composes: inline from global;
+    composes: stroke-white from global;
+
+    composes: xs_hidden from global;
+}
+
+.text {
+    composes: hidden from global;
+
+    composes: xs_inline from global;
+}

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.js

@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import { string, shape, array } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import GalleryItem from './item';
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './gallery.module.css';
+import { useGallery } from '@magento/peregrine/lib/talons/Gallery/useGallery';
+
+/**
+ * Renders a Gallery of items. If items is an array of nulls Gallery will render
+ * a placeholder item for each.
+ *
+ * @params {Array} props.items an array of items to render
+ */
+const Gallery = props => {
+    const { items, activeLetter } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+    const talonProps = useGallery();
+    const { storeConfig } = talonProps;
+
+    const galleryItems = useMemo(
+        () =>
+            items.map((item, index) => {
+                if (item === null) {
+                    return <GalleryItemShimmer key={index} />;
+                }
+
+                return (
+                    <GalleryItem
+                        key={item.id}
+                        item={item}
+                        storeConfig={storeConfig}
+                    />
+                );
+            }),
+        [items, storeConfig, activeLetter]
+    );
+
+    return (
+        <div data-cy="Gallery-root" className={classes.root} aria-busy="false">
+            <div className={classes.items}>{galleryItems}</div>
+        </div>
+    );
+};
+
+Gallery.propTypes = {
+    classes: shape({
+        filters: string,
+        items: string,
+        pagination: string,
+        root: string
+    }),
+    items: array.isRequired
+};
+
+export default Gallery;

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.module.css

@@ -0,0 +1,28 @@
+.root {
+    composes: grid from global;
+    composes: grid-cols-1 from global;
+    composes: leading-none from global;
+    grid-template-areas:
+        'actions'
+        'items';
+}
+
+.items {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: mb-6 from global;
+    grid-area: items;
+    grid-template-columns: repeat(4, 1fr);
+}
+
+@media only screen and (max-width: 1023px) {
+    .items {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media only screen and (max-width: 575px) {
+    .items {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}

package/src/overwrites/venia-ui/lib/components/Gallery/gallery.shimmer.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { shape, string, array, object } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './gallery.module.css';
+
+const GalleryShimmer = props => {
+    const { items, itemProps } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <div className={classes.items}>
+                {items.map((item, index) => (
+                    <GalleryItemShimmer key={index} {...itemProps} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+GalleryShimmer.defaultProps = {
+    items: [],
+    itemProps: {}
+};
+
+GalleryShimmer.propTypes = {
+    classes: shape({
+        root: string,
+        items: string
+    }),
+    items: array,
+    itemProps: shape({
+        classes: object
+    })
+};
+
+export default GalleryShimmer;

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

@@ -0,0 +1,3 @@
+export { default } from './gallery';
+export { default as GalleryShimmer } from './gallery.shimmer';
+export { default as GalleryItemShimmer } from './item.shimmer';

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -0,0 +1,224 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Info } from 'react-feather';
+import { string, number, shape } from 'prop-types';
+import { Link } from 'react-router-dom';
+import Price from '@magento/venia-ui/lib/components/Price';
+import { UNCONSTRAINED_SIZE_KEY } from '@magento/peregrine/lib/talons/Image/useImage';
+import { useGalleryItem } from '@magento/peregrine/lib/talons/Gallery/useGalleryItem';
+import resourceUrl from '@magento/peregrine/lib/util/makeUrl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Image from '@magento/venia-ui/lib/components/Image';
+import GalleryItemShimmer from './item.shimmer';
+import defaultClasses from './item.module.css';
+import WishlistGalleryButton from '@magento/venia-ui/lib/components/Wishlist/AddToListButton';
+
+import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel';
+import AddToCartButton from './addToCartButton';
+// eslint-disable-next-line no-unused-vars
+import Rating from '@magento/venia-ui/lib/components/Rating';
+import cn from 'classnames';
+import { Verify } from 'iconsax-react';
+import Star from './star';
+
+
+// The placeholder image is 4:5, so we should make sure to size our product
+// images appropriately.
+const IMAGE_WIDTH = 300;
+const IMAGE_HEIGHT = 375;
+
+// Gallery switches from two columns to three at 640px.
+const IMAGE_WIDTHS = new Map()
+    .set(640, IMAGE_WIDTH)
+    .set(UNCONSTRAINED_SIZE_KEY, 840);
+
+const GalleryItem = props => {
+    const {
+        handleLinkClick,
+        item,
+        itemRef,
+        wishlistButtonProps,
+        isSupportedProductType,
+        rootClassName
+    } = useGalleryItem(props);
+
+    const seller = item.seller ? item.seller.name : '';
+
+    const { storeConfig } = props;
+
+    const productUrlSuffix = storeConfig && storeConfig.product_url_suffix;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!item) {
+        return <GalleryItemShimmer classes={classes} />;
+    }
+
+    // eslint-disable-next-line no-unused-vars
+    const { name, price_range, small_image, url_key, rating_summary } = item;
+
+    const { url: smallImageURL } = small_image;
+    const productLink = resourceUrl(`/${url_key}${productUrlSuffix || ''}`);
+
+    const wishlistButton = wishlistButtonProps ? (
+        <WishlistGalleryButton {...wishlistButtonProps} />
+    ) : null;
+
+    const addButton = isSupportedProductType ? (
+        <AddToCartButton item={item} urlSuffix={productUrlSuffix} />
+    ) : (
+        <div className={classes.unavailableContainer}>
+            <Info />
+            <p>
+                <FormattedMessage
+                    id={'galleryItem.unavailableProduct'}
+                    defaultMessage={'Currently unavailable for purchase.'}
+                />
+            </p>
+        </div>
+    );
+
+    // fallback to regular price when final price is unavailable
+    const priceSource =
+        price_range.maximum_price.final_price ||
+        price_range.maximum_price.regular_price;
+
+    // Hide the Rating component until it is updated with the new look and feel (PWA-2512).
+    const ratingAverage = null;
+    // const ratingAverage = rating_summary ? (
+    //     <Rating rating={rating_summary} />
+    // ) : null;
+
+    return (
+        <Link
+            aria-label={name}
+            onClick={handleLinkClick}
+            to={productLink}
+            className={rootClassName}
+        >
+            <div
+                data-cy="GalleryItem-root"
+                className={cn(
+                    classes.root,
+                    'border border-gray-100 rounded-lg hover_shadow-type-1 bg-white min-h-[388px]'
+                )}
+                ref={itemRef}
+            >
+                <div className={cn('item-product relative z-[1]')}>
+                    <ProductLabel item={item} />
+                    <Link
+                        aria-label={name}
+                        onClick={handleLinkClick}
+                        to={productLink}
+                        className={classes.images}
+                    >
+                        <Image
+                            alt={name}
+                            classes={{
+                                image: classes.image,
+                                loaded: classes.imageLoaded,
+                                notLoaded: classes.imageNotLoaded,
+                                root: classes.imageContainer
+                            }}
+                            height={IMAGE_HEIGHT}
+                            resource={smallImageURL}
+                            widths={IMAGE_WIDTHS}
+                        />
+                        {ratingAverage}
+                    </Link>
+                </div>
+                <div className={cn('item-info px-[15px] pt-[15px] pb-[20px]')}>
+                    <Link
+                        onClick={handleLinkClick}
+                        to={productLink}
+                        className={cn(classes.name, 'xs_!no-underline')}
+                        data-cy="GalleryItem-name"
+                    >
+                        <span>{name}</span>
+                    </Link>
+                    <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
+                        <p className='font-medium text-colorDefault !mb-1 !leading-[14px]'>
+                            <Price
+                                value={priceSource.value}
+                                currencyCode={priceSource.currency}
+                            />
+                        </p>
+                        <p className='old-price text-gray-400 text-xs line-through font-normal !mb-0'>
+                            <Price
+                                value={priceSource.value}
+                                currencyCode={priceSource.currency}
+                            />
+                        </p>
+                    </div>
+
+                    <div data-cy="GalleryItem-Rating" className={cn('flex gap-[5px] items-center mb-2')}>
+                        <Star />
+                        <span className='text-[12px] leading-normal'>
+                            {rating_summary}
+                        </span>
+                    </div>
+
+                    <div data-cy="GalleryItem-Seller" className={cn('flex gap-[5px] items-center')}>
+                        <Verify size={17} className='text-blue-700' variant="Bold" />
+                        <span className='text-[12px] text-gray-300 leading-normal'>
+                            {seller}
+                        </span>
+                    </div>
+
+                    {/* <div className={classes.actionsContainer}>
+                        {' '}
+                        {addButton}
+                        {wishlistButton}
+                    </div> */}
+                </div>
+            </div>
+        </Link>
+    );
+};
+
+GalleryItem.propTypes = {
+    classes: shape({
+        image: string,
+        imageLoaded: string,
+        imageNotLoaded: string,
+        imageContainer: string,
+        images: string,
+        name: string,
+        price: string,
+        root: string
+    }),
+    item: shape({
+        id: number.isRequired,
+        uid: string.isRequired,
+        name: string.isRequired,
+        small_image: shape({
+            url: string.isRequired
+        }),
+        stock_status: string.isRequired,
+        __typename: string.isRequired,
+        url_key: string.isRequired,
+        sku: string.isRequired,
+        price_range: shape({
+            maximum_price: shape({
+                final_price: shape({
+                    value: number.isRequired,
+                    currency: string.isRequired
+                }),
+                regular_price: shape({
+                    value: number.isRequired,
+                    currency: string.isRequired
+                }).isRequired,
+                discount: shape({
+                    amount_off: number.isRequired
+                }).isRequired
+            }).isRequired
+        }).isRequired
+    }),
+    storeConfig: shape({
+        magento_wishlist_general_is_enabled: string.isRequired,
+        product_url_suffix: string
+    })
+};
+
+export default GalleryItem;

package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css

@@ -0,0 +1,109 @@
+.root {
+    composes: content-start from global;
+    composes: grid from global;
+    /* composes: gap-y-2xs from global; */
+    composes: max-w-[315px] from global;
+}
+
+.images {
+    composes: grid from global;
+    grid-template-areas: 'main';
+    position: relative;
+}
+
+.imageContainer {
+    grid-area: main;
+    composes: max-h-[215px] from global;
+}
+
+.image {
+    composes: block from global;
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: w-full from global;
+    transition: opacity 512ms ease-out;
+}
+
+.imageLoaded {
+    composes: absolute from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+    composes: opacity-100 from global;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+
+.imageNotLoaded {
+    composes: absolute from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: opacity-0 from global;
+}
+
+.imagePlaceholder {
+    composes: image;
+
+    composes: bg-subtle from global;
+}
+
+.actionsContainer {
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: pl-2xs from global;
+    grid-template-columns: auto auto;
+}
+
+/* TODO @TW: cannot compose */
+.actionsContainer:empty {
+    display: none;
+}
+
+.name {
+    composes: font-medium from global;
+    composes: text-base from global;
+    composes: mb-1 from global;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    line-height: normal;
+}
+
+.name,
+.price {
+    composes: text-colorDefault from global;
+    composes: text-[14px] from global;
+    composes: font-medium from global;
+    min-height: 1rem;
+}
+
+.price {
+    padding-top: 2.5;
+}
+
+.unavailableContainer {
+    composes: bg-subtle from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: italic from global;
+    composes: items-center from global;
+    composes: justify-start from global;
+    composes: p-3 from global;
+    composes: text-base from global;
+    composes: text-subtle from global;
+    composes: w-full from global;
+}

package/src/overwrites/venia-ui/lib/components/Gallery/item.shimmer.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { transparentPlaceholder } from '@magento/peregrine/lib/util/images';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import Image from '@magento/venia-ui/lib/components/Image';
+import defaultClasses from './item.module.css';
+
+const GalleryItemShimmer = props => {
+    const classes = useStyle(defaultClasses, props.classes);
+
+    return (
+        <div className={classes.root} aria-live="polite" aria-busy="true">
+            <Shimmer key="product-image">
+                <Image
+                    alt="Placeholder for gallery item image"
+                    classes={{
+                        image: classes.image,
+                        root: classes.imageContainer
+                    }}
+                    src={transparentPlaceholder}
+                />
+            </Shimmer>
+            <Shimmer width="100%" key="product-name" />
+            <Shimmer width={3} key="product-price" />
+            <Shimmer type="button" key="add-to-cart" />
+        </div>
+    );
+};
+
+GalleryItemShimmer.propTypes = {
+    classes: shape({
+        root: string
+    })
+};
+
+export default GalleryItemShimmer;

package/src/overwrites/venia-ui/lib/components/Gallery/star.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export const star = () => {
+    return (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M8.00887 2.04754L9.03554 4.10087C9.17554 4.38671 9.54887 4.66087 9.86387 4.71337L11.7247 5.02254C12.9147 5.22087 13.1947 6.08421 12.3372 6.93587L10.8905 8.38254C10.6455 8.62754 10.5114 9.10004 10.5872 9.43837L11.0014 11.2292C11.328 12.6467 10.5755 13.195 9.32137 12.4542L7.5772 11.4217C7.2622 11.235 6.74304 11.235 6.4222 11.4217L4.67804 12.4542C3.4297 13.195 2.67137 12.6409 2.99804 11.2292L3.4122 9.43837C3.48804 9.10004 3.35387 8.62754 3.10887 8.38254L1.6622 6.93587C0.810536 6.08421 1.0847 5.22087 2.2747 5.02254L4.13554 4.71337C4.4447 4.66087 4.81804 4.38671 4.95804 4.10087L5.9847 2.04754C6.5447 0.933372 7.4547 0.933372 8.00887 2.04754Z" fill="#F7C317" stroke="#F7C317" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+        </svg>
+
+    )
+}
+
+export default star;

package/src/overwrites/venia-ui/lib/components/Header/accountTrigger.js

@@ -0,0 +1,98 @@
+import React, { Fragment, Suspense } from 'react';
+import { useIntl } from 'react-intl';
+import { shape, string } from 'prop-types';
+
+import { useAccountTrigger } from '@magento/peregrine/lib/talons/Header/useAccountTrigger';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+// import AccountChip from '../AccountChip';
+import { User } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+import cn from 'classnames';
+
+import defaultClasses from '@magento/venia-ui/lib/components/Header/accountTrigger.module.css';
+
+const AccountMenu = React.lazy(() => import('@magento/venia-ui/lib/components/AccountMenu'));
+
+
+/**
+ * The AccountTrigger component is the call to action in the site header
+ * that toggles the AccountMenu dropdown.
+ *
+ * @param {Object} props
+ * @param {Object} props.classes - CSS classes to override element styles.
+ */
+const AccountTrigger = props => {
+    const talonProps = useAccountTrigger();
+    const {
+        accountMenuIsOpen,
+        accountMenuRef,
+        accountMenuTriggerRef,
+        setAccountMenuIsOpen,
+        handleTriggerClick,
+        isUserSignedIn
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClassName = accountMenuIsOpen ? classes.root_open : classes.root;
+    const { formatMessage } = useIntl();
+
+    const ariaLabelMyMenu = formatMessage({
+        id: 'accountTrigger.ariaLabelMyMenu',
+        defaultMessage: 'Toggle My Account Menu'
+    });
+    const ariaLabelSignIn = formatMessage({
+        id: 'accountTrigger.ariaLabelSignIn',
+        defaultMessage: 'Sign In'
+    });
+    const ariaLabel = isUserSignedIn ? ariaLabelMyMenu : ariaLabelSignIn;
+    return (
+        <Fragment>
+            <div className={cn(rootClassName, '!h-auto')} ref={accountMenuTriggerRef}>
+                <button
+                    aria-label={ariaLabel}
+                    aria-expanded={accountMenuIsOpen}
+                    className={cn(
+                        classes.trigger,
+                        'gap-[5px] !min-h-[30px] !h-auto !justify-between !min-w-min !w-fit',
+                    )}
+                    onClick={handleTriggerClick}
+                    data-cy="AccountTrigger-trigger"
+                >
+                    {/* <AccountChip
+                        fallbackText={formatMessage({
+                            id: 'accountTrigger.buttonFallback',
+                            defaultMessage: 'Sign In'
+                        })}
+                        shouldIndicateLoading={true}
+                    /> */}
+                    <User size="20" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    <span className='text-base font-medium'>
+                        {formatMessage({
+                            id: 'accountTrigger.buttonFallback',
+                            defaultMessage: 'Sign In'
+                        })}
+                    </span>
+                </button>
+            </div>
+            <Suspense fallback={null}>
+                <AccountMenu
+                    handleTriggerClick={handleTriggerClick}
+                    ref={accountMenuRef}
+                    accountMenuIsOpen={accountMenuIsOpen}
+                    setAccountMenuIsOpen={setAccountMenuIsOpen}
+                />
+            </Suspense>
+        </Fragment>
+    );
+};
+
+export default AccountTrigger;
+
+AccountTrigger.propTypes = {
+    classes: shape({
+        root: string,
+        root_open: string,
+        trigger: string
+    })
+};