@riosst100/pwa-marketplace 2.8.8 → 2.9.0

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection.js

@@ -1,23 +1,9 @@
 /**
- * This file is augmented at build time using the @magento/venia-ui build
- * target "checkoutPagePaymentTypes", which allows third-party modules to
- * add new payment component mappings for the checkout page.
+ * Delegate to Venia's canonical payment method collection so build-target
+ * augmentation (checkoutPagePaymentTypes) from third-party integrations works.
  *
- * @see [Payment definition object]{@link PaymentDefinition}
- */
-export default {};
-
-/**
- * A payment definition object that describes a payment in your storefront.
- *
- * @typedef {Object} PaymentDefinition
- * @property {string} paymentCode is use to map your payment
- * @property {string} importPath Resolvable path to the component the
- *   Route component will render
- *
- * @example <caption>A custom payment method</caption>
- * const myCustomPayment = {
- *      paymentCode: 'cc',
- *      importPath: '@partner/module/path_to_your_component'
- * }
+ * Note: Keeping a local empty object here prevents integrations like
+ * Stripe/MultiSafepay from registering their UI components, resulting in
+ * "There was an error loading payments" on checkout.
  */
+export { default } from '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethodCollection';

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -1,14 +1,20 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { shape, string, bool, func } from 'prop-types';
 import { useIntl } from 'react-intl';
+import { useMutation, useQuery } from '@apollo/client';
 
 import { usePaymentMethods } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/usePaymentMethods';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
 import Radio from '@magento/venia-ui/lib/components/RadioGroup/radio';
 import defaultClasses from './paymentMethods.module.css';
 import payments from './paymentMethodCollection';
