Registration Membership Summary

/* eslint-disable operator-linebreak */
import { showRegistrationLoader } from '../../registration-loader/registration-loader';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  currentPage,
  getNode,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import { GET, membershipRegisterPath } from '../../service';

export default currentElement => {
  let orderData;

  const membershipContainer = currentElement.querySelector(
    '.membership-container'
  );

  const adultMembershipTitle = membershipContainer.getAttribute(
    'data-adult-membership-details'
  );

  const totalCost = membershipContainer.getAttribute('data-total-cost');

  const adultMembershipCount = membershipContainer.getAttribute(
    'data-adult-mebership-count'
  );

  const juniorMembershipCount = membershipContainer.getAttribute(
    'data-junior-membership-count'
  );

  // eslint-disable-next-line no-unused-vars
  const englandSupportsTravelClubExpiring = membershipContainer.getAttribute(
    'data-england-supports-travel-club-expiring'
  );

  const nameLabel = membershipContainer.getAttribute('data-name');

  const fanLabel = membershipContainer.getAttribute('data-fan');

  const generateJuniorMember = (
    name,
    fancode
  ) => `<div class="membership-remove" id="fan_${fancode}">
  <div class="adult-membership-wrapper">
  <div class="left-border"></div>
  <div class="adult-membership-container">
  <div class="info details-adult">
  <span class="details-adult">${adultMembershipTitle}</span>
  </div>
  <div class="info"><span class="membership-details">${nameLabel}</span><span style="text-transform: capitalize;" class="price">${name}</span></div>
  <div class="info"><span class="membership-details">${fanLabel}</span><span class="price">${fancode}</span></div>
  </div>
  </div>
  <div id="fan">
  <a id="remove-junior" class="link-button" href="javascript:void(0);">Remove</a>
  </div>
  </div>`;

  const generateAdultMember = (name, fancode) => `<div id="fan_${fancode}">
  <div class="adult-membership-wrapper">
  <div class="left-border"></div>
  <div class="adult-membership-container">
  <div class="info details-adult">
  <span class="details-adult">${adultMembershipTitle}</span>
  </div>
  <div class="info"><span class="membership-details">${nameLabel}</span><span style="text-transform: capitalize;" class="price">${name}</span></div>
  <div class="info"><span class="membership-details">${fanLabel}</span><span class="price">${fancode}</span></div>
  </div>
  </div>
  <div id="fan">
  </div>
  </div>`;

  const setDatatocurrentElementPage = ({
    orderItems,
    customerFancode,
    ...rest
  }) => {
    const members = orderItems.reduce(
      (preV, nextV) => {
        if (nextV.fanCode === customerFancode) {
          return { adult: nextV, junior: preV.junior };
        }
        return { adult: preV.adult, junior: [...preV.junior, nextV] };
      },
      { adult: {}, junior: [] }
    );

    let childMembership = '';
    let adultMembeship = '';

    adultMembeship = generateAdultMember(
      members.adult.customerDisplayName,
      members.adult.fanCode
    );

    members.junior.forEach(({ fanCode, customerDisplayName }) => {
      childMembership += generateJuniorMember(fanCode, customerDisplayName);
    });

    // eslint-disable-next-line no-param-reassign
    currentElement.querySelector(
      '.membership-container-junior'
    ).innerHTML = `${adultMembeship} ${childMembership}`;

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

      currentElement.dispatchEvent(event);
    }

    triggerContentChange();

    // eslint-disable-next-line no-param-reassign
    membershipContainer.innerHTML = `<div class="info total-cost">
                    <span class="total-cost"><strong>${totalCost}</strong></span>
                    <span class="price">£${rest.totalAmount.toFixed(2)}</span>
                  </div>
                  ${
                    members.adult.fanCode
                      ? `<div class="info">
                    <span class="membership-details">${adultMembershipCount} ${
                          members.adult ? '1' : 0
                        }
                    </span><span class="price">£${members.adult.totalAmount.toFixed(
                      2
                    )}</span>
                  </div>`
                      : ''
                  }
                  ${
                    members.junior.length
                      ? `<div class="info">
                    <span class="membership-details">${juniorMembershipCount} ${
                          members.junior.length
                        }
                    </span>
                    <span class="price">
                    ${rest.totalAmount - members.adult.totalAmount.toFixed(2)}
                    </span>
                  </div>`
                      : ''
                  }`;
  };

  onComponentVisible(currentElement, async () => {
    showStep('08');
    currentPage.page = currentElement;
    hideServerError(currentElement);
    orderData = sessionStorage.getItem('orderResponse');
    if (!orderData) {
      showServerError(currentElement, 'Could not find Order');
    } else {
      orderData = JSON.parse(orderData);
      hideServerError(currentElement);
      // eslint-disable-next-line no-param-reassign
      currentElement.querySelector(
        '.registration-form-sub-title'
      ).innerText = `${
        orderData.orderItems.length
      } ${englandSupportsTravelClubExpiring} ${orderData.expiryDate}`;

      setDatatocurrentElementPage(orderData);
    }
  });

  // 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', () => {
        modal.style.display = 'flex';
        targetElement = btn.closest('.membership-remove');
      });
    });
    const payBtn = currentElement.querySelector(
      '.registration-membership-summary__pay'
    );

    payBtn.addEventListener('click', async event => {
      event.preventDefault();
      const response = await GET(membershipRegisterPath(orderData.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', () => {
      if (targetElement) {
        targetElement.remove();
        targetElement = null;
      }
      modal.style.display = 'none';
    });

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