Registration Membership Summary

/* eslint-disable compat/compat */
/* eslint-disable operator-linebreak */
import { showRegistrationLoader } from '../../registration-loader/registration-loader';
import { hideClass } from '../../registration-error/registration-error';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  currentPage,
  getNode,
  onComponentVisible,
  showStep,
  parentChildList,
  cloneElement,
  nevigateToNext,
  focusBackBtn,
} from '../../registrationUtility';
import {
  GET,
  membershipRegisterPath,
  getMembershipOrderDetailPath,
  removeJuniorRegistrationPath,
} from '../../service';

import {
  handleConfirmPrimaryBtn,
  conformDialogPrimaryBtn,
  setDialogTitle,
  setDialogSubTitle,
  setConfirmDialogPrimaryCtaText,
  setConfirmDialogSecondaryCtaText,
} from '../../registration-confirm-modal/registration-confirm-modal';

export default (
  currentElement,
  addJuniorOption,
  registrationConfirmModalElement
) => {
  const registrationMembershipContainer = currentElement.querySelector(
    '.registration-membership-container'
  );
  const juniorMembershipSeparator = currentElement.querySelector(
    '.juniors-memberships-container .separator'
  );
  const removeJuniorButton = currentElement.querySelector('.link-button');
  const englandSupportsTravelClubExpiring = registrationMembershipContainer.getAttribute(
    'data-england-supports-travel-club-expiring'
  );
  const adultMembershipCost = currentElement.querySelector(
    '.registration-membership-container .detail .info .info__value'
  );
  const juniorMembershipCount = registrationMembershipContainer.getAttribute(
    'data-junior-membership-count'
  );
  const totalCost = currentElement.querySelector(
    '.registration-membership-container .heading__value'
  );
  const expirySubtitle = currentElement.querySelector(
    '.registration-form-sub-title'
  );
  const [totalCostContainer, infoTemplate] = currentElement.querySelectorAll(
    '.registration-membership-container .detail, .registration-membership-container .info-template'
  );
  const addJuniorBtn = currentElement.querySelector(
    '.registration-membership-summary__add-junior .cta--r-secondary'
  );
  const haveJunior = addJuniorOption.querySelector(
    '.registration-add-junior-option__yes '
  );
  const addJuniorBtnClicker = e => {
    e.preventDefault();
    if (addJuniorBtn.classList.contains('cta--r-secondary')) {
      currentElement.classList.add(hideClass);
      addJuniorOption.nextElementSibling.classList.remove(
        'registration_skip',
        'registration_hide'
      );
      nevigateToNext(addJuniorOption);
    }
  };
  const generateJunior = juniorData => {
    const juniorDetail = currentElement.querySelector(
      '.junior-membership-template'
    );

    juniorData.forEach(element => {
      const juniorClone = juniorDetail.cloneNode(true);
      const [headingValue, infoValue] = juniorClone.querySelectorAll(
        '.info-header .info__value, .info .info__value'
      );

      juniorClone.classList.add('junior-membership-container');
      juniorClone.classList.remove('registration_hide');
      juniorClone.classList.remove('junior-membership-template');
      juniorClone.setAttribute('data-order-item-id', element.orderItemId);
      headingValue.innerText = element.customerDisplayName;
      infoValue.innerText = element.fanCode;
      juniorDetail.parentElement.appendChild(juniorClone);
    });
  };

  const juniorCostDetails = (orderData, adult, junior) => {
    if (junior.length > 0) {
      const juniorTotalCost = cloneElement(infoTemplate);

      juniorMembershipSeparator.classList.remove(hideClass);
      juniorTotalCost.classList.add('info', 'junior');
      const [infoKey, infoValue] = juniorTotalCost.querySelectorAll(
        '.info__key, .info__value'
      );

      infoKey.innerText = `${juniorMembershipCount}${junior.length}`;
      if (adult.totalAmount) {
        infoValue.innerText = `£${(
          orderData.orderResponse.totalAmount - adult.totalAmount
        ).toFixed(2)}`;
      } else {
        infoValue.innerText = `£${orderData.orderResponse.totalAmount.toFixed(
          2
        )}`;
      }
      totalCostContainer.appendChild(juniorTotalCost);
    } else {
      juniorMembershipSeparator.classList.add(hideClass);
    }
  };

  const addJuniorButton = junior => {
    addJuniorBtn.classList.add('cta--r-disabled');
    addJuniorBtn.classList.remove('cta--r-secondary');
    const isValidJuniorCount =
      haveJunior.getAttribute('data-junior').toLowerCase() === 'true' &&
      junior.length < 5;

    if (isValidJuniorCount) {
      addJuniorBtn.classList.add('cta--r-secondary');
      addJuniorBtn.classList.remove('cta--r-disabled');
    }
    addJuniorBtn.setAttribute('aria-disabled', !isValidJuniorCount);
    addJuniorBtn.setAttribute('disabled', !isValidJuniorCount);
  };

  const removeJuniors = () => {
    currentElement
      .querySelectorAll('.junior-membership-container')
      .forEach(element => element.remove());
  };
  const removeJuniorCost = () => {
    currentElement
      .querySelectorAll('.registration-membership-container .detail .junior')
      .forEach(element => element.remove());
  };

  function triggerContentChange() {
    const event = new Event('contentchange');

    currentElement.dispatchEvent(event);
  }
  const removeJuniorRegistration = async (orderId, orderItemId) => {
    const removeRes = await GET(
      removeJuniorRegistrationPath(orderId, orderItemId)
    );

    if (removeRes.success) {
      const { adult, junior } = parentChildList(
        removeRes.orderResponse.orderItems,
        removeRes.orderResponse.customerFancode
      );

      if (
        removeRes.orderResponse.customerFancode !==
          removeRes.orderResponse.orderItems[0].fanCode &&
        junior.length === 1
      ) {
        removeJuniorButton.classList.add(hideClass);
      } else {
        removeJuniorButton.classList.remove(hideClass);
      }
      removeJuniorCost();
      removeJuniors();
      totalCost.innerText = `£${removeRes.orderResponse.totalAmount.toFixed(
        2
      )}`;
      expirySubtitle.innerText = `${
        removeRes.orderResponse.orderItems.length
      }${englandSupportsTravelClubExpiring} ${
        removeRes.orderResponse.expiryDate
      }`;
      juniorCostDetails(removeRes, adult, junior);
      generateJunior(junior);
      addJuniorButton(junior);
      triggerContentChange();
    }
  };

  const controller = new AbortController();
  let removeJuniorCtaClicked;

  onComponentVisible(currentElement, async () => {
    removeJuniorCtaClicked = false;
    if (currentPage.isAdultRegistered === 'false') {
      showStep('08');
    }
    focusBackBtn();
    currentPage.page = currentElement;
    hideServerError(currentElement);
    const payBtn = currentElement.querySelector(
      '.registration-membership-summary__pay'
    );

    totalCostContainer.getElementsByClassName('info')[0].classList.add('adult');

    addJuniorBtn.addEventListener('click', e => addJuniorBtnClicker(e), {
      signal: controller.signal,
    });
    const orderData = await GET(
      getMembershipOrderDetailPath(payBtn.getAttribute('data-orderId'))
    );

    if (orderData.success) {
      hideServerError(currentElement);
      const { adult, junior } = parentChildList(
        orderData.orderResponse.orderItems,
        orderData.orderResponse.customerFancode
      );
      const adultCost = currentElement.querySelector(
        '.registration-membership-container .detail .adult'
      );

      if (
        orderData.orderResponse.customerFancode !==
          orderData.orderResponse.orderItems[0].fanCode &&
        junior.length === 1
      ) {
        removeJuniorButton.classList.add(hideClass);
      } else {
        removeJuniorButton.classList.remove(hideClass);
      }

      const [
        adultContainer,
        adultMembershipTitle,
        adultHeaderValue,
        adultInfoValue,
      ] = currentElement.querySelectorAll(
        '.adults-memberships-container,.adults-memberships-container .heading__key, .adults-memberships-container .info-header .info__value, .adults-memberships-container .info .info__value'
      );

      if (orderData.orderResponse.customerFancode === adult.fanCode) {
        adultHeaderValue.innerText = adult.customerDisplayName;
        adultInfoValue.innerText = adult.fanCode;
        adultMembershipTitle.innerText = adultContainer.getAttribute(
          'data-adult-membership-details'
        );
        adultMembershipCost.innerText = `£${adult.totalAmount.toFixed(2)}`;
      } else {
        adultContainer.classList.add('registration_hide');
        adultCost.classList.add(hideClass);
      }

      totalCost.innerText = `£${orderData.orderResponse.totalAmount.toFixed(
        2
      )}`;

      expirySubtitle.innerText = `${
        orderData.orderResponse.orderItems.length
      }${englandSupportsTravelClubExpiring} ${
        orderData.orderResponse.expiryDate
      }`;
      removeJuniorCost();
      removeJuniors();
      generateJunior(junior);
      triggerContentChange();
      juniorCostDetails(orderData, adult, junior);
      addJuniorButton(junior);
    } else {
      showServerError(currentElement, 'Could not find Order');
    }
  });

  // eslint-disable-next-line func-names
  currentElement.addEventListener('contentchange', () => {
    // const modal = currentElement.querySelector('#remove-junior-modal');
    // const yesBtn = currentElement.querySelector('.btn-yes');
    // const noBtn = currentElement.querySelector('.btn-no');
    let targetElement = null;

    currentElement.querySelectorAll('.link-button').forEach(btn => {
      btn.addEventListener('click', () => {
        targetElement = btn.closest('.junior-membership-container');
        setDialogTitle(currentElement.getAttribute('data-modal-title'));
        setDialogSubTitle(currentElement.getAttribute('data-modal-subtitle'));
        setConfirmDialogPrimaryCtaText(
          currentElement.getAttribute('data-modal-primary')
        );
        setConfirmDialogSecondaryCtaText(
          currentElement.getAttribute('data-modal-secondary')
        );
        registrationConfirmModalElement.showModal();
        removeJuniorCtaClicked = true;
      });
    });
    const payBtn = currentElement.querySelector(
      '.registration-membership-summary__pay'
    );

    payBtn.addEventListener('click', async event => {
      event.preventDefault();
      const response = await GET(
        membershipRegisterPath(payBtn.getAttribute('data-orderId'))
      );

      if (response.success) {
        showRegistrationLoader();
        const paymentRequest = response.paymentReq;

        if (paymentRequest != null) {
          getNode(
            currentElement,
            '#SmartPayRequest_MerchantReference'
          ).setAttribute('value', paymentRequest.merchantReference);
          getNode(
            currentElement,
            '#SmartPayRequest_PaymentAmount'
          ).setAttribute('value', paymentRequest.paymentAmount);
          getNode(currentElement, '#SmartPayRequest_Currency').setAttribute(
            'value',
            paymentRequest.currency
          );
          getNode(
            currentElement,
            '#SmartPayRequest_ShipBeforeDate'
          ).setAttribute('value', paymentRequest.shipBeforeDate);
          getNode(
            currentElement,
            '#SmartPayRequest_MerchantSkinCode'
          ).setAttribute('value', paymentRequest.merchantSkinCode);
          getNode(
            currentElement,
            '#SmartPayRequest_MerchantAccountCode'
          ).setAttribute('value', paymentRequest.merchantAccountCode);
          getNode(
            currentElement,
            '#SmartPayRequest_SessionValidity'
          ).setAttribute('value', paymentRequest.sessionValidity);
          getNode(
            currentElement,
            '#SmartPayRequest_MerchantReturnData'
          ).setAttribute('value', paymentRequest.merchantReturnData);
          getNode(currentElement, '#SmartPayRequest_Email').setAttribute(
            'value',
            paymentRequest.email
          );
          getNode(currentElement, '#SmartPayRequest_FanCode').setAttribute(
            'value',
            paymentRequest.fanCode
          );
          getNode(currentElement, '#SmartPayRequest_Description').setAttribute(
            'value',
            paymentRequest.description
          );
          getNode(currentElement, '#SmartPayRequest_Country').setAttribute(
            'value',
            paymentRequest.country
          );
          getNode(
            currentElement,
            '#SmartPayRequest_ShopperLocale'
          ).setAttribute('value', paymentRequest.shopperLocale);
          getNode(currentElement, '#SmartPayRequest_OrderData').setAttribute(
            'value',
            paymentRequest.orderData
          );
          getNode(
            currentElement,
            '#SmartPayRequest_MerchantSignature'
          ).setAttribute('value', paymentRequest.merchantSignature);
          getNode(
            currentElement,
            '#SmartPayRequest_RecurringContract'
          ).setAttribute('value', paymentRequest.recurringContract);

          // Smartpay Fuse request fields
          getNode(
            currentElement,
            '#SmartPayFuseRequest_access_key'
          ).setAttribute('value', paymentRequest.accessKey);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_profile_id'
          ).setAttribute('value', paymentRequest.profileId);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_transaction_uuid'
          ).setAttribute('value', paymentRequest.transactionUuid);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_signed_field_names'
          ).setAttribute('value', paymentRequest.signedFieldNames);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_unsigned_field_names'
          ).setAttribute('value', paymentRequest.unsignedFieldNames);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_signed_date_time'
          ).setAttribute('value', paymentRequest.signedDateTime);
          getNode(currentElement, '#SmartPayFuseRequest_locale').setAttribute(
            'value',
            paymentRequest.locale
          );
          getNode(
            currentElement,
            '#SmartPayFuseRequest_transaction_type'
          ).setAttribute('value', paymentRequest.transactionType);
          getNode(
            currentElement,
            '#SmartPayFuseRequest_reference_number'
          ).setAttribute('value', paymentRequest.merchantReference);
          getNode(currentElement, '#SmartPayFuseRequest_amount').setAttribute(
            'value',
            paymentRequest.paymentAmount
          );
          getNode(currentElement, '#SmartPayFuseRequest_currency').setAttribute(
            'value',
            paymentRequest.currency
          );
          getNode(
            currentElement,
            '#SmartPayFuseRequest_signature'
          ).setAttribute('value', paymentRequest.signature);

          getNode(currentElement, '#PaymentForm').setAttribute(
            'action',
            paymentRequest.paymentGatewayUrl
          );
          getNode(currentElement, '#PaymentForm').submit();
        }
      } else {
        showServerError(currentElement, response.error);
      }
    });
    // yesBtn.addEventListener('click', async () => {
    //   if (targetElement) {
    //     removeJuniorRegistration(
    //       payBtn.getAttribute('data-orderId'),
    //       targetElement.getAttribute('data-order-item-id')
    //     );
    //   }
    //   modal.style.display = 'none';
    // });

    conformDialogPrimaryBtn.addEventListener('click', e => {
      if (removeJuniorCtaClicked) {
        e.preventDefault();
        handleConfirmPrimaryBtn(() => {
          removeJuniorRegistration(
            payBtn.getAttribute('data-orderId'),
            targetElement.getAttribute('data-order-item-id')
          );
        });
        removeJuniorCtaClicked = false;
      }
    });

    // noBtn.addEventListener('click', () => {
    //   modal.style.display = 'none';
    //   targetElement = null;
    // });
  });
};