@riosst100/pwa-marketplace 2.8.8 → 2.9.0

package/src/overwrites/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -13,10 +13,59 @@ import { setCheckoutState} from '@magento/peregrine/lib/store/actions/cart';
 
 import mergeOperations from '@magento/peregrine/lib/util/shallowMerge';
 
-import DEFAULT_OPERATIONS from '@magento/peregrine/lib/talons/CheckoutPage/checkoutPage.gql.js';
+import DEFAULT_OPERATIONS from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/checkoutPage.extended.gql.js';
 
 import CheckoutError from '@magento/peregrine/lib/talons/CheckoutPage/CheckoutError';
 import { useGoogleReCaptcha } from '@magento/peregrine/lib/hooks/useGoogleReCaptcha';
+import { XENDIT_CREATE_INVOICE } from '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/CheckoutPage/xendit.gql';
+
+// Lightweight UI helper: show a full-screen overlay when redirecting to Xendit
+const XENDIT_OVERLAY_ID = 'xendit-redirect-overlay';
+function showXenditRedirectOverlay() {
+    if (typeof document === 'undefined') return;
+    if (document.getElementById(XENDIT_OVERLAY_ID)) return;
+
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    style.textContent = `@keyframes xendit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;
+    document.head.appendChild(style);
+
+    const overlay = document.createElement('div');
+    overlay.id = XENDIT_OVERLAY_ID;
+    overlay.setAttribute('data-cy', 'xendit-redirect-overlay');
+    overlay.style.cssText = [
+        'position:fixed',
+        'inset:0',
+        'background:rgba(0,0,0,0.85)',
+        'color:#fff',
+        'display:flex',
+        'flex-direction:column',
+        'align-items:center',
+        'justify-content:center',
+        'z-index:2147483647',
+        'text-align:center',
+        'padding:24px'
+    ].join(';');
+
+    const spinner = document.createElement('div');
+    spinner.style.cssText = [
+        'width:48px',
+        'height:48px',
+        'border:4px solid #ffffff',
+        'border-top-color:transparent',
+        'border-radius:50%',
+        'animation:xendit-spin 1s linear infinite',
+        'margin-bottom:16px'
+    ].join(';');
+
+    const text = document.createElement('div');
+    text.textContent = 'Redirecting you to Xendit payment page…';
+    text.style.cssText = 'font-size:16px; opacity:0.33;';
+
+    overlay.appendChild(spinner);
+    overlay.appendChild(text);
+    document.body.appendChild(overlay);
+}
 
 export const CHECKOUT_STEP = {
     SHIPPING_ADDRESS: 1,
@@ -115,6 +164,12 @@ export const useCheckoutPage = (props = {}) => {
         }
     ] = useMutation(placeOrderMutation);
 
+    // Xendit: create invoice after successful placeOrder
+    const [
+        xenditCreateInvoice,
+        { data: xenditInvoiceData, loading: xenditInvoiceLoading, error: xenditInvoiceError }
+    ] = useMutation(XENDIT_CREATE_INVOICE);
+
     const [
         getOrderDetails,
         { data: orderDetailsData, loading: orderDetailsLoading }
@@ -237,6 +292,9 @@ export const useCheckoutPage = (props = {}) => {
     }, [checkoutStep]);
 
     const [isPlacingOrder, setIsPlacingOrder] = useState(false);
+    // When true, we intentionally hide the OrderConfirmationPage (orderNumber)
+    // to allow external payment (Xendit) to complete first.
+    const [suppressOrderConfirmation, setSuppressOrderConfirmation] = useState(false);
 
     const handlePlaceOrder = useCallback(async () => {
         // Fetch order details and then use an effect to actually place the
@@ -273,20 +331,68 @@ export const useCheckoutPage = (props = {}) => {
         async function placeOrderAndCleanup() {
             try {
                 const reCaptchaData = await generateReCaptchaData();
-
-                await placeOrder({
+                // Execute placeOrder and get the order number directly from the response
+                const placeOrderResult = await placeOrder({
                     variables: {
                         cartId
                     },
                     ...reCaptchaData
                 });
-                // Cleanup stale cart and customer info.
-                await removeCart();
-                await apolloClient.clearCacheData(apolloClient, 'cart');
 
-                await createCart({
-                    fetchCartId
-                });
+                const orderNumber =
+                    placeOrderResult?.data?.placeOrder?.order?.order_number;
+                // If payment is Xendit, create invoice and redirect BEFORE cleaning up cart
+                const selectedPayment = orderDetailsData?.cart?.selected_payment_method;
+                const paymentCode = selectedPayment?.code;
+                const paymentTitle = selectedPayment?.title;
+                const isXendit =
+                    (paymentCode && paymentCode.toLowerCase() === 'xendit') ||
+                    (paymentTitle && paymentTitle.toLowerCase().includes('xendit'));
+                if (isXendit && orderNumber) {
+                    try {
+                        // Prevent success page from rendering; we'll redirect to Xendit first
+                        setSuppressOrderConfirmation(true);
+                        const res = await xenditCreateInvoice({
+                            variables: { orderId: orderNumber }
+                        });
+                        const payload = res?.data?.xenditCreateInvoice;
+                        const url = payload?.invoice_url;
+                        if (url) {
+                            // Show overlay to inform user before redirecting
+                            showXenditRedirectOverlay();
+                            // Perform cart cleanup before redirecting away
+                            try {
+                                await removeCart();
+                                await apolloClient.clearCacheData(apolloClient, 'cart');
+                                await createCart({ fetchCartId });
+                            } catch (cleanupErr) {
+                                // eslint-disable-next-line no-console
+                                console.warn('Cleanup before Xendit redirect failed', cleanupErr);
+                            }
+                            // Give the browser a brief moment to paint the overlay
+                            setTimeout(() => {
+                                // Redirect in the SAME TAB per requested flow
+                                window.location.assign(url);
+                            }, 2000);
+                        } else {
+                            // eslint-disable-next-line no-console
+                            console.warn(
+                                'Xendit: invoice_url missing in response'
+                            );
+                        }
+                    } catch (err) {
+                        // eslint-disable-next-line no-console
+                        console.error(
+                            'Xendit: failed to create invoice',
+                            err
+                        );
+                    }
+                } else {
+                    // Non-Xendit: proceed with normal cleanup
+                    await removeCart();
+                    await apolloClient.clearCacheData(apolloClient, 'cart');
+                    await createCart({ fetchCartId });
+                }
             } catch (err) {
                 console.error(
                     'An error occurred during when placing the order',
@@ -365,7 +471,11 @@ export const useCheckoutPage = (props = {}) => {
                     type: 'CHECKOUT_PLACE_ORDER_BUTTON_CLICKED',
                     payload: eventPayload
                 });
-            } else if (placeOrderData && orderDetailsData?.cart.id === cartId) {
+            } else if (
+                placeOrderData &&
+                orderDetailsData?.cart.id === cartId &&
+                !suppressOrderConfirmation
+            ) {
                 dispatch({
                     type: 'ORDER_CONFIRMATION_PAGE_VIEW',
                     payload: {
@@ -386,6 +496,7 @@ export const useCheckoutPage = (props = {}) => {
         dispatch,
         placeOrderData,
         isPlacingOrder,
+        suppressOrderConfirmation,
         reviewOrderButtonClicked
     ]);
 
@@ -408,9 +519,9 @@ export const useCheckoutPage = (props = {}) => {
         isUpdating,
         orderDetailsData,
         orderDetailsLoading,
-        orderNumber:
-            (placeOrderData && placeOrderData.placeOrder.order.order_number) ||
-            null,
+        orderNumber: suppressOrderConfirmation
+            ? null
+            : (placeOrderData && placeOrderData.placeOrder.order.order_number) || null,
         placeOrderLoading,
         placeOrderButtonClicked,
         setCheckoutStep,

package/src/overwrites/peregrine/lib/talons/CheckoutPage/xendit.gql.js

@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+
+export const XENDIT_CREATE_INVOICE = gql`
+    mutation xenditCreateInvoice($orderId: String!) {
+        xenditCreateInvoice(input: { order_id: $orderId }) {
+            invoice_url
+            mode
+            xendit_qrcode_external_id
+        }
+    }
+`;
+
+export default {
+    XENDIT_CREATE_INVOICE
+};

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/Checkbox/checkbox.module.css

@@ -10,6 +10,8 @@
     composes: text-colorDefault from global;
     grid-template-areas: 'input label';
     grid-template-columns: min-content 1fr;
+    margin-left: 5px;
+    margin-top: 5px;
 }
 
 .input {

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

@@ -23,7 +23,10 @@
 
     composes: lg_col-end-span1 from global;
 }
-
+.cardTitle{
+    font-weight: 500;
+    font-size: 16px;
+}
 .country,
 .street1,
 .street2,
@@ -33,4 +36,9 @@
 .postal_code,
 .phone_number {
     composes: col-end-span2 from global;
+    margin-left: 5px;
 }
+.address_check{
+    margin-top: 5px;
+    margin-left: 5px;
+}

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/itemsReview.module.css

@@ -1,7 +1,8 @@
 .items_review_container {
-    composes: border-2 from global;
+    composes: border-1 from global;
     composes: border-solid from global;
-    composes: border-subtle from global;
+    /* composes: border-subtle from global; */
+    border: 1px solid #E6E9EA;
     composes: rounded-md from global;
     min-height: 2rem;
 }

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/OrderConfirmationPage/orderConfirmationPage.js

@@ -5,6 +5,7 @@ import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/Checkout
 
 import { useStyle } from '@magento/venia-ui/lib/classify';
 import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import { Link } from 'react-router-dom';
 import CreateAccount from './createAccount';
 import ItemsReview from '../ItemsReview';
 import defaultClasses from './orderConfirmationPage.module.css';
@@ -63,6 +64,8 @@ const OrderConfirmationPage = props => {
     const nameString = `${firstname} ${lastname}`;
     const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
 
+    // copy button removed per request
+
     return (
         <div className={classes.root} data-cy="OrderConfirmationPage-root">
             <StoreTitle>
@@ -72,52 +75,73 @@ const OrderConfirmationPage = props => {
                 })}
             </StoreTitle>
             <div className={classes.mainContainer}>
-                <h2
-                    data-cy="OrderConfirmationPage-header"
-                    className={classes.heading}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.thankYou'}
-                        defaultMessage={'Thank you for your order!'}
-                    />
-                </h2>
-                <div
-                    data-cy="OrderConfirmationPage-orderNumber"
-                    className={classes.orderNumber}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.orderNumber'}
-                        defaultMessage={'Order Number: {orderNumber}'}
-                        values={{ orderNumber }}
-                    />
-                </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingInfoHeading"
-                    className={classes.shippingInfoHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingInformation'}
-                        defaultMessage={'Shipping Information'}
-                    />
-                </div>
-                <div className={classes.shippingInfo}>
-                    <span className={classes.email}>{email}</span>
-                    <span className={classes.name}>{nameString}</span>
-                    {streetRows}
-                    <span className={classes.addressAdditional}>
-                        {additionalAddressString}
-                    </span>
+                <div className={classes.successHeader}>
+                    <div className={classes.iconCheck} aria-hidden="true">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="2" opacity="0.4" />
+                            <path d="M7 12.5L10.2 16L17 8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
+                        </svg>
+                    </div>
+                    <h2
+                        data-cy="OrderConfirmationPage-header"
+                        className={classes.heading}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.thankYou'}
+                            defaultMessage={'Thank you for your order!'}
+                        />
+                    </h2>
+                    <div
+                        data-cy="OrderConfirmationPage-orderNumber"
+                        className={classes.orderNumberRow}
+                    >
+                        <div className={classes.orderNumberText}>
+                            <FormattedMessage
+                                id={'checkoutPage.orderNumber'}
+                                defaultMessage={'Order Number: {orderNumber}'}
+                                values={{ orderNumber }}
+                            />
+                        </div>
+                    </div>
+                    <div className={classes.actions}>
+                        <Link to="/" className={classes.primaryAction} data-cy="OrderConfirmationPage-continueShopping">
+                            <FormattedMessage id={'checkoutPage.continueShopping'} defaultMessage={'Continue Shopping'} />
+                        </Link>
+                    </div>
                 </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingMethodHeading"
-                    className={classes.shippingMethodHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingMethod'}
-                        defaultMessage={'Shipping Method'}
-                    />
+                <div className={classes.detailsGrid}>
+                    <div className={classes.card}>
+                        <div
+                            data-cy="OrderConfirmationPage-shippingInfoHeading"
+                            className={classes.cardHeading}
+                        >
+                            <FormattedMessage
+                                id={'global.shippingInformation'}
+                                defaultMessage={'Shipping Information'}
+                            />
+                        </div>
+                        <div className={classes.shippingInfo}>
+                            <span className={classes.email}>{email}</span>
+                            <span className={classes.name}>{nameString}</span>
+                            {streetRows}
+                            <span className={classes.addressAdditional}>
+                                {additionalAddressString}
+                            </span>
+                        </div>
+                    </div>
+                    <div className={classes.card}>
+                        <div
+                            data-cy="OrderConfirmationPage-shippingMethodHeading"
+                            className={classes.cardHeading}
+                        >
+                            <FormattedMessage
+                                id={'global.shippingMethod'}
+                                defaultMessage={'Shipping Method'}
+                            />
+                        </div>
+                        <div className={classes.shippingMethod}>{shippingMethod}</div>
+                    </div>
                 </div>
-                <div className={classes.shippingMethod}>{shippingMethod}</div>
                 <div className={classes.itemsReview}>
                     <ItemsReview data={data} />
                 </div>

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

@@ -1,4 +1,3 @@
-/* prettier-ignore */
 .root {
     composes: gap-xs from global;
     composes: grid from global;
@@ -9,17 +8,17 @@
     composes: px-sm from global;
     composes: py-sm from global;
 
-    composes: lg_gap-md from global;
+    /* composes: lg_gap-md from global; */
     /* TODO @TW: review (B7) */
-    composes: lg_grid-cols-[2fr,1fr] from global;
+    /* composes: lg_grid-cols-[2fr,1fr] from global;
     composes: lg_px-lg from global;
-    composes: lg_py-md from global;
+    composes: lg_py-md from global; */
 }
 
 .mainContainer {
     composes: col-start-1 from global;
     composes: grid from global;
-    composes: gap-y-xs from global;
+    composes: gap-y-sm from global;
 }
 
 .sidebarContainer {
@@ -44,6 +43,72 @@
     composes: header;
 }
 
+.successHeader {
+    composes: grid from global;
+    composes: gap-y-xs from global;
+    composes: rounded-md from global;
+    composes: border from global;
+    border-color: #E6E9EA;
+    composes: bg-surface from global;
+    composes: p-md from global;
+    composes: text-center from global;
+}
+
+.iconCheck {
+    composes: mx-auto from global;
+    composes: h-14 from global;
+    composes: w-14 from global;
+    color: #f76b1c;
+}
+
+.orderNumberRow {
+    composes: flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: gap-x-xs from global;
+}
+
+.orderNumberText {
+    composes: header;
+}
+
+.copyBtn {
+    composes: text-sm from global;
+    composes: px-sm from global;
+    composes: py-2xs from global;
+    composes: rounded from global;
+    composes: border from global;
+    composes: border-subtle from global;
+    composes: hover_bg-subtle from global;
+}
+
+.actions {
+    composes: flex from global;
+    composes: gap-x-xs from global;
+    composes: justify-center from global;
+}
+
+.primaryAction {
+    composes: inline-flex from global;
+    composes: items-center from global;
+    composes: justify-center from global;
+    composes: px-lg from global;
+    composes: py-xs from global;
+    composes: rounded-full from global;
+    composes: font-semibold from global;
+    color: #fff;
+    background: #f76b1c;
+    border: 1px solid #f76b1c;
+}
+
+.primaryAction:hover {
+    color: #fff;
+    background: #f26313;
+    border: 1px solid #f26313;
+}
+
+.secondaryAction { display: none; }
+
 .shippingInfoHeading {
     composes: header;
 }
@@ -68,3 +133,35 @@
 .additionalText {
     composes: text;
 }
+
+.detailsGrid {
+    composes: grid from global;
+    composes: gap-sm from global;
+    composes: md_grid-cols-2 from global;
+}
+
+.card {
+    composes: rounded-md from global;
+    composes: border from global;
+    border-color: #E6E9EA;
+    composes: bg-surface from global;
+    composes: p-md from global;
+}
+
+.cardHeading {
+    composes: header;
+    composes: mb-2xs from global;
+}
+
+.itemsReview {
+    composes: rounded-md from global;
+    composes: border from global;
+    border-color: #E6E9EA;
+    composes: bg-surface from global;
+    composes: p-md from global;
+}
+
+.heading {
+    composes: font-bold from global;
+    composes: text-2xl from global;
+}

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/paymentInformation.module.css

@@ -20,4 +20,10 @@
     composes: border-0 from global;
 
     composes: lg_border from global;
+}
+
+.cardTitle {
+    composes: font-medium from global;
+    composes: text-[16px] from global;
+    composes: ml-[5px] from global;
 }