@riosst100/pwa-marketplace 2.8.9 → 2.9.0

package/i18n/en_US.json

@@ -98,7 +98,7 @@
     "checkoutPage.reviewOrder": "Review Order",
     "checkoutPage.setAPasswordAndSave": "Set a password and save your information for next time in one easy step!",
     "checkoutPage.shippingMethodStep": "Shipping Method",
-    "checkoutPage.showAllItems": "SHOW ALL ITEMS",
+    "checkoutPage.showAllItems": "Show All Items",
     "checkoutPage.signInButton": "Sign In",
     "checkoutPage.signInLabel": "Sign in for Express Checkout",
     "checkoutPage.step0": "Loading Payment",

package/i18n/id_ID.json

@@ -99,7 +99,7 @@
     "checkoutPage.reviewOrder": "Review Order",
     "checkoutPage.setAPasswordAndSave": "Set a password and save your information for next time in one easy step!",
     "checkoutPage.shippingMethodStep": "2. Shipping Method",
-    "checkoutPage.showAllItems": "SHOW ALL ITEMS",
+    "checkoutPage.showAllItems": "Show All Items",
     "checkoutPage.signInButton": "Sign In",
     "checkoutPage.signInLabel": "Sign in for Express Checkout",
     "checkoutPage.step0": "Loading Payment",

package/package.json

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

package/src/components/FilterTop/FilterBlockList/filterBlockList.js

@@ -15,6 +15,7 @@ const FilterBlockList = props => {
         originalFilterState,
         search,
         setFilterBy,
+        customFiltersData,
         filterBy
     } = props;
 
