@riosst100/pwa-marketplace 3.1.2 → 3.1.4

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/productForm.js

@@ -0,0 +1,153 @@
+import React, { Fragment } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { useProductForm } from '@magento/peregrine/lib/talons/CartPage/ProductListing/EditModal/useProductForm';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import FormError from '@magento/venia-ui/lib/components/FormError';
+import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
+import Options from '@magento/venia-ui/lib/components/ProductOptions';
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+import defaultClasses from './productForm.module.css';
+import Dialog from '@magento/venia-ui/lib/components/Dialog';
+import ProductDetail from './productDetail';
+
+const ProductForm = props => {
+    const {
+        item: cartItem,
+        setIsCartUpdating,
+        variantPrice,
+        setVariantPrice,
+        setActiveEditItem
+    } = props;
+    const { formatMessage } = useIntl();
+    const talonProps = useProductForm({
+        cartItem,
+        setIsCartUpdating,
+        setVariantPrice,
+        setActiveEditItem
+    });
+    const {
+        configItem,
+        errors,
+        handleOptionSelection,
+        handleSubmit,
+        outOfStockVariants,
+        isLoading,
+        isSaving,
+        isDialogOpen,
+        handleClose,
+        configurableThumbnailSource
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+    const dialogButtonsDisabled = isLoading;
+    const dialogSubmitButtonDisabled = isSaving;
+    const dialogFormProps = {
+        initialValues: cartItem
+    };
+
+    const message = isLoading
+        ? formatMessage({
+            id: 'productForm.fetchingProductOptions',
+            defaultMessage: 'Fetching Product Options...'
+        })
+            ? isSaving
+            : formatMessage({
+                id: 'productForm.updatingCart',
+                defaultMessage: 'Updating Cart...'
+            })
+        : null;
+
+    const maybeLoadingIndicator =
+        isLoading || isSaving ? (
+            <LoadingIndicator
+                classes={{
+                    root: classes.loading
+                }}
+            >
+                {message}
+            </LoadingIndicator>
+        ) : null;
+
+    if (cartItem && !isLoading && !configItem) {
+        return (
+            <span className={classes.dataError}>
+                <FormattedMessage
+                    id={'productForm.dataError'}
+                    defaultMessage={
+                        'Something went wrong. Please refresh and try again.'
+                    }
+                />
+            </span>
+        );
+    }
+
+    const dialogContent =
+        cartItem && configItem ? (
+            <div>
+                <FormError
+                    classes={{
+                        root: classes.errorContainer
+                    }}
+                    errors={Array.from(errors.values())}
+                    scrollOnError={false}
+                    allowErrorMessages={true}
+                />
+                <ProductDetail
+                    item={cartItem}
+                    variantPrice={variantPrice}
+                    configurableThumbnailSource={configurableThumbnailSource}
+                />
+                <Options
+                    classes={{
+                        root: classes.optionRoot
+                    }}
+                    onSelectionChange={handleOptionSelection}
+                    options={configItem.configurable_options}
+                    selectedValues={cartItem.configurable_options}
+                    outOfStockVariants={outOfStockVariants}
+                />
+                <h3 className={classes.quantityLabel}>
+                    <FormattedMessage
+                        id={'productForm.quantity'}
+                        defaultMessage={'Quantity'}
+                    />
+                </h3>
+                <QuantityStepper
+                    classes={{
+                        root: classes.quantityRoot
+                    }}
+                    initialValue={cartItem.quantity}
+                    itemId={cartItem.id}
+                />
+            </div>
+        ) : null;
+
+    return (
+        <Fragment>
+            <Dialog
+                classes={{
+                    contents: classes.contents
+                }}
+                confirmText={'Update'}
+                confirmTranslationId={'productForm.submit'}
+                formProps={dialogFormProps}
+                isOpen={isDialogOpen}
+                onCancel={handleClose}
+                onConfirm={handleSubmit}
+                shouldDisableAllButtons={dialogButtonsDisabled}
+                shouldDisableConfirmButton={dialogSubmitButtonDisabled}
+                shouldUnmountOnHide={false}
+                title={formatMessage({
+                    id: 'editModal.headerText',
+                    defaultMessage: 'Edit Item'
+                })}
+            >
+                {maybeLoadingIndicator}
+                {dialogContent}
+            </Dialog>
+        </Fragment>
+    );
+};
+
+export default ProductForm;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/EditModal/productForm.module.css

@@ -0,0 +1,52 @@
+.contents {
+    composes: contents from '@magento/venia-ui/lib/components/Dialog/dialog.module.css';
+
+    composes: relative from global;
+}
+
+.optionRoot {
+    composes: border-b from global;
+    composes: border-solid from global;
+    composes: border-subtle from global;
+    composes: px-0 from global;
+    composes: py-xs from global;
+}
+
+.quantityLabel {
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-sm from global;
+    composes: pt-xs from global;
+    composes: text-colorDefault from global;
+}
+
+.quantityRoot {
+    composes: root from '@magento/venia-ui/lib/components/QuantityStepper/quantityStepper.module.css';
+    grid-template-columns: auto 4rem auto;
+    composes: justify-start from global;
+    composes: px-xs from global;
+    composes: py-0 from global;
+}
+
+.loading {
+    composes: root from '@magento/venia-ui/lib/components/LoadingIndicator/indicator.module.css';
+
+    composes: absolute from global;
+    composes: h-unset from global;
+    composes: left-0 from global;
+    composes: text-center from global;
+    composes: top-2/4 from global;
+    composes: z-mask from global;
+    transform: translateY(-50%);
+}
+
+.dataError {
+    composes: inline-block from global;
+    composes: leading-normal from global;
+    composes: pt-xs from global;
+    composes: text-error from global;
+}
+
+.errorContainer {
+    composes: pt-xs from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/errorMessage.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { shape, string } from 'prop-types';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import defaultClasses from './errorMessage.module.css';
+
+const ErrorMessage = props => {
+    const { error } = props;
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!error || !error.message) {
+        return null;
+    }
+
+    return <div className={classes.root}>{error.message}</div>;
+};
+
+ErrorMessage.defaultProps = {
+    classes: null,
+    error: null
+};
+
+ErrorMessage.propTypes = {
+    classes: shape({
+        root: string
+    }),
+    error: shape({
+        message: string
+    })
+};
+
+export default ErrorMessage;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/errorMessage.module.css

@@ -0,0 +1,13 @@
+.root {
+    composes: border-l-4 from global;
+    composes: border-solid from global;
+    composes: border-error from global;
+    composes: font-medium from global;
+    composes: leading-normal from global;
+    composes: mb-xs from global;
+    composes: pl-xs from global;
+    composes: pr-0 from global;
+    composes: py-xs from global;
+    composes: text-error from global;
+    composes: text-sm from global;
+}

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListingBySeller/quantity.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Form } from 'informed';
+import { func, number, string } from 'prop-types';
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+
+const Quantity = props => {
+    return (
+        <Form
+            initialValues={{
+                quantity: props.initialValue
+            }}
+        >
+            <QuantityStepper {...props} />
+        </Form>
+    );
+};
+
+Quantity.propTypes = {
+    initialValue: number,
+    itemId: string,
+    label: string,
+    min: number,
+    onChange: func,
+    message: string
+};
+
+Quantity.defaultProps = {
+    label: 'Quantity',
+    min: 0,
+    initialValue: 1,
+    onChange: () => { }
+};
+
+/**
+ * @deprecated - moved to component directory in 12.4.0
+ * @see QuantityStepper
+ */
+export const QuantityFields = QuantityStepper;
+
+export default Quantity;

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

