https://www.parc-hotel.lu/js/saferpay-form.js

1const offerForm = document.getElementById('offer_form');
2const offerImages = document.querySelectorAll('.gift_images_wrapper .gift_image_wrapper img');
3const formImage = document.querySelector('.the_gift_content_image');
4const theGiftElement = document.getElementById('the_gift');
5const voucherElement = document.getElementById('voucher');
6const buttonPayment = document.querySelector(".submit_payment ");
7const msgSuccess = document.getElementById('gift_success');
8const msgError = document.getElementById('gift_error');
9const amountError = document.getElementById('gift_error_amount');
10const amountInput = document.getElementById('gift_amount');
11
12/** ----------------------------------------------------------
13 *  Helper: hide voucher + messages whenever the user edits
14 * ---------------------------------------------------------- */
15function resetVoucherPreview() {
16    showVoucher(false);
17    msgSuccess.classList.add('hidden');
18    amountError.classList.add('hidden');
19}
20
21let fillVoucher = (price, name, message) => {
22    fillPrice(price);
23    fillName(name);
24    fillMessage(message);
25}
26
27let fillPrice = (price) => {
28    const priceElement = document.querySelector('.the_gift_price_price');
29
30    if(!priceElement) return;
31
32    priceElement.innerText = price + "€";
33}
34
35let fillName = (name) => {
36    const nameElement = document.querySelector('.the_gift_content_title span');
37
38    if(!nameElement) return;
39
40    nameElement.innerText = name;
41}
42
43let fillMessage = (message) => {
44    const messageElement = document.querySelector('.the_gift_content_text');
45
46    if(!messageElement) return;
47
48    messageElement.innerText = message;
49}
50
51function selectImage(imageElement) {
52    resetVoucherPreview(); 
53    if (offerImages !== undefined && offerForm !== null && formImage !== undefined && formImage !== null) {
54        offerImages.forEach(image => {
55            if (image == imageElement) {
56                image.classList.remove("unselected");
57                const imageLink = imageElement.getAttribute('data-image');
58                formImage.style.backgroundImage = 'url(' + imageLink + ')';  // Set the image preview
59
60                // Check if the hidden input exists before setting its value
61                const giftImageField = document.getElementById('gift_image');
62                if (giftImageField) {
63                    giftImageField.value = imageElement.getAttribute('data-id');  // Set hidden input to selected image ID
64                } else {
65                    console.error("gift_image field not found!");
66                }
67            } else {
68                image.classList.add("unselected");
69            }
70        });
71    }
72}
73
74function showVoucher(show = true){
75    if(show){
76        voucherElement.classList.add("voucher_visible");
77    }
78    else{
79        voucherElement.classList.remove("voucher_visible");
80    }
81}
82
83if(offerImages !== undefined && offerForm !== null && formImage !== undefined && formImage !== null){
84    showVoucher(false);
85    offerImages.forEach(image => {
86        image.addEventListener("click", () => {
87            selectImage(image);
88        })
89    })
90
91    if (amountInput) {
92        amountInput.addEventListener('input', e => {
93            fillPrice(e.target.value);
94            resetVoucherPreview();
95        });
96    }
97
98    nameElement = document.getElementById("gift_personName");
99    nameElement.addEventListener("input", evt => {
100        fillName(evt.target.value);
101        resetVoucherPreview();
102    });
103
104    messageElement = document.getElementById("gift_message");
105    messageElement.addEventListener("input", evt => {
106        fillMessage(evt.target.value);
107        resetVoucherPreview();
108    });
109
110    /*  Any other field (phone, country, image toggle …) will also
111    *  kill the preview; the 'true' makes the listener fire during
112    *  capture so even dynamically‑created widgets are covered.   */
113    ['input', 'change'].forEach(ev =>
114        offerForm.addEventListener(ev, resetVoucherPreview, true)
115    );
116}
117
118var required = {
119    0: 'gift_amount',
120    1: 'gift_personName',
121    2: 'gift_lastName',
122    3: 'gift_name',
123    4: 'gift_email',
124    5: 'gift_image',
125    6: 'gift_message',
126    7: 'gift_phone',
127    8: 'gift_country',
128    9: 'gift_adress'
129};
130
131const validateEmail = (email) => {
132  return String(email)
133    .toLowerCase()
134    .match(
135      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
136    );
137};
138
139function checkForm() {
140    var error = false;

141
142    // Loop through required fields
143    for (var req in required) {
144        var id = required[req];
145        var el = document.getElementById(id);
146
147        if (el && el !== undefined) {
148            var value = el.value;
149
150            // Check if the field is empty
151            if (value === '') {
152                if (id !== 'gift_image') {
153                    el.classList.add('error-req');  // Add error class if field is empty
154                } else {
155                    el = document.querySelector(".gift_images_wrapper");
156                    el.style.border = '1px solid red';  // Highlight image selection wrapper
157                    msgError.classList.remove("hidden");  // Show error for missing image
158                }
159                error = true;
160            } else {
161                if (id !== 'gift_image') {
162                    if (id == 'gift_email' && !validateEmail(value)) {
163                        error = true;
164                        el.classList.add('error-req');  // Add error if email is invalid
165                    } else {
166                        el.classList.remove('error-req');
167                    }
168                } else {
169                    el = document.querySelector(".gift_images_wrapper");
170                    el.style.border = '';  // Remove error border once image is selected
171                    msgError.classList.add("hidden");  // Hide the error message for image field
172                }
173            }
174        }
175    }
176
177    return !error;  // Return false if there are errors, true if the form is valid
178}
179
180if( offerForm !== undefined && offerForm !== null){
181    var button = document.getElementsByClassName('submit_form')[0];
182
183    button.addEventListener('click', e => {
184        e.preventDefault();
185
186        showVoucher(false);
187        msgSuccess.classList.add('hidden');
188        amountError.classList.add('hidden');
189
190        if (!checkForm()) {
191            return;
192        }
193
194        const formData  = new FormData(offerForm);
195
196        fetch('/offer/send-form', { method:'POST', body: formData })
197        .then(r => r.json())
198        .then(res => {
199            if (res.status === 'ok') {
200                showVoucher(true);
201                msgSuccess.classList.remove('hidden');
202
203                fillVoucher(
204                    formData.get('gift[amount]'),
205                    formData.get('gift[personName]'),
206                    formData.get('gift[message]')
207                );
208                theGiftElement.scrollIntoView();
209                return;
210            }
211
212            showVoucher(false);
213            msgSuccess.classList.add('hidden');
214
215            if (res.errors && res.errors.amount) {
216                amountError.classList.remove('hidden');
217                amountInput.classList.add('error-req');
218            } else {
219                amountError.classList.add('hidden');
220                amountInput.classList.remove('error-req');
221            }
222
223            if (res.errors && res.errors.gift_image) {
224                msgError.classList.remove('hidden');
225            }
226        })
227        .catch(console.error);
228    });
229}