@riosst100/pwa-marketplace 2.4.4 → 2.4.6

package/i18n/id_ID.json

@@ -335,7 +335,7 @@
     "priceAdjustments.couponCode": "Enter Coupon Code",
     "priceAdjustments.giftOptions": "See Gift Options",
     "priceAdjustments.shippingMethod": "Estimate your Shipping",
-    "priceSummary.checkoutButton": "Proceed to Checkout",
+    "priceSummary.checkoutButton": "Checkout",
     "priceSummary.discountSummary.hideDiscounts": "Hide individual discounts.",
     "priceSummary.discountSummary.showDiscounts": "Show individual discounts.",
     "priceSummary.errorText": "Something went wrong. Please refresh and try again.",

package/package.json

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

package/src/componentOverrideMapping.js

@@ -28,6 +28,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/Breadcrumbs/useBreadcrumbs.js',
     [`@magento/peregrine/lib/talons/FilterModal/useFilterList.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterModal/useFilterList.js',
     [`@magento/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js',
+    [`@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js',
     [`@magento/venia-ui/lib/components/FilterSidebar/filterSidebar.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/FilterSidebar/filterSidebar.js',
     [`@magento/venia-ui/lib/components/TextInput/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/TextInput/index.js',
     [`@magento/venia-ui/lib/components/Pagination/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination/index.js',

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/priceSummary.gql.js

@@ -0,0 +1,42 @@
+import { gql } from '@apollo/client';
+import { PriceSummaryFragment } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/priceSummaryFragments.gql';
+
+const GET_PRICE_SUMMARY = gql`
+    query getPriceSummary($cartId: String!) {
+        cart(cart_id: $cartId) {
+            id
+            ...PriceSummaryFragment
+        }
+    }
+    ${PriceSummaryFragment}
+`;
+
+const INIT_CHECKOUT_SPLIT_CART_MUTATION = gql`
+    mutation InitCheckoutSplitCart(
+        $input: SubmitSplitCartInput!
+    ) {
+        initCheckoutSplitCart(
+            input: $input
+        ) {
+            id
+            parent_id
+            quote_id
+            is_active
+            is_ordered
+        }
+    }
+`;
+
+export const CREATE_CART = gql`
+    # This mutation will return a masked cart id. If a bearer token is provided for
+    # a logged in user it will return the cart id for that user.
+    mutation createCart {
+        cartId: createEmptyCart
+    }
+`;
+
+export default {
+    getPriceSummaryQuery: GET_PRICE_SUMMARY,
+    initCheckoutSplitCartMutation: INIT_CHECKOUT_SPLIT_CART_MUTATION,
+    createCartMutation: CREATE_CART
+};

package/src/overwrites/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -0,0 +1,170 @@
+import { useCallback } from 'react';
+import { useHistory, useRouteMatch } from 'react-router-dom';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
+import DEFAULT_OPERATIONS from './priceSummary.gql';
+import {
+    useApolloClient,
+    useMutation,
+    useQuery
+} from '@apollo/client';
+
+/**
+ * @ignore
+ *
+ * Flattens query data into a simple object. We create this here rather than
+ * having each line summary line component destructure its own data because
+ * only the parent "price summary" component knows the data structure.
+ *
+ * @param {Object} data query data
+ */
+const flattenData = data => {
+    if (!data) return {};
+    return {
+        subtotal: data.cart.prices.subtotal_excluding_tax,
+        total: data.cart.prices.grand_total,
+        discounts: data.cart.prices.discounts,
+        giftCards: data.cart.applied_gift_cards,
+        giftOptions: data.cart.prices.gift_options,
+        taxes: data.cart.prices.applied_taxes,
+        shipping: data.cart.shipping_addresses
+    };
+};
+
+/**
+ * This talon contains logic for a price summary component.
+ * It performs effects and returns prop data for rendering the component.
+ *
+ * This talon performs the following effects:
+ *
+ * - Log a GraphQL error if it occurs when getting the price summary
+ *
+ * @function
+ *
+ * @param {Object} props
+ * @param {PriceSummaryQueries} props.queries GraphQL queries for a price summary component.
+ *
+ * @returns {PriceSummaryTalonProps}
+ *
+ * @example <caption>Importing into your project</caption>
+ * import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
+ */
+export const usePriceSummary = (props = {}) => {
+    const operations = mergeOperations(DEFAULT_OPERATIONS, props.operations);
+    const { getPriceSummaryQuery, initCheckoutSplitCartMutation, createCartMutation } = operations;
+
+    const apolloClient = useApolloClient();
+
+    const [{ cartId }, { createSellerCart, createCart, removeCart }] = useCartContext();
+    const history = useHistory();
+    // We don't want to display "Estimated" or the "Proceed" button in checkout.
+    const match = useRouteMatch('/checkout');
+    const isCheckout = !!match;
+
+    const { error, loading, data } = useQuery(getPriceSummaryQuery, {
+        fetchPolicy: 'cache-and-network',
+        nextFetchPolicy: 'cache-first',
+        skip: !cartId,
+        variables: {
+            cartId
+        }
+    });
+
+    const [
+        initCheckoutSplitCart,
+        {
+            loading: initCheckoutSplitCartLoading,
+            data: initCheckoutSplitCartData,
+            error: initCheckoutSplitCartError,
+            called: initCheckoutSplitCartCalled
+        }
+    ] = useMutation(initCheckoutSplitCartMutation);
+
+    const [fetchCartId] = useMutation(createCartMutation);
+
+    const handleProceedToCheckout = useCallback(async(props) => {
+        const { sellerUrl } = props;
+
+        // await initCheckoutSplitCart({
+        //     variables: {
+        //         input: {
+        //             seller_url: sellerUrl,
+        //             cart_id: cartId
+        //         }
+        //     }
+        // });
+
+        await createSellerCart({ initCheckoutSplitCart, sellerUrl });
+
+        // console.log('initCheckoutSplitCartData')
+        // console.log(initCheckoutSplitCartData)
+
+        await removeCart();
+        await apolloClient.clearCacheData(apolloClient, 'cart');
+
+        await createCart({
+            fetchCartId
+        });
+        
+        history.push('/checkout');
+    }, [history, createSellerCart, fetchCartId, createCart, apolloClient, removeCart, cartId, initCheckoutSplitCart, initCheckoutSplitCartData]);
+
+    const handleEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handleProceedToCheckout();
+            }
+        };
+    }, [handleProceedToCheckout]);
+
+    return {
+        handleProceedToCheckout,
+        handleEnterKeyPress,
+        hasError: !!error,
+        hasItems: data && !!data.cart.items.length,
+        isCheckout,
+        isLoading: !!loading,
+        flatData: flattenData(data)
+    };
+};
+
+/** JSDocs type definitions */
+
+/**
+ * Query data flattened into a simple object.
+ *
+ * @typedef {Object} FlattenedData
+ *
+ * @property {String} subtotal Cart subtotal (excluding tax)
+ * @property {String} total Cart grand total
+ * @property {Array<Object>} discounts Applied discounts to the cart
+ * @property {Array<Object>} giftCards Gift cards applied to the cart
+ * @property {Array<Object>} giftOptions Gift Options applied to the cart
+ * @property {Array<Object>} taxes Taxes applied to the cart
+ * @property {Array<Object>} shipping Shipping addresses associated with this cart
+ */
+
+/**
+ * GraphQL queries for price summary component.
+ *
+ * @typedef {Object} PriceSummaryQueries
+ *
+ * @property {GraphQLAST} getPriceSummary Query to get the price summary for a cart
+ *
+ * @see [priceSummary.js]{@link https://github.com/magento/pwa-studio/blob/develop/packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js}
+ * for the queries used in Venia.
+ */
+
+/**
+ * Props used for rendering a price summary component.
+ *
+ * @typedef {Object} PriceSummaryTalonProps
+ *
+ * @property {function} handleProceedToCheckout Callback function which navigates the browser to the checkout
+ * * @property {function} handleEnterKeyPress Callback function which navigates the browser to the checkout at the press of enter key
+ * @property {boolean} hasError True if a GraphQL query returns an error. False otherwise.
+ * @property {boolean} hasItems True if the cart has any items. False otherwise.
+ * @property {boolean} isLoading True while the GraphQL query is still in flight. False otherwise.
+ * @property {FlattenedData} flatData Query data that has been flattened into a simple object
+ *
+ */