@@ -23,6 +24,7 @@ const FilterBlockList = props => {
         return (
             <FilterTopItemGroup
                 setFilterBy={setFilterBy}
+                customFiltersData={customFiltersData}
                 filterBy={filterBy}
                 filterApi={filterApi}
                 filterState={filterState}

package/src/components/FilterTop/FilterBlockList/filterTopItemGroup.js

@@ -7,7 +7,7 @@ import defaultClasses from './filterTopItemGroup.module.css';
 import CurrentTopFilter from '@riosst100/pwa-marketplace/src/components/FilterTop/CurrentTopFilters/currentTopFilter';
 
 const FilterTopItemGroup = props => {
-    const { setFilterBy, filterBy, filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
+    const { customFiltersData, setFilterBy, filterBy, filterApi, filterState, group, items, onApply, labels, filterNames, originalFilterState, search } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
 
@@ -83,11 +83,29 @@ const FilterTopItemGroup = props => {
         }
     }, [field, fieldApi, fieldState.value, fieldValue]);
 
+    // console.log(customFiltersData.filters)
+                    
+
+    const customFilterData = useMemo(() => {
+        const filtered = customFiltersData.filters.filter(item => item.attribute_code === group);
+        // console.log('filtered ' + group,filtered);
+        if (filtered) {
+            // console.log('filtered ' + group,filtered);
+            // console.log('show_all_btn 2 ' + group,isShowAllBtn);
+            return filtered[0];
+        }
+
+        return null;
+    }, [customFiltersData]);
+
     return (
         <div className={classes.root}>
             {radioItems}
             {filterElements && filterElements.length > 10 ? <span className={classes.item}><b>More Item</b></span> : ''}
-            {filterElements && filterElements.length ? filterElements : group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "trains" && group != "franchise" && group != "brands" && group != "bricks_categories" && group != "category" && group != "sc_sports_categories" && group != "card_game" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''}
+
+            {customFilterData && customFilterData.show_all_btn ? <span className={classes.item}><b>All</b></span> : ''}
+
+            {/* {filterElements && filterElements.length ? filterElements : group && group != "character" && group != "product_series" && group != "scale" && group != "product_line" && group != "trains" && group != "franchise" && group != "brands" && group != "bricks_categories" && group != "category" && group != "sc_sports_categories" && group != "card_game" && group != "filterby" && group != "shopby" && group != "cat_id" ? (<span className={classes.item}><b>All</b></span>) : ''} */}
         </div>
     );
 };

package/src/components/FilterTop/filterTop.js

@@ -34,7 +34,8 @@ const FilterTop = props => {
         filterState,
         handleApply,
         handleReset,
-        customFilters
+        customFilters,
+        customFiltersData
     } = talonProps;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -116,6 +117,7 @@ const FilterTop = props => {
                             filterBy={filterBy}
                             filterNames={filterNames}
                             filterApi={filterApi}
+                            customFiltersData={customFiltersData}
                             filterState={blockState}
                             originalFilterState={filterState}
                             filterFrontendInput={frontendInput}
@@ -137,6 +139,7 @@ const FilterTop = props => {
             filterState,
             filterCountToOpen,
             customFilters,
+            customFiltersData,
             handleApplyFilter
         ]
     );

package/src/components/FilterTop/filterTopBlock.js

@@ -23,6 +23,7 @@ const FilterTopBlock = props => {
         name,
         onApply,
         filterNames,
+        customFiltersData,
         initialOpen,
         originalFilterState,
         search,
@@ -42,6 +43,7 @@ const FilterTopBlock = props => {
             setFilterBy={setFilterBy}
             filterBy={filterBy}
             filterApi={filterApi}
+            customFiltersData={customFiltersData}
             filterState={filterState}
             originalFilterState={originalFilterState}
             name={name}

package/src/overwrites/peregrine/lib/talons/FilterSidebar/useFilterSidebar.js

@@ -36,16 +36,18 @@ export const useFilterSidebar = props => {
 
     const { data: introspectionData } = useQuery(getFilterInputsQuery);
 
-    const {
-        called: subFilterItemsCalled,
-        data: subFilterItems,
-        loading: subFilterItemsLoading,
-        error: subFilterItemsError
-    } = useQuery(getSubFiltersQuery,
-    {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
+    // const {
+    //     called: subFilterItemsCalled,
+    //     data: subFilterItems,
+    //     loading: subFilterItemsLoading,
+    //     error: subFilterItemsError
+    // } = useQuery(getSubFiltersQuery,
+    // {
+    //     fetchPolicy: 'cache-and-network',
+    //     nextFetchPolicy: 'cache-first'
+    // });
+
+    const subFilterItems = [];
 
     const attributeCodes = useMemo(
         () => filters.map(({ attribute_code }) => attribute_code),

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

@@ -25,7 +25,7 @@ const Item = props => {
             <Image
                 alt={product.name}
                 classes={{ root: classes.thumbnail }}
-                width={100}
+                width={50}
                 resource={
                     configurableThumbnailSource === 'itself' &&
                         configured_variant

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

@@ -30,9 +30,9 @@
 }
 
 .thumbnail {
-    composes: border from global;
+    /* composes: border from global;
     composes: border-solid from global;
-    composes: border-subtle from global;
+    composes: border-subtle from global; */
     grid-column: 1 / span 1;
     grid-row: 1 / span 3;
 }
@@ -41,6 +41,11 @@
     composes: font-medium from global;
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-word;
 }
 
 .quantity {

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

@@ -21,7 +21,7 @@ const ShowAllButton = props => {
                 <span className={classes.text}>
                     <FormattedMessage
                         id={'checkoutPage.showAllItems'}
-                        defaultMessage={'SHOW ALL ITEMS'}
+                        defaultMessage={'Show All Items'}
                     />
                 </span>
                 <Icon

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

@@ -1,7 +1,8 @@
 .root {
     composes: border-t-2 from global;
     composes: border-solid from global;
-    composes: border-subtle from global;
+    /* composes: border-subtle from global; */
+    border-color: #F2F2F2;
     composes: px-0 from global;
     composes: py-3 from global;
     composes: w-full from global;
@@ -19,10 +20,10 @@
     composes: font-medium from global;
     composes: text-brand-dark from global;
     composes: text-sm from global;
+    text-transform: capitalize;
 }
 
 .arrowDown {
     composes: root from '@magento/venia-ui/lib/components/Icon/icon.module.css';
-
-    --stroke: rgb(var(--venia-brand-color-1-700));
+    --stroke: #f76b1c;
 }

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

@@ -55,9 +55,8 @@ const PaymentInformation = props => {
         );
     }
 
-    const paymentInformation = doneEditing ? (
-        <Summary onEdit={showEditModal} />
-    ) : (
+    // Always show the full payment methods UI so users can switch/edit easily even after Review.
+    const paymentInformation = (
         <Form>
             <PaymentMethods
                 onPaymentError={handlePaymentError}
@@ -68,11 +67,8 @@ const PaymentInformation = props => {
         </Form>
     );
 
-    const editModal = doneEditing ? (
-        <Suspense fallback={null}>
-            <EditModal onClose={hideEditModal} isOpen={isEditModalActive} />
-        </Suspense>
-    ) : null;
+    // Do not render the edit modal; changes happen inline.
+    const editModal = null;
 
     return (
         <div className={classes.root} data-cy="PaymentInformation-root">

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,6 +39,57 @@ 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;
     }
@@ -93,7 +150,7 @@ const PaymentMethods = props => {
                             label: classes.radio_label
                         }}
                         checked={isSelected}
-                        onChange={handlePaymentMethodSelection}
+                        onChange={handleChangeAndSetBilling}
                     />
                     {renderedComponent}
                 </div>

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) {

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

package/src/talons/FilterTop/useFilterTop.js

@@ -307,6 +307,7 @@ export const useFilterTop = props => {
         handleReset,
         isApplying,
         isOpen,
-        customFilters
+        customFilters,
+        customFiltersData
     };
 };