@riosst100/pwa-marketplace 2.0.9 → 2.1.0

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistEditFavoritesListDialog.module.css

@@ -0,0 +1,22 @@
+.root {
+    composes: p-xs from global;
+}
+
+.cancelButton {
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: min-w-[9rem] from global;
+}
+
+.confirmButton {
+    composes: confirmButton from '@magento/venia-ui/lib/components/Dialog/dialog.module.css';
+}
+
+.errorMessage {
+    composes: errorMessage from './wishlistConfirmRemoveProductDialog.module.css';
+}
+
+.form {
+    composes: gap-sm from global;
+    composes: grid from global;
+}

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistItem.js

@@ -0,0 +1,138 @@
+import React, { useEffect, useMemo } from 'react';
+import { Trash2 } from 'react-feather';
+import { useIntl } from 'react-intl';
+import { useToasts } from '@magento/peregrine';
+import { useWishlistItem } from '@magento/peregrine/lib/talons/WishlistPage/useWishlistItem';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import Image from '@magento/venia-ui/lib/components/Image';
+import Price from '@magento/venia-ui/lib/components/Price';
+
+import defaultClasses from './wishlistItem.module.css';
+
+const WishlistItem = props => {
+    const { item } = props;
+
+    const { configurable_options: configurableOptions = [], product } = item;
+    const {
+        name,
+        price_range: priceRange,
+        stock_status: stockStatus
+    } = product;
+
+    const { maximum_price: maximumPrice } = priceRange;
+    const { final_price: finalPrice } = maximumPrice;
+    const { currency, value: unitPrice } = finalPrice;
+
+    const talonProps = useWishlistItem(props);
+    const {
+        addToCartButtonProps,
+        handleRemoveProductFromWishlist,
+        hasError,
+        isRemovalInProgress,
+        isSupportedProductType
+    } = talonProps;
+
+    const { formatMessage } = useIntl();
+    const [, { addToast }] = useToasts();
+
+    useEffect(() => {
+        if (hasError) {
+            addToast({
+                type: 'error',
+                message: formatMessage({
+                    id: 'wishlistItem.addToCartError',
+                    defaultMessage:
+                        'Something went wrong. Please refresh and try again.'
+                }),
+                timeout: 5000
+            });
+        }
+    }, [addToast, formatMessage, hasError]);
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const optionElements = useMemo(() => {
+        return configurableOptions.map(option => {
+            const {
+                id,
+                option_label: optionLabel,
+                value_label: valueLabel
+            } = option;
+
+            const optionString = `${optionLabel} : ${valueLabel}`;
+
+            return (
+                <span className={classes.option} key={id}>
+                    {optionString}
+                </span>
+            );
+        });
+    }, [classes.option, configurableOptions]);
+
+    const imageProps = {
+        classes: {
+            image:
+                stockStatus === 'OUT_OF_STOCK'
+                    ? classes.image_disabled
+                    : classes.image
+        },
+        ...talonProps.imageProps
+    };
+
+    const removeProductAriaLabel = formatMessage({
+        id: 'wishlistItem.removeAriaLabel',
+        defaultMessage: 'Remove Product from wishlist'
+    });
+
+    const rootClass = isRemovalInProgress
+        ? classes.root_disabled
+        : classes.root;
+
+    const addToCart = isSupportedProductType ? (
+        <button
+            className={classes.addToCart}
+            {...addToCartButtonProps}
+            data-cy="wishlistItem-addToCart"
+        >
+            {formatMessage({
+                id: 'wishlistItem.addToCart',
+                defaultMessage: 'Add to Cart'
+            })}
+        </button>
+    ) : null;
+
+    return (
+        <div className={rootClass} data-cy="wishlistItem-root">
+            <Image {...imageProps} />
+
+            <div className={classes.actionWrap}>
+                <span
+                    className={classes.name}
+                    data-cy="wishlistItem-productName"
+                >
+                    {name}
+                </span>{' '}
+                <button
+                    className={classes.deleteItem}
+                    onClick={handleRemoveProductFromWishlist}
+                    aria-label={removeProductAriaLabel}
+                    data-cy="wishlistItem-deleteItem"
+                >
+                    <Icon size={16} src={Trash2} />
+                </button>
+            </div>
+            <div
+                className={classes.priceContainer}
+                data-cy="wishlistItem-priceContainer"
+            >
+                <Price currencyCode={currency} value={unitPrice} />
+            </div>
+            {optionElements}
+            {addToCart}
+        </div>
+    );
+};
+
+export default WishlistItem;

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistItem.module.css

