@riosst100/pwa-marketplace 1.3.2 → 1.3.4

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: 767px) {
+    .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,204 @@
+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 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
+    } = 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}
+        >
+            <div data-cy="GalleryItem-root" className={cn(classes.root, 'border border-gray-100 rounded-lg hover_shadow-type-1 ')} ref={itemRef}>
+                <div className={cn('item-product')}>
+                    <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={classes.name}
+                        data-cy="GalleryItem-name"
+                    >
+                        <span>{name}</span>
+                    </Link>
+                    <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
+                        <Price
+                            value={priceSource.value}
+                            currencyCode={priceSource.currency}
+                        />
+                    </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-cover 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-[14px] from global;
+    composes: mb-[18px] 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-[16px] from global;
+    composes: font-semibold 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-sm 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" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="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="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    <span className='text-sm text-darkblue-900 font-semibold'>
+                        {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
+    })
+};

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

@@ -0,0 +1,116 @@
+import React, { Fragment, Suspense } from 'react';
+import { shape, string } from 'prop-types';
+import { ShoppingBag as ShoppingCartIcon } from 'react-feather';
+import { useIntl } from 'react-intl';
+
+import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrigger';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from '@magento/venia-ui/lib/components/Header/cartTrigger.module.css';
+import { GET_ITEM_COUNT_QUERY } from '@magento/venia-ui/lib/components/Header/cartTrigger.gql';
+import cn from 'classnames';
+import { ShoppingCart } from 'iconsax-react';
+import { darkBlue } from '@riosst100/pwa-marketplace/src/theme/vars';
+
+const MiniCart = React.lazy(() => import('@magento/venia-ui/lib/components/MiniCart'));
+
+const CartTrigger = props => {
+    const {
+        handleLinkClick,
+        handleTriggerClick,
+        itemCount,
+        miniCartRef,
+        miniCartIsOpen,
+        hideCartTrigger,
+        setMiniCartIsOpen,
+        miniCartTriggerRef
+    } = useCartTrigger({
+        queries: {
+            getItemCountQuery: GET_ITEM_COUNT_QUERY
+        }
+    });
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const { formatMessage } = useIntl();
+    const buttonAriaLabel = formatMessage(
+        {
+            id: 'cartTrigger.ariaLabel',
+            defaultMessage:
+                'Toggle mini cart. You have {count} items in your cart.'
+        },
+        { count: itemCount }
+    );
+    const itemCountDisplay = itemCount > 99 ? '99+' : itemCount;
+    const triggerClassName = miniCartIsOpen
+        ? classes.triggerContainer_open
+        : classes.triggerContainer;
+
+    const maybeItemCounter = itemCount ? (
+        <span
+            className={cn(
+                classes.counter,
+                'bg-yellow-300 min-w-[18px] min-h-[18px] text-[13px] font-regular leading-[18px] text-darkblue-900 top-[-5px]',
+                '!left-auto right-[0px]'
+            )}
+            data-cy="CartTrigger-counter"
+        >
+            {itemCountDisplay}
+        </span>
+    ) : null;
+
+    const cartTrigger = hideCartTrigger ? null : (
+        // Because this button behaves differently on desktop and mobile
+        // we render two buttons that differ only in their click handler
+        // and control which one displays via CSS.
+        <Fragment>
+            <div className={cn(triggerClassName, '!h-auto')} ref={miniCartTriggerRef}>
+                <button
+                    aria-expanded={miniCartIsOpen}
+                    aria-label={buttonAriaLabel}
+                    className={cn(
+                        classes.trigger,
+                        'gap-[5px] !min-h-[30px] !h-auto !min-w-[35px] !w-fit !justify-between',
+                    )}
+                    onClick={handleTriggerClick}
+                    data-cy="CartTrigger-trigger"
+                >
+                    {/* <Icon src={ShoppingCartIcon} /> */}
+                    <ShoppingCart size="30" color={darkBlue} className={cn('stroke-0')} variant="Outline" />
+                    {maybeItemCounter}
+                </button>
+            </div>
+            <button
+                aria-expanded={miniCartIsOpen}
+                aria-label={buttonAriaLabel}
+                className={classes.link}
+                onClick={handleLinkClick}
+            >
+                <Icon src={ShoppingCartIcon} />
+                {maybeItemCounter}
+            </button>
+            <Suspense fallback={null}>
+                <MiniCart
+                    isOpen={miniCartIsOpen}
+                    setIsOpen={setMiniCartIsOpen}
+                    ref={miniCartRef}
+                />
+            </Suspense>
+        </Fragment>
+    );
+
+    return cartTrigger;
+};
+
+export default CartTrigger;
+
+CartTrigger.propTypes = {
+    classes: shape({
+        counter: string,
+        link: string,
+        openIndicator: string,
+        root: string,
+        trigger: string,
+        triggerContainer: string
+    })
+};