_customer.js
403 lines
| 1 | /* |
| 2 | * Copyright (c) 2023 LatePoint LLC. All rights reserved. |
| 3 | */ |
| 4 | |
| 5 | async function latepoint_init_transaction_payment_form() { |
| 6 | let callbacks_list = []; |
| 7 | let $transaction_payment_form = jQuery('.latepoint-transaction-payment-form'); |
| 8 | let current_step = $transaction_payment_form.find('input[name="current_step"]').val(); |
| 9 | |
| 10 | $transaction_payment_form.on('click keydown', '.lp-option', (e) => { |
| 11 | let $option = jQuery(e.currentTarget); |
| 12 | if(e.type === 'keydown' && e.key !== ' ' && e.key !== 'Enter') return; |
| 13 | $option.closest('.lp-options').find('.lp-option.selected').removeClass('selected'); |
| 14 | $option.addClass('selected'); |
| 15 | $transaction_payment_form.find('input[name="' + $option.data('holder') + '"]').val($option.data('value')); |
| 16 | $transaction_payment_form.trigger('submit'); |
| 17 | return false; |
| 18 | }); |
| 19 | |
| 20 | |
| 21 | switch (current_step) { |
| 22 | case 'methods': |
| 23 | break; |
| 24 | case 'processors': |
| 25 | break; |
| 26 | case 'pay': |
| 27 | $transaction_payment_form.trigger('latepoint:initOrderPaymentMethod', [{ |
| 28 | callbacks_list: callbacks_list, |
| 29 | payment_method: $transaction_payment_form.find('input[name="payment_method"]').val(), |
| 30 | payment_processor: $transaction_payment_form.find('input[name="payment_processor"]').val(), |
| 31 | }]); |
| 32 | $transaction_payment_form.addClass('os-loading'); |
| 33 | |
| 34 | try { |
| 35 | for (const callback of callbacks_list) { |
| 36 | await callback.action(); |
| 37 | } |
| 38 | $transaction_payment_form.removeClass('os-loading'); |
| 39 | } catch (error) { |
| 40 | latepoint_show_error_and_stop_loading_booking_form(error, $transaction_payment_form); |
| 41 | } |
| 42 | break; |
| 43 | case 'confirmation': |
| 44 | break; |
| 45 | } |
| 46 | |
| 47 | $transaction_payment_form.on('submit', async function (e) { |
| 48 | e.preventDefault(); |
| 49 | await latepoint_submit_transaction_payment_form(jQuery(e.target)); |
| 50 | }); |
| 51 | } |
| 52 | |
| 53 | async function latepoint_submit_transaction_payment_form($transaction_payment_form) { |
| 54 | |
| 55 | if($transaction_payment_form.hasClass('os-loading')) return false; |
| 56 | let callbacks_list = []; |
| 57 | |
| 58 | $transaction_payment_form.find('.latepoint-message').remove(); |
| 59 | $transaction_payment_form.addClass('os-loading'); |
| 60 | $transaction_payment_form.find('.latepoint-btn').addClass('os-loading'); |
| 61 | |
| 62 | $transaction_payment_form.trigger('latepoint:submitTransactionPaymentForm', [{ |
| 63 | callbacks_list: callbacks_list, |
| 64 | payment_method: $transaction_payment_form.find('input[name="payment_method"]').val(), |
| 65 | payment_processor: $transaction_payment_form.find('input[name="payment_processor"]').val(), |
| 66 | current_step: $transaction_payment_form.find('input[name="current_step"]').val(), |
| 67 | }]); |
| 68 | |
| 69 | try { |
| 70 | for (const callback of callbacks_list) { |
| 71 | await callback.action(); |
| 72 | } |
| 73 | } catch (error) { |
| 74 | $transaction_payment_form.removeClass('os-loading').find('.os-loading').removeClass('os-loading'); |
| 75 | latepoint_show_message_inside_element(error.message, $transaction_payment_form.find('.lp-payment-method-content'), 'error'); |
| 76 | return false; |
| 77 | } |
| 78 | |
| 79 | |
| 80 | try { |
| 81 | let response = await jQuery.ajax({ |
| 82 | type: "post", |
| 83 | dataType: "json", |
| 84 | processData: false, |
| 85 | contentType: false, |
| 86 | url: latepoint_timestamped_ajaxurl(), |
| 87 | data: latepoint_create_form_data($transaction_payment_form, latepoint_helper.invoices_payment_form_route) |
| 88 | }); |
| 89 | |
| 90 | $transaction_payment_form.removeClass('os-loading').find('.os-loading').removeClass('os-loading'); |
| 91 | |
| 92 | if (response.status === 'success') { |
| 93 | $transaction_payment_form.html(response.message); |
| 94 | return await latepoint_init_transaction_payment_form(); |
| 95 | |
| 96 | } else { |
| 97 | latepoint_show_message_inside_element(response.message, $transaction_payment_form.find('.lp-payment-method-content'), 'error'); |
| 98 | return false; |
| 99 | } |
| 100 | } catch (e) { |
| 101 | |
| 102 | $transaction_payment_form.removeClass('os-loading').find('.os-loading').removeClass('os-loading'); |
| 103 | console.log(e); |
| 104 | alert('Error:' + e); |
| 105 | } |
| 106 | |
| 107 | } |
| 108 | |
| 109 | function latepoint_hide_reschedule_button() { |
| 110 | jQuery('.reschedule-confirmation-button-wrapper').hide(); |
| 111 | } |
| 112 | |
| 113 | function latepoint_show_reschedule_button() { |
| 114 | jQuery('.reschedule-confirmation-button-wrapper').show(); |
| 115 | } |
| 116 | |
| 117 | function latepoint_customer_cabinet_reload_booking_tile($booking_tile) { |
| 118 | $booking_tile.addClass('os-loading'); |
| 119 | let params = { |
| 120 | booking_id: $booking_tile.data('id'), |
| 121 | } |
| 122 | let data = { |
| 123 | action: latepoint_helper.route_action, |
| 124 | route_name: $booking_tile.data('route-name'), |
| 125 | params: params, |
| 126 | layout: 'none', |
| 127 | return_format: 'json' |
| 128 | }; |
| 129 | jQuery.ajax({ |
| 130 | type: "post", |
| 131 | dataType: "json", |
| 132 | url: latepoint_timestamped_ajaxurl(), |
| 133 | data: data, |
| 134 | success: function (data) { |
| 135 | $booking_tile.removeClass('os-loading') |
| 136 | if (data.status === "success") { |
| 137 | $booking_tile.replaceWith(data.message); |
| 138 | } else { |
| 139 | alert(data.message); |
| 140 | } |
| 141 | } |
| 142 | }); |
| 143 | } |
| 144 | |
| 145 | // show invoices -> summary_before_payment in modal |
| 146 | function show_summary_before_payment($access_key) { |
| 147 | let data = { |
| 148 | action: latepoint_helper.route_action, |
| 149 | route_name: latepoint_helper.invoices_summary_before_payment_route, |
| 150 | params: {key: $access_key}, |
| 151 | layout: 'none', |
| 152 | return_format: 'json' |
| 153 | } |
| 154 | |
| 155 | jQuery.ajax({ |
| 156 | type: "post", |
| 157 | dataType: "json", |
| 158 | url: latepoint_timestamped_ajaxurl(), |
| 159 | data: data, |
| 160 | success: function (data) { |
| 161 | latepoint_show_data_in_lightbox(data.message, 'width-500'); |
| 162 | } |
| 163 | }); |
| 164 | } |
| 165 | |
| 166 | function latepoint_reload_reschedule_calendar($reschedule_calendar_wrapper) { |
| 167 | $reschedule_calendar_wrapper.addClass('os-loading'); |
| 168 | let $calendar_element = $reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active').last(); |
| 169 | let calendar_year = $calendar_element.data('calendar-year'); |
| 170 | let calendar_month = $calendar_element.data('calendar-month'); |
| 171 | |
| 172 | let data = { |
| 173 | action: latepoint_helper.route_action, |
| 174 | route_name: $reschedule_calendar_wrapper.data('route'), |
| 175 | params: { |
| 176 | timezone_name: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_timezone_name').val(), |
| 177 | key: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_manage_booking_key').val(), |
| 178 | target_date_string: `${calendar_year}-${calendar_month}-1`, |
| 179 | booking_id: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_booking_id').val() |
| 180 | }, |
| 181 | layout: 'none', |
| 182 | return_format: 'json' |
| 183 | } |
| 184 | jQuery.ajax({ |
| 185 | type: "post", |
| 186 | dataType: "json", |
| 187 | url: latepoint_timestamped_ajaxurl(), |
| 188 | data: data, |
| 189 | success: function (data) { |
| 190 | $reschedule_calendar_wrapper.removeClass('os-loading'); |
| 191 | if (data.status === "success") { |
| 192 | jQuery('.latepoint-lightbox-i').html(data.message); |
| 193 | } else { |
| 194 | // console.log(data.message); |
| 195 | } |
| 196 | } |
| 197 | }); |
| 198 | latepoint_calendar_show_or_hide_prev_next_buttons($reschedule_calendar_wrapper); |
| 199 | return false; |
| 200 | } |
| 201 | |
| 202 | function latepoint_init_reschedule() { |
| 203 | |
| 204 | let $reschedule_wrapper = jQuery('.reschedule-calendar-wrapper'); |
| 205 | |
| 206 | latepoint_init_timezone_picker($reschedule_wrapper); |
| 207 | |
| 208 | $reschedule_wrapper.on('click', '.latepoint-request-reschedule-trigger', function () { |
| 209 | let $trigger = jQuery(this) |
| 210 | let $wrapper = $trigger.closest('.reschedule-calendar-wrapper') |
| 211 | let booking_id = $wrapper.find('input[type="hidden"].latepoint_booking_id').val() |
| 212 | |
| 213 | $trigger.addClass('os-loading') |
| 214 | let params = { |
| 215 | booking_id: booking_id, |
| 216 | key: $wrapper.find('input[type="hidden"].latepoint_manage_booking_key').val(), |
| 217 | start_date: $wrapper.find('input[type="hidden"].latepoint_start_date').val(), |
| 218 | start_time: $wrapper.find('input[type="hidden"].latepoint_start_time').val(), |
| 219 | timezone_name: $wrapper.find('input[type="hidden"].latepoint_timezone_name').val(), |
| 220 | } |
| 221 | let data = { |
| 222 | action: latepoint_helper.route_action, |
| 223 | route_name: $trigger.data('route-name'), |
| 224 | params: params, |
| 225 | layout: 'none', |
| 226 | return_format: 'json' |
| 227 | }; |
| 228 | jQuery.ajax({ |
| 229 | type: "post", |
| 230 | dataType: "json", |
| 231 | url: latepoint_timestamped_ajaxurl(), |
| 232 | data: data, |
| 233 | success: function (data) { |
| 234 | $trigger.removeClass('os-loading') |
| 235 | if (data.status === "success") { |
| 236 | jQuery('.latepoint-lightbox-content').html(data.message); |
| 237 | jQuery('.latepoint-lightbox-footer, .latepoint-lightbox-heading').remove(); |
| 238 | if (jQuery('.customer-bookings-tiles').length) { |
| 239 | // called from customer cabinet |
| 240 | latepoint_customer_cabinet_reload_booking_tile(jQuery('.customer-bookings-tiles .customer-booking[data-id="' + booking_id + '"]')); |
| 241 | } else { |
| 242 | // called from manage by key |
| 243 | latepoint_manage_by_key_reload_booking(); |
| 244 | } |
| 245 | } else { |
| 246 | latepoint_show_message_inside_element(data.message, jQuery('.latepoint-lightbox-content'), 'error'); |
| 247 | jQuery('.latepoint-lightbox-content').animate({scrollTop: 0}, 300); |
| 248 | } |
| 249 | } |
| 250 | }); |
| 251 | return false; |
| 252 | }); |
| 253 | |
| 254 | $reschedule_wrapper.on('click keydown', '.dp-timepicker-trigger', function (event) { |
| 255 | if (event.type === 'keydown' && event.key !== ' ' && event.key !== 'Enter') return; |
| 256 | var $reschedule_calendar_wrapper = jQuery(this).closest('.reschedule-calendar-wrapper'); |
| 257 | if (jQuery(this).hasClass('is-booked') || jQuery(this).hasClass('is-off')) { |
| 258 | // Show error message that you cant select a booked period |
| 259 | } else { |
| 260 | if (jQuery(this).hasClass('selected')) { |
| 261 | jQuery(this).removeClass('selected'); |
| 262 | jQuery(this).find('.dp-success-label').remove(); |
| 263 | $reschedule_calendar_wrapper.find('.latepoint_start_time').val(''); |
| 264 | latepoint_hide_reschedule_button(); |
| 265 | } else { |
| 266 | $reschedule_calendar_wrapper.find('.dp-timepicker-trigger.selected').removeClass('selected').find('.dp-success-label').remove(); |
| 267 | var selected_timeslot_time = jQuery(this).find('.dp-label-time').html(); |
| 268 | jQuery(this).addClass('selected').find('.dp-label').prepend('<span class="dp-success-label">' + latepoint_helper.datepicker_timeslot_selected_label + '</span>'); |
| 269 | |
| 270 | var minutes = parseInt(jQuery(this).data('minutes')); |
| 271 | var start_date = new Date($reschedule_calendar_wrapper.find('.os-day.selected').data('date')); |
| 272 | |
| 273 | $reschedule_calendar_wrapper.find('.latepoint_start_date').val(start_date.toISOString().split('T')[0]) |
| 274 | $reschedule_calendar_wrapper.find('.latepoint_start_time').val(minutes); |
| 275 | latepoint_show_reschedule_button(); |
| 276 | } |
| 277 | } |
| 278 | return false; |
| 279 | }); |
| 280 | |
| 281 | |
| 282 | $reschedule_wrapper.on('click', '.os-month-next-btn', function () { |
| 283 | var $reschedule_calendar_wrapper = jQuery(this).closest('.reschedule-calendar-wrapper'); |
| 284 | var next_month_route_name = jQuery(this).data('route'); |
| 285 | if ($reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active + .os-monthly-calendar-days-w').length) { |
| 286 | $reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active').removeClass('active').next('.os-monthly-calendar-days-w').addClass('active'); |
| 287 | latepoint_calendar_set_month_label($reschedule_calendar_wrapper); |
| 288 | } else { |
| 289 | // TODO add condition to check maximum number months to call into the future |
| 290 | if (true) { |
| 291 | var $btn = jQuery(this); |
| 292 | $btn.addClass('os-loading'); |
| 293 | var $calendar_element = $reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w').last(); |
| 294 | var calendar_year = $calendar_element.data('calendar-year'); |
| 295 | var calendar_month = $calendar_element.data('calendar-month'); |
| 296 | if (calendar_month == 12) { |
| 297 | calendar_year = calendar_year + 1; |
| 298 | calendar_month = 1; |
| 299 | } else { |
| 300 | calendar_month = calendar_month + 1; |
| 301 | } |
| 302 | var data = { |
| 303 | action: latepoint_helper.route_action, |
| 304 | route_name: next_month_route_name, |
| 305 | params: { |
| 306 | timezone_name: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_timezone_name').val(), |
| 307 | key: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_manage_booking_key').val(), |
| 308 | target_date_string: `${calendar_year}-${calendar_month}-1`, |
| 309 | booking: { |
| 310 | id: $reschedule_calendar_wrapper.find('input[type="hidden"].latepoint_booking_id').val() |
| 311 | } |
| 312 | }, |
| 313 | layout: 'none', |
| 314 | return_format: 'json' |
| 315 | } |
| 316 | jQuery.ajax({ |
| 317 | type: "post", |
| 318 | dataType: "json", |
| 319 | url: latepoint_timestamped_ajaxurl(), |
| 320 | data: data, |
| 321 | success: function (data) { |
| 322 | $btn.removeClass('os-loading'); |
| 323 | if (data.status === "success") { |
| 324 | $reschedule_calendar_wrapper.find('.os-months').append(data.message); |
| 325 | $reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active').removeClass('active').next('.os-monthly-calendar-days-w').addClass('active'); |
| 326 | latepoint_calendar_set_month_label($reschedule_calendar_wrapper); |
| 327 | } else { |
| 328 | // console.log(data.message); |
| 329 | } |
| 330 | } |
| 331 | }); |
| 332 | } |
| 333 | } |
| 334 | latepoint_calendar_show_or_hide_prev_next_buttons($reschedule_calendar_wrapper); |
| 335 | return false; |
| 336 | }); |
| 337 | |
| 338 | $reschedule_wrapper.on('click', '.os-month-prev-btn', function () { |
| 339 | var $reschedule_calendar_wrapper = jQuery(this).closest('.reschedule-calendar-wrapper'); |
| 340 | if ($reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active').prev('.os-monthly-calendar-days-w').length) { |
| 341 | $reschedule_calendar_wrapper.find('.os-monthly-calendar-days-w.active').removeClass('active').prev('.os-monthly-calendar-days-w').addClass('active'); |
| 342 | latepoint_calendar_set_month_label($reschedule_calendar_wrapper); |
| 343 | } |
| 344 | latepoint_calendar_show_or_hide_prev_next_buttons($reschedule_calendar_wrapper); |
| 345 | return false; |
| 346 | }); |
| 347 | |
| 348 | $reschedule_wrapper.on('click', '.os-day', function () { |
| 349 | if (jQuery(this).hasClass('os-day-passed')) return false; |
| 350 | if (jQuery(this).hasClass('os-not-in-allowed-period')) return false; |
| 351 | if(jQuery(this).closest('.os-dates-and-times-w').hasClass('calendar-style-modern')){ |
| 352 | if(jQuery(this).hasClass('os-month-prev')) return false; |
| 353 | if(jQuery(this).hasClass('os-month-next')) return false; |
| 354 | } |
| 355 | var $reschedule_calendar_wrapper = jQuery(this).closest('.reschedule-calendar-wrapper'); |
| 356 | if (jQuery(this).closest('.os-monthly-calendar-days-w').hasClass('hide-if-single-slot')) { |
| 357 | |
| 358 | // HIDE TIMESLOT IF ONLY ONE TIMEPOINT |
| 359 | if (jQuery(this).hasClass('os-not-available')) { |
| 360 | // clicked on a day that has no available timeslots |
| 361 | // do nothing |
| 362 | } else { |
| 363 | $reschedule_calendar_wrapper.find('.os-day.selected').removeClass('selected'); |
| 364 | jQuery(this).addClass('selected'); |
| 365 | // set date |
| 366 | $reschedule_calendar_wrapper.find('.latepoint_start_date').val(jQuery(this).data('date')); |
| 367 | if (jQuery(this).hasClass('os-one-slot-only')) { |
| 368 | // clicked on a day that has only one slot available |
| 369 | var bookable_minutes = jQuery(this).data('bookable-minutes').toString().split(':')[0]; |
| 370 | var selected_timeslot_time = latepoint_format_minutes_to_time(Number(bookable_minutes), Number(jQuery(this).data('service-duration'))); |
| 371 | $reschedule_calendar_wrapper.find('.latepoint_start_time').val(jQuery(this).data('bookable-minutes')); |
| 372 | $reschedule_calendar_wrapper.find('.time-selector-w').slideUp(200); |
| 373 | latepoint_show_reschedule_button() |
| 374 | } else { |
| 375 | // regular day with more than 1 timeslots available |
| 376 | // build timeslots |
| 377 | latepoint_generate_day_timeslots(jQuery(this), $reschedule_calendar_wrapper, $reschedule_calendar_wrapper.find('.latepoint-lightbox-content')); |
| 378 | // initialize timeslots events |
| 379 | // clear time and hide next btn |
| 380 | $reschedule_calendar_wrapper.find('.latepoint_start_time').val(''); |
| 381 | } |
| 382 | } |
| 383 | } else { |
| 384 | |
| 385 | // SHOW TIMESLOTS EVEN IF ONLY ONE TIMEPOINT |
| 386 | $reschedule_calendar_wrapper.find('.latepoint_start_date').val(jQuery(this).data('date')); |
| 387 | $reschedule_calendar_wrapper.find('.os-day.selected').removeClass('selected'); |
| 388 | jQuery(this).addClass('selected'); |
| 389 | |
| 390 | // build timeslots |
| 391 | latepoint_generate_day_timeslots(jQuery(this), $reschedule_calendar_wrapper, $reschedule_calendar_wrapper.find('.latepoint-lightbox-content')); |
| 392 | // initialize timeslots events |
| 393 | // clear time and hide next btn |
| 394 | let $booking_form_element = jQuery(this).closest('.latepoint-booking-form-element'); |
| 395 | if ($booking_form_element.length) latepoint_reload_summary($booking_form_element); |
| 396 | $reschedule_calendar_wrapper.find('.latepoint_start_time').val(''); |
| 397 | latepoint_hide_next_btn($reschedule_calendar_wrapper); |
| 398 | } |
| 399 | |
| 400 | return false; |
| 401 | }); |
| 402 | } |
| 403 |