@@ -0,0 +1,78 @@
+.root {
+    composes: content-start from global;
+    composes: grid from global;
+    composes: gap-y-2xs from global;
+}
+
+.root_disabled {
+    composes: root;
+
+    composes: opacity-50 from global;
+}
+
+.name {
+    composes: font-semibold from global;
+    composes: text-colorDefault from global;
+}
+
+.detail {
+    composes: text-sm from global;
+    composes: text-subtle from global;
+}
+
+.option {
+    composes: detail;
+}
+
+.outOfStock {
+    composes: text-sm from global;
+    composes: text-error from global;
+}
+
+.priceContainer {
+    composes: text-colorDefault from global;
+}
+
+.image {
+    composes: h-full from global;
+    composes: object-contain from global;
+    composes: w-full from global;
+}
+
+.image_disabled {
+    composes: image;
+    composes: opacity-50 from global;
+}
+
+.addToCart {
+    composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: justify-self-start from global;
+    composes: min-w-full from global;
+    composes: mt-1 from global;
+
+    composes: xs_min-w-auto from global;
+}
+
+.deleteItem {
+    composes: mt-0 from global;
+    composes: mr-2 from global;
+    composes: mb-0 from global;
+    composes: ml-xs from global;
+    composes: justify-self-end from global;
+}
+
+.actionWrap {
+    composes: flex from global;
+    composes: items-start from global;
+}
+
+.moreActions {
+    composes: bg-gray-100 from global;
+    composes: hidden from global;
+    /* Hide actions menu until PWA-1683 */
+    /* composes: inline-flex from global; */
+    composes: items-center from global;
+    composes: p-0.5 from global;
+    composes: rounded-full from global;
+}

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistItems.js

