https://www.cit.com/js/upgrade-sales-tool.js

1(() => {
2  init = () => {
3    // Grab some important vars
4    const editBtn = document.getElementById('edit-button'),
5    saveBtn = document.getElementById('save-button'),
6    cancelBtn = document.getElementById('cancel-button'),
7    optionSelect = document.getElementById('option-select'),
8    allOptions = document.querySelectorAll('.option'),
9    repInfo = document.getElementById('rep-info'),
10    editFields = document.getElementById('edit-fields'),
11    repName = document.getElementById('rep-name'),
12    repEmail = document.getElementById('rep-email'),
13    repPhone = document.getElementById('rep-phone'),
14    repNameField = document.getElementById('rep-name-field'),
15    repEmailField = document.getElementById('rep-email-field'),
16    repPhoneField = document.getElementById('rep-phone-field');
17
18    if(editBtn != null && saveBtn != null && cancelBtn != null && repInfo != null && editFields != null && repName != null && repEmail != null && repPhone != null && repNameField != null && repEmailField != null && repPhoneField != null) {
19
20
21      // just a function that show/hides the edit/display fields for the local storage info
22      toggleEditFields = () => {
23        if (repInfo.style.display === 'block') {
24          repInfo.style.display = 'none';
25          editFields.style.display = 'block';
26        } else {
27          repInfo.style.display = 'block';
28          editFields.style.display = 'none';
29        }
30      }
31
32      // checks to see if there's data in local storage
33      // fills out the vars on the front end if there are, otherwise sets them to null
34      hasLocalStorage = () => {
35        if (localStorage.getItem('repName') !== null) {
36          repName.innerText = localStorage.getItem('repName');
37          repNameField.value = localStorage.getItem('repName');
38        } else {
39          repNameField.value = null;
40        }
41
42        if (localStorage.getItem('repEmail') !== null) {
43          repEmail.text = localStorage.getItem('repEmail');
44          repEmail.href = "mailto:" + localStorage.getItem('repEmail');
45          repEmailField.value = localStorage.getItem('repEmail');
46        } else {
47            repEmailField.value = null;
48        }
49
50        if (localStorage.getItem('repPhone') !== null) {
51          repPhone.text = localStorage.getItem('repPhone');
52          repPhone.href = "tel:" + localStorage.getItem('repPhone').replace(/\D/g,'');
53          repPhoneField.value = localStorage.getItem('repPhone');
54        } else {
55          repPhoneField.value = null;
56        }
57      }
58
59      // check local storage on page load
60      hasLocalStorage();
61
62      // function to save rep data to local storage if anything exists in the edit fields
63      saveLocalStorage = () => {
64        if (repNameField.value !== null) {
65          localStorage.setItem('repName', repNameField.value);
66        } else {
67          localStorage.setItem('repName', null);
68        }
69
70        if (repEmailField.value !== null) {
71          localStorage.setItem('repEmail', repEmailField.value);
72        } else {
73          localStorage.setItem('repEmail', null);
74        }
75
76        if (repPhoneField.value !== null) {
77          localStorage.setItem('repPhone', repPhoneField.value);
78        } else {
79          localStorage.setItem('repPhone', null);
80        }
81      }
82
83
84      editBtn.addEventListener('click', (event) => {
85        event.preventDefault();
86        toggleEditFields();
87      });
88
89      cancelBtn.addEventListener('click', (event) => {
90        event.preventDefault();
91        toggleEditFields();
92      });
93
94      saveBtn.addEventListener('click', (event) => {
95        event.preventDefault();
96        if(repNameField.value != "" && repEmailField != "" && repPhoneField != "") {
97          saveLocalStorage();
98          hasLocalStorage();
99          toggleEditFields();
100        }
101      });
102    }
103
104    const optionChange = (event) => {
105      const selectedOption = event.target.value;
106
107      allOptions.forEach((curr) => {
108          if (curr.id === selectedOption) {
109              curr.classList.add('active');
110          } else {
111              curr.classList.remove('active');
112          }
113      })
114    }
115
116    if(optionSelect != null) {
117      setPlan('option-select', allOptions);
118      optionSelect.addEventListener('change', optionChange);
119    }
120    //runEqualHeight("CIT-card-title");
121    runEqualHeight("CIT-card-term");
122    runEqualHeight("CIT-card-description");
123    runEqualHeight("CIT-card-payment");
124
125  }
126
127  // do the thing!
128  window.onload = init();
129
130  var check = setInterval(checkTimer, 100);
131  function checkTimer() {
132    // Fire until field is available
133    if (document.getElementById('ust-ending-cta')) {
134      init()
135      checkIntervalStop();
136    }
137  }
138  function checkIntervalStop() {
139    clearInterval(check);
140  }
141
142  function setPlan(id, allOptions) {
143    let element = document.getElementById(id);
144    allOptions.forEach((curr) => {
145      if (curr.id === element.value) {
146          curr.classList.add('active');
147      } else {
148          curr.classList.remove('active');
149      }
150    });

151  }
152
153  function runEqualHeight(className) {
154    var findClass = document.getElementsByClassName(className);
155    var tallest = 0;
156    var i;
157    // Loop over matching divs
158    for(i = 0; i < findClass.length; i++) {
159        var ele = findClass[i];
160        var eleHeight = ele.clientHeight;
161        tallest = ((eleHeight>tallest) ? eleHeight : tallest);
162    }
163    for(i = 0; i < findClass.length; i++) {
164        findClass[i].style.height = tallest + "px";
165    }
166  }
167})();