@riosst100/pwa-marketplace 1.8.8 → 1.9.0

package/src/overwrites/venia-ui/lib/components/Dialog/dialog.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { bool, func, shape, string, object, node } from 'prop-types';
+import { Form } from 'informed';
+import { X as CloseIcon } from 'react-feather';
+
+import { useScrollLock } from '@magento/peregrine';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import Button from '@magento/venia-ui/lib/components/Button';
+import Icon from '@magento/venia-ui/lib/components/Icon';
+import { Portal } from '@magento/venia-ui/lib/components/Portal';
+import defaultClasses from './dialog.module.css';
+
+/**
+ * The Dialog component shows its children content in a dialog,
+ * encoding the look-and-feel and behavior in one place for consistency across the app.
+ *
+ * @typedef Dialog
+ * @kind functional component
+ *
+ * @param {Object}  props
+ * @param {Object}  props.classes - A set of class overrides to apply to elements.
+ * @param {String}  props.cancelText - The text to display on the Dialog cancel button.
+ * @param {String}  props.cancelTranslationId - The id to assign for the cancel button translation.
+ * @param {String}  props.confirmText - The text to display on the Dialog confirm button.
+ * @param {String}  props.confirmTranslationId - The id to assign for the confirm button translation.
+ * @param {Object}  props.formProps - Props to apply to the internal form. @see https://joepuzzo.github.io/informed/?path=/story/form--props.
+ * @param {Boolean} props.isModal - Determines behavior of clicking on the mask. False cancels Dialog.
+ * @param {Boolean} props.isOpen - Whether the Dialog is currently showing.
+ * @param {Func}    props.onCancel - A function to call when the user cancels the Dialog.
+ * @param {Func}    props.onConfirm - A function to call when the user confirms the Dialog.
+ * @param {Boolean} props.shouldDisableAllButtons - A toggle for whether the buttons should be disabled.
+ * @param {Boolean} props.shouldDisableConfirmButton - A toggle for whether the confirm button should be disabled.
+ *                                                     The final value is OR'ed with shouldDisableAllButtons.
+ * @param {Boolean} props.shouldShowButtons - A toggle for whether the cancel and confirm buttons are visible.
+ * @param {Boolean} props.shouldUnmountOnHide - A boolean to unmount child components on hide
+ * @param {String}  props.title - The title of the Dialog.
+ */
+const Dialog = props => {
+    const {
+        cancelText,
+        cancelTranslationId,
+        children,
+        confirmText,
+        confirmTranslationId,
+        formProps,
+        isModal,
+        isOpen,
+        onCancel,
+        onConfirm,
+        shouldDisableAllButtons,
+        shouldDisableConfirmButton,
+        shouldShowButtons = true,
+        shouldUnmountOnHide,
+        title
+    } = props;
+
+    // Prevent the page from scrolling in the background
+    // when the Dialog is open.
+    useScrollLock(isOpen);
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const rootClass = isOpen ? classes.root_open : classes.root;
+    const isMaskDisabled = shouldDisableAllButtons || isModal;
+    const confirmButtonDisabled =
+        shouldDisableAllButtons || shouldDisableConfirmButton;
+
+    const cancelButtonClasses = {
+        root_lowPriority: classes.cancelButton
+    };
+    const confirmButtonClasses = {
+        root_highPriority: classes.confirmButton
+    };
+
+    const maybeCloseXButton = !isModal ? (
+        <button
+            className={classes.headerButton}
+            disabled={shouldDisableAllButtons}
+            onClick={onCancel}
+            type="reset"
+        >
+            <Icon src={CloseIcon} />
+        </button>
+    ) : null;
+
+    const maybeButtons = shouldShowButtons ? (
+        <div className={classes.buttons}>
+            <Button
+                data-cy="Dialog-cancelButton"
+                classes={cancelButtonClasses}
+                disabled={shouldDisableAllButtons}
+                onClick={onCancel}
+                priority="low"
+                type="reset"
+            >
+                <FormattedMessage
+                    id={cancelTranslationId}
+                    defaultMessage={cancelText}
+                />
+            </Button>
+            <Button
+                data-cy="Dialog-confirmButton"
+                classes={confirmButtonClasses}
+                disabled={confirmButtonDisabled}
+                priority="high"
+                type="submit"
+            >
+                <FormattedMessage
+                    id={confirmTranslationId}
+                    defaultMessage={confirmText}
+                />
+            </Button>
+        </div>
+    ) : null;
+
+    const maybeForm =
+        isOpen || !shouldUnmountOnHide ? (
+            <Form
+                className={classes.form}
+                {...formProps}
+                onSubmit={onConfirm}
+                data-cy="Dialog-form"
+            >
+                {/* The Mask. */}
+                <button
+                    className={classes.mask}
+                    disabled={isMaskDisabled}
+                    onClick={onCancel}
+                    type="reset"
+                />
+                {/* The Dialog. */}
+                <div className={classes.dialog} data-cy={title}>
+                    <div className={classes.header}>
+                        <span
+                            className={classes.headerText}
+                            data-cy="Dialog-headerText"
+                        >
+                            {title}
+                        </span>
+                        {maybeCloseXButton}
+                    </div>
+                    <div className={classes.body}>
+                        <div className={classes.contents}>{children}</div>
+                        {maybeButtons}
+                    </div>
+                </div>
+            </Form>
+        ) : null;
+
+    return (
+        <Portal>
+            <aside className={rootClass} data-cy="Dialog-root">
+                {maybeForm}
+            </aside>
+        </Portal>
+    );
+};
+
+export default Dialog;
+
+Dialog.propTypes = {
+    cancelText: string,
+    cancelTranslationId: string,
+    classes: shape({
+        body: string,
+        cancelButton: string,
+        confirmButton: string,
+        container: string,
+        contents: string,
+        header: string,
+        headerText: string,
+        headerButton: string,
+        mask: string,
+        root: string,
+        root_open: string
+    }),
+    confirmText: string,
+    confirmTranslationId: string,
+    formProps: object,
+    isModal: bool,
+    isOpen: bool,
+    onCancel: func,
+    onConfirm: func,
+    shouldDisableAllButtons: bool,
+    shouldDisableSubmitButton: bool,
+    shouldUnmountOnHide: bool,
+    title: node
+};
+
+Dialog.defaultProps = {
+    cancelText: 'Cancel',
+    cancelTranslationId: 'global.cancelButton',
+    confirmText: 'Confirm',
+    confirmTranslationId: 'global.confirmButton',
+    isModal: false,
+    shouldUnmountOnHide: true
+};