@@ -0,0 +1,45 @@
+import React, { Fragment, useMemo } from 'react';
+import { useWishlistItems } from '@magento/peregrine/lib/talons/WishlistPage/useWishlistItems';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './wishlistItems.module.css';
+import WishlistItem from './wishlistItem';
+import AddToCartDialog from '@magento/venia-ui/lib/components/AddToCartDialog';
+
+const WishlistItems = props => {
+    const { items, wishlistId } = props;
+
+    const talonProps = useWishlistItems();
+    const {
+        activeAddToCartItem,
+        handleCloseAddToCartDialog,
+        handleOpenAddToCartDialog
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const itemElements = useMemo(() => {
+        return items.map(item => {
+            return (
+                <WishlistItem
+                    key={item.id}
+                    item={item}
+                    onOpenAddToCartDialog={handleOpenAddToCartDialog}
+                    wishlistId={wishlistId}
+                />
+            );
+        });
+    }, [handleOpenAddToCartDialog, items, wishlistId]);
+
+    return (
+        <Fragment>
+            <div className={classes.root}>{itemElements}</div>
+            <AddToCartDialog
+                item={activeAddToCartItem}
+                onClose={handleCloseAddToCartDialog}
+            />
+        </Fragment>
+    );
+};
+
+export default WishlistItems;

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistItems.module.css

@@ -0,0 +1,9 @@
+.root {
+    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    composes: gap-x-xs from global;
+    composes: gap-y-md from global;
+    composes: grid from global;
+
+    composes: xs_gap-x-md from global;
+    composes: xs_gap-y-md from global;
+}

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistListActionsDialog.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import { ChevronRight, Edit2 } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './wishlistMoreActionsDialog.module.css';
+
+const WishlistListActionsDialog = props => {
+    const { isOpen, onCancel, onEdit } = props;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const dialogTitle = formatMessage({
+        id: 'wishlistListActionsDialog.title_initial',
+        defaultMessage: 'List Actions'
+    });
+
+    return (
+        <Dialog
+            isOpen={isOpen}
+            onCancel={onCancel}
+            shouldShowButtons={false}
+            shouldUnmountOnHide={false}
+            title={dialogTitle}
+        >
+            <div className={classes.root}>
+                <button className={classes.rowButton} onClick={onEdit}>
+                    <span className={classes.row}>
+                        <Icon size={16} src={Edit2} />
+                        <span className={classes.text}>
+                            <FormattedMessage
+                                id={'wishlistListActionsDialog.edit'}
+                                defaultMessage={'Edit List'}
+                            />
+                        </span>
+                        <Icon size={16} src={ChevronRight} />
+                    </span>
+                </button>
+            </div>
+        </Dialog>
+    );
+};
+
+export default WishlistListActionsDialog;
+
+WishlistListActionsDialog.propTypes = {
+    classes: shape({
+        root: string,
+        rowButton: string,
+        row: string,
+        text: string
+    }),
+    isOpen: bool,
+    onCancel: func,
+    onEdit: func
+};

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistMoreActionsDialog.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import { ChevronRight, Copy, Move, Trash2 } from 'react-feather';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import defaultClasses from './wishlistMoreActionsDialog.module.css';
+
+const WishlistMoreActionsDialog = props => {
+    const { isOpen, onCancel, onRemove } = props;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const dialogTitle = formatMessage({
+        id: 'wishlistMoreActionsDialog.title_initial',
+        defaultMessage: 'Actions'
+    });
+
+    return (
+        <Dialog
+            isOpen={isOpen}
+            onCancel={onCancel}
+            shouldShowButtons={false}
+            shouldUnmountOnHide={false}
+            title={dialogTitle}
+        >
+            <div className={classes.root}>
+                <button className={classes.rowButton}>
+                    <span className={classes.row}>
+                        <Icon size={16} src={Move} />
+                        <span className={classes.text}>
+                            <FormattedMessage
+                                id={'wishlistMoreActionsDialog.move'}
+                                defaultMessage={'Move to'}
+                            />
+                        </span>
+                        <Icon size={16} src={ChevronRight} />
+                    </span>
+                </button>
+                <button className={classes.rowButton}>
+                    <span className={classes.row}>
+                        <Icon size={16} src={Copy} />
+                        <span className={classes.text}>
+                            <FormattedMessage
+                                id={'wishlistMoreActionsDialog.copy'}
+                                defaultMessage={'Copy to'}
+                            />
+                        </span>
+                        <Icon size={16} src={ChevronRight} />
+                    </span>
+                </button>
+                <button className={classes.rowButton} onClick={onRemove}>
+                    <span className={classes.row}>
+                        <Icon size={16} src={Trash2} />
+                        <span className={classes.text}>
+                            <FormattedMessage
+                                id={'wishlistMoreActionsDialog.delete'}
+                                defaultMessage={'Remove'}
+                            />
+                        </span>
+                    </span>
+                </button>
+            </div>
+        </Dialog>
+    );
+};
+
+export default WishlistMoreActionsDialog;
+
+WishlistMoreActionsDialog.propTypes = {
+    classes: shape({
+        root: string,
+        rowButton: string,
+        row: string,
+        text: string
+    }),
+    isOpen: bool,
+    onCancel: func,
+    onRemove: func
+};

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistMoreActionsDialog.module.css

@@ -0,0 +1,19 @@
+.root {
+    composes: grid from global;
+}
+
+.row {
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: items-center from global;
+    composes: p-xs from global;
+    composes: text-left from global;
+    grid-template-columns: auto 1fr auto;
+}
+
+.rowButton {
+    composes: even_border-bottom-2 from global;
+    composes: even_border-light from global;
+    composes: even_border-solid from global;
+    composes: even_border-top-2 from global;
+}

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistPage.js

@@ -0,0 +1,120 @@
+import React, { Fragment, useMemo } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useWishlistPage } from '@magento/peregrine/lib/talons/WishlistPage/useWishlistPage';
+import { deriveErrorMessage } from '@magento/peregrine/lib/util/deriveErrorMessage';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/LoadingIndicator';
+import Wishlist from './wishlist';
+import defaultClasses from './wishlistPage.module.css';
+
+import CreateWishlist from './createWishlist';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+
+const WishlistPage = props => {
+    const talonProps = useWishlistPage();
+    const {
+        errors,
+        loading,
+        shouldRenderVisibilityToggle,
+        wishlists
+    } = talonProps;
+    const { formatMessage } = useIntl();
+    const error = errors.get('getCustomerWishlistQuery');
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const WISHLIST_DISABLED_MESSAGE = formatMessage({
+        id: 'wishlistPage.wishlistDisabledMessage',
+        defaultMessage: 'The wishlist is not currently available.'
+    });
+    const PAGE_TITLE = formatMessage({
+        id: 'wishlistPage.pageTitleText',
+        defaultMessage: 'Wishlist'
+    });
+    const wishlistElements = useMemo(() => {
+        if (wishlists.length === 0) {
+            return <Wishlist />;
+        }
+
+        return wishlists.map((wishlist, index) => (
+            <Wishlist
+                key={wishlist.id}
+                isCollapsed={index !== 0}
+                data={wishlist}
+                shouldRenderVisibilityToggle={shouldRenderVisibilityToggle}
+            />
+        ));
+    }, [shouldRenderVisibilityToggle, wishlists]);
+
+    if (loading && !error) {
+        return fullPageLoadingIndicator;
+    }
+
+    let content;
+    if (error) {
+        const derivedErrorMessage = deriveErrorMessage([error]);
+        const errorElement =
+            derivedErrorMessage === WISHLIST_DISABLED_MESSAGE ? (
+                <p>
+                    <FormattedMessage
+                        id={'wishlistPage.disabledMessage'}
+                        defaultMessage={
+                            'Sorry, this feature has been disabled.'
+                        }
+                    />
+                </p>
+            ) : (
+                <p className={classes.fetchError}>
+                    <FormattedMessage
+                        id={'wishlistPage.fetchErrorMessage'}
+                        defaultMessage={
+                            'Something went wrong. Please refresh and try again.'
+                        }
+                    />
+                </p>
+            );
+
+        content = <div className={classes.errorContainer}>{errorElement}</div>;
+    } else {
+        content = (
+            <Fragment>
+                {wishlistElements}
+                <CreateWishlist numberOfWishlists={wishlists.length} />
+            </Fragment>
+        );
+    }
+
+    const wishlistMessage = formatMessage(
+        {
+            id: 'wishlist.itemsMessage',
+            defaultMessage: 'You have {count} items in your wishlist.'
+        },
+        { count: wishlists[0].items_count }
+    );
+
+    return (
+        <div className={classes.root} data-cy="Wishlist-root">
+            {/* <div
+                aria-live="polite"
+                className={classes.heading}
+                data-cy="WishlistPage-heading"
+            >
+                <div aria-live="polite" aria-label={wishlistMessage} />
+                <FormattedMessage
+                    values={{ count: wishlists.length }}
+                    id={'wishlistPage.headingText'}
+                    defaultMessage={
+                        '{count, plural, one {Favorites List} other {Favorites Lists}}'
+                    }
+                />
+            </div> */}
+            <StoreTitle>{PAGE_TITLE}</StoreTitle>
+            <div aria-live="polite" className="text-xl font-medium text-left">
+                {PAGE_TITLE}
+            </div>
+            {content}
+        </div>
+    );
+};
+
+export default WishlistPage;

package/src/overwrites/venia-ui/lib/components/WishlistPage/wishlistPage.module.css

@@ -0,0 +1,31 @@
+.root {
+    composes: gap-y-xs from global;
+    composes: grid from global;
+
+    composes: lg_gap-y-md from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: font-serif from global;
+    composes: justify-self-center from global;
+    composes: pb-xs from global;
+
+    composes: lg_pb-0 from global;
+}
+
+.errorContainer {
+    composes: justify-self-center from global;
+}
+
+.fetchError {
+    composes: border-l-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
+    composes: font-semibold from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-2.5 from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+}