@riosst100/pwa-marketplace 2.0.8 → 2.1.0

package/src/overwrites/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -14,6 +14,7 @@ import defaultClasses from './orderRow.module.css';
 import cn from 'classnames';
 import { Verify } from 'iconsax-react';
 import PlaceholderImage from '@magento/venia-ui/lib/components/Image/placeholderImage';
+import { Link } from 'react-router-dom';
 
 const OrderRow = props => {
     const { order } = props;
@@ -162,20 +163,27 @@ const OrderRow = props => {
                 </div>
             </div>
             <div className='flex flex-row justify-end py-[5px]'>
-                <button
+                {/* <button
                     className={cn(classes.contentToggleContainer, '!p-0 !border-0')}
                     onClick={handleContentToggle}
                     type="button"
                     aria-expanded={isOpen}
                 >
-                    {/* {contentToggleIcon} */}
                     <span className="text-[13px] font-medium text-blue-700 underline">
                         <FormattedMessage
                             id={'orderRow.ViewTransactionDetail'}
                             defaultMessage={'View Transaction Detail'}
                         />
                     </span>
-                </button>
+                </button> */}
+                <Link to="/order-history/view/123213">
+                    <span className="text-[13px] font-medium text-blue-700 underline">
+                        <FormattedMessage
+                            id={'orderRow.ViewTransactionDetail'}
+                            defaultMessage={'View Transaction Detail'}
+                        />
+                    </span>
+                </Link>
             </div>
 
             {/* <div className={classes.orderDateContainer}>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.js

@@ -36,6 +36,7 @@ import CrossSeller from '@riosst100/pwa-marketplace/src/components/CrossSeller';
 import RelatedProduct from '@riosst100/pwa-marketplace/src/components/RelatedProduct';
 import ProductLabel from '@riosst100/pwa-marketplace/src/components/ProductLabel';
 import RFQ from '@riosst100/pwa-marketplace/src/components/RFQ';
+import Collapsible from '@riosst100/pwa-marketplace/src/components/commons/Collapsible';
 
 // Correlate a GQL error message to a field. GQL could return a longer error
 // string but it may contain contextual info such as product id. We can use
@@ -51,6 +52,25 @@ const ERROR_FIELD_TO_MESSAGE_MAPPING = {
     quantity: 'The requested quantity is not available.'
 };
 
+const ProductDetailsCollapsible = (props) => {
+    const { data } = props;
+
+    return (
+        <>
+            {data.map((_data) => (
+                <Collapsible
+                    title={_data.title}
+                    contentWrapperClassName="!mt-0"
+                    rootClassName="first-of-type_!border-0 last-of-type_border-b last-of-type_border-gray-100"
+                    className="last-of-type_border-b last-of-type_border-gray-100"
+                >
+                    {_data.content}
+                </Collapsible>
+            ))}
+        </>
+    )
+}
+
 const ProductFullDetail = props => {
     const { product } = props;
 
@@ -283,7 +303,7 @@ const ProductFullDetail = props => {
 
     const tokopedia_logo = './tokopedia_logo.png';
 
-    const contentContainerClass = 'content-container max-w-[1040px] p-2.5 m-auto relative mt-[34px]'
+    const contentContainerClass = 'content-container max-w-[1040px] p-2.5 m-auto relative mt-0 lg_mt-[34px] pb-6 lg_pb-0'
     const ProductDescription = () => (
         <div className={cn(contentContainerClass)}>
             {/* <span
@@ -428,7 +448,7 @@ const ProductFullDetail = props => {
                 <section className={cn(classes.leftContainer, 'relative')}>
                     <ProductLabel item={productDetails} />
                     <Carousel images={mediaGalleryEntries} />
-                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center mt-5'>
+                    <div className='product_group-actions flex gap-x-[18px] gap-y-4 justify-center items-center mt-2 lg_mt-5 mb-6 lg_mb-0'>
                         <Suspense fallback={null}>
                             <WishlistButton
                                 classes={{
@@ -660,6 +680,17 @@ const ProductFullDetail = props => {
                 </section>
             </Form>
             <section className='section_product-details-container mt-8 mb-10'>
+                <div className='hidden lg_block'>
+                    <Tabs
+                        data={dataTabs}
+                        tabContentWrapperClassName='!p-0'
+                        hasContent
+                        tabWrapperClassName='xl_gap-x-[60px] justify-center'
+                    />
+                </div>
+                <div className='block lg_hidden'>
+                    <ProductDetailsCollapsible data={dataTabs} />
+                </div>
                 <Tabs
                     data={dataTabs}
                     tabContentWrapperClassName='!p-0'
@@ -673,7 +704,7 @@ const ProductFullDetail = props => {
             </section>
 
             <section className='w-[calc(100vw-9px)] relative left-1/2 right-1/2 ml-[-50vw] mr-[-50vw] bg-gray-50 py-[30px] px-0 mb-10'>
-                <div className='max-w-[1200px] px-2.5 mx-auto relative'>
+                <div className='lg_max-w-[1200px] px-2.5 mx-auto relative max-w-screen-md'>
                     <CrossSeller />
                 </div>
             </section>

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/productFullDetail.module.css

@@ -196,4 +196,13 @@
 
 .actButton {
     composes: mt-sm from global;
+}
+
+@media only screen and (max-width: 767px) {
+    .actButton {
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        row-gap: 16px;
+    }
 }

package/src/overwrites/venia-ui/lib/components/ProductImageCarousel/carousel.module.css

@@ -18,7 +18,7 @@
 
 .carouselContainer {
     composes: flex from global;
-    composes: max-h-[495px] from global;
+    composes: max-h-[660px] from global;
 }
 
 .imageContainer {

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import Icon from '../Icon';
+import { MoreHorizontal } from 'react-feather';
+import { useActionMenu } from '@magento/peregrine/lib/talons/WishlistPage/useActionMenu';
+import WishlistListActionsDialog from './wishlistListActionsDialog';
+import WishlistEditFavoritesListDialog from './wishlistEditFavoritesListDialog';
+
+const ActionMenu = props => {
+    const { id, name, visibility } = props;
+    const talonProps = useActionMenu({ id });
+    const {
+        editFavoritesListIsOpen,
+        formErrors,
+        handleActionMenuClick,
+        handleEditWishlist,
+        handleHideDialogs,
+        handleShowEditFavorites,
+        isEditInProgress,
+        listActionsIsOpen,
+        shouldRender
+    } = talonProps;
+
+    if (!shouldRender) {
+        return null;
+    }
+
+    return (
+        <div>
+            <button onClick={handleActionMenuClick} type="button">
+                <Icon src={MoreHorizontal} size={24} />
+            </button>
+            <WishlistListActionsDialog
+                isOpen={listActionsIsOpen}
+                onCancel={handleHideDialogs}
+                onEdit={handleShowEditFavorites}
+            />
+            <WishlistEditFavoritesListDialog
+                formErrors={formErrors}
+                formProps={{
+                    initialValues: {
+                        name: name,
+                        visibility: visibility
+                    }
+                }}
+                isOpen={editFavoritesListIsOpen}
+                isEditInProgress={isEditInProgress}
+                onCancel={handleHideDialogs}
+                onConfirm={handleEditWishlist}
+            />
+        </div>
+    );
+};
+
+export default ActionMenu;

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