@sonic-equipment/ui 248.0.2 → 249.0.0

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 } from '../../../../logging/logger.js';
+import { logger, consoleLogger } 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';
@@ -18,7 +18,7 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
     const t = useFormattedMessage();
     const cultureCode = useCultureCode();
     // Get and remove Adyen query string params and keep them in a ref
-    const queryStringParams = useRef(getAndRemoveAdyenQueryParams());
+    const queryStringParams = useRef(getAdyenQueryParams());
     const { amount: adyenAmount, customerId: adyenCustomerId, redirectResult, } = queryStringParams.current;
     const dropinDivRef = useRef(null);
     const { data: adyenSettings } = useFetchAdyenConfig();
@@ -98,19 +98,27 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
             },
             showPayButton: false,
         };
+        let removeParamsTimeout = null;
         (async function loadAdyen() {
             if (!dropinDivRef.current)
                 return;
             const checkout = await AdyenCheckout(options);
             const dropIn = checkout.create('dropin');
-            if (redirectResult)
+            if (redirectResult) {
                 checkout.submitDetails({ details: { redirectResult } });
+                removeParamsTimeout = setTimeout(removeAdyenQueryParamsFromUrl, 0);
+            }
             // Remove Adyen query strings params from ref
-            queryStringParams.current = {};
+            // queryStringParams.current = {}
             if (dropinRef.current)
                 dropinRef.current.unmount();
             dropinRef.current = dropIn.mount(dropinDivRef.current);
         })();
+        return () => {
+            if (removeParamsTimeout) {
+                clearTimeout(removeParamsTimeout);
+            }
+        };
     }, [
         customerId,
         adyenSettings,
@@ -135,21 +143,23 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
     }
     return (jsx("div", { ref: dropinDivRef, className: clsx(Boolean(redirectResult) && styles.loading, isDisabled && styles.loading), id: "dropin" }));
 }
-function getAndRemoveAdyenQueryParams() {
+function getAdyenQueryParams() {
     if (typeof window === 'undefined')
         return {};
     const params = qs.parse(window.location.search || '');
     const { amount, customerId, redirectResult } = params;
-    if (redirectResult) {
-        delete params['redirectResult'];
-        delete params['amount'];
-        delete params['customerId'];
-        history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
-    }
-    return { amount, customerId, redirectResult };
+    // 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,
+        redirectResult: typeof redirectResult === 'string' ? redirectResult : undefined,
+    };
 }
 async function handlePaymentResponse(result, onSubmit, onError) {
     try {
+        // eslint-disable-next-line no-console
+        console.log({ result });
         if (result.action) {
             if (result.action.type === 'redirect') {
                 return handleRedirectPaymentAction(result);
@@ -177,6 +187,20 @@ 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;

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';
 import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
@@ -244,11 +244,11 @@ function Payment({ atp, cart: _cart, form, isProcessing, onError: _onError, onPa
                     MA: t('industry.MA'),
                     OT: t('industry.OT'),
                     /* eslint-enable sort-keys-fix/sort-keys-fix */
-                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsxs(Fragment, { children: [jsxs("p", { children: ["Will return to:", `${window?.location.origin}${window?.location.pathname}${window?.location.search}`] }), jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: isProductionEnvironment ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
-                        /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
-                        typeof window === 'undefined'
-                            ? ''
-                            : `${window.location.origin}${window.location.pathname}${window.location.search}` })] })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
+                }, placeholder: t('Select an industry'), variant: "solid" }), jsx(TextField, { showLabel: true, defaultValue: cart.customerVatNumber, isDisabled: isDisabled, label: t('VAT Number'), minLength: 8, name: "customerVatNumber" }, `vat${Boolean(validationErrors.customerVatNumber)}`), jsx(TextField, { showLabel: true, defaultValue: cart.poNumber, isDisabled: isDisabled, isRequired: cart.requiresPoNumber, label: t('PO Number'), name: "poNumber" }), paymentMethodOptions && Object.keys(paymentMethodOptions).length > 1 && (jsx(Select, { "data-test-selector": "paymentMethodSelect", defaultSelectedOption: cart.paymentOptions?.paymentMethods?.[0]?.name || 'ADY', isDisabled: isDisabled, label: t('Payment method'), name: "paymentMethod", onChange: setSelectedPaymentMethod, options: paymentMethodOptions, selectedOption: selectedPaymentMethod, variant: "solid" })), isAdyenPayment && cart.billTo && (jsx(AdyenPayment, { amount: cart.orderGrandTotal, cartId: cart.trackId, countryCode: countryCode, currencyCode: currencyCode, customerId: cart.billTo.id, dropinRef: dropinRef, environment: isProductionEnvironment ? 'live' : 'test', isDisabled: isDisabled, onComplete: onComplete, onError: onError, orderAmount: cart.orderGrandTotal, returnUrl: 
+                /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
+                typeof window === 'undefined'
+                    ? ''
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: cart.billTo && {
                                 address1: cart.billTo.address1,
                                 address2: cart.billTo.address2,
                                 address3: cart.billTo.address3,

package/package.json

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