{"version":3,"file":"fiberCheck.js","sources":["../../../../templates/shared/fiberCheck/components/postalBox.vue","../../../../assets/js/variables/api.js","../../../../templates/shared/fiberCheck/components/fiberCheckResults.vue","../../../../templates/shared/fiberCheck/fiberCheck.vue"],"sourcesContent":["<template>\n  <div class=\"card-row\">\n    <div\n      v-auto-animate\n      class=\"postal-input\"\n    >\n      <TextInput\n        v-model=\"postalCode\"\n        class=\"zipcode\"\n        label=\"Postcode\"\n        :inputmode=\"postalCodeInputMode\"\n        placeholder=\"1234 AB\"\n        @input=\"clearError\"\n      />\n      <TextInput\n        v-model.lazy=\"number\"\n        class=\"number\"\n        label=\"Huisnr.\"\n        placeholder=\"1\"\n        inputmode=\"numeric\"\n        @input=\"clearError\"\n        @keyup.enter=\"submitPostalInput\"\n      />\n      <TextInput\n        v-model.lazy=\"numberExtension\"\n        class=\"extension\"\n        label=\"Toevoeging\"\n        placeholder=\"A\"\n        @input=\"clearError\"\n        @keyup.enter=\"submitPostalInput\"\n      />\n      <button\n        class=\"btn primary\"\n        @click=\"submitPostalInput()\"\n      >\n        Check beschikbaarheid\n        <Icon\n          icon=\"arrow-right-long-solid\"\n          size=\"sm\"\n        />\n      </button>\n    </div>\n    <FieldError :error=\"postalError\" />\n  </div>\n</template>\n\n<script setup>\nimport { ref, computed } from 'vue';\nimport TextInput from '../../../vue-elements/input/TextInput.vue';\nimport FieldError from '../../../vue-elements/field/FieldError.vue';\nimport { addressData } from '../../../../assets/js/helpers/data';\nimport Icon from 'vue-elements/icon/Icon.vue';\n\nimport {\n    validateHouseNumber,\n    validatePostalCode,\n} from '../../../../assets/js/helpers/validator';\n\nconst emit = defineEmits(['location', 'update:loading']);\n\ndefineProps({\n    loading: {\n        type: Boolean,\n        default: false,\n    },\n});\n\nconst postalCode = ref('');\nconst number = ref('');\nconst numberExtension = ref('');\nconst postalError = ref(null);\n\nconst clearError = () => {\n    postalError.value = null;\n};\n\nconst validatePostalInput = () => validatePostalCode(postalCode.value) && validateHouseNumber(number.value);\n\nconst submitPostalInput = () => {\n    clearError();\n    emit('update:loading', true);\n    if (validatePostalInput()) {\n        addressData('internet', '5Jm0k9yn1oQqCz6I-268', postalCode.value, `${number.value}${numberExtension.value ? `-${numberExtension.value}` : ''}`)\n            .then((result) => {\n                if (result.location.address_found) {\n                    emit('location', result.location);\n                } else {\n                    postalError.value = 'Deze postcode en huisnummer combinatie is niet bekend';\n                }\n                emit('update:loading', false);\n            });\n    } else {\n        postalError.value = 'Vul een geldige postcode en huisnummer in';\n        emit('update:loading', false);\n    }\n};\n\nconst postalCodeInputMode = computed(() => {\n    return postalCode.value.length >= 4 ? 'text' : 'numeric';\n});\n\n</script>\n","// Api for email subscription\nexport default function dripEnergieApiUrl() {\n    return '/ajax/drip/signup-email';\n}\n\nexport const mijnKeuzeApiURL = () => {\n    if (import.meta.env.DEV) {\n        return 'https://api-mijnkeuze.keuze.dev';\n    }\n    return 'https://api-mijnkeuze.keuze.nl';\n};\n","<template>\n  <div\n    v-if=\"status === 'AVAILABLE'\"\n    key=\"available\"\n    class=\"card-row available\"\n  >\n    <div class=\"status\">\n      <div class=\"status-header positive\">\n        <icon\n          icon=\"check-circle-solid\"\n          size=\"sm\"\n        />\n        <span>Glasvezel is beschikbaar</span>\n      </div>\n\n      <p>{{ networkMessage }}</p>\n    </div>\n    <a\n      class=\"btn primary\"\n      role=\"button\"\n      :href=\"url\"\n    >\n      <span class=\"label\">Vergelijk glasvezelpakketten</span>\n      <Icon\n        icon=\"long-arrow-right\"\n        size=\"sm\"\n      />\n    </a>\n  </div>\n  <!--  Glasvezel staat op de planning-->\n  <div\n    v-else\n    key=\"notAvailable\"\n    class=\"card-row\"\n  >\n    <div\n      v-if=\"!subscribeStatus\"\n      class=\"status\"\n    >\n      <div \n        v-if=\"status === 'PLANNED'\" \n        class=\"status-header semi-positive\">\n        <icon\n          icon=\"exclamation-circle-solid\"\n          size=\"sm\"\n        />\n        <span>Glasvezel wordt binnenkort aangelegd</span>\n      </div>\n      <div \n        v-else \n        class=\"status-header negative\">\n        <icon\n          icon=\"times-circle-solid\"\n          size=\"sm\"\n        />\n        <span>Glasvezel is nog niet beschikbaar</span>\n      </div>\n      <!-- <p v-if=\"status === 'PLANNED' && fiber_plan_date\">\n        Binnenkort is glasvezelinternet beschikbaar op jouw adres, rond {{ fiber_plan_date }} begint de aanleg. Meteen op de hoogte blijven zodra je kan vergelijken? Vul dan hieronder je e-mailadres in. Dan hoor je van ons wanneer het zover is.\n      </p> -->\n      <p v-if=\"status === 'PLANNED'\">\n        Binnenkort is glasvezel internet beschikbaar op jouw adres. Meteen op de hoogte blijven zodra je kan vergelijken? Vul dan hieronder je mail adres in. Dan hoor je van ons wanneer het zover is.\n      </p>\n      <p v-else>\n        Helaas, glasvezel internet is nog niet beschikbaar op jouw adres. Wil je op de hoogte blijven van de aanleg? Vul dan hieronder je mail adres in. Dan hoor je van ons wanneer het zover is.\n      </p>\n    </div>\n    <div\n      v-if=\"!subscribeStatus\"\n      class=\"email-input\"\n    >\n      <TextInput\n        id=\"fc-first-name\"\n        v-model.lazy=\"firstName\"\n        label=\"Voornaam\"\n      />\n\n      <TextInput\n        id=\"fc-email\"\n        v-model=\"email\"\n        v-model:error=\"fieldError\"\n        label=\"E-mailadres\"\n      />\n      <button\n        class=\"btn primary subscribe-button\"\n        @click=\"subscribe()\"\n      >\n        Houd mij op de hoogte\n      </button>\n    </div>\n    <div\n      v-show=\"subscribeStatus\"\n      key=\"emailSucces\"\n      class=\"emailSucces\"\n    >\n      <div class=\"status\">\n        <div class=\"status-header positive\">\n          <icon\n            icon=\"check-circle-solid\"\n            size=\"sm\"\n          />\n          <span>Aanmelden gelukt</span>\n        </div>\n        <p>Je bent succesvol aangemeld voor de glasvezel notificaties op het volgende e-mailadres:</p>\n      </div>\n      <div class=\"result-email-input\">\n        <span class=\"result email\">{{ email }}</span>\n      </div>\n      <div v-if=\"fiberCheckCaption\" class=\"caption\">\n        <div v-html=\"fiberCheckCaption\" class=\"caption-text\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport TextInput from 'vue-elements/input/TextInput.vue';\nimport { ref, computed } from 'vue';\nimport {\n    validateEmail,\n} from '../../../../assets/js/helpers/validator';\nimport Icon from '../../../../abstracts/elements/icon/Icon.vue';\nimport { mijnKeuzeApiURL } from '../../../../assets/js/variables/api';\n\nconst props = defineProps({\n    status: {\n        type: String,\n        default: '',\n    },\n    provider: {\n        type: String,\n        default: '',\n    },\n    plannedDate: {\n        type: String,\n        default: '',\n    },\n    location: {\n        type: Object,\n        default: () => null,\n    },\n    url: {\n        type: String,\n        default: '',\n    },\n    fiberCheckCaption: {\n        type: String,\n        default: '',\n    },\n});\n\nconst firstName = ref('');\nconst email = ref('');\nconst fieldError = ref(null);\nconst subscribeStatus = ref(false);\nconst requestActive = ref(false);\n\nconst networkMessage = computed(() => {\n  const networkMap = {\n    'delta-fiber': 'het Delta Netwerk',\n    'caiway': 'het Delta Netwerk',\n    'gop': 'het KPN Netwerk',\n    'god': 'het KPN Netwerk',\n    'eof': 'het KPN Netwerk',\n    'vwt': 'het Open Dutch Fiber netwerk',\n    'jonaz': 'het Jonaz netwerk'\n  };\n\n  const network = networkMap[props.provider] || '';\n\n  if (network) {\n    return `Yes! Je hebt glasvezel van ${network}. Bekijk welke pakketten je kunt afnemen.`;\n  } else {\n    return 'Yes! Je hebt glasvezel. Bekijk welke pakketten je kunt afnemen.';\n  }\n});\n\nconst subscribe = () => {\n    if (!validateEmail(email.value)) {\n        fieldError.value = 'Vul een geldig e-mailadres in.';\n        return;\n    }\n    if (!requestActive.value) {\n        requestActive.value = true;\n        fetch(`${mijnKeuzeApiURL()}/v1/alert/fiber-check/create`, {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application/json',\n            },\n            body: JSON.stringify({\n                first_name: firstName.value.trim(),\n                email_address: email.value.trim(),\n                postal_code: props.location.postCode.trim(),\n                number: props.location.number.trim(),\n                number_extension: props.location.numberExtension?.trim(),\n            }),\n        })\n            .then((response) => (response.ok ? Promise.resolve(response.json()) : Promise.reject(response)))\n            .then((result) => {\n                subscribeStatus.value = result.success;\n            })\n            .catch(() => {\n                fieldError.value = 'Vul een geldig E-mailadres in.';\n            })\n            .finally(() => {\n                requestActive.value = false;\n            });\n    }\n};\n\n</script>\n","<template>\n  <div\n    v-if=\"promotionBanner\"\n    class=\"promotion-banner\"\n  >\n    {{ promotionBanner }}\n  </div>\n  <div class=\"card-element\" :class=\"{'with-banner' : promotionBanner}\">\n      <div\n        v-if=\"fiberCheckHeader\"\n        class=\"card-row header\"\n      >\n        <h4>{{ fiberCheckHeader }}</h4>\n      </div>\n      <div\n        v-if=\"location && addressDisplay\"\n        class=\"card-row header address\"\n      >\n        <PostalResults\n          :address-display=\"addressDisplay\"\n          @change-address=\"location = null\"\n        />\n      </div>\n      <div v-auto-animate>\n        <postal-box\n          v-if=\"!location\"\n          v-model:loading=\"loading\"\n          @location=\"location = $event\"\n        />\n        <div\n          v-show=\"loading\"\n          key=\"check\"\n          class=\"card-row loading\"\n        >\n          <div class=\"status-header loading\">\n            <icon\n              icon=\"loader\"\n              size=\"sm\"\n            />\n            <span>Glasvezel beschikbaarheid controleren</span>\n          </div>\n        </div>\n\n        <!-- Glasvezel resultaten  -->\n        <fiber-check-results\n          v-if=\"!loading && fiberStatus\"\n          :status=\"fiberStatus\"\n          :provider=\"fiberProvider\"\n          :plannedDate=\"fiberPlannedDate\"\n          :location=\"location\"\n          :url=\"url\"\n          :fiberCheckCaption=\"fiberCheckCaption\"\n        />\n      </div>\n  </div>\n</template>\n<script setup>\nimport Icon from 'vue-elements/icon/Icon.vue';\nimport { ref, computed, defineProps } from 'vue';\nimport PostalBox from './components/postalBox.vue';\nimport PostalResults from './components/postalResults.vue';\nimport FiberCheckResults from './components/fiberCheckResults.vue';\n\nconst props = defineProps({\n    prefillOptions: {\n        type: String,\n        default: '',\n    },\n    productTypePrefill: {\n        type: String,\n        default: '',\n    },\n    providerPrefillOptions: {\n        type: String,\n        default: '',\n    },\n    promotionBanner: {\n        type: String,\n        default: '',\n    },\n    fiberCheckHeader: {\n        type: String,\n        default: '',\n    },\n    fiberCheckCaption: {\n        type: String,\n        default: '',\n    },\n});\n\nconst comparerUri = ref('/internet/vergelijken');\n\nconst loading = ref(false);\nconst location = ref(null);\n\nconst fiberStatus = computed(() => {\n    if (location.value === null || location.value.fiber_summary === null) {\n        return '';\n    }\n    return location.value.fiber_summary;\n});\n\nconst fiberProvider = computed(() => {\n  return location.value?.fiber_network || '';\n});\n\nconst fiberPlannedDate = computed(() => {\n  return location.value?.fiber_plan_date || '';\n});\n\n\nconst addressDisplay = computed(() => (location.value ? `${location.value.street} ${location.value.number}${location.value.numberExtension ? location.value.numberExtension : ''}, ${location.value.postCode} ${location.value.city}` : ''));\n\n// const parsedProductTypePrefill = computed(() => (productTypePrefill.value ? `productType=${productTypePrefill.value}` : ''));\nconst parsedPrefillOptions = computed(() => {\n    if (props.prefillOptions === '') {\n        return '';\n    }\n    return new URLSearchParams(JSON.parse(props.prefillOptions)).toString();\n});\nconst parsedProviderPrefillOptions = computed(() => {\n    if (props.providerPrefillOptions === '') {\n        return '';\n    }\n    return `providers=${JSON.parse(props.providerPrefillOptions)\n        .toString()}`;\n});\n\nconst parsedProductTypePrefill = computed(() => (props.productTypePrefill ? `productType=${props.productTypePrefill}` : ''));\n\nconst dynamicUri = computed(() => {\n    if (location.value === null) {\n        return '';\n    }\n    let uri = `?${new URLSearchParams({\n        postcode: location?.value.postCode,\n        nr: `${location.value.number}${location.value.numberExtension ? `-${location.value.numberExtension}` : ''}`.trim(),\n    })}`;\n\n    uri += parsedPrefillOptions.value ? `&${parsedPrefillOptions.value}` : '';\n    uri += parsedProviderPrefillOptions.value ? `&${parsedProviderPrefillOptions.value}` : '';\n    uri += parsedProductTypePrefill.value ? `&${parsedProductTypePrefill.value}` : '';\n\n    return uri;\n});\n\nconst url = computed(() => `${comparerUri.value}${dynamicUri.value}`);\n\n</script>\n"],"names":["postalCode","ref","number","numberExtension","postalError","clearError","validatePostalInput","validatePostalCode","validateHouseNumber","submitPostalInput","emit","addressData","result","postalCodeInputMode","computed","mijnKeuzeApiURL","firstName","email","fieldError","subscribeStatus","requestActive","networkMessage","network","props","subscribe","validateEmail","_a","response","comparerUri","loading","location","fiberStatus","fiberProvider","fiberPlannedDate","addressDisplay","parsedPrefillOptions","parsedProviderPrefillOptions","parsedProductTypePrefill","dynamicUri","uri","url"],"mappings":"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"}