@riosst100/pwa-marketplace 2.0.8 → 2.1.0

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

@@ -0,0 +1,84 @@
+import React from 'react';
+import { bool, func, shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import defaultClasses from './wishlistConfirmRemoveProductDialog.module.css';
+
+const WishlistConfirmRemoveProductDialog = props => {
+    const {
+        hasError,
+        isOpen,
+        isRemovalInProgress,
+        onCancel,
+        onConfirm
+    } = props;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const dialogTitle = formatMessage({
+        id: 'wishlistConfirmRemoveProductDialog.title',
+        defaultMessage: 'Remove Product from Wishlist'
+    });
+    const dialogClasses = {
+        confirmButton: classes.confirmButton
+    };
+    const maybeError = hasError ? (
+        <p className={classes.errorMessage}>
+            <FormattedMessage
+                id={'wishlistConfirmRemoveProductDialog.errorMessage'}
+                defaultMessage={
+                    'There was an error deleting this product. Please try again later.'
+                }
+            />
+        </p>
+    ) : null;
+
+    return (
+        <Dialog
+            classes={dialogClasses}
+            confirmTranslationId={
+                'wishlistConfirmRemoveProductDialog.confirmButton'
+            }
+            isModal={true}
+            isOpen={isOpen}
+            onCancel={onCancel}
+            onConfirm={onConfirm}
+            shouldDisableAllButtons={isRemovalInProgress}
+            title={dialogTitle}
+        >
+            <div className={classes.root}>
+                {maybeError}
+                <span className={classes.prompt}>
+                    <FormattedMessage
+                        id={
+                            'wishlistConfirmRemoveProductDialog.confirmationPrompt'
+                        }
+                        defaultMessage={
+                            'Are you sure you want to delete this product from the list?'
+                        }
+                    />
+                </span>
+            </div>
+        </Dialog>
+    );
+};
+
+export default WishlistConfirmRemoveProductDialog;
+
+WishlistConfirmRemoveProductDialog.propTypes = {
+    classes: shape({
+        confirmButton: string,
+        errorMessage: string,
+        prompt: string,
+        root: string
+    }),
+    hasError: bool,
+    isOpen: bool,
+    isRemovalInProgress: bool,
+    onCancel: func,
+    onConfirm: func
+};

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

@@ -0,0 +1,20 @@
+.root {
+    composes: p-xs from global;
+}
+
+.confirmButton {
+    composes: confirmButton from '@magento/venia-ui/lib/components/Dialog/dialog.module.css';
+    composes: root_highPriorityNegative from '@magento/venia-ui/lib/components/Button/button.module.css';
+}
+
+.errorMessage {
+    composes: font-semibold from global;
+    composes: leading-normal from global;
+    composes: pb-xs from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+}
+
+.prompt {
+    composes: font-semibold from global;
+}

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { array, bool, func, object, shape, string } from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import defaultClasses from './wishlistEditFavoritesListDialog.module.css';
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import Field from '@magento/venia-ui/lib/components/Field';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+
+const WishlistEditFavoritesListDialog = props => {
+    const {
+        formErrors,
+        formProps,
+        isOpen,
+        isEditInProgress,
+        onCancel,
+        onConfirm
+    } = props;
+
+    const { formatMessage } = useIntl();
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const dialogTitle = formatMessage({
+        id: 'wishlistEditFavoritesListDialog.title',
+        defaultMessage: 'Edit Favorites List'
+    });
+
+    const dialogClasses = {
+        cancelButton: classes.cancelButton,
+        confirmButton: classes.confirmButton
+    };
+
+    const listName = formatMessage({
+        id: 'createWishlist.listName',
+        defaultMessage: 'List Name'
+    });
+
+    return (
+        <Dialog
+            classes={dialogClasses}
+            confirmTranslationId={'global.save'}
+            confirmText={'Save'}
+            cancelTranslationId={'global.cancelButton'}
+            cancelText={'Cancel'}
+            formProps={formProps}
+            isModal={true}
+            isOpen={isOpen}
+            onCancel={onCancel}
+            onConfirm={onConfirm}
+            shouldDisableAllButtons={isEditInProgress}
+            title={dialogTitle}
+        >
+            <div className={classes.root}>
+                <FormError
+                    classes={{ root: classes.errorMessage }}
+                    errors={formErrors}
+                />
+                <div className={classes.form}>
+                    <Field
+                        classes={{ root: classes.listName }}
+                        label={listName}
+                    >
+                        <TextInput
+                            field="name"
+                            validate={isRequired}
+                            validateOnBlur
+                        />
+                    </Field>
+                </div>
+            </div>
+        </Dialog>
+    );
+};
+
+export default WishlistEditFavoritesListDialog;
+
+WishlistEditFavoritesListDialog.propTypes = {
+    classes: shape({
+        cancelButton: string,
+        confirmButton: string,
+        errorMessage: string,
+        form: string,
+
+        root: string
+    }),
+    formErrors: array,
+    formProps: object,
+    isOpen: bool,
+    isEditInProgress: bool,
+    onCancel: func,
+    onConfirm: func
+};

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;
+}