@riosst100/pwa-marketplace 2.0.9 → 2.1.0

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

@@ -0,0 +1,7 @@
+/**
+ * Action Menu for wishlist is an AC-only feature.
+ * Here in MOS, don't render the Action Menu at all.
+ */
+export default () => {
+    return null;
+};

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

@@ -0,0 +1,129 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { PlusSquare } from 'react-feather';
+
+import { useCreateWishlist } from '@magento/peregrine/lib/talons/WishlistPage/useCreateWishlist';
+
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import Field from '@magento/venia-ui/lib/components/Field';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { isRequired } from '@magento/venia-ui/lib/util/formValidators';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import TextInput from '@magento/venia-ui/lib/components/TextInput';
+import FormError from '@magento/venia-ui/lib/components/FormError/formError';
+
+import defaultClasses from './createWishlist.module.css';
+
+const CreateWishlist = props => {
+    const { numberOfWishlists } = props;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    const talonProps = useCreateWishlist({ numberOfWishlists });
+    const {
+        handleCreateList,
+        handleHideModal,
+        handleShowModal,
+        isModalOpen,
+        formErrors,
+        loading,
+        shouldRender
+    } = talonProps;
+
+    const { formatMessage } = useIntl();
+
+    const createIcon = (
+        <Icon
+            classes={{
+                icon: classes.icon
+            }}
+            src={PlusSquare}
+        />
+    );
+
+    return shouldRender ? (
+        <div className={classes.root}>
+            <button
+                className={classes.createButton}
+                onClick={handleShowModal}
+                type="button"
+                data-cy="createWishlist-createButton"
+            >
+                <div className={classes.labelContainer}>
+                    {createIcon}
+                    <span>
+                        <FormattedMessage
+                            id={'createWishlist.handleCreateListText'}
+                            defaultMessage={'Create a list'}
+                        />
+                    </span>
+                </div>
+            </button>
+            <Dialog
+                classes={{
+                    body: classes.body,
+                    buttons: classes.buttons,
+                    cancelButton: classes.cancelButton,
+                    confirmButton: classes.confirmButton,
+                    contents: classes.contents
+                }}
+                cancelText={formatMessage({
+                    id: 'global.cancelButton',
+                    defaultMessage: 'Cancel'
+                })}
+                confirmText={formatMessage({
+                    id: 'global.save',
+                    defaultMessage: 'Save'
+                })}
+                formProps={{ initialValues: { visibility: 'PRIVATE' } }}
+                isModal={true}
+                isOpen={isModalOpen}
+                onCancel={handleHideModal}
+                onConfirm={handleCreateList}
+                shouldUnmountOnHide={true}
+                title={formatMessage({
+                    id: 'createWishlist.dialogTitle',
+                    defaultMessage: 'New Favorites List'
+                })}
+                shouldDisableConfirmButton={loading}
+            >
+                <div className={classes.form}>
+                    <FormError errors={Array.from(formErrors.values())} />
+                    <Field
+                        classes={{ root: classes.listName }}
+                        label={formatMessage({
+                            id: 'createWishlist.listName',
+                            defaultMessage: 'List Name'
+                        })}
+                    >
+                        <TextInput
+                            field="name"
+                            validate={isRequired}
+                            validateOnBlur
+                            data-cy="createWishlist-name"
+                        />
+                    </Field>
+                </div>
+            </Dialog>
+        </div>
+    ) : null;
+};
+
+export default CreateWishlist;
+
+CreateWishlist.propTypes = {
+    classes: shape({
+        body: string,
+        buttons: string,
+        createButton: string,
+        icon: string,
+        labelContainer: string,
+        listName: string,
+        radioLabel: string,
+        radioMessage: string,
+        radioRoot: string,
+        root: string
+    })
+};

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

@@ -0,0 +1,3 @@
+const CreateWishlist = () => null;
+
+export default CreateWishlist;

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

