@riosst100/pwa-marketplace 2.8.8 → 2.8.9

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/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/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/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.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;
 }

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

@@ -37,7 +37,30 @@ const PaymentMethods = props => {
         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 +71,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 +79,7 @@ const PaymentMethods = props => {
                     onPaymentError={onPaymentError}
                     resetShouldSubmit={resetShouldSubmit}
                     shouldSubmit={shouldSubmit}
+                    currentSelectedPaymentMethod={currentSelectedPaymentMethod}
                 />
             ) : null;
 
@@ -62,7 +87,7 @@ const PaymentMethods = props => {
                 <div key={code} className={classes.payment_method}>
                     <Radio
                         id={id}
-                        label={title}
+                        label={displayTitle}
                         value={code}
                         classes={{
                             label: classes.radio_label
@@ -95,6 +120,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;
+}