package/src/overwrites/venia-ui/lib/components/Dialog/dialog.module.css

@@ -0,0 +1,189 @@
+/* The root aside element takes up the whole screen. */
+/* It is hidden by default. */
+/* It animates to being closed, and then moves off screen. */
+/* It sits over all background content. */
+.root {
+    composes: fixed from global;
+    composes: h-full from global;
+    composes: left-[-100vw] from global;
+    composes: opacity-0 from global;
+    composes: right-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+    composes: z-dialog from global;
+    transform: translate3d(-50%, 0, 0);
+    transition: opacity 192ms var(--venia-global-anim-out),
+        visibility 192ms var(--venia-global-anim-out), left 0s 192ms;
+
+    /* TODO @TW: review (B6) */
+    /* composes: invisible from global; */
+    visibility: hidden;
+
+    composes: lg_right-auto from global;
+}
+
+.root_open {
+    composes: root;
+
+    composes: left-auto from global;
+    composes: opacity-100 from global;
+
+    composes: lg_left-1/2 from global;
+    composes: rounded-md from global;
+
+    /* TODO @TW: review (B6) */
+    /* composes: visible from global; */
+    visibility: visible;
+
+    /* It animates to being open. */
+    transition: opacity 224ms var(--venia-global-anim-in),
+        visibility 224ms var(--venia-global-anim-in), left 0s;
+}
+
+/* The form fills the entire aside. */
+/* Its contents are centered horizontally and vertically. */
+.form {
+    composes: content-stretch from global;
+    composes: grid from global;
+    composes: h-full from global;
+    composes: justify-end from global;
+    composes: w-full from global;
+
+    composes: lg_content-center from global;
+    composes: lg_justify-center from global;
+}
+
+.mask {
+    /* The mask takes up the entire screen. */
+    composes: absolute from global;
+    composes: h-full from global;
+    composes: left-0 from global;
+    composes: top-0 from global;
+    composes: w-full from global;
+
+    /* The mask is a semi-transparent grey. */
+    composes: bg-gray-600 from global;
+    composes: opacity-50 from global;
+}
+
+/* The dialog is the only item in the form grid. */
+/* Nothing is allowed to overflow container itself. */
+/* Container is itself a grid container for its children. */
+/* Container can be the target of pointer events. */
+/* It sits on top of the mask. */
+.dialog {
+    /* It sets maximum sizes so its body can handle overflow. */
+    composes: h-full from global;
+    composes: max-h-full from global;
+    /* Minimum keeps a 16:9 aspect ratio and is 40rem x 22.5rem.  */
+    composes: min-h-[360px] from global;
+    composes: w-[640px] from global;
+
+    composes: bg-white from global;
+    composes: grid from global;
+    composes: grid-rows-autoFirst from global;
+    composes: max-w-modal from global;
+    composes: overflow-hidden from global;
+    composes: pointer-events-auto from global;
+    composes: rounded-md from global;
+    composes: shadow-dialog from global;
+    composes: z-dialog from global;
+
+    composes: lg_max-h-modal from global;
+    composes: lg_max-w-full from global;
+}
+
+/*
+ *  Dialog Header styles.
+ */
+
+.header {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: h-[3.5rem] from global;
+    composes: pl-4 from global;
+    composes: pr-3 from global;
+    composes: py-0 from global;
+
+    /* The Header is itself a grid container for its children. */
+    composes: gap-x-xs from global;
+    composes: grid from global;
+    composes: grid-cols-autoLast from global;
+    composes: grid-flow-col from global;
+    composes: items-center from global;
+}
+
+.headerText {
+    composes: capitalize from global;
+    composes: leading-tight from global;
+    composes: overflow-ellipsis from global;
+    composes: overflow-hidden from global;
+    composes: text-subtle from global;
+    composes: whitespace-nowrap from global;
+}
+
+.headerButton {
+    /* Horizontally align the close button to the right. */
+    composes: justify-self-end from global;
+}
+
+/*
+ *  Dialog Body styles.
+ */
+
+.body {
+    composes: overflow-auto from global;
+
+    /* The Body is itself a grid container for its children. */
+    composes: grid from global;
+    composes: grid-rows-autoLast from global;
+}
+
+.contents {
+    composes: p-xs from global;
+}
+
+.buttons {
+    composes: gap-xs from global;
+    composes: grid from global;
+    composes: grid-flow-row from global;
+    composes: justify-center from global;
+    composes: p-md from global;
+
+    composes: lg_grid-flow-col from global;
+}
+
+.confirmButton {
+    composes: root_highPriority from '../Button/button.module.css';
+
+    /* On mobile the confirm button should be first (on top). */
+    composes: order-first from global;
+
+    composes: lg_order-unset from global;
+}
+
+.cancelButton {
+    composes: root_lowPriority from '../Button/button.module.css';
+}
+
+/*
+ * Mobile-specific styles.
+ *
+ * Instead of being a full-page modal,
+ * dialogs slide out from the right.
+ */
+
+@media (max-width: 959px) {
+    .root {
+        /* The Dialog starts off-screen on the right. */
+        transform: translate3d(100%, 0, 0);
+        /* For mobile, add position to the transitions. */
+        transition-property: opacity, transform, visibility;
+    }
+
+    .root_open {
+        /* The Dialog animates (slides) onto the screen. */
+        transform: translate3d(0, 0, 0);
+    }
+}

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