@@ -0,0 +1,63 @@
+.root {}
+
+.body {
+    composes: overflow-auto from global;
+}
+
+.buttons {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: justify-center from global;
+    composes: pb-md from global;
+    composes: pt-xs from global;
+    composes: px-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: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: min-w-[9rem] from global;
+}
+
+.contents {
+    composes: h-fitContent from global;
+    composes: p-xs from global;
+}
+
+.createButton {
+    composes: w-full from global;
+}
+
+.form {
+    composes: gap-md from global;
+    composes: grid from global;
+    composes: m-auto from global;
+    composes: px-xs from global;
+    composes: py-2xs from global;
+}
+
+.icon {
+    composes: stroke-brand-base from global;
+}
+
+.labelContainer {
+    composes: border-2 from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: font-semibold from global;
+    composes: gap-x-2xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: h-[6rem] from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: rounded-md from global;
+    composes: text-brand-dark from global;
+}

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

@@ -0,0 +1,14 @@
+import WishlistPage from './wishlistPage'
+import AccountLayout from '@riosst100/pwa-marketplace/src/components/AccountLayout';
+
+import React from 'react';
+
+const index = () => {
+    return (
+        <AccountLayout>
+            <WishlistPage />
+        </AccountLayout>
+    )
+}
+
+export default index;

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

