@sonic-equipment/ui 257.0.0 → 258.0.1

package/dist/index.js

@@ -237,7 +237,7 @@ export { CheckoutPageSectionHeader } from './pages/checkout/layouts/checkout-pag
 export { CheckoutPageSectionLink } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.js';
 export { OrderConfirmationPage } from './pages/checkout/order-confirmation-page/order-confirmation-page.js';
 export { OrderConfirmationPageContent } from './pages/checkout/order-confirmation-page/order-confirmation-page-content.js';
-export { AdyenPayment } from './pages/checkout/payment-page/components/adyen-payment.js';
+export { AdyenPayment, getAdyenQueryParams } from './pages/checkout/payment-page/components/adyen-payment.js';
 export { Payment } from './pages/checkout/payment-page/components/payment.js';
 export { useGetAdyenRedirectResult } from './pages/checkout/payment-page/hooks/use-get-adyen-redirect-result.js';
 export { useHasReturnedFromAdyen } from './pages/checkout/payment-page/hooks/use-has-returned-from-adyen.js';

package/dist/pages/checkout/payment-page/components/adyen-payment.d.ts

@@ -18,4 +18,13 @@ interface AdyenPaymentProps {
     returnUrl: string;
 }
 export declare function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, dropinRef, environment, isDisabled, onComplete, onError, orderAmount, returnUrl, }: AdyenPaymentProps): import("react/jsx-runtime").JSX.Element;
+export declare function getAdyenQueryParams(): {
+    amount?: undefined;
+    customerId?: undefined;
+    redirectResult?: undefined;
+} | {
+    amount: string | undefined;
+    customerId: string | undefined;
+    redirectResult: string | undefined;
+};
 export {};

package/dist/pages/checkout/payment-page/components/adyen-payment.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 import qs from 'query-string';
 import { useCultureCode } from '../../../../intl/use-culture-code.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
-import { logger, consoleLogger } from '../../../../logging/logger.js';
+import { logger } from '../../../../logging/logger.js';
 import { Message } from '../../../../message/message.js';
 import { useCreateAdyenSession } from '../../../../shared/api/storefront/hooks/payment/use-create-adyen-session.js';
 import { useFetchAdyenConfig } from '../../../../shared/api/storefront/hooks/payment/use-fetch-adyen-config.js';
@@ -98,7 +98,6 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
             },
             showPayButton: false,
         };
-        let removeParamsTimeout = null;
         (async function loadAdyen() {
             if (!dropinDivRef.current)
                 return;
@@ -106,19 +105,11 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
             const dropIn = checkout.create('dropin');
             if (redirectResult) {
                 checkout.submitDetails({ details: { redirectResult } });
-                removeParamsTimeout = setTimeout(removeAdyenQueryParamsFromUrl, 0);
             }
-            // Remove Adyen query strings params from ref
-            // queryStringParams.current = {}
             if (dropinRef.current)
                 dropinRef.current.unmount();
             dropinRef.current = dropIn.mount(dropinDivRef.current);
         })();
-        return () => {
-            if (removeParamsTimeout) {
-                clearTimeout(removeParamsTimeout);
-            }
-        };
     }, [
         customerId,
         adyenSettings,
@@ -141,15 +132,13 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
         logger.error('Adyen Payment Error:', error);
         return (jsx(Message, { type: "danger", children: t('All payment methods are unavailable at this time. Please contact customer support.') }));
     }
-    return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading, isDisabled && styles.loading), id: "dropin" }));
+    return (jsx("div", { ref: dropinDivRef, className: clsx(isDisabled && styles.loading), id: "dropin" }));
 }
 function getAdyenQueryParams() {
     if (typeof window === 'undefined')
         return {};
     const params = qs.parse(window.location.search || '');
     const { amount, customerId, redirectResult } = params;
-    // eslint-disable-next-line no-console
-    console.log('adyenQueryParam', { amount, customerId, redirectResult });
     return {
         amount: typeof amount === 'string' ? amount : undefined,
         customerId: typeof customerId === 'string' ? customerId : undefined,
@@ -187,20 +176,6 @@ async function handlePaymentResponse(result, onSubmit, onError) {
         onError(error, result);
     }
 }
-function removeAdyenQueryParamsFromUrl() {
-    if (typeof window === 'undefined')
-        return;
-    try {
-        const url = new URL(window.location.href);
-        url.searchParams.delete('amount');
-        url.searchParams.delete('customerId');
-        url.searchParams.delete('redirectResult');
-        window.history.replaceState(null, '', url.toString());
-    }
-    catch (error) {
-        consoleLogger.error(error);
-    }
-}
 function handleRedirectPaymentAction(adyenPaymentResult) {
     if (typeof window === 'undefined' || typeof document === 'undefined')
         return;
@@ -223,4 +198,4 @@ function handleRedirectPaymentAction(adyenPaymentResult) {
     }
 }
 
-export { AdyenPayment };
+export { AdyenPayment, getAdyenQueryParams };

package/dist/pages/checkout/payment-page/components/payment.js

@@ -22,10 +22,23 @@ import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
 import { getCurrencyCodeBySymbol } from '../../../../shared/model/currency.js';
 import { isProductionEnvironment } from '../../../../shared/utils/environment.js';
 import { BillingAndInvoiceInformation } from '../../components/billing-and-invoice-information.js';
-import { useHasReturnedFromAdyen } from '../hooks/use-has-returned-from-adyen.js';
 import { AdyenPayment } from './adyen-payment.js';
 import styles from './payment.module.css.js';
 
+function removeAdyenQueryParamsFromUrl() {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('amount');
+        url.searchParams.delete('customerId');
+        url.searchParams.delete('redirectResult');
+        window.history.replaceState(null, '', url.toString());
+    }
+    catch (error) {
+        logger.error(error);
+    }
+}
 function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPaymentComplete, onProcessing, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { mutate: patchCart } = usePatchCart();
