{"id":103729,"date":"2025-02-10T15:31:13","date_gmt":"2025-02-10T14:31:13","guid":{"rendered":"https:\/\/hempions.com\/?page_id=103729"},"modified":"2025-07-21T10:08:00","modified_gmt":"2025-07-21T08:08:00","slug":"b2b-onboarding","status":"publish","type":"page","link":"https:\/\/staging.hempions.com\/en\/b2b-onboarding\/","title":{"rendered":"B2B onboarding"},"content":{"rendered":"<div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyCMYP9XKoPsThF8JJJE_hkzECWYdH4xZME&#038;libraries=places\"><\/script>\n\n<script> \ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    let step = 1;\n    let userData = {};\n\n    function showStep() {\n        document.querySelectorAll(\".step\").forEach(el => el.style.display = \"none\");\n        document.getElementById(`step-${step}`).style.display = \"block\";\n\n        document.getElementById(\"backBtn\").style.display = step > 1 ? \"inline-block\" : \"none\";\n        document.getElementById(\"nextBtn\").style.display = step < 4 ? \"inline-block\" : \"none\";\n        document.getElementById(\"submitBtn\").style.display = step === 4 ? \"inline-block\" : \"none\";\n    }\n\n    function nextStep() {\n        if (!validateStep()) return;\n        saveData();\n        step++;\n        showStep();\n        restoreData();\n    }\n\n    function prevStep() {\n        step--;\n        showStep();\n        restoreData();\n    }\n\n    function saveData() {\n        document.querySelectorAll(`#step-${step} input, #step-${step} select`).forEach(input => {\n            userData[input.name] = input.value;\n        });\n    }\n\n    function restoreData() {\n        document.querySelectorAll(`#step-${step} input, #step-${step} select`).forEach(input => {\n            if (userData[input.name]) input.value = userData[input.name];\n        });\n    }\n\n    function validateStep() {\n        let isValid = true;\n        let missingFields = [];\n\n        document.querySelectorAll(`#step-${step} input[required], #step-${step} select[required]`).forEach(input => {\n            if (!input.value.trim()) {\n                isValid = false;\n                missingFields.push(input.placeholder || input.name);\n            }\n        });\n\n        if (missingFields.length) {\n            if (window.location.href.includes(\"\/en\/\")) {\n                alert(\"Please fill in: \" + missingFields.join(\", \"));\n            } else {\n                alert(\"Bitte folgende Felder ausf\u00fcllen: \" + missingFields.join(\", \"));\n            }\n            return false;\n        }\n\n        if (step === 2) {\n            let email = document.getElementById(\"email\").value;\n            let emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n            if (!emailPattern.test(email)) {\n                if (window.location.href.includes(\"\/en\/\")) {\n                    alert(\"Invalid e-mail format\");\n                } else {\n                    alert(\"Ung\u00fcltiges E-Mail Format\");\n                }\n                return false;\n            }\n\n            let password = document.getElementById(\"password\").value;\n            let confirmPassword = document.getElementById(\"confirm_password\").value;\n\n            if (password !== confirmPassword) {\n                if (window.location.href.includes(\"\/en\/\")) {\n                    alert(\"The passwords do not match.\");\n                } else {\n                    alert(\"Die Passw\u00f6rter stimmen nicht \u00fcberein.\");\n                }\n                return false;\n            }\n        }\n\n        if (step === 3) {\n            let street = document.getElementById(\"street\").value.trim();\n            let postal_code = document.getElementById(\"postal_code\").value.trim();\n            let city = document.getElementById(\"city\").value.trim();\n\n            if (!street || !postal_code || !city) {\n                if (window.location.href.includes(\"\/en\/\")) {\n                    alert(\"Please fill in a complete address (street, postal code, city)\");\n                } else {\n                    alert(\"Bitte gib eine vollst\u00e4ndige Adresse an (Stra\u00dfe, Postleitzahl, Stadt)\");\n                }\n                \n                return false;\n            }\n        }\n\n        return isValid;\n    }\n\n    async function fetchCountries() {\n        let select = document.getElementById(\"country\");\n        if (!select) return;\n\n        select.innerHTML = `<option value=\"\">Laden...<\/option>`;\n\n        let response = await fetch(\"\/wp-json\/custom\/v1\/countries\");\n        let countries = await response.json();\n\n        select.innerHTML = \"\";\n        [\"DE\", \"AT\", \"CH\"].forEach(code => {\n            if (countries[code]) {\n                let option = new Option(countries[code], code);\n                select.appendChild(option);\n            }\n        });\n\n        Object.entries(countries).forEach(([code, name]) => {\n            if (![\"DE\", \"AT\", \"CH\"].includes(code)) {\n                let option = new Option(name, code);\n                select.appendChild(option);\n            }\n        });\n    }\n\n    function initializeGoogleAutocomplete() {\n        let input = document.getElementById(\"street\");\n        if (!input) return;\n\n        let autocomplete = new google.maps.places.Autocomplete(input, { types: [\"address\"] });\n\n        autocomplete.addListener(\"place_changed\", function () {\n            let place = autocomplete.getPlace();\n            if (!place.address_components) return;\n\n            let addressData = {\n                street: \"\",\n                street_number: \"\",\n                postal_code: \"\",\n                city: \"\",\n                country: \"\"\n            };\n\n            place.address_components.forEach(component => {\n                let types = component.types;\n                if (types.includes(\"street_number\")) {\n                    addressData.street_number = component.long_name;\n                } else if (types.includes(\"route\")) {\n                    addressData.street = component.long_name;\n                } else if (types.includes(\"postal_code\")) {\n                    addressData.postal_code = component.long_name;\n                } else if (types.includes(\"locality\")) {\n                    addressData.city = component.long_name;\n                } else if (types.includes(\"country\")) {\n                    addressData.country = component.short_name;\n                }\n            });\n\n            document.getElementById(\"street\").value = `${addressData.street} ${addressData.street_number}`.trim();\n            document.getElementById(\"postal_code\").value = addressData.postal_code;\n            document.getElementById(\"city\").value = addressData.city;\n            document.getElementById(\"country\").value = addressData.country;\n        });\n    }\n\n    async function createAccount() {\n        saveData();\n\n        document.getElementById(\"loading\").style.display = \"block\";\n\n        let customerData = {\n            email: userData.email,\n            password: userData.password,\n            first_name: userData.first_name,\n            last_name: userData.last_name,\n            company_name: userData.company || \"\",\n            country: userData.country,\n            billing: {\n                address_1: userData.street || \"\",\n                address_2: userData.address_2 || \"\",\n                city: userData.city || \"\",\n                postcode: userData.postal_code || \"\",\n                country: userData.country || \"\",\n            },\n            shipping: { ...userData.billing },\n            meta_data: [{ key: \"vat_number\", value: userData.vat_number || \"\" }],\n            request_url: window.location.href,\n            admin: document.getElementById(\"wpadminbar\") !== null,\n        };\n\n        let response = await fetch(\"\/wp-json\/custom\/v1\/create-user\", {\n            method: \"POST\",\n            headers: { \"Content-Type\": \"application\/json\" },\n            body: JSON.stringify(customerData)\n        });\n\n        let result = await response.json();\n        alert(result.success ? result.message : \"Fehler: \" + result.message);\n        if (result.success) {\n            if (window.location.href.includes(\"\/en\/\")) {\n                window.location.href = \"\/en\/my-account\/?onboarding=success\";\n            } else if (userData.country == 'CH'){\n                window.location.href = \"\/ch\/meinkonto\/?onboarding=success\";\n            } else {\n                window.location.href = \"\/meinkonto\/?onboarding=success\";  \n            }\n        }\n\n        document.getElementById(\"loading\").style.display = \"none\";\n    }\n\n    document.getElementById(\"nextBtn\").addEventListener(\"click\", nextStep);\n    document.getElementById(\"backBtn\").addEventListener(\"click\", prevStep);\n    document.getElementById(\"submitBtn\").addEventListener(\"click\", createAccount);\n\n    fetchCountries();\n    initializeGoogleAutocomplete();\n    showStep();\n});\n<\/script>    <\/div>\n    \n\n    <div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-2'>\n    <div id=\"registration-form\">\n    <div id=\"step-1\" class=\"step\">\n        <h1>Welcome to the Hempions B2B shop!<\/h1>\n        <p id=\"intro-text\">We look forward to working with you. Please enter your complete details in just a few steps so that you can quickly gain access to our exclusive retail prices. \ud83d\ude80<\/p>\n        <h2>Step 1: Name<\/h2>\n        <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Name of the company\" required>\n    <\/div>\n\n    <div id=\"step-2\" class=\"step\">\n        <h2>Step 2: Contact details<\/h2>\n        <input type=\"text\" id=\"first_name\" name=\"first_name\" placeholder=\"First name (optional)\">\n        <input type=\"text\" id=\"last_name\" name=\"last_name\" placeholder=\"Surname (optional)\">\n        <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"E-mail\" required>\n        <input type=\"password\" id=\"password\" name=\"password\" placeholder=\"Password\" required>\n        <input type=\"password\" id=\"confirm_password\" name=\"confirm_password\" placeholder=\"Confirm password\" required>\n    <\/div>\n\n    <div id=\"step-3\" class=\"step\">\n        <h2>Step 3: Company address<\/h2>\n        <input type=\"text\" id=\"street\" name=\"street\" placeholder=\"Street\" required>\n        <input type=\"text\" id=\"postal_code\" name=\"postal_code\" placeholder=\"Postcode\" required>\n        <input type=\"text\" id=\"city\" name=\"city\" placeholder=\"City\" required>\n        <input type=\"text\" id=\"address_2\" name=\"address_2\" placeholder=\"Address suffix (optional)\">\n        <select id=\"country\" name=\"country\" required>\n            <option value=\"\">Select country<\/option>\n        <\/select>\n    <\/div>\n\n    <div id=\"step-4\" class=\"step\">\n        <h2>Step 4: VAT number<\/h2>\n        <div style=\"font-size: 14px; margin-top: -10px; margin-bottom: 10px;\">(for immediate access to the B2B shop)<\/div>\n        <input type=\"text\" id=\"vat_number\" name=\"vat_number\" placeholder=\"VAT number (optional)\">\n        <div id=\"loading\" style=\"display: none;\">Data is being checked. Please wait ...<\/div>\n    <\/div>\n<\/div>\n\n<div id=\"button-container\">\n    <button id=\"backBtn\">Back<\/button>\n    <button id=\"nextBtn\">Next<\/button>\n    <button id=\"submitBtn\">Submit<\/button>\n<\/div>    <\/div>\n    \n\n    <div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-3'>\n    <style>\n\/* Step *\/\n#registration-form{\n\ttext-align: center;\n}\n\n\/* Step *\/\n#registration-form input, #registration-form select{\n\twidth: 100%;\n\tmax-width: 400px;\n\tmargin: 10px auto;\n\tdisplay: block;\n}\n\n#intro-text{\n    max-width: 600px;\n    margin: 0 auto 20px auto;\n}\n\n\/* Button container *\/\n#button-container{\n\tmargin-top: 30px;\n\ttext-align: center;\n}\n\n#backBtn, #nextBtn, #submitBtn{\n\tborder: solid 1px #344d49;\n\tbackground-color: #344d49;\n}\n\n#backBtn{\n\tbackground-color: transparent;\n\tcolor: #344d49;\n}\n\n#loading:after{\n\tcontent: '';\n\tdisplay: inline-block;\n\twidth: 16px;\n\theight: 16px;\n\tmargin-left: 10px;\n\tbackground: url('https:\/\/i.gifer.com\/ZZ5H.gif') no-repeat center center;\n\tbackground-size: contain;\n}\n<\/style>    <\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"CBBTypography":[],"editor_plus_copied_stylings":"{}","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-103729","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/pages\/103729","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/comments?post=103729"}],"version-history":[{"count":2,"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/pages\/103729\/revisions"}],"predecessor-version":[{"id":117725,"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/pages\/103729\/revisions\/117725"}],"wp:attachment":[{"href":"https:\/\/staging.hempions.com\/en\/wp-json\/wp\/v2\/media?parent=103729"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}