@riosst100/pwa-marketplace 2.0.8 → 2.1.0

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