@@ -21,7 +21,7 @@ const SCROLL_OFFSET = 150;
  * @param {Object} props.filters - filters to display
  */
 const FilterSidebar = props => {
-    const { filters, filterCountToOpen, allowedFilters, prefixes, hideFilters } = props;
+    const { filters, filterCountToOpen, prefixes } = props;
     const talonProps = useFilterSidebar({ filters });
     const {
         filterApi,
@@ -34,10 +34,6 @@ const FilterSidebar = props => {
         handleReset
     } = talonProps;
 
-    // console.log(filters)
-    // console.log('filterCountToOpen'+filterCountToOpen)
-    // console.log('hideFilters'+hideFilters)
-
     const filterRef = useRef();
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -85,37 +81,6 @@ const FilterSidebar = props => {
         [handleApply, filterRef]
     );
 
-    const allowedFiltersArr = [];
-
-    allowedFilters?.length && allowedFilters.map((val, index) => {
-        allowedFiltersArr.push(val.code);
-    });
-
-    // const ordering = ['card_artist','card_product_type', 'card_type'];
-    // const sorted = new Map(
-    //     [...filterItems.entries()].sort((a, b) => {
-    //         const keyA = a[0];
-    //         const keyB = b[0];
-
-    //         const matchA = ordering.findIndex(o => keyA.endsWith(o));
-    //         const matchB = ordering.findIndex(o => keyB.endsWith(o));
-
-    //         const orderA = matchA === -1 ? Infinity : matchA;
-    //         const orderB = matchB === -1 ? Infinity : matchB;
-
-    //         // jika dua-duanya tidak match ordering → sort alphabetis
-    //         if (orderA === Infinity && orderB === Infinity) {
-    //             return keyA.localeCompare(keyB);
-    //         }
-
-    //         // urutkan sesuai ordering
-    //         return orderA - orderB;
-    //     })
-    // );
-
-    // // console.log([...sorted.entries()]);
-    // const filterItems = [...sorted.entries()];
-
     const removePrefix = (attrCode) => {
         if (prefixes) {
             return prefixes.reduce((s, p) => 
@@ -132,61 +97,26 @@ const FilterSidebar = props => {
                 const blockState = filterState.get(group);
                 const groupName = filterNames.get(group);
                 const frontendInput = filterFrontendInput.get(group);
-                
-                if (!allowedFiltersArr.length || allowedFiltersArr.length && allowedFiltersArr.includes(removePrefix(group))) {
-                    console.log('removePrefix(group)',removePrefix(group))
-                    // if (!hideFilters.includes(group) && groupName && !group.includes('card_release') && !group.includes('card_set') && !group.includes('sc_set_name')) {
-                    
-                    // if (!allowedFiltersArr?.length && group != "category_uid" || allowedFiltersArr?.length && allowedFiltersArr.includes(group)) {
-                        let subFilter = null;
-                        // if (group.includes('sc_release') || group.includes('card_release')) {
-                        //     let subGroup = '';
-                        //     if (group.includes('card_release')) {
-                        //         subGroup = group.replace('card_release', 'card_set');
-                        //     }
-
-                        //     if (group.includes('sc_release')) {
-                        //         subGroup = group.replace('sc_release', 'sc_set_name');
-                        //     }
-
-                        //     const subBlockState = filterState.get(subGroup);
-                        //     const subFrontendInput = filterFrontendInput.get(subGroup);
-                        //     const subFilterItems = filterItems.get(subGroup);
-
-                        //     subFilter = {
-                        //         key: subGroup,
-                        //         filterApi: filterApi,
-                        //         filterState: subBlockState,
-                        //         filterFrontendInput: subFrontendInput,
-                        //         group: subGroup,
-                        //         isSubFilter: true,
-                        //         items: subFilterItems,
-                        //         name: '',
-                        //         onApply: handleApplyFilter,
-                        //         initialOpen: true
-                        //     };
-
-                        // }
 
-                        return (
-                            <FilterBlock
-                                key={group}
-                                filterApi={filterApi}
-                                filterState={blockState}
-                                allowedSubFilters={[]}
-                                filterFrontendInput={frontendInput}
-                                group={group}
-                                subFilterItems={subFilterItems?.subFilters}
-                                filterItems={filterItems}
-                                subFilter={subFilter}
-                                items={items}
-                                name={groupName}
-                                onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
-                                initialOpen={true}
-                            />
-                        );
-                    // }
-                }
+                let subFilter = null;
+
+                return (
+                    <FilterBlock
+                        key={group}
+                        filterApi={filterApi}
+                        filterState={blockState}
+                        allowedSubFilters={[]}
+                        filterFrontendInput={frontendInput}
+                        group={group}
+                        subFilterItems={subFilterItems?.subFilters}
+                        filterItems={filterItems}
+                        subFilter={subFilter}
+                        items={items}
+                        name={groupName}
+                        onApply={group == "category_uid" ? handleCategoryApplyFilter : handleApplyFilter}
+                        initialOpen={true}
+                    />
+                );
             }),
         [
             filterApi,
@@ -235,14 +165,13 @@ const FilterSidebar = props => {
                         <Filter size={15} className='text-gray-900' />
                     </h2>
                 </div>
-                {hideFilters ? <ul className={classes.blocks}>No filters available.</ul> : <>
                 <CurrentFilters
                     filterApi={filterApi}
                     filterNames={filterNames}
                     filterState={filterState}
                     onRemove={handleApplyFilter}
                 />
-                <ul className={classes.blocks}>{filtersList}</ul></>}
+                <ul className={classes.blocks}>{filtersList}</ul>
             </div>
         </aside>
     );

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

@@ -38,7 +38,7 @@ const MegaMenuItem = props => {
 
     const classes = useStyle(defaultClasses, props.classes);
     const categoryUrl = resourceUrl(
-        `/${category.url_path}${categoryUrlSuffix || ''}`
+        `/${category.children.length ? category.children[0].url_path : category.url_path}${categoryUrlSuffix || ''}`
     );
 
     const talonProps = useMegaMenuItem({
@@ -130,7 +130,11 @@ const MegaMenuItem = props => {
                 )}
                 data-cy="MegaMenu-MegaMenuItem-link"
                 to={categoryUrl}
-                onClick={onNavigate}
+                onClick={e => {
+                    handleClickOutside(e);
+                    handleCloseSubMenu();
+                    onNavigate();
+                }}
             >
                 {category.name}
                 {/* {maybeDownArrowIcon} */}

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

@@ -85,27 +85,6 @@ const Submenu = props => {
         );
     });
 
-    // const shopByItems2 = [
-    //     {
-    //         name: 'Shop By Franchise',
-    //         items: [
-    //             {
-    //                 name: 'Hasbro',
-    //                 url: '/'
-    //             }
-    //         ]
-    //     },
-    //     {
-    //         name: 'Shop By Franchise',
-    //         items: [
-    //             {
-    //                 name: 'Hasbro',
-    //                 url: '/'
-    //             }
-    //         ]
-    //     }
-    // ];
-
     const shopBy = shopByItems.map((shopBy, index) => {
         const keyboardProps =
             index === shopByItems.length - 1 ? talonProps.keyboardProps : {};

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

@@ -76,6 +76,8 @@ const ReviewModal = (props) => {
         // if (onSubmit) {
         //     onSubmit({ ...formState, ratings });
         // }
+        console.log('formState',formState)
+        console.log('e',e)
         setSubmitting(true);
         const input = {
             nickname: formState.nickname,
@@ -117,18 +119,24 @@ const ReviewModal = (props) => {
         return { url, label };
     };
 
+    console.log('ratings',ratings)
+
     const ratingStars = useMemo(() => {
+        console.log('ratingsMetadata22',ratingsMetadata)
         if (!ratingsMetadata) {
             return '';
         }
 
         // Find value (1-5) for selected value_id
         const selectedValue = ratings && ratingsMetadata.values.find(v => v.value_id === ratings) || '';
+        console.log('selectedValue',selectedValue)
 
         let starButtons = [];
 
         [1,2,3,4,5].map(star => {
             const valObj = ratingsMetadata.values.find(v => v.value === String(star));
+            console.log('String(star)',String(star))
+            console.log('valObj',valObj)
             if (valObj) {
                 starButtons.push(
                     <button

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

@@ -26,7 +26,6 @@ import { SearchNormal } from 'iconsax-react';
 import cn from 'classnames';
 import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
 import { ReviewModal } from './Reviews'
-import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 const errorIcon = (
     <Icon
@@ -39,7 +38,7 @@ const errorIcon = (
 const searchIcon = <Icon src={SearchIcon} size={24} />;
 
 const OrderHistoryPage = props => {
-    const talonProps = useOrderHistoryPage();  
+    const talonProps = useOrderHistoryPage();
     const {
         errorMessage,
         loadMoreOrders,
@@ -52,7 +51,6 @@ const OrderHistoryPage = props => {
         searchText,
         pageControl
     } = talonProps;
-
     const [, { addToast }] = useToasts();
     const { formatMessage } = useIntl();
     const [reviewOrder, setReviewOrder] = useState(null);
@@ -168,6 +166,8 @@ const OrderHistoryPage = props => {
         }
     }, [addToast, errorMessage]);
 
+    console.log('reviewOrder',reviewOrder)
+
     return (
         <OrderHistoryContextProvider>
             <ReviewModal