@@ -0,0 +1,193 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { ChevronDown, ChevronUp } from 'react-feather';
+import { useWishlist } from '@magento/peregrine/lib/talons/WishlistPage/useWishlist';
+import { bool, shape, string, int } from 'prop-types';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import WishlistItems from './wishlistItems';
+import Button from '@magento/venia-ui/lib/components/Button';
+import defaultClasses from './wishlist.module.css';
+import ActionMenu from './actionMenu';
+
+/**
+ * A single wishlist container.
+ *
+ * @param {Object} props.data the data for this wishlist
+ * @param {boolean} props.shouldRenderVisibilityToggle whether or not to render the visiblity toggle
+ * @param {boolean} props.isCollapsed whether or not is the wishlist unfolded
+ */
+const Wishlist = props => {
+    const { data, shouldRenderVisibilityToggle, isCollapsed } = props;
+    const { formatMessage } = useIntl();
+    const { id, items_count: itemsCount, name, visibility } = data;
+
+    const talonProps = useWishlist({ id, itemsCount, isCollapsed });
+    const {
+        handleContentToggle,
+        isOpen,
+        items,
+        isLoading,
+        isFetchingMore,
+        handleLoadMore
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const contentClass = isOpen ? classes.content : classes.content_hidden;
+    const contentToggleIconSrc = isOpen ? ChevronUp : ChevronDown;
+    const contentToggleIcon = <Icon src={contentToggleIconSrc} size={24} />;
+
+    const itemsCountMessage =
+        itemsCount && isOpen
+            ? formatMessage(
+                {
+                    id: 'wishlist.itemCountOpen',
+                    defaultMessage:
+                        'Showing {currentCount} of {count} items in this list'
+                },
+                { currentCount: items.length, count: itemsCount }
+            )
+            : formatMessage(
+                {
+                    id: 'wishlist.itemCountClosed',
+                    defaultMessage: `You have {count} {count, plural,
+                        one {item}
+                        other {items}
+                      } in this list`
+                },
+                { count: itemsCount }
+            );
+    const loadMoreButton =
+        items && items.length < itemsCount ? (
+            <div>
+                <Button
+                    className={classes.loadMore}
+                    disabled={isFetchingMore}
+                    onClick={handleLoadMore}
+                >
+                    <FormattedMessage
+                        id={'wishlist.loadMore'}
+                        defaultMessage={'Load more'}
+                    />
+                </Button>
+            </div>
+        ) : null;
+
+    const contentMessageElement = itemsCount ? (
+        <Fragment>
+            <WishlistItems items={items} wishlistId={id} />
+            {loadMoreButton}
+        </Fragment>
+    ) : (
+        <p className={classes.emptyListText}>
+            <FormattedMessage
+                id={'wishlist.emptyListText'}
+                defaultMessage={'There are currently no items in this list'}
+            />
+        </p>
+    );
+
+    const wishlistName = name ? (
+        <div className={classes.nameContainer}>
+            <h2 className={classes.name} data-cy="Wishlist-name" title={name}>
+                {name}
+            </h2>
+        </div>
+    ) : (
+        <div className={classes.nameContainer}>
+            <h2 className={classes.name}>
+                <FormattedMessage
+                    id={'wishlist.name'}
+                    defaultMessage={'Wish List'}
+                />
+            </h2>
+        </div>
+    );
+
+    if (isLoading) {
+        return (
+            <div className={classes.root}>
+                <div className={classes.header}>
+                    {wishlistName} {itemsCountMessage}
+                    <div className={classes.buttonsContainer}>
+                        <ActionMenu
+                            id={id}
+                            name={name}
+                            visibility={visibility}
+                        />
+                    </div>
+                </div>
+                <LoadingIndicator />
+            </div>
+        );
+    }
+
+    const visibilityToggleClass = shouldRenderVisibilityToggle
+        ? classes.visibilityToggle
+        : classes.visibilityToggle_hidden;
+
+    const buttonsContainer = id ? (
+        <div
+            className={classes.buttonsContainer}
+            data-cy="wishlist-buttonsContainer"
+        >
+            <ActionMenu id={id} name={name} visibility={visibility} />
+            <button
+                className={visibilityToggleClass}
+                onClick={handleContentToggle}
+                type="button"
+            >
+                {contentToggleIcon}
+            </button>
+        </div>
+    ) : null;
+
+    return (
+        <div className={classes.root} data-cy="Wishlist-root">
+            <div className={classes.header}>
+                {wishlistName}
+                <div className={classes.itemsCountContainer}>
+                    {itemsCountMessage}
+                </div>
+                {buttonsContainer}
+            </div>
+            <div className={contentClass}>{contentMessageElement}</div>
+        </div>
+    );
+};
+
+Wishlist.propTypes = {
+    classes: shape({
+        root: string,
+        header: string,
+        content: string,
+        content_hidden: string,
+        emptyListText: string,
+        name: string,
+        nameContainer: string,
+        visibilityToggle: string,
+        visibilityToggle_hidden: string,
+        visibility: string,
+        buttonsContainer: string,
+        loadMore: string
+    }),
+    shouldRenderVisibilityToggle: bool,
+    isCollapsed: bool,
+    data: shape({
+        id: int,
+        items_count: int,
+        name: string,
+        visibility: string
+    })
+};
+
+Wishlist.defaultProps = {
+    data: {
+        items_count: 0,
+        items_v2: []
+    }
+};
+
+export default Wishlist;

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

@@ -0,0 +1,78 @@
+.root {
+    composes: gap-y-md from global;
+    composes: grid from global;
+    composes: rounded-md from global;
+}
+
+.header {
+    composes: gap-y-0 from global;
+    composes: flex from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-between from global;
+
+    composes: md_gap-y-2xs from global;
+}
+
+@media (max-width: 799px) {
+    .header {
+        grid-template-rows: 1fr 1fr;
+    }
+}
+
+.nameContainer {
+    composes: gap-x-2xs from global;
+    composes: gap-y-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: items-center from global;
+
+    composes: md_grid-flow-col from global;
+}
+
+.emptyListText {
+    composes: py-md from global;
+    composes: text-center from global;
+}
+
+.name {
+    composes: font-semibold from global;
+    composes: overflow-hidden from global;
+    composes: whitespace-nowrap from global;
+    composes: text-ellipsis from global;
+}
+
+.buttonsContainer {
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+    composes: justify-self-end from global;
+
+    composes: md_justify-self-start from global;
+}
+
+.content_hidden {
+    composes: hidden from global;
+}
+
+.visibilityToggle_hidden {
+    composes: hidden from global;
+}
+
+.loadMore {
+    composes: root_lowPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
+
+    composes: block from global;
+    composes: min-w-[20rem] from global;
+    composes: mx-auto from global;
+    composes: my-md from global;
+}
+
+.itemsCountContainer {
+    composes: col-end-span2 from global;
+    composes: justify-self-center from global;
+
+    composes: md_col-end-auto from global;
+    composes: md_justify-self-start from global;
+}

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