Untitled
unknown
plain_text
a year ago
82 kB
1
Indexable
<!-- Vue JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.global.min.js"></script>
<!-- Add Axios CDN -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- Add Lodash CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
<div>
<div v-if="modal" class="absolute inset-0 z-0" @click="modal = false"></div>
<div class="relative max-w-xl">
<div class="relative mt-1 rounded-md flex flex-row">
<input v-model="state" name="address" autocomplete="off" class="border-transparent rounded-full focus:border-onefiber-blue focus:shadow-none form-input px-6 py-4 rounded-sm flex-grow mr-3" type="text" placeholder="Vejnavn, husnummer, postnummer" @keyup="search" @focus="modal = true" @keyup.enter="validateAddress" />
<button type="submit" class="inline-flex items-center justify-center rounded-full px-6 py-4 text-lg font-extrabold text-white transition leading-none duration-150 ease-in-out rounded-sm shadow-sm cursor-pointer hover:shadow bg-gc-blue focus:outline-none" :disabled="disableButton" @click="validateAddress">
<span>Videre</span>
<svg v-if="disableButton" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</div>
<transition leave-active-class="transition ease-in duration-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
<div class="absolute bg-white mt-1 rounded-md shadow-lg w-full z-30" v-if="openAddressDropdown && !showResidentialAddress">
<ul class="m-0 w-full h-64 overflow-auto">
<li v-for="address in states" @click="setState(address)" class="cursor-pointer hover:bg-gray-100 select-none relative py-2 pl-3 pr-9 text-gray-900 flex items-center space-x-3">
<span>{{ address.forslagstekst }}</span>
</li>
</ul>
<div class="flex justify-between items-center p-4 bg-gray-100">
<svg class="hidden lg:block" xmlns="http://www.w3.org/2000/svg" width="25" height="25">
<path d="M12.5 0C5.596 0 0 5.596 0 12.5S5.596 25 12.5 25 25 19.404 25 12.5C24.992 5.6 19.4.008 12.5 0zm1.92 19.12a8.682 8.682 0 01-2.626.667 1.82 1.82 0 01-1.307-.42 1.555 1.555 0 01-.393-1.52c.153-.89 1.177-4.279 1.461-5.688.078-.385.177-1.164-.119-1.44-.377-.35-1.548-.12-2.061.005l.163-.646a8.372 8.372 0 012.593-.696c.472-.04.941.102 1.296.394.376.438.509 1.013.36 1.556-.057.404-.016.198-1.29 4.92-.176.648-.504 1.79.007 2.183.504.386 1.782.142 2.08.04l-.164.646zm-.878-11.828a1.042 1.042 0 110-2.084 1.042 1.042 0 010 2.084z" fill="#0F1928" fill-rule="nonzero" />
</svg>
<p class="text-xs lg:text-sm">
Vælg en adresse på listen og klik på <b>"Videre"</b>. <br />
Kan du ikke finde adressen, så kan du indtaste den selv.
</p>
<span class="inline-flex rounded-md shadow-sm">
<button
@click="
showCantFindAddressModal = true
modal = false
openAddressDropdown = false
"
type="button"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-onefiber-black hover:bg-gray-700 focus:outline-none focus:border-gray-700 focus:shadow-outline-gray active:bg-gray-700 transition ease-in-out duration-150"
>
Indtast adresse
</button>
</span>
</div>
</div>
</transition>
</div>
<!-- Search internal whitelists -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="showCantFindAddressModal" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="showCantFindAddressModal" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="showCantFindAddressModal" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div v-if="showCantFindAddressModal" class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div
class="flex justify-end cursor-pointer hover:opacity-75"
@click="
showCantFindAddressModal = false
state = ''
whitelistError = ''
"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 text-gray-700 fill-current">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue xl:text-5xl">Søg adresse</h1>
<p class="relative px-8 my-10 text-lg text-gc-blue text-left">
Kom din adresse ikke frem på listen, kan du indtaste den herunder. <br /><br />
<b>Har du spørgsmål?</b><br />
Du er velkommen til at kontakte os: <br />
E-mail kundeservice@globalconnect.dk <br />
Tlf. +45 7730 3016
</p>
<div class="grid grid-cols-2 gap-x-5">
<div>
<label for="streetName" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Gade / Vej</label>
<input id="streetName" v-model="whitelistForm.streetName" :class="{ 'border-red-500': errors['whitelistForm.streetName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Gade / Vej" />
<span v-if="errors['whitelistForm.streetName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.streetName'][0] }}</span>
</div>
<div>
<label for="streetNumber" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Husnummer</label>
<input id="streetNumber" v-model="whitelistForm.streetNumber" :class="{ 'border-red-500': errors['whitelistForm.streetNumber'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Husnummer" />
<span v-if="errors['whitelistForm.streetNumber']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.streetNumber'][0] }}</span>
</div>
<div>
<label for="floor" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Etage</label>
<input id="floor" v-model="whitelistForm.floor" :class="{ 'border-red-500': errors['whitelistForm.floor'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Etage" />
<span v-if="errors['whitelistForm.floor']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.floor'][0] }}</span>
</div>
<div>
<label for="door" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Side</label>
<input id="door" v-model="whitelistForm.door" :class="{ 'border-red-500': errors['whitelistForm.door'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Side" />
<span v-if="errors['whitelistForm.door']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.door'][0] }}</span>
</div>
<div>
<label for="zipcode" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Postnummer</label>
<input id="zipcode" v-model="whitelistForm.zipcode" :class="{ 'border-red-500': errors['whitelistForm.zipcode'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Postnummer" />
<span v-if="errors['whitelistForm.zipcode']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.zipcode'][0] }}</span>
</div>
<div>
<label for="city" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">By</label>
<input id="city" v-model="whitelistForm.city" :class="{ 'border-red-500': errors['whitelistForm.city'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="By" />
<span v-if="errors['whitelistForm.city']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['whitelistForm.city'][0] }}</span>
</div>
</div>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" :disabled="loading" class="bg-gc-blue focus:outline-none font-bold h-12 hover:opacity-75 inline-flex items-center px-10 rounded-full text-lg text-white w-auto" @click="searchInternalWhitelists">
Søg efter min adresse
<svg v-if="loading" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</button>
</span>
<div v-if="whitelistError.length > 0" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">
{{ whitelistError }}
</div>
</div>
</div>
</div>
</div>
</transition>
<!-- project is disabled -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="projectDisabled" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="projectDisabled" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="projectDisabled" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div v-if="projectDisabled" class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="flex justify-end cursor-pointer hover:opacity-75" @click="projectDisabled = false">
<svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 text-gray-700 fill-current">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue xl:text-5xl">Kampagnen for en fiberinstallation er slut</h1>
<p class="relative px-8 mt-10 text-lg text-gc-blue">
Globalconnect vil gerne levere fiber til dig, dog skal vi håndtere din sag manuelt.
<br />
Indskriv dine oplysninger og vi vil vende tilbage <br />
hurtigst muligt for en fiberinstallation.
</p>
<div class="flex flex-col mt-4 space-y-5">
<div>
<label for="address" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Din adresse</label>
<input id="address" v-model="state" disabled class="block w-full transition duration-150 ease-in-out bg-gray-200 rounded-full h-13 form-input sm:text-sm sm:leading-5" placeholder="Adresse" />
</div>
<div>
<label for="firstname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Fornavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="firstname" v-model="form.firstName" :class="{ 'border-red-500': errors['form.firstName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Fornavn" />
<span v-if="errors['form.firstName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.firstName'][0] }}</span>
</div>
<div>
<label for="lastname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Efternavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="lastname" v-model="form.lastName" :class="{ 'border-red-500': errors['form.lastName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Efternavn" />
<span v-if="errors['form.lastName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.lastName'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="form.email" :class="{ 'border-red-500': errors['form.email'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="errors['form.email']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.email'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Bekræft email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="emailAgain" :class="{ 'border-red-500': validateEmail }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="validateEmail" class="block mb-2 text-sm italic font-semibold text-left text-red-500">Begge e-mailadresser skal være ens.</span>
</div>
<div>
<label for="mobile" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Mobil<span class="text-2xl text-onefiber-purple">*</span></label>
<div class="mt-1 relative rounded-md">
<div class="absolute inset-y-0 left-0 flex items-center">
<select v-model="selectedPhoneCode" class="form-select h-full cursor-pointer py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm sm:leading-5">
<option v-for="phonecode in orderPhoneCodes" :value="phonecode">+{{ phonecode }}</option>
</select>
</div>
<input id="mobile" v-model="form.mobile" :class="{ 'border-red-500': errors['form.mobile'] }" class="block w-full pl-20 transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Mobil nummer" />
</div>
<span v-if="errors['form.mobile']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">
{{ errors['form.mobile'][0] }}
</span>
</div>
<div class="flex flex-col mt-6">
<label class="flex text-left cursor-pointer">
<input v-model="form.acceptTerms" :class="{ 'border-red-500': errors['form.acceptTerms'] }" type="checkbox" class="p-2 cursor-pointer form-checkbox" />
<span class="ml-2">
Jeg accepterer
<a target="_blank" class="underline text-primary" href="/vilkaar">Vilkår for tilslutning til GlobalConnect’s fibernet</a>
</span>
</label>
<span v-if="errors['form.acceptTerms']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.acceptTerms'][0] }}</span>
</div>
</div>
<button type="submit" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75 inline-flex items-center" :disabled="disableButton" @click="sendMailToSupport">
<span>Tilmeld liste</span>
<svg v-if="disableButton" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else class="inline-block w-6 h-6 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</button>
<div v-if="showError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Der skete desværre en fejl, prøv igen senere eller kontakt os på kundeservice@globalconnect.dk</div>
<div v-if="showValidationError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Alle felter skal udfyldes og vilkår skal accepteres</div>
</div>
</div>
</div>
</transition>
<!-- Waitinglist form modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="waitinglistForm" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="waitinglistForm" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="waitinglistForm" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6">
<div
class="flex justify-end cursor-pointer hover:opacity-75"
@click="
waitinglistForm = false
state = ''
states = []
"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 text-gray-700 fill-current">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-center text-gc-blue">
Tillykke din adresse kan få fiber fra GlobalConnect til {{ (waitinglistData.price * 1.25).toLocaleString() }} Kr. <br />
i installationspris!
</h1>
<p class="relative mt-10 text-lg font-medium text-center text-gc-blue">
Alt du skal gøre for at bestille en fiberforbindelse, er at udfylde nedenstående informationer senest
{{ waitinglistData.deadlineText }}, så er du tilmeldt GlobalConnect i dit område. <br />Vi sender en ordrebekræftelse med det videre forløb.
</p>
<p class="relative mt-5 text-lg font-medium text-center text-onefiber-black italic" v-if="waitinglistData.price > 0">Du kan læse vores vilkår her: <a class="underline text-onefiber-black hover:no-underline" target="_blank" href="/vilkaar"> Vilkår for tilslutning til GlobalConnect’s fibernet.</a></p>
<div class="flex flex-col mt-4 space-y-5">
<div>
<label for="address" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Din adresse</label>
<input id="address" v-model="state" disabled class="block w-full transition duration-150 ease-in-out bg-gray-200 rounded-full h-13 form-input sm:text-sm sm:leading-5" placeholder="Adresse" />
</div>
<div>
<label for="firstname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Fornavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="firstname" v-model="form.firstName" :class="{ 'border-red-500': errors['form.firstName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Fornavn" />
<span v-if="errors['form.firstName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.firstName'][0] }}</span>
</div>
<div>
<label for="lastname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Efternavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="lastname" v-model="form.lastName" :class="{ 'border-red-500': errors['form.lastName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Efternavn" />
<span v-if="errors['form.lastName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.lastName'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="form.email" :class="{ 'border-red-500': errors['form.email'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="errors['form.email']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.email'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Bekræft email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="emailAgain" :class="{ 'border-red-500': validateEmail }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="validateEmail" class="block mb-2 text-sm italic font-semibold text-left text-red-500">Begge e-mailadresser skal være ens.</span>
</div>
<div>
<label for="mobile" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Mobil</label>
<div class="mt-1 relative rounded-md">
<div class="absolute inset-y-0 left-0 flex items-center">
<select v-model="selectedPhoneCode" class="form-select h-full cursor-pointer py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm sm:leading-5">
<option v-for="phonecode in orderPhoneCodes" :value="phonecode">+{{ phonecode }}</option>
</select>
</div>
<input id="mobile" v-model="form.mobile" :class="{ 'border-red-500': errors['form.mobile'] }" class="block w-full pl-20 transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Mobil nummer" />
</div>
<span v-if="errors['form.mobile']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">
{{ errors['form.mobile'][0] }}
</span>
</div>
<div>
<label for="association" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">
Grundejerforening/Boligforening/Andelsforening
<span class="text-xs italic font-semibold text-gray-600">(Valgfri)</span>
</label>
<input id="association" v-model="form.association" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Skriv navnet på din Grundejerforening/Boligforening/Andelsforening" />
</div>
<div class="flex mt-6">
<label class="flex text-left cursor-pointer">
<input type="checkbox" class="p-2 mt-1 cursor-pointer form-checkbox" @click="showResidentialAddressMethod" />
<span class="ml-2">Min folkeregisteradresse er en anden end min installationsadresse</span>
</label>
</div>
<input v-if="showResidentialAddress" v-model="form.residentialAddress" autocomplete="off" class="block w-full mt-4 form-input" placeholder="Folkeregisteradresse" @input="searchResidential()" @focus="modal = true" />
<div v-if="states && modal && showResidentialAddress" class="relative z-10 mt-1">
<ul class="text-left bg-gray-100 border rounded">
<li v-for="state in states" :key="state.tekst" class="px-4 py-2 rounded-md cursor-pointer hover:bg-gray-100" @click="setStateResidential(state)">
{{ state.forslagstekst }}
</li>
</ul>
</div>
<div class="flex flex-col mt-6">
<label class="flex text-left cursor-pointer">
<input v-model="form.acceptTerms" :class="{ 'border-red-500': errors['form.acceptTerms'] }" type="checkbox" class="p-2 cursor-pointer form-checkbox" />
<span class="ml-2">
Jeg accepterer
<a target="_blank" class="underline text-primary" href="/vilkaar">Vilkår for tilslutning til GlobalConnect’s fibernet</a>
</span>
</label>
<span v-if="errors['form.acceptTerms']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">
{{ errors['form.acceptTerms'][0] }}
</span>
</div>
<div class="flex flex-col mt-6">
<label class="flex text-left cursor-pointer">
<input v-model="form.acceptContactTerms" :class="{ 'border-red-500': errors['form.acceptContactTerms'] }" type="checkbox" class="p-2 cursor-pointer form-checkbox" />
<marketing-consent-text class="ml-2 leading-5 text-left" />
</label>
</div>
</div>
<button type="submit" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75 inline-flex items-center" :disabled="disableButton" @click="addWaitinglist">
<span>Tilmeld</span>
<svg v-if="disableButton" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else class="inline-block w-6 h-6 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</button>
<div v-if="showError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Der skete desværre en fejl, prøv igen senere eller kontakt os på kundeservice@globalconnect.dk</div>
<div v-if="showValidationError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Alle felter skal udfyldes og vilkår skal accepteres</div>
</div>
</div>
</div>
</transition>
<!-- eligibleForOrderPlacementModal form modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="eligibleForOrderPlacementModal" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="eligibleForOrderPlacementModal" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="eligibleForOrderPlacementModal" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6">
<div
class="flex justify-end cursor-pointer hover:opacity-75"
@click="
eligibleForOrderPlacementModal = false
state = ''
states = []
"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 text-gray-700 fill-current">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-center text-gc-blue">
Tillykke din adresse kan få fiber fra GlobalConnect til {{ (waitinglistData.price * 1.25).toLocaleString() }} Kr. <br />
i installationspris!
</h1>
<p class="relative mt-10 text-lg font-medium text-center text-gc-blue">
Alt du skal gøre for at bestille en fiberforbindelse, er at tilmelde dig senest
{{ waitinglistData.deadlineText }}. <br />
</p>
<button type="submit" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75 inline-flex items-center" :disabled="disableButton" @click="redirectToOrderPlacement">
<span>Gå til tilmelding</span>
<svg v-if="disableButton" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else class="inline-block w-6 h-6 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</button>
<div v-if="showError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Der skete desværre en fejl, prøv igen senere eller kontakt os på kundeservice@globalconnect.dk</div>
<div v-if="showValidationError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Alle felter skal udfyldes og vilkår skal accepteres</div>
</div>
</div>
</div>
</transition>
<!-- Interestlist form modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="interestForm" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="interestForm" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="interestForm" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6">
<div
class="flex justify-end cursor-pointer hover:opacity-75"
@click="
interestForm = false
state = ''
states = []
"
>
<svg viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 text-gray-700 fill-current">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</div>
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-center text-gc-blue xl:text-5xl">Tilmeld dig vores interesseliste</h1>
<p class="relative mt-10 text-lg font-medium text-center text-gc-blue">Din adresse kan desværre ikke få fiber fra GlobalConnect endnu. Men du kan tilmelde dig vores interesseliste, så vil vi løbende holde dig opdateret omkring GlobalConnects fiberudrulning i dit område.</p>
<div class="flex flex-col mt-4 space-y-5">
<div>
<label for="address" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Din adresse</label>
<input id="address" v-model="state" disabled class="block w-full transition duration-150 ease-in-out bg-gray-200 rounded-full h-13 form-input sm:text-sm sm:leading-5" placeholder="Adresse" />
</div>
<div>
<label for="firstname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Fornavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="firstname" v-model="form.firstName" :class="{ 'border-red-500': errors['form.firstName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Fornavn" />
<span v-if="errors['form.firstName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.firstName'][0] }}</span>
</div>
<div>
<label for="lastname" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Efternavn<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="lastname" v-model="form.lastName" :class="{ 'border-red-500': errors['form.lastName'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Efternavn" />
<span v-if="errors['form.lastName']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.lastName'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="form.email" :class="{ 'border-red-500': errors['form.email'] }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="errors['form.email']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.email'][0] }}</span>
</div>
<div>
<label for="email" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Bekræft email<span class="text-2xl text-onefiber-purple">*</span></label>
<input id="email" v-model="emailAgain" :class="{ 'border-red-500': validateEmail }" class="block w-full transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Email" />
<span v-if="validateEmail" class="block mb-2 text-sm italic font-semibold text-left text-red-500">Begge e-mailadresser skal være ens.</span>
</div>
<div>
<label for="mobile" class="flex font-medium leading-3 mb-2 text-gray-700 text-left text-sm">Mobil<span class="text-2xl text-onefiber-purple">*</span></label>
<div class="mt-1 relative rounded-md">
<div class="absolute inset-y-0 left-0 flex items-center">
<select v-model="selectedPhoneCode" class="form-select cursor-pointer h-full py-0 pl-3 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm sm:leading-5">
<option v-for="phonecode in orderPhoneCodes" :value="phonecode" :key="phonecode">+{{ phonecode }}</option>
</select>
</div>
<input id="mobile" v-model="form.mobile" :class="{ 'border-red-500': errors['form.mobile'] }" class="block w-full pl-20 transition duration-150 ease-in-out rounded-full focus:shadow-none focus:border-onefiber-blue h-13 form-input sm:text-sm sm:leading-5" placeholder="Mobil nummer" />
</div>
<span v-if="errors['form.mobile']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">
{{ errors['form.mobile'][0] }}
</span>
</div>
<div class="flex flex-col mt-6">
<label class="flex text-left cursor-pointer">
<input v-model="form.acceptTerms" :class="{ 'border-red-500': errors['form.acceptTerms'] }" type="checkbox" class="p-2 cursor-pointer form-checkbox" />
<span class="ml-2">
Jeg accepterer
<a target="_blank" class="underline text-primary" href="/vilkaar">Vilkår for tilslutning til GlobalConnect’s fibernet</a>
</span>
</label>
<span v-if="errors['form.acceptTerms']" class="block mb-2 text-sm italic font-semibold text-left text-red-500">{{ errors['form.acceptTerms'][0] }}</span>
</div>
<div class="flex flex-col mt-6">
<label class="flex text-left cursor-pointer">
<input v-model="form.acceptContactTerms" :class="{ 'border-red-500': errors['form.acceptContactTerms'] }" type="checkbox" class="p-2 cursor-pointer form-checkbox" />
<marketing-consent-text class="ml-2 leading-5 text-left" />
</label>
</div>
</div>
<button type="submit" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75 inline-flex items-center" :disabled="disableButton" @click="addInterestlist">
<span>Tilmeld liste</span>
<svg v-if="disableButton" class="self-center w-5 h-5 ml-4 text-white animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<svg v-else class="inline-block w-6 h-6 ml-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</button>
<div v-if="showError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Der skete desværre en fejl, prøv igen senere eller kontakt os på kundeservice@globalconnect.dk</div>
<div v-if="showValidationError" class="inline-flex justify-center w-full px-4 py-2 mt-5 text-sm font-medium text-white transition bg-red-600 border border-transparent rounded-full focus:outline-none">Alle felter skal udfyldes og vilkår skal accepteres</div>
</div>
</div>
</div>
</transition>
<!-- receipt interest missing adress modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="receiptMissingAddress" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="receiptMissingAddress" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="receiptMissingAddress" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div v-if="receiptMissingAddress" class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue xl:text-5xl">Du er nu tilmeldt</h1>
<p class="relative px-8 mt-10 text-lg text-gc-blue">Vi vil løbende holde dig opdateret omkring GlobalConnects fiberudrulning i dit område.</p>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75" @click="receiptMissingAddress = false">Luk vindue</button>
</span>
</div>
</div>
</div>
</div>
</transition>
<!-- receipt interest modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="receiptInterest" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="receiptInterest" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="receiptInterest" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div v-if="receiptInterest" class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue xl:text-5xl">Du er nu tilmeldt interesselisten</h1>
<p class="relative px-8 mt-10 text-lg text-gc-blue">Vi vil løbende holde dig opdateret omkring GlobalConnects fiberudrulning i dit område.</p>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75" @click="receiptInterest = false">Luk vindue</button>
</span>
</div>
</div>
</div>
</div>
</transition>
<!-- receipt waitinglist modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="receiptWaitinglist" class="fixed inset-0 z-10 overflow-y-auto">
<div v-if="receiptWaitinglist" class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div v-if="receiptWaitinglist" class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div v-if="receiptWaitinglist" class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<h1 class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue xl:text-5xl">Tak for din tilmelding</h1>
<p class="relative px-8 mt-10 text-lg text-gc-blue">Vi vil inden længe tage kontakt til dig med yderligere oplysninger omkring din GlobalConnect fiberinstallation.</p>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75" @click="receiptWaitinglist = false">Luk vindue</button>
</span>
</div>
</div>
</div>
</div>
</transition>
<!-- Already ordered -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="alreadyOnList" class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<h1 v-if="hasMduServiceOffer" class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-onefiber-black">Din forening har sagt JA til fiber!</h1>
<h1 v-else class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue">Den indtastede adresse er allerede tilmeldt</h1>
<div class="px-8 mt-10 text-lg text-gc-blue">
<p class="mb-10 inline-block">
<span v-if="hasServiceOffer" class="text-2xl font-semibold">Du kan allerede nu bestille hos en af vores udbydere og vil få besked når din fiber er aktiv og klar til brug</span>
<span v-else class="text-2xl font-semibold">Du modtager en e-mail fra os, når/hvis vi nærmer os din adresse med udrulning af fibernet.</span>
</p>
<!-- logos for the ISP -->
<div v-if="hasServiceOffer" class="py-10">
<service-providers
:addressNationalReferenceId="selectedAddress.id"
class="grid gap-y-0 gap-x-10 grid-cols-1 md:grid-cols-2 items-baseline mt-20 md:mt-10">
</service-providers>
</div>
</div>
<p class="relative px-8 mt-10 text-lg text-gc-blue">
Hvis du tastede forkert, kan du blot lukke dette vindue og prøve igen.
<br />Mener du, at der er opstået en fejl, så kan du kontakte os på
<br />
<span class="underline">kundeservice@globalconnect.dk</span>
</p>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75" @click="alreadyOnList = false">Luk vindue</button>
</span>
</div>
</div>
</div>
</div>
</transition>
<!-- Already connected modal -->
<transition enter-active-class="duration-300 ease-out" enter-class="opacity-0" enter-to-class="opacity-100" leave-active-class="duration-200 ease-in" leave-class="opacity-100" leave-to-class="opacity-0">
<div v-if="showAlreadyConnectedPopup" class="fixed inset-0 z-10 overflow-y-auto">
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gc-blue opacity-75"></div>
</div>
<!-- This element is to trick the browser into centering the modal contents. -->
<span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>​
<div class="inline-block max-w-3xl px-4 pt-5 pb-4 overflow-hidden transition-all transform rounded-lg shadow-xl bg-gc-lightgrey sm:my-8 sm:p-6" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<h1 v-if="hasMduServiceOffer" class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue">Tillykke du kan få lynhurtigt internet gennem din boligforening.</h1>
<h1 v-else class="relative mt-2 text-4xl font-bold leading-tight tracking-wide text-gc-blue">Din adresse er klar til lynhurtigt internet!</h1>
<div class="px-8 mt-10 text-lg text-gc-blue">
<p class="mb-10 inline-block">
<span class="text-2xl font-semibold">Bestil hos en af vores udbydere</span>
</p>
<!-- logos for the ISP -->
<div v-if="hasServiceOffer" class="py-10">
<service-providers
:addressNationalReferenceId="selectedAddress.id"
class="grid gap-y-0 gap-x-10 grid-cols-1 md:grid-cols-2 items-baseline mt-20 md:mt-10">
</service-providers>
</div>
</div>
<p class="relative px-8 mt-10 text-lg text-gc-blue ">
Hvis du tastede forkert, kan du blot lukke dette vindue og prøve igen.
<br />Mener du, at der er opstået en fejl, så kan du kontakte os på
<br />
<span class="underline">kundeservice@globalconnect.dk</span>
</p>
<div class="mt-5 sm:mt-6">
<span class="flex justify-center w-full">
<button type="button" class="w-auto h-12 px-10 mt-10 text-lg font-bold text-white rounded-full bg-gc-blue focus:outline-none hover:opacity-75" @click="showAlreadyConnectedPopup = false">Luk vindue</button>
</span>
</div>
</div>
</div>
</div>
</transition>
<!-- static box for check if customer can get Fiber -->
<div v-if="false && state.length === 0" class="fixed inset-x-0 bottom-0 z-20 hidden lg:block">
<div class="bg-onefiber-blue">
<div class="max-w-screen-xl px-3 py-5 mx-auto sm:px-6 lg:px-8">
<div class="flex flex-wrap items-center justify-between">
<div>
<span class="text-lg font-bold text-gray-100">Tjek om du kan få fiber</span>
<p class="font-medium text-gray-200 truncate">Det tager kun 10 sekunder at slå din adresse op og finde ud af om du kan få fiber i dit hus eller fritidshus…</p>
</div>
<div class="flex-shrink-0 order-3 w-full mt-2 sm:order-2 sm:mt-0 sm:w-auto">
<div class="rounded-md shadow-sm">
<a href="/#" class="inline-flex items-center h-12 px-10 ml-10 text-lg font-extrabold bg-white rounded-lg text-onefiber-black focus:outline-none hover:bg-gray-200"> Tjek nu </a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
emailAgain: null, // For validation.
state: '',
stateResidential: '',
states: [],
selectedAddress: [],
modal: false,
loading: false,
projectDisabled: false,
waitinglistForm: false,
interestForm: false,
showAlreadyConnectedPopup: false,
submit: false,
alreadyOnList: false,
receiptInterest: false,
receiptWaitinglist: false,
receiptMissingAddress: false,
showResidentialAddress: false,
waitinglistData: {},
serviceOffers: [],
form: {
email: '',
mobile: '',
firstName: '',
lastName: '',
acceptTerms: false,
acceptContactTerms: false,
association: '',
},
whitelistForm: {
streetName: '',
streetNumber: null,
floor: null,
door: null,
zipcode: null,
city: null,
},
errors: [],
showError: false,
showValidationError: false,
whitelistError: '',
showOffers: false,
showCantFindAddressModal: false,
disableButton: false,
openAddressDropdown: false,
// Phone codes for all countries.
phoneCodes: [93, 355, 213, 1684, 376, 244, 1264, 0, 1268, 54, 374, 297, 61, 43, 994, 1242, 973, 880, 1246, 375, 32, 501, 229, 1441, 975, 591, 387, 267, 55, 246, 673, 359, 226, 257, 855, 237, 1, 238, 1345, 236, 235, 56, 86, 672, 57, 269, 242, 682, 506, 225, 385, 53, 357, 420, 45, 253, 1767, 1809, 593, 20, 503, 240, 291, 372, 251, 500, 298, 679, 358, 33, 594, 689, 241, 220, 995, 49, 233, 350, 30, 299, 1473, 590, 1671, 502, 224, 245, 592, 509, 39, 504, 852, 36, 354, 91, 62, 98, 964, 353, 972, 1876, 81, 962, 7, 254, 686, 850, 82, 965, 996, 856, 371, 961, 266, 231, 218, 423, 370, 352, 853, 389, 261, 265, 60, 960, 223, 356, 692, 596, 222, 230, 52, 691, 373, 377, 976, 1664, 212, 258, 95, 264, 674, 977, 31, 599, 687, 64, 505, 227, 234, 683, 1670, 47, 968, 92, 680, 970, 507, 675, 595, 51, 63, 48, 351, 1787, 974, 262, 40, 70, 250, 290, 1869, 1758, 508, 1784, 684, 378, 239, 966, 221, 248, 232, 65, 421, 386, 677, 252, 27, 34, 94, 249, 597, 268, 46, 41, 963, 886, 992, 255, 66, 670, 228, 690, 676, 1868, 216, 90, 7370, 1649, 688, 256, 380, 971, 44, 598, 998, 678, 58, 84, 1284, 1340, 681, 967, 260, 263, 381, 382, 211],
selectedPhoneCode: 45,
}
},
mounted() {},
methods: {
search() {
if (this.state.length === 0) {
this.openAddressDropdown = false
return false
}
axios.get('https://api.dataforsyningen.dk/autocomplete?q=' + this.state + '&fuzzy=&per_side=10').then((response) => {
this.states = response.data
if (typeof response.data[0] !== 'undefined' && response.data[0].tekst === this.state) {
this.modal = false
this.submit = true
this.openAddressDropdown = false
}
})
this.openAddressDropdown = true
},
searchSpecified(id, addressType) {
if (this.state.length === 0) {
this.openAddressDropdown = false
return false
}
var url = 'https://api.dataforsyningen.dk/autocomplete'
if (addressType === 'adgangsadresse') {
url += '?q=' + this.state + '&per_side=10' + '&adgangsadresseid=' + id
} else if (addressType === 'vejnavn') {
url += '?q=' + this.state + '&per_side=10'
} else {
url += '?id=' + id
}
axios.get(url).then((response) => {
this.states = response.data
if (typeof response.data[0] !== 'undefined' && response.data[0].tekst === this.state) {
this.modal = false
this.submit = true
this.openAddressDropdown = false
}
})
this.openAddressDropdown = true
},
gotoAssociationPage() {
this.interestForm = false
this.submit = false
this.selectedAddress = {}
this.states = []
this.state = ''
window.location.href = '/forening#fiber_tilmelding'
},
searchInternalWhitelists() {
this.loading = true
this.whitelistError = ''
axios
.post(`${this.baseUrl}/v1/public/address/search-internal-whitelists`, { address: this.whitelistForm })
.then((response) => {
this.loading = false
if (response.data.status === 'waitinglist') {
this.state = response.data.data.address
this.selectedAddress = {
id: response.data.data.addressData.adresseid,
adgangsadresseid: response.data.data.addressData.adgangsadresseid,
vejnavn: response.data.data.addressData.street_name,
husnr: response.data.data.addressData.street_number,
etage: response.data.data.addressData.street_floor,
dør: response.data.data.addressData.street_door,
postnr: response.data.data.addressData.street_zipcode,
kvhx: response.data.data.addressData.kvhx,
postnrnavn: response.data.data.addressData.street_zipcode_name,
}
this.showCantFindAddressModal = false
if (response.data.data.project_active === true) {
// Disable form and show an message that user should contact customer service.
this.projectDisabled = true
} else {
console.log('we are here')
// Show waitinglist flow.
this.waitinglistForm = true
this.waitinglistData = response.data.data
}
} else if (response.data.status === 'alreadyOnList') {
this.whitelistError = 'Adressen er allerede tilmeldt, kontakt os på E-mail kundeservice@globalconnect.dk eller Tlf. +45 7730 3016 hvis du mener dette er en fejl'
} else {
this.whitelistError = 'Adressen kunne ikke findes, kontakt os på E-mail kundeservice@globalconnect.dk eller Tlf. +45 7730 3016'
}
})
.catch((error) => {
this.loading = false
this.whitelistError = ''
this.showCantFindAddressModal = false
console.log(error)
})
},
searchResidential: _.debounce(function (e) {
this.loading = true
this.filterStatesResidential()
}, 300),
filterStatesResidential() {
axios
.get('https://api.dataforsyningen.dk/autocomplete?q=' + this.form.residentialAddress + '&per_side=10')
.then((response) => {
this.states = response.data
this.loading = false
if (response.data[0].tekst == this.form.residentialAddress) {
this.modal = false
this.submit = true
}
})
.catch((error) => {
console.log(error)
})
},
setState(state) {
this.state = state.tekst
this.selectedAddress = state.data
this.searchSpecified(state.data.id, state.type)
},
setStateResidential(state) {
this.form.residentialAddress = state.tekst
this.filterStatesResidential()
},
showResidentialAddressMethod() {
this.states = []
this.showResidentialAddress = !this.showResidentialAddress
},
validateAddress() {
this.showValidationError = false
if (this.submit === false) {
alert('Du skal vælge en adresse på listen')
return false
}
this.disableButton = true
this.errors = []
this.showError = false
this.emailAgain = null
this.form = {
email: '',
mobile: '',
firstName: '',
lastName: '',
acceptTerms: false,
acceptContactTerms: false,
}
axios
.post(`${this.baseUrl}/v1/public/address`, { address: this.selectedAddress })
.then((response) => {
this.disableButton = false
window.scrollTo({
top: 0,
behavior: 'smooth',
})
if (response.data.status === 'waitinglist') {
if (response.data.data.project_active === true) {
// Disable form and show an message that user should contact customer service.
this.projectDisabled = true
// Send Google Event.
window.gtag('event', 'tilmeld3', { event_category: 'kampagneslut', event_label: 'efterkampagne', value: '50' })
} else {
// Show waitnglist flow.
this.waitinglistForm = true
this.waitinglistData = response.data.data
}
} else if (response.data.status === 'alreadyOnList') {
// Show already on list modal.
this.alreadyOnList = true
this.serviceOffers = response.data.service_offers || []
} else if (response.data.status === 'interestlist') {
// Show interestlist flow.
this.interestForm = true
} else if (response.data.status === 'alreadyConnected') {
this.showAlreadyConnectedPopup = true
this.serviceOffers = response.data.service_offers || []
} else {
window.location.reload()
}
})
.catch((error) => {
this.disableButton = false
this.showError = true
console.log(error)
})
},
sendMailToSupport() {
this.showValidationError = false
if (this.validateForm()) {
this.showValidationError = true
return false
}
this.showError = false
this.disableButton = true
window.scrollTo({
top: 0,
behavior: 'smooth',
})
axios
.post(`${this.baseUrl}/v1/public/address/save-interestlist`, {
form: this.form,
address: this.selectedAddress,
phoneCode: this.selectedPhoneCode,
})
.then((response) => {
this.states = []
this.form = {}
this.projectDisabled = false
this.state = ''
this.disableButton = false
})
.catch((error) => {
this.disableButton = false
if (error.response.status === 422) {
this.errors = error.response.data.errors
} else {
this.showError = true
}
})
},
redirectToOrderPlacement() {
window.location.href = "/order?dawa-id=" + this.selectedAddress.id
},
addWaitinglist() {
this.showValidationError = false
if (this.validateForm()) {
this.showValidationError = true
return false
}
this.showError = false
this.disableButton = true
window.scrollTo({
top: 0,
behavior: 'smooth',
})
axios
.post(`${this.baseUrl}/v1/public/address/save-waitinglist`, {
form: this.form,
address: this.selectedAddress,
data: this.waitinglistData,
phoneCode: this.selectedPhoneCode
})
.then((response) => {
this.receiptWaitinglist = true
this.waitinglistForm = false
this.states = []
this.showResidentialAddress = false
this.waitinglistData = {}
this.form = {}
this.state = ''
this.disableButton = false
// Send Google Event.
window.gtag('event', 'tilmeld2', { event_category: 'ventelisteordre', event_label: 'venteliste', value: '200' })
}
).catch((error) => {
this.disableButton = false
if (error.response.status === 422) {
this.errors = error.response.data.errors
} else {
this.showError = true
}
})
},
addInterestlist() {
this.showValidationError = false
if (this.validateForm()) {
this.showValidationError = true
return false
}
this.showError = false
this.disableButton = true
window.scrollTo({
top: 0,
behavior: 'smooth',
})
axios
.post(`${this.baseUrl}/v1/public/address/save-interestlist`, {
form: this.form,
address: this.selectedAddress,
phoneCode: this.selectedPhoneCode,
})
.then((response) => {
this.receiptInterest = true
this.interestForm = false
this.states = []
this.showResidentialAddress = false
this.form = {}
this.state = ''
this.disableButton = false
// Send Google Event.
window.gtag('event', 'tilmeld', { event_category: 'interesseliste', event_label: 'interesseret', value: '25' })
})
.catch((error) => {
this.disableButton = false
if (error.response.status === 422) {
this.errors = error.response.data.errors
} else {
this.showError = true
}
})
},
convertInterestToWaitinglist() {
this.loading = true
// Send Google Event.
window.gtag('event', 'tilmeld4', { event_category: 'intevente', event_label: 'interessetilordre', value: '100' })
// change location.
window.location = '/tilmeld?adresseid=' + this.selectedAddress.id
},
addMissingAddress() {
this.showError = false
window.scrollTo({
top: 0,
behavior: 'smooth',
})
axios
.post('/address/save-missing-address', { missingAddressForm: this.missingAddressForm })
.then((response) => {
this.receiptMissingAddress = true
this.showCantFindAddressModal = false
this.missingAddressForm = {}
this.errors = []
this.showError = false
})
.catch((error) => {
if (error.response.status === 422) {
this.errors = error.response.data.errors
} else {
this.showError = true
}
})
},
validateForm() {
if (this.form.firstName.length === 0 || this.form.lastName.length === 0 || this.form.email.length === 0 || this.emailAgain.length === 0 || this.form.mobile.length === 0 || this.form.acceptTerms === false) {
return true
}
return false
},
},
computed: {
baseUrl: () => "https://api.ip-only.net/consumer-onefiber-backend", // LIVE
//baseUrl: () => "http://localhost:8080", // LOCAL DEVELOPMENT
validateEmail() {
if (this.form.email && this.emailAgain && this.form.email.length > 0 && this.emailAgain.length > 0) {
if (this.form.email !== this.emailAgain) {
return true
}
}
return false
},
orderPhoneCodes() {
return this.phoneCodes.sort((a, b) => {
return a - b
})
},
hasMduServiceOffer() {
return this.serviceOffers.filter((service) => service.id === 'B').length > 0
},
hasSduServiceOffer() {
return this.serviceOffers.filter((service) => service.id === 'A').length > 0
},
hasServiceOffer() {
return this.serviceOffers.length > 0
}
},
});
app.mount('#app');
</script>