{"id":1892,"date":"2025-07-11T11:05:01","date_gmt":"2025-07-11T10:05:01","guid":{"rendered":"https:\/\/orangerepairs.co.uk\/?page_id=1892"},"modified":"2026-04-17T15:39:56","modified_gmt":"2026-04-17T14:39:56","slug":"book-now","status":"publish","type":"page","link":"https:\/\/orangerepairs.co.uk\/?page_id=1892","title":{"rendered":"Book Now!"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1892\" class=\"elementor elementor-1892\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dee4a54 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dee4a54\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-f70dce8\" data-id=\"f70dce8\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2c8b8f5 elementor-widget elementor-widget-html\" data-id=\"2c8b8f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div style=\"text-align: left; color: #003366; font-size: 24px; font-weight: 700;\">\r\n  <span style=\"color: #DAA520;\">Callout\/labour is <\/span> \u00a365, plus parts. Select the service you want from us below.\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f145430 elementor-widget elementor-widget-html\" data-id=\"f145430\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4\/dist\/email.min.js\"><\/script>\r\n<script>\r\nwindow.addEventListener(\"load\", function () {\r\nconst STORAGE_KEY = \"booklyBookingData\";\r\n    localStorage.removeItem( STORAGE_KEY )\r\n    \r\n  function clickNextButton() {\r\n     const button = document.querySelector(\".bookly-js-next-step\");\r\n    \r\n\r\n    if (button) {\r\n      button.addEventListener(\"click\", function () {\r\n          \r\n        console.log(\"Bookly: \");\r\nconst selects = document.getElementsByTagName(\"select\");\r\n\r\n    let specialistSelect = null;\r\n    let categorySelect = null;\r\n    let serviceSelect = null;\r\n    \r\n\r\n\r\nif ( selects!=null ) {\r\n    \/\/ Identify selects by first option text\r\n    for (let i = 0; i < selects.length; i++) {\r\n      const firstOptionText = selects[i].options[0].text.trim();\r\n\r\n      if (firstOptionText === \"Any\") {\r\n        specialistSelect = selects[i];\r\n      }\r\n\r\n      if (firstOptionText === \"Select category\") {\r\n        categorySelect = selects[i];\r\n      }\r\n\r\n      if (firstOptionText === \"Please select a group\") {\r\n        serviceSelect = selects[i];\r\n      }\r\n    }\r\n    \r\n     if (!specialistSelect || !categorySelect || !serviceSelect) {\r\n      console.warn(\"Required select fields not found.\");\r\n      return;\r\n    }\r\n    \r\n    \r\n}\r\n      \/\/ ---- Extract Values + Labels ----\r\n    const specialistValue = (specialistSelect!=null?specialistSelect.value:\"\");\r\n    const specialistLabel = (specialistSelect!=null?specialistSelect.options[specialistSelect.selectedIndex].text:\"\");\r\n\r\n    const categoryValue = (categorySelect!=null?categorySelect.value:\"\");\r\n    const categoryLabel = (categorySelect!=null?categorySelect.options[categorySelect.selectedIndex].text:\"\");\r\n\r\n    const serviceValue = (serviceSelect!=null?serviceSelect.value:\"\");\r\n    const serviceLabel = (serviceSelect!=null?serviceSelect.options[serviceSelect.selectedIndex].text:\"\");\r\n    \r\n\r\n  \r\n    \/\/ Example validation\r\n    if (categoryValue === \"0\" || serviceValue === \"0\") {\r\n      console.log(\"Please select a valid category and service.\");\r\n      return;\r\n    }\r\n    \r\n    \r\n    \/\/ Example validation\r\n    if (categoryValue === \"\" || serviceValue === \"\") {\r\n      console.log(\"Please select a valid category and service.\");\r\n      return;\r\n    }\r\n\r\n   \/\/ Retrieve existing bookingData from localStorage\r\n    let bookingData = JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};\r\n    \r\n    console.log(\"bookingData01: \", bookingData);\r\n\r\n    \/* ----------------------------------\r\n       INPUT FIELDS (via class selector)\r\n    ---------------------------------- *\/\r\n\r\n    const firstNameInput = document.querySelector(\".bookly-js-first-name\");\r\n    const lastNameInput = document.querySelector(\".bookly-js-last-name\");\r\n    const phoneInput = document.querySelector(\".bookly-js-user-phone-input\");\r\n    const emailInput = document.querySelector(\".bookly-js-user-email\");\r\n    const notesInput = document.querySelector(\".bookly-js-user-notes\");\r\n    \r\n    const firstName = firstNameInput && firstNameInput.value.trim() !== \"\" \r\n      ? firstNameInput.value.trim() \r\n      : null;\r\n\r\n    const lastName = lastNameInput && lastNameInput.value.trim() !== \"\" \r\n      ? lastNameInput.value.trim() \r\n      : null;\r\n\r\n    const phone = phoneInput && phoneInput.value.trim() !== \"\" \r\n      ? phoneInput.value.trim() \r\n      : null;\r\n\r\n    const email = emailInput && emailInput.value.trim() !== \"\" \r\n      ? emailInput.value.trim() \r\n      : null;\r\n\r\n    const notes = notesInput && notesInput.value.trim() !== \"\" \r\n      ? notesInput.value.trim() \r\n      : null;\r\n\r\n\r\n    \/* ----------------------------------\r\n       FINAL STRUCTURED OBJECT\r\n    ---------------------------------- *\/\r\n    \r\n    const address = document.getElementById(\"custom-address\").value;\r\n    const postCode = document.getElementById(\"custom-postcode\").value;\r\n\r\nconsole.log( \"ADDR: \", address, postCode )\r\n\r\n    const bookingData_ = {\r\n      specialist: { value: (specialistValue!=null?specialistValue:bookingData.specialist.value), label: (specialistLabel!=null?specialistLabel:bookingData.specialist.label) },\r\n      category: { value: (categoryValue!=null?categoryValue:bookingData.category.value), label: (categoryLabel!=null?categoryLabel:bookingData.category.label) },\r\n      service: { value: (serviceValue!=null?serviceValue:bookingData.service.value), label: (serviceLabel!=null?serviceLabel:bookingData.service.label) },\r\n      customer: {\r\n        firstName,\r\n        lastName,\r\n        phone,\r\n        email,\r\n        address,\r\n        postCode,\r\n        notes\r\n      }\r\n    };\r\n\r\n    \/\/console.log(\"Complete Booking Data:\", bookingData_);\r\n    console.log(\"bookingData02: \", bookingData);\r\n\r\n\r\n\r\n \r\n\r\n\r\n     localStorage.setItem(STORAGE_KEY, JSON.stringify(bookingData_));\r\n          \r\n          console.log(\"Bookly Next button auto-clicked\");\r\n})\r\n      console.log(\"Bookly Next button auto-clicked\");\r\n      \r\n     \r\n\r\n      return true;\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n function isEmpty(obj) {\r\n  for (const prop in obj) {\r\n    if (Object.hasOwn(obj, prop)) {\r\n      return false;\r\n    }\r\n  }\r\n\r\n  return true;\r\n}\r\nlet sent = false\r\n  var interval01 = setInterval(function () {\r\n      \r\n      const button = document.querySelector(\".bookly-js-next-step\");\r\n      \r\n      const pay = document.querySelector(\".bookly-js-payment\");\r\n      \r\n    \/\/ Retrieve existing bookingData from localStorage\r\n    let bookingData = JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};\r\n    \r\n   \/\/console.log(\"Clicker---105\");\r\n       if (isEmpty(bookingData)) {\r\n          if (!clickNextButton()) {\r\n    \r\n            \/\/ If not found, keep checking (Bookly loads via AJAX)\r\n            var interval = setInterval(function () {\r\n              if (clickNextButton()) {\r\n                clearInterval(interval);\r\n              }\r\n            }, 500);\r\n        \r\n          }\r\n          \r\n       } else if ( pay!=null && !sent ) {\r\n           \r\n          \/\/console.log(\"Clicker---106\", pay);\r\n        if (button!=null) {\r\n            console.log(\"Clicker---107\", pay);\r\n           sent = true;\r\n           clearInterval(interval01);\r\n         button.addEventListener(\"click\", function () {\r\n            console.log(\"Clicker---108\", sent);\r\n            if ( !sent ) return;\r\n           \r\n           sent = false;\r\n            console.log(\"Clicker---2\");\r\n            emailjs.init(\"DdGllD-iaZ7XUj4SU\");\r\n            \r\n           const {\r\n              specialist,\r\n              category,\r\n              service,\r\n              customer: { _firstName, _lastName, _phone, _email, _notes, address, postCode }\r\n            } = bookingData;\r\n            \r\n            const emailTemplateHTML = `\r\n            New Booking Received\r\n            \r\n            Specialist: ${specialist.label} \r\n            Category: ${category.label} \r\n            Service: ${service.label} \r\n            \r\n            Customer Details:\r\n            Full name: ${_firstName} \r\n            Address: ${bookingData.customer.address}\r\n            Postcode: ${bookingData.customer.postCode}\r\n            Date for the job: ${bookingData.customer.date}\r\n            Time for the job: ${bookingData.customer.time}\r\n            Model: ${_lastName}\r\n            Phone: ${_phone}\r\n            Email: ${_email}\r\n            Fault type: ${_notes || 'N\/A'}\r\n            \r\n            -----------------------------\r\n            Please log in to the admin panel to manage this booking.\r\n            `;\r\n         \r\n         \r\n          emailjs.send(\"service_dsod9rd\", \"template_amqnhzq\", {\r\n                    name: \"User\",\r\n                    email: \"orangehutlimited@gmail.com\",\r\n                    message: emailTemplateHTML\r\n                  })\r\n              .then(function() {\r\n                    console.log(\"Message sent successfully!\");\r\n                  }, function(error) {\r\n                    console.log(\"Failed to send message: \" + JSON.stringify(error));\r\n                  }); \r\n\r\n        \r\n                  \r\n            \/\/console.log(\"Clicker---109\", bookingData );\r\n            console.log(\"Clicker---109\", emailTemplateHTML );\r\n            \r\n            \r\n           });\r\n           return\r\n        }\r\n            \/\/clearInterval(interval01);\r\n           \r\n       \r\n       } else {\r\n           \r\n      \r\n        if (button!=null) {\r\n           button.addEventListener(\"click\", function () {\r\n               \r\n                   \/\/console.log(\"Clicker---1\");\r\n           const firstNameInput = document.querySelector(\".bookly-js-first-name\");\r\n          const lastNameInput = document.querySelector(\".bookly-js-last-name\");\r\n          const phoneInput = document.querySelector(\".bookly-js-user-phone-input\");\r\n          const emailInput = document.querySelector(\".bookly-js-user-email\");\r\n          const notesInput = document.querySelector(\".bookly-js-user-notes\");\r\n          \r\n          \/\/ Dynamically read input values\r\n        const _firstName = firstNameInput?.value.trim() || null;\r\n        const _lastName = lastNameInput?.value.trim() || null;\r\n        const _phone = phoneInput?.value.trim() || null;\r\n        const _email = emailInput?.value.trim() || null;\r\n        const _notes = notesInput?.value.trim() || null;\r\n        \r\n        let bookingData = JSON.parse(localStorage.getItem(STORAGE_KEY)) || {};\r\n        \r\n        const {\r\n              specialist,\r\n              category,\r\n              service,\r\n              customer: { firstName, lastName, phone, email, notes, \r\n                  time, \r\n                  date,address, postCode }\r\n            } = bookingData;\r\n          \r\n          \r\n          \/\/console.log(\"Clicker---1001a\", bookingData);\r\n          bookingData.customer = {\r\n              _firstName,\r\n              _lastName,\r\n              _phone,\r\n              _email,\r\n              _notes,\r\n              time,\r\n              date,\r\n              address, \r\n              postCode\r\n            };\r\n            \r\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(bookingData));\r\n            \/\/console.log(\"Clicker---1001\", bookingData);\r\n          });\r\n        }\r\n           \r\n      }\r\n       \r\nfunction findParentColumn(element) {\r\n    while (element && !element.classList.contains(\"bookly-column\")) {\r\n        element = element.parentElement;\r\n    }\r\n    return element;\r\n}\r\n\r\nconst booklyHours = document.querySelectorAll(\".bookly-hour\");\r\n\r\nbooklyHours.forEach(button => {\r\n    button.addEventListener(\"click\", function () {\r\n\r\n        const column = findParentColumn(this);\r\n        if (!column) return;\r\n\r\n        const date = column.querySelector(\".bookly-day\")?.value || null;\r\n        const time = this.querySelector(\".bookly-time-main\")?.textContent.trim()\r\n                     || this.textContent.trim();\r\n                     \r\n        const {\r\n              specialist,\r\n              category,\r\n              service,\r\n              customer: { firstName, lastName, phone, email, notes, address, postCode }\r\n            } = bookingData;\r\n\r\n        bookingData.customer = {\r\n                  firstName,\r\n                  lastName,\r\n                  phone,\r\n                  email,\r\n                  notes,\r\n                  time, \r\n                  date,\r\n                  address,\r\n                  postCode\r\n                };\r\n                \r\n                      \r\n        localStorage.setItem(STORAGE_KEY, JSON.stringify(bookingData));\r\n        \/\/console.log(\"Date:\", bookingData);\r\n    });\r\n});\r\n  \r\n  }, 2500);\r\n  \r\n  \r\n  \r\n  setTimeout( ()=> {\r\n      \r\n\r\n  \r\n    const chain = document.querySelector(\".bookly-js-chain\");\r\n \r\n  \/\/console.log(\"Chain:\", chain);\r\n    if (!chain) return;\r\n\r\n    \/* ---------------------------\r\n       1\ufe0f\u20e3 Create Address Field\r\n    ----------------------------*\/\r\n    const addressGroup = document.createElement(\"div\");\r\n    addressGroup.className = \"bookly-form-group custom-address-group\";\r\n    addressGroup.innerHTML = `\r\n        <label for=\"custom-address\">Your Address<\/label>\r\n        <div>\r\n            <input type=\"text\" id=\"custom-address\" class=\"bookly-js-address\" placeholder=\"Enter your address\">\r\n        <\/div>\r\n    `;\r\n\r\n    \/* ---------------------------\r\n       2\ufe0f\u20e3 Create Post Code Field\r\n    ----------------------------*\/\r\n    const postcodeGroup = document.createElement(\"div\");\r\n    postcodeGroup.className = \"bookly-form-group custom-postcode-group\";\r\n    postcodeGroup.innerHTML = `\r\n        <label for=\"custom-postcode\">Post Code<\/label>\r\n        <div>\r\n            <input type=\"text\" id=\"custom-postcode\" class=\"bookly-js-postcode\" placeholder=\"Enter your post code\">\r\n        <\/div>\r\n    `;\r\n\r\n    \/\/ Append fields at the top (you can change position if needed)\r\n    chain.querySelector(\".bookly-table\").prepend(postcodeGroup);\r\n    chain.querySelector(\".bookly-table\").prepend(addressGroup);\r\n\r\n\r\n    \/* ---------------------------\r\n       3\ufe0f\u20e3 Listen for Select Changes\r\n    ----------------------------*\/\r\n    chain.addEventListener(\"click\", function (e) {\r\n\r\n        if (e.target.tagName !== \"SELECT\") return;\r\n\r\n        const address = document.querySelector(\"#custom-address\").value.trim();\r\n        const postcode = document.querySelector(\"#custom-postcode\").value.trim();\r\n\r\n        if (!address || !postcode) {\r\n\r\n            \/\/ Clear all select fields inside this chain\r\n            const selects = chain.querySelectorAll(\"select\");\r\n            selects.forEach(select => select.selectedIndex = 0);\r\n\r\n            alert(\"Please enter your Address and Post Code first.\");\r\n        }\r\n    });\r\n    \r\n           \r\n  }, 2000 )\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca747a3 elementor-widget elementor-widget-html\" data-id=\"ca747a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bookingor-wrapper\">\r\n  <!--\nPlugin Name: Bookly - Responsive WordPress Appointment Booking and Scheduling Plugin\nPlugin URI: https:\/\/www.booking-wp-plugin.com\/?utm_source=bookly_admin&utm_medium=plugins_page&utm_campaign=plugins_page\nVersion: 27.5-->\n<style type=\"text\/css\">\n    :root {\n        --bookly-main-color: #003366 !important;\n        --bookly-color: #003366 !important;\n    }\n\n    <\/style><div class=\"bookly-css-root\">\n    <div id=\"bookly-form-container-69f20ad616eb2\" class=\"bookly-form\" data-form_id=\"\" aria-live=\"polite\">\n        <div style=\"text-align: center\"><img decoding=\"async\" src=\"https:\/\/orangerepairs.co.uk\/wp-includes\/js\/tinymce\/skins\/lightgray\/img\/loader.gif\" alt=\"Loading...\"\/><\/div>\n    <\/div>\n<\/div>\n<script type=\"text\/javascript\">\n    (function (win, fn) {\n        var done = false, top = true,\n            doc = win.document,\n            root = doc.documentElement,\n            modern = doc.addEventListener,\n            add = modern ? 'addEventListener' : 'attachEvent',\n            rem = modern ? 'removeEventListener' : 'detachEvent',\n            pre = modern ? '' : 'on',\n            init = function (e) {\n                if (e.type == 'readystatechange') if (doc.readyState != 'complete') return;\n                (e.type == 'load' ? win : doc)[rem](pre + e.type, init, false);\n                if (!done) {\n                    done = true;\n                    fn.call(win, e.type || e);\n                }\n            },\n            poll = function () {\n                try {\n                    root.doScroll('left');\n                } catch (e) {\n                    setTimeout(poll, 50);\n                    return;\n                }\n                init('poll');\n            };\n        if (doc.readyState == 'complete') fn.call(win, 'lazy');\n        else {\n            if (!modern) if (root.doScroll) {\n                try {\n                    top = !win.frameElement;\n                } catch (e) {\n                }\n                if (top) poll();\n            }\n            doc[add](pre + 'DOMContentLoaded', init, false);\n            doc[add](pre + 'readystatechange', init, false);\n            win[add](pre + 'load', init, false);\n        }\n    })(window, function () {\n        window.bookly( {\"form_id\":\"69f20ad616eb2\",\"form_data\":{\"skip_service_step\":0,\"hide_service_part1\":0,\"hide_service_part2\":0,\"defaults\":{\"service_id\":0,\"staff_id\":0,\"location_id\":0,\"category_id\":0,\"units\":0,\"date_from\":0,\"time_from\":0,\"time_to\":0}},\"status\":{\"booking\":\"new\"},\"form_token\":null,\"skip_steps\":{\"service_part1\":0,\"service_part2\":0,\"extras\":1,\"time\":0,\"repeat\":1,\"cart\":1},\"errors\":{\"session_error\":\"Session error.\",\"form_id_error\":\"Form ID error.\",\"cart_item_not_available\":\"The selected time is not available anymore. Please, choose another time slot.\",\"pay_locally_not_available\":\"Pay locally is not available.\",\"invalid_gateway\":\"Invalid gateway.\",\"payment_error\":\"Error.\",\"incorrect_username_password\":\"Incorrect username or password.\"},\"form_attributes\":{\"hide_categories\":false,\"hide_services\":false,\"hide_staff_members\":false,\"show_number_of_persons\":false,\"hide_service_duration\":true,\"hide_locations\":true,\"hide_quantity\":true,\"hide_date\":false,\"hide_week_days\":false,\"hide_time_range\":false},\"use_client_time_zone\":1,\"defaults\":{\"service_id\":0,\"staff_id\":0,\"location_id\":0,\"category_id\":0},\"datepicker_mode\":\"text-accent\"} );\n    });\n<\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-64c2a27 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"64c2a27\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-dee4450\" data-id=\"dee4450\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Callout\/labour is \u00a365, plus parts. Select the service you want from us below.<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1892","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1892","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1892"}],"version-history":[{"count":472,"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1892\/revisions"}],"predecessor-version":[{"id":2729,"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/1892\/revisions\/2729"}],"wp:attachment":[{"href":"https:\/\/orangerepairs.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}