package/src/overwrites/venia-ui/lib/components/Adapter/adapter.js

@@ -44,6 +44,19 @@ const Adapter = props => {
     // const getWebsiteByUserIp = {
         // countryCode: 'SG'
     // }
+
+    // Check split cart
+    useEffect(() => {
+        if (websiteCodeInUrl) {
+            setVerifyUserIp(false);
+
+            storage.removeItem('access_base_website');
+
+            routerProps.basename = websiteCodeInUrl != process.env.WEBSITE_CODE ? '/'+websiteCodeInUrl : '/';
+
+            setNewRouterProps(routerProps);
+        }
+    }, [websiteCodeInUrl])
     
     useEffect(() => {
         if (websiteCodeInUrl) {

package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -28,7 +28,7 @@ import cn from 'classnames';
  * import PriceSummary from "@magento/venia-ui/lib/components/CartPage/PriceSummary";
  */
 const PriceSummary = props => {
-    const { isUpdating } = props;
+    const { isUpdating, sellerUrl } = props;
     const classes = useStyle(defaultClasses, props.classes);
     const talonProps = usePriceSummary();
 
@@ -91,7 +91,7 @@ const PriceSummary = props => {
             <Button
                 disabled={isPriceUpdating}
                 priority={'high'}
-                onClick={handleProceedToCheckout}
+                onClick={() => handleProceedToCheckout({ sellerUrl })}
                 onKeyDown={handleEnterKeyPress}
                 data-cy="PriceSummary-checkoutButton"
                 classes={{
@@ -100,7 +100,7 @@ const PriceSummary = props => {
                 }}
             >
                 <FormattedMessage
-                    id={'priceSummary.checkoutButton'}
+                    id={'splitCart.checkoutButton'}
                     defaultMessage={'Checkout'}
                 />
             </Button>
@@ -108,14 +108,8 @@ const PriceSummary = props => {
     ) : null;
 
     return (
-        <div className={cn(classes.root, 'border border-gray-100 rounded-md p-6')} data-cy="PriceSummary-root">
-            <div>
-                <p className='text-[16px] front font-medium mb-4'>
-                    <FormattedMessage
-                        id={'priceSummary.summaryLabel'}
-                        defaultMessage={'Summary'}
-                    />
-                </p>
+        <div className={cn(classes.root, 'pb-6 px-3')} data-cy="PriceSummary-root">
+            {/* <div>
                 <ul>
                     <li className={classes.lineItems}>
                         <span
@@ -137,71 +131,8 @@ const PriceSummary = props => {
                             />
                         </span>
                     </li>
-                    <DiscountSummary
-                        classes={{
-                            lineItems: classes.lineItems,
-                            lineItemLabel: classes.lineItemLabel,
-                            price: priceClass
-                        }}
-                        data={discounts}
-                    />
-                    <li className={classes.lineItems}>
-                        <GiftCardSummary
-                            classes={{
-                                lineItemLabel: classes.lineItemLabel,
-                                price: priceClass
-                            }}
-                            data={giftCards}
-                        />
-                    </li>
-                    <li className={classes.lineItems}>
-                        <GiftOptionsSummary
-                            classes={{
-                                lineItemLabel: classes.lineItemLabel,
-                                price: priceClass
-                            }}
-                            data={giftOptions}
-                        />
-                    </li>
-                    <li className={classes.lineItems}>
-                        <TaxSummary
-                            classes={{
-                                lineItemLabel: classes.lineItemLabel,
-                                price: priceClass
-                            }}
-                            data={taxes}
-                            isCheckout={isCheckout}
-                        />
-                    </li>
-                    <li className={classes.lineItems}>
-                        <ShippingSummary
-                            classes={{
-                                lineItemLabel: classes.lineItemLabel,
-                                price: priceClass
-                            }}
-                            data={shipping}
-                            isCheckout={isCheckout}
-                        />
-                    </li>
-                    <li className={classes.lineItems}>
-                        <span
-                            data-cy="PriceSummary-totalLabel"
-                            className={classes.totalLabel}
-                        >
-                            {totalPriceLabel}
-                        </span>
-                        <span
-                            data-cy="PriceSummary-totalValue"
-                            className={totalPriceClass}
-                        >
-                            <Price
-                                value={total.value}
-                                currencyCode={total.currency}
-                            />
-                        </span>
-                    </li>
                 </ul>
-            </div>
+            </div> */}
             {proceedToCheckoutButton}
         </div>
     );

package/src/overwrites/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.module.css

@@ -1,4 +1,6 @@
-.root {}
+.root {
+    text-align: right;
+}
 
 .errorText {
     composes: leading-normal from global;
@@ -46,6 +48,6 @@
     composes: inline-flex from global;
     composes: justify-center from global;
     composes: mt-xs from global;
-    composes: w-full from global;
+    width: 20%;
     min-height: 5.5rem;
 }

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.js

@@ -122,7 +122,7 @@ const Product = props => {
                         />
                     </Link>
                     <div className='flex flex-col'>
-                        <div className={cn(classes.name, 'text-[14px] font-medium max-w-[260px]')} data-cy="Product-name">
+                        <div className={cn(classes.name, 'text-[14px] font-normal max-w-[260px]')} data-cy="Product-name">
                             <Link to={itemLink}>{name}</Link>
                         </div>
                         <ProductOptions

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/product.module.css

@@ -68,7 +68,7 @@
 }
 
 .name {
-    composes: font-medium from global;
+    /* composes: font-medium from global; */
     grid-area: name;
     display: -webkit-box;
     -webkit-line-clamp: 2;

package/src/overwrites/venia-ui/lib/components/CartPage/ProductListing/productListing.js

@@ -5,7 +5,7 @@ import { useProductListing } from '@magento/peregrine/lib/talons/CartPage/Produc
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import LoadingIndicator from '@magento/venia-ui/lib/components/LoadingIndicator';
 import defaultClasses from './productListing.module.css';
-import Product from './product';
+import ProductListingBySeller from '../ProductListingBySeller/productListingBySeller';
 import ErrorMessage from './errorMessage';
 import cn from 'classnames';
 
@@ -29,7 +29,9 @@ const ProductListing = props => {
     const {
         onAddToWishlistSuccess,
         setIsCartUpdating,
-        fetchCartDetails
+        fetchCartDetails,
+        isCartUpdating,
+        hasItems
     } = props;
 
     const talonProps = useProductListing();
@@ -56,34 +58,53 @@ const ProductListing = props => {
         );
     }
 
-    if (items.length) {
-        const productComponents = items.map(product => (
-            <Product
-                item={product}
-                key={product.uid}
+    // Grouping berdasarkan seller_id dengan data seller di atas
+    const groupedItems = items.reduce((acc, item) => {
+        if (!item.seller) {
+            return [];
+        }
+        
+        const { seller_id, seller_name, seller_url } = item.seller;
+        
+        if (!acc[seller_id]) {
+        acc[seller_id] = {
+            seller: {
+            seller_id,
+            seller_name,
+            seller_url
+            },
+            items: []
+        };
+        }
+    
+        acc[seller_id].items.push(item);
+        return acc;
+    }, {});
+    
+    // Ubah hasil ke dalam array
+    const itemsBySeller = Object.values(groupedItems);
+
+    if (itemsBySeller.length) {
+        const productBySellerComponents = itemsBySeller.map((sellerItems, index) => (
+            <ProductListingBySeller 
+                onAddToWishlistSuccess={onAddToWishlistSuccess} 
+                activeEditItem={activeEditItem}
+                isLoading={isLoading}
+                hasItems={hasItems}
+                key={index}
+                error={error}
                 setActiveEditItem={setActiveEditItem}
-                setIsCartUpdating={setIsCartUpdating}
-                onAddToWishlistSuccess={onAddToWishlistSuccess}
-                fetchCartDetails={fetchCartDetails}
                 wishlistConfig={wishlistConfig}
-            />
+                setIsCartUpdating={setIsCartUpdating} 
+                fetchCartDetails={fetchCartDetails} 
+                seller={sellerItems.seller}
+                isCartUpdating={isCartUpdating}
+                items={sellerItems.items} />
         ));
 
         return (
             <Fragment>
-                <ErrorMessage error={error} />
-                <ul className={cn(classes.root, 'border border-gray-100 rounded-md')} data-cy="ProductListing-root">
-                    <div className='px-4'>
-                        {productComponents}
-                    </div>
-                </ul>
-                <Suspense fallback={null}>
-                    <EditModal
-                        item={activeEditItem}
-                        setIsCartUpdating={setIsCartUpdating}
-                        setActiveEditItem={setActiveEditItem}
-                    />
-                </Suspense>
+                {productBySellerComponents}
             </Fragment>
         );
     }

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

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