@@ -33,7 +46,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
     const invalidateCurrentCart = useInvalidateCurrentCart();
     const dropinRef = useRef(null);
-    const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
     const invalidateAdyen = useInvalidateAdyen();
@@ -41,7 +53,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
     const cartRef = useRef(_cart);
     const cart = cartRef.current;
     const hasAtp = atp.length > 1;
-    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp || (hasReturnedFromAdyen && !cart.requestedDeliveryDate));
+    const [asSoonAsPossible, setAsSoonAsPossible] = useState(!hasAtp || (!isProcessing && !cart.requestedDeliveryDate));
     const [deliveryDate, setDeliveryDate] = useState(cart.requestedDeliveryDateDisplay?.toString() || '');
     const [selectedPaymentMethod, setSelectedPaymentMethod] = useState(cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY');
     if (!isCountryCode(_cart.billTo?.country?.abbreviation))
@@ -55,11 +67,6 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         cart.billTo?.id &&
         countryCode;
     const isDisabled = isProcessing;
-    useEffect(() => {
-        if (!hasReturnedFromAdyen)
-            return;
-        onProcessing(true);
-    }, [hasReturnedFromAdyen, onProcessing]);
     useEffect(() => {
         cartRef.current = _cart;
     }, [_cart]);
@@ -163,6 +170,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             }
             finally {
                 onProcessing(false);
+                removeAdyenQueryParamsFromUrl();
             }
         }
         else {
@@ -184,6 +192,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
             }
             finally {
                 onProcessing(false);
+                removeAdyenQueryParamsFromUrl();
             }
         }
     }
@@ -216,6 +225,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
         }
         finally {
             onProcessing(false);
+            removeAdyenQueryParamsFromUrl();
         }
     }, [onPaymentComplete, onPlaceOrderCompleted, onProcessing, placeOrder]);
     const onError = useCallback((error, result) => {

package/dist/pages/checkout/payment-page/payment-page.js

@@ -21,11 +21,17 @@ function PaymentPage({ hasReturnedFromAdyen, }) {
     const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
     const hasAtp = atp !== undefined && atp.length > 1;
     const isLoading = isLoadingCart || isAtpLoading;
-    const [isProcessing, setIsProcessing] = useState(false);
+    const [isProcessing, setIsProcessing] = useState(hasReturnedFromAdyen ?? false);
     const { isNavigating, navigate } = useNavigate();
     const onPaymentComplete = useCallback(({ cartId }) => {
         navigate(`${paths.ORDER_CONFIRMATION}?cartId=${cartId}`);
     }, [navigate, paths]);
+    useEffect(() => {
+        const setProcessingOn = async () => setIsProcessing(true);
+        if (hasReturnedFromAdyen) {
+            setProcessingOn();
+        }
+    }, [hasReturnedFromAdyen, setIsProcessing]);
     useEffect(() => {
         if (isNavigating)
             return;

package/dist/shared/ga/data-layer.js

@@ -1,9 +1,6 @@
-import { logger } from '../../logging/logger.js';
-
 const _dataLayer = [];
 _dataLayer.push = (function (_push) {
     return (...items) => {
-        logger.info('dataLayer.push', items.length === 1 ? items[0] : items);
         return _push(...items);
     };
 })(_dataLayer.push.bind(_dataLayer));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "257.0.0",
+  "version": "258.0.1",
   "type": "module",
   "license": "MIT",
   "engines": {