https://www.neildiamond.com/wp-content/plugins/appreciation-engine…/js/ae_wp_frontend.js?ver=2.14.38

1(function ($) {
2    "use strict"
3
4    window.AEWPFrontEnd = {
5        forms: [],
6        validCountry: false,
7
8        init: function () {
9            var _this = this
10
11            $('.ae-cform-modal-container, .ae-cform-container:not(.-has-modal)').each(function (i, form) {
12
13                var formID = $(form).attr('data-ae-cform-id')
14                const hash = $(form).attr('data-hash-selector')
15                if (typeof _this.forms[formID] === 'undefined') {
16                    _this.forms[formID] = []
17                }
18                if (typeof _this.forms[formID]['hashSelectors'] === 'undefined') {
19                    _this.forms[formID]['hashSelectors'] = {}
20                }
21                _this.forms[formID]['hashSelectors'][hash] = []
22                var relatedFields = $(form)
23                    .find('input[type="checkbox"][data-ae-optin-id][data-ae-optin-related-field]');
24                if (relatedFields.length) {
25                    $(relatedFields).each(function (index) {
26                        var customFormId = $(this).data('ae-cform-id');
27                        var relatedField = $(this).data('ae-optin-related-field');
28                        if (relatedField === 'mobilephone' && _this.forms[formID]['hashSelectors'][hash].telInput === undefined) {
29                            var dynamicField = $(form).find(
30                                '#ae-cform-reg-item-' + relatedField + '-' + customFormId
31                            )
32
33                            _this.forms[formID]['hashSelectors'][hash].telInput = dynamicField.find('input');
34                            if (_this.forms[formID]['hashSelectors'][hash].telInput.length > 0) {
35                                
36                                const { smsCountries } = intlTelInputData;
37
38                                const formSmsCountries = smsCountries[formID]
39                                
40                                const onlyCountries =
41                                !formSmsCountries || formSmsCountries?.length === 0 || formSmsCountries?.includes("all")
42                                ? [] // Show all countries
43                                : formSmsCountries;
44
45                                _this.forms[formID]['hashSelectors'][hash].iti = window.intlTelInput(_this.forms[formID]['hashSelectors'][hash].telInput[0], {
46                                    separateDialCode: true,
47                                    autoPlaceholder: "off",
48                                    initialCountry: _this.setDefaultCountryCode(),
49                                    onlyCountries
50                                });
51                                /* TODO: Upgrade the intlTelInput lib and remove this override */
52                                _this.forms[formID]['hashSelectors'][hash].telInput.addClass('mobilephone-input-initial')
53                            }
54
55                            // Disable receive SMS if user country not selected
56                            if (
57                                (!window.AEJSWP
58                                || !window.AEJSWP['customForms'][formID].smsOptinCountries
59                                || !window.AEJSWP['customForms'][formID].smsOptinCountries
60                                    .includes('all'))
61                                && typeof relatedField !== 'undefined'
62                            ) {
63                                var dynamic_field_visible = $(dynamicField)
64                                    .data('dynamic-field-visibility') === 'visible'
65                                if (dynamic_field_visible) {
66                                    _this.toggleSmsOptin(false, form)
67                                }
68                            }
69                            _this.addEventListeners(form)
70                        }
71                    });
72                }
73                $(form).find('input[type="checkbox"][data-ae-optin-id][data-email]:checked')
74                    .change(function() {
75                        _this.setEmailRequired(form)
76                    })
77                _this.setEmailRequired(form)
78            })
79
80        },
81        // function to set the default country code e.g. gb = +44
82        setDefaultCountryCode: function() {
83            if (typeof gr_global_vars !== 'undefined') {
84                switch (gr_global_vars['siteTerritory']) {
85                    case 'uk':
86                        return 'gb';
87                    case 'au':
88                        return 'au';
89                    default:
90                        return '';
91                }
92            } else {
93                return '';
94            }
95        },
96
97        // Since the input field is hidden when form is not opened
98        // the padding is not correctly added
99        addPaddingTelInput: function (formID, hash) {
100            var paddingLeft = this.forms[formID]['hashSelectors'][hash].iti.selectedFlag.offsetWidth + 6
101            this.forms[formID]['hashSelectors'][hash].iti.a.style.paddingLeft = paddingLeft + 'px'
102        },
103
104        addEventListeners: function (form) {
105            var _this = this
106            // var form = $(`div.${hash}[data-ae-cform-id="${formID}"]`)
107            const formID = $(form).data('ae-cform-id');
108            const hash = $(form).data('hash-selector');
109            if (this.forms[formID]['hashSelectors'][hash].iti) {
110                $(form).find('a[data-ae-cform-social-button-service-id="email"]')
111                    .click(function () {
112                        _this.addPaddingTelInput(formID, hash)
113                    })
114
115                $(form).on('ae-modal-open', function () {
116                    _this.addPaddingTelInput(formID, hash)
117                })
118            }
119
120            $(this.forms[formID]['hashSelectors'][hash].telInput).on('input change', function () {
121                _this.validateInput(this, form)
122            })
123
124            /* TODO: Upgrade the intlTelInput lib and remove this override */
125            $(this.forms[formID]['hashSelectors'][hash].telInput).on('change', function () {
126                _this.forms[formID]['hashSelectors'][hash].telInput.removeClass('mobilephone-input-initial')                
127            })
128            $(this.forms[formID]['hashSelectors'][hash].telInput).on('focus', function () {
129                _this.forms[formID]['hashSelectors'][hash].telInput.removeClass('mobilephone-input-initial')
130                var width = _this.forms[formID]['hashSelectors'][hash].telInput.closest('.iti--separate-dial-code').find('.iti__flag-container').width();
131                if (width > 0) {
132                    width += 10;
133                    _this.forms[formID]['hashSelectors'][hash].telInput.css('padding-left', width + 'px');
134                }
135            })
136
137            $(form).find('.ae-cform-input-country').on('change', function () {
138                _this.changeNumberCountry(this, formID, hash)
139                _this.validateCountry(this, form)
140                _this.validateInput(this, form)
141            })
142
143            $(form).find('input[type="checkbox"][data-ae-optin-id][data-sms]').on('change', function () {
144                _this.validateInput(this, form)
145            })
146
147            if (this.forms[formID]['hashSelectors'][hash].telInput && this.forms[formID]['hashSelectors'][hash].telInput.length > 0) {
148                this.forms[formID]['hashSelectors'][hash].telInput[0].addEventListener("close:countrydropdown", function () {
149                    _this.forms[formID]['hashSelectors'][hash].numberCountryChanged = true
150                    _this.validateCountry($(form).find('.ae-cform-input-country'), form);
151                    _this.validateInput(this, form);
152                });
153            }
154        },
155

156        // Validate the telephone number entered and show any errors
157        validateInput: function (el, form) {
158            const formID = $(form).data('ae-cform-id');
159            const hash = $(form).data('hash-selector');
160            var _this = this;
161
162            // lets also check the validity of the area code chosen
163            var tmpCountryData = this.forms[formID]['hashSelectors'][hash].iti.getSelectedCountryData();
164            var setSelectedCountryCode = tmpCountryData.iso2.toUpperCase();
165            var checkAreaCodeCountryValid = this.isAreaCodeCountrySupported(setSelectedCountryCode, form);
166
167            var $labelElement = $(el)
168                .parents('.iti')
169                .parent()
170
171            var $parsleyErrorList = $labelElement
172                .find('.parsley-errors-list-custom')
173
174            var smsCheckboxStatus = false;
175
176            // check if we are setting the country/SMS error or not
177            $(form).find('input[type="checkbox"][data-ae-optin-id][data-sms]').each(function() {
178
179                // check status of the sms checkbox if active continue
180                var smsStatus = $(this).prop('checked');
181                smsCheckboxStatus = smsStatus;
182
183                if (true === smsStatus) {
184                    const parentDiv = this.closest('div');
185
186                    // Check if an error div already exists
187                    const existingErrorDiv = parentDiv.querySelector('.error-div');
188
189                    if (
190                        existingErrorDiv
191                        &&  _this.validCountry
192                        && checkAreaCodeCountryValid
193                    ) {
194                        // If an error div exists, remove it
195                        parentDiv.removeChild(existingErrorDiv);
196                    } else if(
197                        (
198                            !_this.validCountry
199                            || !checkAreaCodeCountryValid
200                        )
201                        && null === existingErrorDiv
202                    ) {
203                        const errorDiv = document.createElement('div');
204                        errorDiv.className = 'error-div ae-cform-item';
205                        errorDiv.innerHTML = '<ul class="parsley-errors-list"><li>SMS updates are available within valid countries only</li></ul>';
206
207                        // Append the error div inside the parent div
208                        parentDiv.appendChild(errorDiv);
209
210                        // ensure the sms toggle is off
211                        _this.toggleSmsOptin(false, form, true);
212                    }
213                }
214            });
215
216            if (
217                $(el).val().length === 0
218                && (
219                    !_this.validCountry
220                    || !checkAreaCodeCountryValid
221                )
222            ) {
223                this.toggleSmsOptin(false, form)
224                return
225            } else if (
226                this.isCountrySupported(el, form)
227                && _this.validCountry
228                && checkAreaCodeCountryValid
229            ) {
230                this.toggleSmsOptin(true, form, false)
231            }
232
233            if (
234                (
235                    this.forms[formID]['hashSelectors'][hash].iti.getValidationError()
236                    !== intlTelInputUtils.validationError.IS_POSSIBLE
237                    && true === smsCheckboxStatus
238                )
239            ) {
240                var parsleyId = $(el).data('parsley-id')
241                var errorMsg = $(el).data('error-msg')
242
243                if ($parsleyErrorList.length) {
244                    $($parsleyErrorList)
245                        .empty()
246                        .append(`<li class="parsley-error parsley-custom-error-message">${errorMsg}.</li>`)
247                } else {
248                    $labelElement
249                        .append(`<ul class="parsley-errors-list parsley-errors-list-custom filled" id="parsley-id-${parsleyId}"><li class="parsley-error parsley-custom-error-message">${errorMsg}.</li></ul>`)
250                }
251            } else {
252                // the parsely error list is associated within the mobilephone field
253                // however if we are getting validated by other field triggers e.g. country
254                // this won't get picked up. So if the length is zero try to find using the field class
255                if ($parsleyErrorList.length) {
256                    $parsleyErrorList.remove()
257                } else if (jQuery('.ae-cform-item-mobilephone').find('.parsley-errors-list').length) {
258                    jQuery('.ae-cform-item-mobilephone').find('.parsley-errors-list').remove();
259                }
260            }
261        },
262        setEmailRequired: function(form) {
263            const formID = $(form).data('cform-id');
264            if ($(form).find('input[type="checkbox"][data-ae-optin-id][data-email]:checked')
265                    .length > 0
266            ) {
267                $(form).find(`#ae-cform-input-reg-email-${formID}`).attr('required', true)
268                $(form).find(`#ae-cform-input-reg-email-${formID}`).parents('.ae-cform-item')
269                    .find('label .cform-required-field').removeClass('hidden')
270                    .find('span:first')
271                    .removeClass('hidden')
272            } else {
273                $(form).find(`#ae-cform-input-reg-email-${formID}`)
274                    .attr('required', false)
275                $(form).find(`#ae-cform-input-reg-email-1${formID}`)
276                    .parents('.ae-cform-item')
277                    .find('label .cform-required-field').addClass('hidden')
278                    .find('span:first')
279                    .addClass('hidden')
280            }
281        },
282        // Enable/disable the receive sms optin and set required or not required for the mobile field
283        toggleSmsOptin: function(enable, form, forceRequired = true) {
284            var _this = this
285            const formID = $(form).data('ae-cform-id');
286            const hash = $(form).data('hash-selector');
287            $(form).find('input[type="checkbox"][data-ae-optin-id][data-sms]').each(function() {
288                var smsOptin = $(this);
289                if (enable) {
290                    $(smsOptin).attr('disabled', false)
291                    $(smsOptin).parent().find('span.ae-cform-optin-label').css('opacity', 1)
292
293                    if (forceRequired) {
294                        var inputRequired = $(smsOptin).is(':enabled')
295                            && $(smsOptin).is(':checked')
296                        $(_this.forms[formID]['hashSelectors'][hash].telInput)
297                            .attr('required', inputRequired)
298                        if (inputRequired) {
299                            $(_this.forms[formID]['hashSelectors'][hash].telInput)
300                                .parents('.ae-cform-item')
301                                .find('label .cform-required-field').removeClass('hidden')
302                                .find('span:first')
303                                .removeClass('hidden')
304                        }
305                    }
306                } else {
307                    $(smsOptin).attr('disabled', true)
308                    $(smsOptin).prop('checked', false)
309                    $(smsOptin).parent().find('span.ae-cform-optin-label').css('opacity', 0.6)
310                    if (forceRequired) {
311                        $(_this.forms[formID]['hashSelectors'][hash].telInput)
312                            .attr('required', false)
313                        $(_this.forms[formID]['hashSelectors'][hash].telInput)
314                            .parents('.ae-cform-item')
315                            .find('label .cform-required-field').addClass('hidden')
316                            .find('span:first')
317                            .addClass('hidden')
318                    }
319                }
320            });
321        },
322
323        // Check whether the user selected country is in the supported country list form eCRM
324        isCountrySupported: function (elem, form) {
325            const formID = $(form).data('ae-cform-id');
326            var $selectedCountry = $(elem).val()
327            if (
328                ($selectedCountry === 'UM'
329                    && window.AEJSWP.customForms[formID].smsOptinCountries.includes('US'))
330                || ($selectedCountry === 'US'
331                    && window.AEJSWP.customForms[formID].smsOptinCountries.includes('UM'))
332            )
333                return true
334            return !(!window.AEJSWP || !window.AEJSWP.customForms[formID].smsOptinCountries
335                || (!window.AEJSWP.customForms[formID].smsOptinCountries.includes($selectedCountry)
336                    && !window.AEJSWP.customForms[formID].smsOptinCountries.includes('all')));
337
338        },
339
340        // Check whether the user selected area code country is in the supported country list form eCRM
341        isAreaCodeCountrySupported: function (areaCodeCountry = '', form) {
342            const formID = $(form).data('ae-cform-id');
343            if (
344                (areaCodeCountry === 'UM'
345                    && window.AEJSWP.customForms[formID].smsOptinCountries.includes('US'))
346                || (areaCodeCountry === 'US'
347                    && window.AEJSWP.customForms[formID].smsOptinCountries.includes('UM'))
348            )
349                return true
350            return !(!window.AEJSWP || !window.AEJSWP.customForms[formID].smsOptinCountries
351                || (!window.AEJSWP.customForms[formID].smsOptinCountries.includes(areaCodeCountry)
352                    && !window.AEJSWP.customForms[formID].smsOptinCountries.includes('all')));
353
354        },
355
356        // If mobile country code doesn’t match the visitor selected country value then disable
357        // the SMS Opt-in. Exception: if US code then`US Minor Outlying Islands` is also allowed.
358        validateCountry: function (elem, form) {
359            const formID = $(form).data('ae-cform-id');
360            const hash = $(form).data('hash-selector');
361            var _this = this;
362
363            if (this.isCountrySupported(elem, form)) {
364                var $selectedCountry = $(elem)
365                    .val()
366                    .toLowerCase()
367                if ($selectedCountry === 'um' && this.forms[formID]['hashSelectors'][hash].iti.getSelectedCountryData().iso2 === 'us') {
368                    this.toggleSmsOptin(true, form)
369                } else if ($(elem)
370                    .val()
371                    .toLowerCase() === this.forms[formID]['hashSelectors'][hash].iti.getSelectedCountryData().iso2) {
372                    this.toggleSmsOptin(true, form)
373                } else {
374                    this.toggleSmsOptin(false, form)
375                }
376                _this.validCountry = true;
377            } else {
378                this.toggleSmsOptin(false, form)
379                _this.validCountry = false;

380                // re-validate the phone input
381                _this.validateInput(this.forms[formID]['hashSelectors'][hash].telInput, form);
382            }
383        },
384
385        // Sync telephone country code when country is changed if previously not touched by user
386        changeNumberCountry: function (elem, formID, hash) {
387            if (typeof elem !== 'undefined' && $(elem).val() !== ''
388                && this.forms[formID]['hashSelectors'][hash].numberCountryChanged !== true) {
389                this.forms[formID]['hashSelectors'][hash].iti.setCountry($(elem).val())
390            }
391        },
392    }
393
394    $(document).ready(function () {
395        AEWPFrontEnd.init()
396    })
397})(jQuery)