@riosst100/pwa-marketplace 2.8.7 → 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/AccountInformationPage/DeleteAccount.js

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Button from '@magento/venia-ui/lib/components/Button';
+import { Message } from '@magento/venia-ui/lib/components/Field';
+
+// Dummy mutation placeholder
+const useDeleteAccount = () => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [success, setSuccess] = useState(false);
+
+    const deleteAccount = async () => {
+        setLoading(true);
+        setError(null);
+        setSuccess(false);
+        // Simulate API call
+        setTimeout(() => {
+            setLoading(false);
+            setSuccess(true);
+        }, 1500);
+    };
+
+    return {
+        loading,
+        error,
+        success,
+        deleteAccount
+    };
+};
+
+const DeleteAccount = () => {
+    const [confirm, setConfirm] = useState(false);
+    const [agreement, setAgreement] = useState(false);
+    const { loading, error, success, deleteAccount } = useDeleteAccount();
+    const handleChange = (event) => {
+        setAgreement(event.target.checked);
+    }
+    if (success) {
+        return (
+            <Message type="success">
+                <FormattedMessage
+                    id="deleteAccount.success"
+                    defaultMessage="Your account has been deleted."
+                />
+            </Message>
+        );
+    }
+
+    return (
+        <div style={{ marginTop: 32, border: '1px solid #f87171', padding: 24, borderRadius: 8, background: '#fef2f2' }}>
+            <div style={{ color: '#b91c1c', fontWeight: 600, marginBottom: 8 }}>
+                <FormattedMessage
+                    id="deleteAccount.title"
+                    defaultMessage="Delete Account"
+                />
+            </div>
+            <div style={{ color: '#b91c1c', marginBottom: 16 }}>
+                <FormattedMessage
+                    id="deleteAccount.warning"
+                    defaultMessage="Warning: This action cannot be undone. All your data will be permanently deleted."
+                />
+            </div>
+            {error && (
+                <Message type="error">
+                    {error}
+                </Message>
+            )}
+            <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}>
+                <input
+                    type="checkbox"
+                    id="agreement"
+                    checked={agreement}
+                    onChange={handleChange}
+                    style={{ marginRight: 8 }}
+                />
+                <label htmlFor="agreement" style={{ fontWeight: 'normal', fontSize: 14 }}>
+                    <FormattedMessage
+                        id="deleteAccount.agreementLabel"
+                        defaultMessage="I understand and agree to delete my account permanently."
+                    />
+                </label>
+            </div>
+            {confirm ? (
+                <div>
+                    <div style={{ marginBottom: 16 }}>
+                        <FormattedMessage
+                            id="deleteAccount.confirm"
+                            defaultMessage="Are you sure you want to delete your account? This action is irreversible."
+                        />
+                    </div>
+                    <Button
+                        priority="high"
+                        disabled={loading || !agreement}
+                        onClick={deleteAccount}
+                        style={{ marginRight: 8, textTransform: 'none' }}
+                    >
+                        <FormattedMessage
+                            id="deleteAccount.confirmButton"
+                            defaultMessage="Yes, Delete My Account"
+                        />
+                    </Button>
+                    <Button
+                        priority="normal"
+                        disabled={loading}
+                        onClick={() => setConfirm(false)}
+                        style={{ textTransform: 'none' }}
+                    >
+                        <FormattedMessage
+                            id="deleteAccount.cancelButton"
+                            defaultMessage="Cancel"
+                        />
+                    </Button>
+                </div>
+            ) : (
+                <Button
+                    priority="high"
+                    disabled={loading || !agreement}
+                    onClick={() => setConfirm(true)}
+                    style={{ textTransform: 'none' }}
+                >
+                    <FormattedMessage
+                        id="deleteAccount.deleteButton"
+                        defaultMessage="Delete My Account"
+                    />
+                </Button>
+            )}
+        </div>
+    );
+};
+
+export default DeleteAccount;

package/src/overwrites/venia-ui/lib/components/AccountInformationPage/accountInformationPage.js

@@ -11,6 +11,8 @@ import { fullPageLoadingIndicator } from '@magento/venia-ui/lib/components/Loadi
 import defaultClasses from './accountInformationPage.module.css';
 import AccountInformationPageOperations from './accountInformationPage.gql.js';
 
+import DeleteAccount from './DeleteAccount';
+
 const EditModal = React.lazy(() => import('./editModal'));
 
 const AccountInformationPage = props => {
@@ -116,6 +118,7 @@ const AccountInformationPage = props => {
                         setShouldShowNewPassword={setShouldShowNewPassword}
                     />
                 </Suspense>
+                <DeleteAccount />
             </Fragment>
         );
     }

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;
+}