refactor: add strict util for modal urls from window location

packages/ui-react/src/containers/AccountModal/forms/Checkout.tsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import useCheckout from '@jwp/ott-hooks-react/src/useCheckout';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-react/src/utils/location';
 import useForm from '@jwp/ott-hooks-react/src/useForm';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { FormValidationError } from '@jwp/ott-common/src/errors/FormValidationError';
 import { useTranslation } from 'react-i18next';
 
@@ -101,9 +100,9 @@ const Checkout = () => {
     );
   }
 
-  const cancelUrl = createURL(window.location.href, { u: 'payment-cancelled' });
-  const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment', offerId: selectedOffer?.offerId });
-  const errorUrl = createURL(window.location.href, { u: 'payment-error' });
+  const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
+  const waitingUrl = modalURLFromWindowLocation('waiting-for-payment', { offerId: selectedOffer?.offerId });
+  const errorUrl = modalURLFromWindowLocation('payment-error');
   const successUrlPaypal = offerType === 'svod' ? waitingUrl : closeModalUrl;
   const referrer = window.location.href;
 

packages/ui-react/src/containers/AdyenPaymentDetails/AdyenPaymentDetails.tsx

@@ -6,11 +6,10 @@ import type { AdyenPaymentSession } from '@jwp/ott-common/types/checkout';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/controllers/AccountController';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
+import { modalURLFromLocation, modalURLFromWindowLocation } from '@jwp/ott-ui-react/src/utils/location';
 import { ADYEN_LIVE_CLIENT_KEY, ADYEN_TEST_CLIENT_KEY } from '@jwp/ott-common/src/constants';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 import useEventCallback from '@jwp/ott-hooks-react/src/useEventCallback';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import { useTranslation } from 'react-i18next';
 
 import Adyen from '../../components/Adyen/Adyen';
@@ -96,7 +95,7 @@ export default function AdyenPaymentDetails({ setProcessing, type, setPaymentErr
         setProcessing(true);
         setPaymentError(undefined);
 
-        const returnUrl = createURL(window.location.href, { u: 'payment-method', paymentMethodId: `${paymentMethodId}` });
+        const returnUrl = modalURLFromWindowLocation('payment-method', { paymentMethodId: `${paymentMethodId}` });
         const result = await checkoutController.addAdyenPaymentDetails(state.data.paymentMethod, paymentMethodId, returnUrl);
 
         if ('action' in result) {

packages/ui-react/src/containers/UpdatePaymentMethod/UpdatePaymentMethod.tsx

@@ -3,13 +3,13 @@ import { getModule } from '@jwp/ott-common/src/modules/container';
 import { useCheckoutStore } from '@jwp/ott-common/src/stores/CheckoutStore';
 import { useAccountStore } from '@jwp/ott-common/src/stores/AccountStore';
 import CheckoutController from '@jwp/ott-common/src/controllers/CheckoutController';
-import { createURL } from '@jwp/ott-common/src/utils/urlFormatting';
 import useQueryParam from '@jwp/ott-ui-react/src/hooks/useQueryParam';
 
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import PaymentMethodForm from '../../components/PaymentMethodForm/PaymentMethodForm';
 import PayPal from '../../components/PayPal/PayPal';
 import AdyenPaymentDetails from '../AdyenPaymentDetails/AdyenPaymentDetails';
+import { modalURLFromWindowLocation } from '../../utils/location';
 
 type Props = {
   onCloseButtonClick: () => void;
@@ -48,10 +48,10 @@ const UpdatePaymentMethod = ({ onCloseButtonClick }: Props) => {
     try {
       setPaymentError(undefined);
 
-      const successUrl = createURL(window.location.href, { u: 'payment-method-success' });
-      const waitingUrl = createURL(window.location.href, { u: 'waiting-for-payment' });
-      const cancelUrl = createURL(window.location.href, { u: 'paypal-cancelled' }); // @todo: This route doesn't exist
-      const errorUrl = createURL(window.location.href, { u: 'paypal-error' }); // @todo: This route doesn't exist
+      const successUrl = modalURLFromWindowLocation('payment-method-success');
+      const waitingUrl = modalURLFromWindowLocation('waiting-for-payment');
+      const cancelUrl = modalURLFromWindowLocation('payment-cancelled');
+      const errorUrl = modalURLFromWindowLocation('payment-error');
 
       const response = await checkoutController.updatePayPalPaymentMethod(
         successUrl,

packages/ui-react/src/utils/location.test.ts

@@ -1,6 +1,6 @@
 import type { Location } from 'react-router-dom';
 
-import { createURLFromLocation, modalURLFromLocation } from './location';
+import { createURLFromLocation, modalURLFromLocation, modalURLFromWindowLocation } from './location';
 
 describe('url from location', () => {
   test('valid url from a location', async () => {
@@ -115,4 +115,17 @@ describe('modal urls from location', () => {
 
     expect(url).toEqual('/test?test-param=1&u=login&foo=bar');
   });
+
+  describe('modal urls from window.location', () => {
+    test('valid modal url from window.location', async () => {
+      const url = modalURLFromWindowLocation('login');
+
+      expect(url).toEqual('http://localhost:3000/?u=login');
+    });
+    test('valid modal url from window.location with query params', async () => {
+      const url = modalURLFromWindowLocation('waiting-for-payment', { offerId: '123' });
+
+      expect(url).toEqual('http://localhost:3000/?u=waiting-for-payment&offerId=123');
+    });
+  });
 });

packages/ui-react/src/utils/location.ts

@@ -10,3 +10,8 @@ export const createURLFromLocation = (location: Location, queryParams: QueryPara
 export const modalURLFromLocation = (location: Location, u: keyof AccountModals | null, queryParams?: QueryParamsArg) => {
   return createURL(`${location.pathname}${location.search || ''}`, { u, ...queryParams });
 };
+
+// Create a full modal url including hostname, mostly for external use (e.g paypal successUrl)
+export const modalURLFromWindowLocation = (u: keyof AccountModals, queryParams?: QueryParamsArg) => {
+  return createURL(window.location.href, { u, ...queryParams });
+};