+import {
+    GET_SHIPPING_ADDRESS,
+    SET_BILLING_ADDRESS
+} from '@riosst100/pwa-marketplace/src/talons/Xendit/xendit';
 
 const PaymentMethods = props => {
     const {
@@ -33,11 +39,85 @@ const PaymentMethods = props => {
         isLoading
     } = talonProps;
 
+    const [{ cartId }] = useCartContext();
+
+    const { data: shippingData } = useQuery(GET_SHIPPING_ADDRESS, {
+        skip: !cartId,
+        variables: { cartId }
+    });
+
+    const [setBillingAddress] = useMutation(SET_BILLING_ADDRESS);
+
+    const getRegionValue = region => {
+        if (!region) return '';
+        return region.region_id || region.label || region.code || '';
+    };
+
+    const handleChangeAndSetBilling = useCallback(
+        async event => {
+            // First, run canonical selection logic (updates selected payment on cart)
+            handlePaymentMethodSelection(event);
+
+            // Then, proactively set billing address using the selected shipping address
+            try {
+                const shippingAddresses =
+                    shippingData?.cart?.shippingAddresses || [];
+                const addr = shippingAddresses[0];
+                if (!addr || !cartId) return;
+
+                const street1 = Array.isArray(addr.street) ? addr.street[0] || '' : '';
+                const street2 = Array.isArray(addr.street) ? addr.street[1] || '' : '';
+                await setBillingAddress({
+                    variables: {
+                        cartId,
+                        firstName: addr.firstName || '',
+                        lastName: addr.lastName || '',
+                        street1,
+                        street2,
+                        city: addr.city || '',
+                        region: getRegionValue(addr.region),
+                        postcode: addr.postcode || '',
+                        country: addr.country?.code || '',
+                        phoneNumber: addr.phoneNumber || ''
+                    }
+                });
+            } catch (e) {
+                // Non-blocking; payment selection should still work even if billing sync fails
+                // eslint-disable-next-line no-console
+                console.warn('Gagal menyetel billing address saat memilih metode pembayaran:', e);
+            }
+        },
+        [cartId, handlePaymentMethodSelection, setBillingAddress, shippingData]
+    );
+
     if (isLoading) {
         return null;
     }
 
-    console.log('payments', payments)
+    // Warn if Magento exposes payment methods that don't have a mapped UI component.
+    const knownCodes = Object.keys(payments);
+    const unknownMethods = availablePaymentMethods.filter(
+        ({ code }) => !knownCodes.includes(code)
+    );
+    if (unknownMethods.length) {
+        // eslint-disable-next-line no-console
+        console.warn(
+            'Checkout: Ditemukan metode pembayaran yang belum dipetakan:',
+            unknownMethods.map(m => m.code),
+            '\nPastikan metode tersebut terdaftar melalui target build Venia "checkoutPagePaymentTypes" atau ditambahkan ke paymentMethodCollection.'
+        );
+    }
+
+    // Title fallback map to ensure labels are always visible.
+    const TITLE_FALLBACK = {
+        braintree: 'Credit/Debit Card',
+        paypal_express: 'PayPal Express Checkout',
+        paypal_express_bml: 'PayPal Credit',
+        checkmo: 'Check / Money Order',
+        xendit: 'Xendit',
+        cc: 'Credit Card',
+        free: 'Free'
+    };
 
     const radios = availablePaymentMethods
         .map(({ code, title }) => {
@@ -48,6 +128,7 @@ const PaymentMethods = props => {
 
             const id = `paymentMethod--${code}`;
             const isSelected = currentSelectedPaymentMethod === code;
+            const displayTitle = title || TITLE_FALLBACK[code] || code;
             const PaymentMethodComponent = payments[code];
             const renderedComponent = isSelected ? (
                 <PaymentMethodComponent
@@ -55,6 +136,7 @@ const PaymentMethods = props => {
                     onPaymentError={onPaymentError}
                     resetShouldSubmit={resetShouldSubmit}
                     shouldSubmit={shouldSubmit}
+                    currentSelectedPaymentMethod={currentSelectedPaymentMethod}
                 />
             ) : null;
 
@@ -62,13 +144,13 @@ const PaymentMethods = props => {
                 <div key={code} className={classes.payment_method}>
                     <Radio
                         id={id}
-                        label={title}
+                        label={displayTitle}
                         value={code}
                         classes={{
                             label: classes.radio_label
                         }}
                         checked={isSelected}
-                        onChange={handlePaymentMethodSelection}
+                        onChange={handleChangeAndSetBilling}
                     />
                     {renderedComponent}
                 </div>
@@ -95,6 +177,12 @@ const PaymentMethods = props => {
 
     return (
         <div className={classes.root}>
+            <h5 className={classes.cardTitle}>
+                {formatMessage({
+                    id: 'checkoutPage.paymentInformation',
+                    defaultMessage: 'Payment Information'
+                })}
+            </h5>
             <RadioGroup
                 classes={{ root: classes.radio_group }}
                 field="selectedPaymentMethod"

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/paymentMethods.module.css

@@ -1,7 +1,8 @@
 .root {
     composes: grid from global;
-    composes: p-md from global;
+    /* composes: p-md from global; */
     composes: pb-s from global;
+    padding: 1rem;
 }
 
 .radio_group {
@@ -10,10 +11,11 @@
 
 .payment_method {
     composes: border-b from global;
-    composes: border-solid from global;
-    composes: border-subtle from global;
+    /* composes: border-solid from global; */
+    /* composes: border-subtle from global; */
     composes: pb-xs from global;
     composes: pt-xs from global;
+    border-color: lightgray;
 }
 
 /* TODO @TW: cannot compose */
@@ -32,3 +34,11 @@
     composes: gap-2xs from global;
     composes: text-error from global;
 }
+.cardTitle{
+    font-weight: 500;
+    font-size: 16px;
+}
+.address_check{
+    margin-left: 5px;
+    margin-top: 5px;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.module.css

@@ -1,7 +1,7 @@
 .root {
     composes: gap-xs from global;
     composes: grid from global;
-    composes: p-md from global;
+    composes: p-xs from global;
 }
 
 .heading_container {
@@ -11,6 +11,8 @@
 }
 
 .heading {
+    /* composes: text-base from global; */
+    font-size: 16px;
     composes: font-medium from global;
 }
 

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js

@@ -26,7 +26,9 @@ const ShippingRadios = props => {
     const radioGroupClasses = {
         message: classes.radioMessage,
         radioLabel: classes.radioLabel,
-        root: classes.radioRoot
+        root: classes.radioRoot,
+        // Ensure we can tweak the label container (the clickable row)
+        radioContainer: classes.radioContainer
     };
 
     const shippingRadios = shippingMethods.map(method => {

package/src/overwrites/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.module.css

@@ -8,8 +8,9 @@
     composes: grid from global;
     composes: grid-cols-[100%] from global;
     composes: justify-start from global;
-
-    composes: sm_grid-cols-autoAuto from global;
+    /* On small screens and up, make two columns: name grows, price auto */
+    composes: sm_grid-cols-[1fr,auto] from global;
+    composes: items-center from global;
 }
 
 .radioMessage {
@@ -20,3 +21,51 @@
     composes: leading-normal from global;
     composes: text-error from global;
 }
+
+/* Fix alignment and visual of radio controls inside the modal */
+.radioContainer {
+    /* Ensure consistent layout: control + content */
+    composes: justify-items-start from global;
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-areas: 'input label';
+    justify-content: flex-start !important;
+    align-items: flex-start;
+}
+
+/* Normalize the control size and overlaying layers so input and icon overlap */
+.radioContainer :global([class*="radio-input-"]) {
+    width: 1.5rem; /* 24px default Venia size for harmony with icon */
+    height: 1.5rem;
+    box-shadow: none !important; /* remove active/focus blobs that appear offset */
+}
+
+.radioContainer :global([class*="radio-icon-"]) {
+    position: relative !important;
+    width: 1.5rem !important;
+    height: 1.5rem !important;
+    display: inline-block;
+}
+
+/* Prevent filled background bleed that can look like an offset dot */
+.radioContainer :global([class*="radio-input-"]:checked) {
+    background-color: transparent !important; /* dot handled via icon ::after */
+}
+
+/* Draw an inner dot centered in the ring when checked */
+.radioContainer :global([class*="radio-icon-"]) {
+    position: relative;
+}
+
+.radioContainer :global([class*="radio-input-"]:checked) + :global([class*="radio-icon-"])::after {
+    content: '';
+    position: absolute;
+    left: 30%;
+    top: 30%;
+    width: 0.6rem;
+    height: 0.6rem;
+    background: #f76b1c;
+    border-radius: 9999px;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.js

@@ -244,36 +244,19 @@ const CheckoutPage = props => {
                 </div>
             ) : null;
 
-        const reviewOrderButton =
-            checkoutStep === CHECKOUT_STEP.PAYMENT ? (
-                <Button
-                    onClick={handleReviewOrder}
-                    onKeyDown={handleReviewOrderEnterKeyPress}
-                    priority="high"
-                    className={classes.review_order_button}
-                    data-cy="CheckoutPage-reviewOrderButton"
-                    disabled={
-                        reviewOrderButtonClicked ||
-                        isUpdating ||
-                        !isPaymentAvailable
-                    }
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.reviewOrder'}
-                        defaultMessage={'Review Order'}
-                    />
-                </Button>
-            ) : null;
+        // Remove Review Order button; flow uses only Place Order
+        const reviewOrderButton = null;
 
-        const itemsReview =
-            checkoutStep === CHECKOUT_STEP.REVIEW ? (
-                <div className={classes.items_review_container}>
-                    <ItemsReview />
-                </div>
-            ) : null;
+        // Show ItemsReview from the beginning, not only at the REVIEW step
+        const itemsReview = (
+            <div className={classes.items_review_container}>
+                <ItemsReview />
+            </div>
+        );
 
+        // Allow placing order starting from the Payment step (no separate review action)
         const placeOrderButton =
-            checkoutStep === CHECKOUT_STEP.REVIEW ? (
+            checkoutStep >= CHECKOUT_STEP.PAYMENT ? (
                 <Button
                     onClick={handlePlaceOrder}
                     onKeyDown={handlePlaceOrderEnterKeyPress}
@@ -312,6 +295,7 @@ const CheckoutPage = props => {
                 }
             >
                 <OrderSummary isUpdating={isUpdating} />
+                {itemsReview}
             </div>
         );
 
@@ -394,7 +378,6 @@ const CheckoutPage = props => {
                 </div>
                 {priceAdjustmentsSection}
                 {reviewOrderButton}
-                {itemsReview}
                 {orderSummary}
                 {placeOrderButton}
                 <GoogleReCaptcha {...recaptchaWidgetProps} />

package/src/overwrites/venia-ui/lib/components/CheckoutPage/checkoutPage.module.css

@@ -124,6 +124,7 @@
 
 .items_review_container {
     grid-column: 1 / span 1;
+    margin-top: 2rem;
 }
 
 .summaryContainer {
@@ -132,7 +133,7 @@
     composes: lg_h-minContent from global;
     composes: lg_sticky from global;
     /* TODO @TW: review. Magic number. Slightly bigger than sticky header. */
-    composes: lg_top-[9rem] from global;
+    composes: lg_top-[2.5rem] from global;
 }
 
 @media (min-width: 960px) {
@@ -173,14 +174,25 @@
 
 .review_order_button {
     composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
-
+    box-shadow: none;
     grid-column: 1 / span 1;
     composes: m-auto from global;
+    text-transform: capitalize;
+}
+.review_order_button:hover,
+.review_order_button:focus,
+.review_order_button:active {
+    box-shadow: none;
 }
-
 .place_order_button {
     composes: root_highPriority from '@magento/venia-ui/lib/components/Button/button.module.css';
-
+    box-shadow: none;
     grid-column: 1 / span 1;
     composes: m-auto from global;
+    text-transform: capitalize;
+}
+.place_order_button:hover,
+.place_order_button:focus,
+.place_order_button:active {
+    box-shadow: none;
 }

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/modalFormReview.js

@@ -27,7 +27,7 @@ const modalFormReview = (props) => {
                 className="modal_form_review !p-[30px] md_min-w-[650px]"
             >
                 <div className='form_review-container'>
-                    <div className='header_title-modal flex justify-between mb-10'>
+                    <div className='header_title-modal flex justify-between mb-5'>
                         <div className='text-lg text-black font-medium'>
                             Write Review
                         </div>
@@ -38,7 +38,7 @@ const modalFormReview = (props) => {
 
                     <Form
                         data-cy="form_review"
-                        className="flex flex-col gap-y-6"
+                        className="flex flex-col gap-y-3"
                         initialValues={{}}
                         onSubmit={() => { }}
                         onChange={() => { }}

package/src/overwrites/venia-ui/lib/components/ProductFullDetail/components/productReview.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Review from '@riosst100/pwa-marketplace/src/components/SellerReviewItem';
+import Review from '@riosst100/pwa-marketplace/src/components/ProductReviewItem';
 import { Star1 } from 'iconsax-react';
 import Button from '../../Button';
 import ModalFormReview from './modalFormReview';
@@ -7,53 +7,171 @@ import ModalFormReview from './modalFormReview';
 const productReview = (props) => {
 
     const { className } = props;
-
     const [open, setOpen] = useState(false);
+    const [filter, setFilter] = useState('All');
+
+
+    // Dummy reviews data
+    const dummyReviews = {
+        __typename: 'ProductRates',
+        total_count: 6,
+        items: [
+            {
+                __typename: 'ProductRate',
+                id: 1,
+                name: 'John Doe',
+                date: '18 January 2024',
+                rating: 5,
+                comment: 'Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.'
+            },
+            {
+                __typename: 'ProductRate',
+                id: 2,
+                name: 'Roger Taylor',
+                date: '25 January 2024',
+                rating: 2,
+                comment: 'Arrived late and packaging was damaged. Not satisfied.'
+            },
+            {
+                __typename: 'ProductRate',
+                id: 3,
+                name: 'Sarah Smith',
+                date: '02 February 2024',
+                rating: 4,
+                comment: 'Good product, but delivery could be faster.'
+            },
+            {
+                __typename: 'ProductRate',
+                id: 4,
+                name: 'Michael Johnson',
+                date: '10 February 2024',
+                rating: 3,
+                comment: 'Average experience, item as described but nothing special.'
+            },
+            {
+                __typename: 'ProductRate',
+                id: 5,
+                name: 'Emily Davis',
+                date: '15 February 2024',
+                rating: 5,
+                comment: 'Excellent service and product quality! Will buy again.'
+            },
+            {
+                __typename: 'ProductRate',
+                id: 6,
+                name: 'David Lee',
+                date: '20 February 2024',
+                rating: 1,
+                comment: 'Item not as described. Very disappointed.'
+            }
+        ],
+        page_info: {
+            __typename: 'SearchResultPageInfo',
+            total_pages: 1,
+            page_size: 10,
+            current_page: 1,
+            total_count: 6
+        }
+    };
+
+
+    const totalReviews = dummyReviews.items.length;
+    const averageRating = totalReviews > 0
+        ? (dummyReviews.items.reduce((sum, item) => sum + item.rating, 0) / totalReviews).toFixed(1)
+        : 0;
+
+    const starCounts = { 5: 0, 4: 0, 3: 0, 2: 0, 1: 0 };
+    dummyReviews.items.forEach(item => {
+        if (starCounts[item.rating] !== undefined) {
+            starCounts[item.rating]++;
+        }
+    });
+
+    const getPercent = (count) => totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
+    
+    const filteredReviews = filter === 'All'
+        ? dummyReviews.items
+        : dummyReviews.items.filter(item => item.rating === parseInt(filter));
 
     return (
         <>
             <ModalFormReview open={open} setOpen={setOpen} />
             <div className={className}>
-                <div className='review-summary flex justify-between mb-[30px] pb-[30px] border-b border-gray-100'>
-                    <div className="justify-start items-end gap-[15px] inline-flex">
-                        <div className="text-center text-zinc-900 text-[40px] font-medium leading-10">4.7</div>
-                        <div className="flex-col justify-start items-start gap-[9px] inline-flex">
-                            <div className="justify-start items-start gap-1.5 inline-flex">
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                <div className="w-full flex items-start xs_flex-col lg_flex-row gap-[30px]">
+                    <div className="w-full xs_max-w-full lg_max-w-[365px] border border-[#E6E9EA] rounded-md p-6">
+                        <div className="flex justify-between items-start mb-1">
+                            <div className="flex flex-col">
+                                <div className="flex items-center gap-1 mb-1">
+                                    {[...Array(5)].map((_, i) => (
+                                        <div key={i} className="w-4 h-4">
+                                            <Star1 
+                                                color={i < Math.round(averageRating) ? '#F7C317' : '#D9D9D9'} 
+                                                size={16} 
+                                                className={i < Math.round(averageRating) ? 'fill-[#F7C317]' : ''}
+                                            />
+                                        </div>
+                                    ))}
+                                    <span className="ml-1 font-medium text-sm">{averageRating} out of 5</span>
                                 </div>
                             </div>
-                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
+                        </div>
+                        <div className="mt-4">
+                            {[5, 4, 3, 2, 1].map(star => {
+                                const count = starCounts[star] || 0;
+                                const percentage = totalReviews ? Math.round((count / totalReviews) * 100) : 0;
+                                return (
+                                    <div key={star} className="flex items-center mb-2">
+                                        <div className="flex items-center mr-2">
+                                            <Star1 color="#F7C317" size={14} className="fill-[#F7C317]" />
+                                            <span className="text-sm ml-1">{star}</span>
+                                        </div>
+                                        <div className="relative h-[8px] flex-1 bg-[#E4EBF5] rounded-sm mr-2">
+                                            <div 
+                                                className="absolute h-[8px] bg-[#FF7A00] rounded-sm" 
+                                                style={{width: `${percentage}%`}}
+                                            />
+                                        </div>
+                                        <span className="text-sm text-right">{percentage}%</span>
+                                    </div>
+                                );
+                            })}
+                        </div>
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center justify-between mb-6">
+                            <div className="flex items-center">
+                                <span className="font-medium mr-3">Filter By</span>
+                                <select
+                                    className="border border-[#E6E9EA] rounded px-3 py-2 text-sm"
+                                    value={filter}
+                                    onChange={e => setFilter(e.target.value)}
+                                >
+                                    <option value="All">All Stars</option>
+                                    <option value="5">5 Stars</option>
+                                    <option value="4">4 Stars</option>
+                                    <option value="3">3 Stars</option>
+                                    <option value="2">2 Stars</option>
+                                    <option value="1">1 Stars</option>
+                                </select>
+                            </div>
+                            <Button
+                                priority='low'
+                                classes={{
+                                    content: 'normal-case font-normal text-base'
+                                }}
+                                onClick={() => setOpen(true)}
+                            >
+                                Write a review
+                            </Button>
+                        </div>
+                        {/* Reviews List */}
+                        <div className='space-y-4 mb-6'>
+                            <Review reviews={{
+                                ...dummyReviews,
+                                items: filteredReviews
+                            }} />
                         </div>
                     </div>
-                    <Button
-                        priority='low'
-                        classes={{
-                            content: 'normal-case font-normal text-base'
-                        }}
-                        onClick={() => setOpen(true)}
-                    >
-                        Write a review
-                    </Button>
-                </div>
-                <div className='review-list flex flex-col gap-y-4'>
-                    <Review />
-                    <Review />
-                    <Review />
-                    <Review />
-                    <Review />
                 </div>
             </div>
         </>

package/src/talons/FilterTop/filterTop.gql.js

@@ -7,6 +7,7 @@ export const GET_CUSTOM_FILTERS = gql`
             filters {
                 label
                 count
+                show_all_btn
                 attribute_code
                 options {
                     label