@@ -0,0 +1 @@
+export { default } from './dialog';

package/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js

@@ -63,13 +63,13 @@ const FilterSidebar = props => {
             //     filterElement &&
             //     typeof filterElement.getBoundingClientRect === 'function'
             // ) {
-                // const filterTop = filterElement.getBoundingClientRect().top;
-                // const windowScrollY =
-                //     window.scrollY + filterTop - SCROLL_OFFSET;
-                // window.scrollTo(0, windowScrollY);
+            // const filterTop = filterElement.getBoundingClientRect().top;
+            // const windowScrollY =
+            //     window.scrollY + filterTop - SCROLL_OFFSET;
+            // window.scrollTo(0, windowScrollY);
             // }
 
-            history.push('/'+args[1].path+'.html');
+            history.push('/' + args[1].path + '.html');
 
             if (args[0] != "category_uid") {
                 handleApply(...args);
@@ -80,7 +80,7 @@ const FilterSidebar = props => {
 
     const allowedFiltersArr = [];
 
-    // allowedFilters && allowedFilters.length && allowedFilters.map((val, index) => {
+    // allowedFilters?.length && allowedFilters.map((val, index) => {
     //     allowedFiltersArr.push(val.code);
     // });
 
@@ -93,8 +93,9 @@ const FilterSidebar = props => {
 
                 const hideFilters = ['trains','trains_locomotives','trains_supplies_type','lof_preorder','auction','special_price','sc_baseball_inserts','sc_baseball_parallel','sale','sc_set_type','sc_brands'];
                 if (!hideFilters.includes(group) && groupName) {
-                // if (!allowedFilters && !allowedFiltersArr.length && group != "category_uid" || allowedFilters && allowedFiltersArr.length && allowedFiltersArr.includes(group)) {
                     
+                // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
+
 
                     return (
                         <FilterBlock

package/src/overwrites/venia-ui/lib/components/Gallery/item.js

@@ -138,10 +138,18 @@ const GalleryItem = props => {
                         <span>{name}</span>
                     </Link>
                     <div data-cy="GalleryItem-price" className={cn(classes.price, 'mb-2.5 pt-2.5')}>
-                        <Price
-                            value={priceSource.value}
-                            currencyCode={priceSource.currency}
-                        />
+                        <p className='font-semibold text-colorDefault !mb-1 !leading-[14px]'>
+                            <Price
+                                value={priceSource.value}
+                                currencyCode={priceSource.currency}
+                            />
+                        </p>
+                        <p className='old-price text-gray-400 text-xs line-through font-normal !mb-0'>
+                            <Price
+                                value={priceSource.value}
+                                currencyCode={priceSource.currency}
+                            />
+                        </p>
                     </div>
 
                     <div data-cy="GalleryItem-Rating" className={cn('flex gap-[5px] items-center mb-2')}>

package/src/overwrites/venia-ui/lib/components/Gallery/item.module.css

@@ -19,7 +19,7 @@
 .image {
     composes: block from global;
     composes: h-full from global;
-    composes: object-cover from global;
+    composes: object-contain from global;
     composes: w-full from global;
     transition: opacity 512ms ease-out;
 }
@@ -74,7 +74,7 @@
 .name {
     composes: font-medium from global;
     composes: text-base from global;
-    composes: mb-[18px] from global;
+    composes: mb-1 from global;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

package/src/overwrites/venia-ui/lib/components/Header/header.js

@@ -25,6 +25,9 @@ import cn from 'classnames';
 // const SearchBar = React.lazy(() => import('@magento/venia-ui/lib/components/SearchBar'));
 const SearchBar = React.lazy(() => import('@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/SearchBar'));
 
+import { useLogo } from '@riosst100/pwa-marketplace/src/talons/Header/useLogo';
+import Image from '@magento/venia-ui/lib/components/Image';
+
 const Header = props => {
     const {
         handleSearchTriggerClick,
@@ -35,6 +38,15 @@ const Header = props => {
         searchTriggerRef
     } = useHeader();
 
+    const talonPropsLogo = useLogo();
+    const { data } = talonPropsLogo
+    const baseUrl = data?.storeConfig?.base_media_url;
+    const imageSource = data?.storeConfig?.header_logo_src;
+    const LogoImageSource = `${baseUrl}/logo/${imageSource}`;
+    const IMAGE_HEIGHT = data?.storeConfig?.logo_width || 33;
+    const IMAGE_WIDTH = data?.storeConfig?.logo_height || 170;
+    const IMAGE_ALT = data?.storeConfig?.logo_alt || 'TCG Collective';
+
     const classes = useStyle(defaultClasses, props.classes);
     const rootClass = isSearchOpen ? classes.open : classes.closed;
 
@@ -75,14 +87,30 @@ const Header = props => {
                     <div className={cn('w-full max-w-[1210px] px-[15px] py-[20px] mx-[auto] flex justify-between items-center')}>
                         <div className='flex'>
                             <NavTrigger />
+
                             <Link
                                 aria-label={title}
                                 to={resourceUrl('/')}
                                 className={''}
                                 data-cy="Header-logoContainer"
                             >
-                                <div className='text-[14px]'><b>TCG Collective</b></div>
-                                <small>Bringing Collectors Together</small>
+                                {imageSource ? (
+                                    <Image
+                                        alt={IMAGE_ALT}
+                                        height={IMAGE_HEIGHT}
+                                        src={LogoImageSource}
+                                        width={IMAGE_WIDTH}
+                                        classes={{
+                                            container: 'logo-wrapper relative'
+                                        }}
+                                    />
+                                ) : (
+                                    <>
+                                        <div className='text-[14px]'><b>TCG Collective</b></div>
+                                        <small>Bringing Collectors Together</small>
+                                    </>
+                                )}
+
                             </Link>
                         </div>
                         <div className='flex flex-auto max-w-[700px]'>
@@ -113,6 +141,13 @@ const Header = props => {
                 hasBeenOffline={hasBeenOffline}
                 isOnline={isOnline}
             />
+            <style jsx>
+                {`
+                    .logo-wrapper>img:first-child {
+                        height: ${IMAGE_HEIGHT}px;
+                    }
+                `}
+            </style>
         </Fragment>
     );
 };

package/src/overwrites/venia-ui/lib/components/Main/main.js

@@ -20,7 +20,7 @@ const Main = props => {
     return (
         <main className={rootClass}>
             <Header />
-            <div className={cn(pageClass, 'main-content-container pb-16')}>{children}</div>
+            <div className={cn(pageClass, 'main-content-container pb-16 !min-h-[50vh]')}>{children}</div>
             <Footer />
         </main>
     );

package/src/overwrites/venia-ui/lib/components/MegaMenu/shopByColumn.js

@@ -7,6 +7,7 @@ import { useStyle } from '@magento/venia-ui/lib/classify';
 import defaultClasses from './submenuColumn.module.css';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
+import cn from 'classnames';
 
 const ShopByColumn = props => {
     const classes = useStyle(defaultClasses, props.classes);
@@ -46,11 +47,11 @@ const ShopByColumn = props => {
                     : {};
 
             const categoryUrl = resourceUrl(
-                `/${url_path}${categoryUrlSuffix || ''}?${shopBy.code}[filter]=${name},${option_id}`
+                `/${url_path}${categoryUrlSuffix || ''}?shopby=${shopByItem.option_id}`
             );
 
             return (
-                <li key={index} className={classes.submenuChildItem}>
+                <li key={index} className={cn(classes.submenuChildItem, 'mt-4')}>
                     <Link
                         {...keyboardProps}
                         // className={isActive ? classes.linkActive : classes.link}

package/src/overwrites/venia-ui/lib/components/MegaMenu/submenu.js

@@ -105,8 +105,8 @@ const Submenu = props => {
                     )}
                 >
                     {subMenus}
+                    {shopBy}
                 </div>
-                {shopBy}
             </div>
         </div>
     );

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

@@ -0,0 +1 @@
+export { default } from './resetPassword';

package/src/overwrites/venia-ui/lib/components/MyAccount/ResetPassword/resetPassword.gql.js

@@ -0,0 +1,22 @@
+import gql from 'graphql-tag';
+
+export const RESET_PASSWORD_MUTATION = gql`
+    mutation resetPassword(
+        $email: String!
+        $token: String!
+        $newPassword: String!
+    ) {
+        resetPassword(
+            email: $email
+            resetPasswordToken: $token
+            newPassword: $newPassword
+        )
+    }
+`;
+
+export default {
+    queries: {},
+    mutations: {
+        resetPasswordMutation: RESET_PASSWORD_MUTATION
+    }
+};