@riosst100/pwa-marketplace 3.0.1 → 3.0.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -1,5 +1,6 @@
 module.exports = componentOverrideMapping = {
     ['@magento/peregrine/lib/talons/Header/useCartTrigger.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Header/useCartTrigger.js',
+    ['@magento/peregrine/lib/talons/CartPage/useCartPage.js']: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/useCartPage.js',
     [`@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js',
     [`@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql.js',
     [`@magento/venia-ui/lib/components/Adapter/adapter.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Adapter/adapter.js',

package/src/components/OrderDetail/components/itemsOrdered.js

@@ -11,6 +11,11 @@ const ItemsOrdered = ({ order }) => {
     const tax = order?.total?.total_tax?.value || 0;
     const grandTotal = order?.total?.grand_total?.value || 0;
 
+    const itemLink = useMemo(
+        () => resourceUrl(`/${urlKey}${urlSuffix || ''}`),
+        [urlKey, urlSuffix]
+    );
+
     return (
         <>
             <div className='rounded-md border border-gray-100 pb-4'>
@@ -29,7 +34,7 @@ const ItemsOrdered = ({ order }) => {
                             {items.map((item, idx) => (
                                 <tr key={item.id || idx} className='border-b border-gray-150'>
                                     <td className="col name text-left align-top py-3 px-2.5" data-th="Product Name">
-                                        <strong className="product name product-item-name">{item.product_name}</strong>
+                                        <Link  to={itemLink} className="product name product-item-name">{item.product_name}</Link>
                                         {item.selected_options && item.selected_options.length > 0 && (
                                             <dl className="item-options">
                                                 {item.selected_options.map((opt, i) => (

package/src/components/RMAPage/components/productItem.css

@@ -0,0 +1,15 @@
+.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;
+}

package/src/components/RMAPage/components/productItem.js

@@ -4,7 +4,9 @@ import { Link } from 'react-router-dom';
 import Select from '@riosst100/pwa-marketplace/src/components/commons/Select';
 import TextField from '@riosst100/pwa-marketplace/src/components/commons/Textfield';
 import Checkbox from '@riosst100/pwa-marketplace/src/components/commons/Checkbox';
-
+import QuantityStepper from '@magento/venia-ui/lib/components/QuantityStepper';
+import defaultClasses from './productItem.module.css';
+import { useStyle } from '@magento/venia-ui/lib/classify';
 
 const productItem = (props) => {
     const {
@@ -41,6 +43,8 @@ const productItem = (props) => {
     // Input change handler with qty_requested validation
     const handleFieldChange = (field, value) => {
         if (field === 'qty_requested' && item && item.quantity_ordered) {
+            console.log('value',value)
+            console.log('item.quantity_ordered',item.quantity_ordered)
             if (value > item.quantity_ordered) {
                 value = item.quantity_ordered;
             }
@@ -51,6 +55,8 @@ const productItem = (props) => {
         if (onItemChange) onItemChange(field, value);
     };
 
+    const classes = useStyle(defaultClasses, props.classes);
+
     return (
         <>
             <div className='item flex flex-col lg_flex-row justify-between border border-gray-100 rounded-md p-4'>
@@ -102,23 +108,47 @@ const productItem = (props) => {
                                 <p className='mb-1'>
                                     Qty Return
                                 </p>
-                                <TextField
+                                <QuantityStepper
+                                    classes={{
+                                        root: classes.quantityRoot
+                                    }}
+                                    initialValue={item.quantity_ordered}
+                                    // itemId={item.id}
+                                />
+                                {/* <TextField
+                                    type="number"
                                     value={
-                                        itemState.qty_requested > item.quantity_ordered
-                                            ? item.quantity_ordered
-                                            : itemState.qty_requested || ''
+                                        itemState.qty_requested !== undefined
+                                        ? String(itemState.qty_requested)
+                                        : ''
                                     }
-                                    onChange={e => {
-                                        let val = parseFloat(e.target.value);
-                                        if (isNaN(val)) val = '';
+                                    min={1}
+                                    max={item.quantity_ordered}
+                                    onChange={(e) => {
+                                        let val = e.target.value;
+
+                                        // Jika kosong
+                                        if (val === '') {
+                                        handleFieldChange('qty_requested', '');
+                                        return;
+                                        }
+
+                                        val = parseFloat(val);
+
+                                        if (isNaN(val)) {
+                                        handleFieldChange('qty_requested', '');
+                                        return;
+                                        }
+
+                                        // batas maksimum
                                         if (val > item.quantity_ordered) val = item.quantity_ordered;
-                                        if (val < 1 && val !== '') val = 1;
+
+                                        // batas minimum
+                                        if (val < 1) val = 1;
+
                                         handleFieldChange('qty_requested', val);
                                     }}
-                                    type="number"
-                                    min={1}
-                                    max={item.quantity_ordered}
-                                />
+                                    /> */}
                             </div>
                             <div className='flex flex-col mb-2.5'>
                                 <p className='mb-1'>

package/src/components/RMAPage/components/productItem.module.css

@@ -0,0 +1,15 @@
+.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;
+}

package/src/overwrites/peregrine/lib/talons/CartPage/useCartPage.js

@@ -0,0 +1,121 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLazyQuery } from '@apollo/client';
+
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CartPage/cartPage.gql';
+import { useEventingContext } from '@magento/peregrine/lib/context/eventing';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * This talon contains logic for a cart page component.
+ * It performs effects and returns prop data for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Manages the updating state of the cart while cart details data is being fetched
+ *
+ * @function
+ *
+ * @param {Object} props
+ * @param {CartPageQueries} props.queries GraphQL queries
+ *
+ * @returns {CartPageTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { useCartPage } from '@magento/peregrine/lib/talons/CartPage/useCartPage';
+ */
+export const useCartPage = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getCartDetailsQuery } = operations;
+
+    const [{ cartId }] = useCartContext();
+    const [{ isSignedIn }] = useUserContext();
+
+    const [isProceedToCheckout, setIsProceedToCheckout] = useState(false);
+
+    const [isCartUpdating, setIsCartUpdating] = useState(false);
+    const [wishlistSuccessProps, setWishlistSuccessProps] = useState(null);
+
+    const [fetchCartDetails, { called, data, loading }] = useLazyQuery(
+        getCartDetailsQuery,
+        {
+            fetchPolicy: 'cache-and-network',
+            nextFetchPolicy: 'cache-first',
+            errorPolicy: 'all'
+        }
+    );
+
+    const hasItems = !!data?.cart?.total_quantity;
+    const shouldShowLoadingIndicator = called && loading && !hasItems;
+
+    const cartItems = useMemo(() => {
+        return data?.cart?.items || [];
+    }, [data]);
+
+    const onAddToWishlistSuccess = useCallback(successToastProps => {
+        setWishlistSuccessProps(successToastProps);
+    }, []);
+
+    const [, { dispatch }] = useEventingContext();
+
+    useEffect(() => {
+        if (!called && cartId) {
+            fetchCartDetails({ variables: { cartId } });
+        }
+
+        // Let the cart page know it is updating while we're waiting on network data.
+        setIsCartUpdating(loading);
+    }, [fetchCartDetails, called, cartId, loading]);
+
+    useEffect(() => {
+        if (called && cartId && !loading) {
+            dispatch({
+                type: 'CART_PAGE_VIEW',
+                payload: {
+                    cart_id: cartId,
+                    products: cartItems
+                }
+            });
+        }
+    }, [called, cartItems, cartId, loading, dispatch]);
+
+    return {
+        cartItems,
+        hasItems,
+        isCartUpdating,
+        isGuestCheckout: !isSignedIn,
+        fetchCartDetails,
+        onAddToWishlistSuccess,
+        setIsCartUpdating,
+        shouldShowLoadingIndicator,
+        wishlistSuccessProps,
+        isProceedToCheckout,
+        setIsProceedToCheckout
+    };
+};
+
+/** JSDoc type definitions */
+
+/**
+ * GraphQL formatted string queries used in this talon.
+ *
+ * @typedef {Object} CartPageQueries
+ *
+ * @property {GraphQLAST} getCartDetailsQuery Query for getting the cart details.
+ *
+ * @see [cartPage.gql.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/cartPage.gql.js}
+ * for queries used in Venia
+ */
+
+/**
+ * Props data to use when rendering a cart page component.
+ *
+ * @typedef {Object} CartPageTalonProps
+ *
+ * @property {Array<Object>} cartItems An array of item objects in the cart.
+ * @property {boolean} hasItems True if the cart has items. False otherwise.
+ * @property {boolean} isCartUpdating True if the cart is updating. False otherwise.
+ * @property {function} setIsCartUpdating Callback function for setting the updating state of the cart page.
+ * @property {boolean} shouldShowLoadingIndicator True if the loading indicator should be rendered. False otherwise.
+ */