Registration Payment

/* stylelint-disable */
/* eslint-disable */
import {
  POST,
  createSession,
  validateUnifiedPaymentResponse,
} from '../../service';
import {
  currentPage,
  focusBackBtn,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';

const decodeCaptureContext = captureContext => {
  const parts = captureContext.split('.');

  if (parts.length !== 3) {
    throw new Error('Invalid Capture Context JWT');
  }

  const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');

  const paddedBase64 = base64 + '='.repeat((4 - (base64.length % 4)) % 4);

  return JSON.parse(atob(paddedBase64));
};

const loadUnifiedCheckoutLibrary = (clientLibrary, clientLibraryIntegrity) =>
  new Promise((resolve, reject) => {
    const script = document.createElement('script');

    console.log('clientLibrary -', clientLibrary);
    console.log('clientLibraryIntegrity -', clientLibraryIntegrity);

    script.src = clientLibrary;
    script.integrity = clientLibraryIntegrity;
    script.crossOrigin = 'anonymous';

    script.onload = resolve;
    script.onerror = reject;

    document.head.appendChild(script);
  });

export default currentElement => {
  let controller = new AbortController();

  onComponentVisible(currentElement, async () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();

    focusBackBtn();
    hideServerError(currentElement);

    if (currentPage.isAdultRegistered === 'false') {
      showStep('10');
    }

    currentPage.page = currentElement;

    const payBtn = document.querySelector(
      '.registration-membership-summary__pay'
    );

    if (!payBtn) {
      console.error('Pay button is missing');
      return;
    }

    const orderId = payBtn.getAttribute('data-orderId');

    if (!orderId) {
      console.error('Order ID is missing');
      return;
    }

    const redirectUrl = currentElement.getAttribute('data-redirect-url');

    if (!redirectUrl) {
      console.error('Redirect URL is missing');
      return;
    }

    try {
      const createSessionUrl = `${createSession}?orderId=${orderId}`;
      const createSessionResponse = await POST(createSessionUrl);

      if (!createSessionResponse.success || !createSessionResponse.jwt) {
        console.error('Capture Context is missing');
        return;
      }

      const captureContext = createSessionResponse.jwt;

      console.log('Capture Context:', captureContext);
      const decodedCaptureContext = decodeCaptureContext(captureContext);
      const {
        clientLibrary,
        clientLibraryIntegrity,
      } = decodedCaptureContext.ctx[0].data;

      await loadUnifiedCheckoutLibrary(clientLibrary, clientLibraryIntegrity);

      const client = await VAS.UnifiedCheckout(captureContext);
      const checkout = await client.createCheckout({
        autoProcessing: true,
      });
      const result = await checkout.mount({
        paymentSelection: '#payment-buttons',
        paymentScreen: '#payment-form',
      });
      console.log('CyberSource checkout result:', result);
      if (!result) {
        console.error('Payment response JWT is missing');
        return;
      }
      const paymentValidationResponse = await POST(
        validateUnifiedPaymentResponse,
        {
          OrderId: Number(orderId),
          PaymentResponseJwt: result,
        }
      );

      console.log('Payment validation response:', paymentValidationResponse);

      if (!paymentValidationResponse.success) {
        showServerError(currentElement, paymentValidationResponse.message);
        return;
      }
      if (!redirectUrl) {
        showServerError(
          currentElement,
          'Your payment has been processed, but we are unable to display the confirmation page.'
        );
        return;
      }
      window.location.href = redirectUrl;
    } catch (error) {
      console.error('Failed to initialise CyberSource Unified Checkout', error);
      showServerError(
        currentElement,
        'We are unable to load the payment service. Please try again.'
      );
      return;
    }
  });
};