{"version":3,"file":"ykFL3q0r.js","sources":["../../../../pages/get-a-quote/solar/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { FormKitLazyProvider } from '@formkit/vue' \n\n    definePageMeta({\n        layout: 'quote'\n    })\n\n    const gtm = useGtm()\n\n    const { searchPersons } = usePipedrive()\n    const { contactNumberValidate, emailValidate } = useLoqate()\n\n    const checkContactNumber = ref(true)\n    const checkEmailAddress = ref(true)\n    \n    const submit = async (fields:any) => {\n\n        console.log(Object.entries(fields)[0][1])\n\n        const contactNumber = Object.entries(fields)[0][1].howShouldWeGetInTouch.contactNumber\n        const emailAddress = Object.entries(fields)[0][1].howShouldWeGetInTouch.emailAddress\n\n        checkContactNumber.value = await contactNumberValidate(contactNumber)\n        checkEmailAddress.value = await emailValidate(emailAddress)\n\n        if(checkContactNumber.value && checkEmailAddress.value) {\n            await searchPersons(Object.entries(fields)[0][1])\n        } \n\n    } \n\n    const updateContactNumber = () => {\n        checkContactNumber.value = true\n    }\n\n    const updateEmailAddress = () => {\n        checkEmailAddress.value = true\n    }\n\n</script>\n\n<template>\n    <main class=\"solar-form\">\n        \n<FormKitLazyProvider config-file=\"true\">\n<div class=\"relative bg-porcelain-100 mt-0 md:mt-0 lg:mt-0 mb-0 md:mb-0 lg:mb-0 pt-6 md:pt-8 lg:pt-10 pb-6 md:pb-8 lg:pb-10\">\n            <FormKit type=\"form\" :actions=\"false\" @submit=\"submit\" #default=\"{ state: { valid } }\">\n                <FormKit type=\"multi-step\" :allow-incomplete=\"false\">\n                    <div class=\"col-span-12 container max-w-screen-wide lg:max-w-screen-narrow | flex flex-col gap-6 md:gap-8 lg:gap-10\">\n                        \n                        <!-- Find your property -->\n                        <FormKit type=\"step\" name=\"findYourProperty\">\n                            <SolarFormStart />\n                        </FormKit>\n\n                        <!-- Do you own your home? -->\n                        <FormKit type=\"step\" name=\"doYouOwnYourHome\">\n                            <SolarFormOne />\n                        </FormKit>\n\n                        <!-- Which solar bundle are you intrested in? -->\n                        <FormKit type=\"step\" name=\"whichSolarBundleAreYouIntrestedIn\">\n                            <SolarFormTwo />\n                        </FormKit>\n                        \n                        <!-- What is your ideal installation timeframe ? -->\n                        <FormKit type=\"step\" name=\"whatIsYourIdealInstallationTimeframe\">\n                            <SolarFormThree />\n                        </FormKit>\n\n                        <!-- Extra information -->\n                        <FormKit type=\"step\" name=\"extraInformation\">\n                            <SolarFormFour />\n                        </FormKit>\n\n                        <!-- How should we get in touch ? -->\n                        <FormKit type=\"step\" name=\"howShouldWeGetInTouch\">\n                            <SolarFormFive :checkContactNumber=\"checkContactNumber\" :checkEmailAddress=\"checkEmailAddress\" @contactNumber=\"updateContactNumber\" @emailAddress=\"updateEmailAddress\"/>\n                            <template #stepNext>\n                                <FormKit type=\"submit\" />\n                            </template>\n                        </FormKit>\n\n                    </div>\n                </FormKit>\n            </FormKit>\n        </div>\n</FormKitLazyProvider>\n\n    </main>\n</template>\n\n<style lang=\"scss\">\n.solar-form {\n\n    .formkit-tabs {\n        @apply hidden\n    }\n\n    .form--hidden {\n        .formkit-fieldset {\n            @apply hidden;\n        }\n    }\n\n    .formkit-step-actions {\n\n        @apply flex flex-row justify-center items-center gap-4;\n\n        .formkit-step-previous {\n            button {\n                @apply \n\n                    transition-all ease-in-out duration-100 \n\n                    flex flex-col justify-center items-center \n\n                    font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center \n\n                    text-hit-gray-700\n\n                    h-5 md:h-6 w-auto px-4 rounded-full\n\n            }\n        }\n\n        .formkit-step-next, .formkit-step-previous + .formkit-outer {\n            button {\n                @apply \n\n                    transition-all ease-in-out duration-100 \n\n                    flex flex-col justify-center items-center \n\n                    font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center \n\n                    bg-lima-600\n\n                    text-white-50\n\n                    border-[2px] border-lima-600\n\n                    h-5 md:h-6 w-auto px-4 rounded-full\n\n            }\n        }\n\n    }\n\n    .form--button {\n\n        button {\n            @apply \n\n            transition-all ease-in-out duration-100 \n\n            flex flex-col justify-center items-center \n\n            font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center \n\n            bg-[var(--theme)] [&.button--ghost]:bg-[transparent]\n\n            text-white-50 [&.button--ghost]:text-[var(--theme)]\n\n            border-[2px] border-[var(--theme)]\n\n            h-5 md:h-6 w-auto px-4 rounded-full\n\n            disabled:cursor-not-allowed disabled:bg-hit-gray-400 disabled:border-hit-gray-400 disabled:text-white-50\n        }\n\n    }\n\n    .form--text {\n\n        @apply mb-2;\n\n        .formkit-outer {\n\n            @apply flex flex-col gap-1;\n\n            .formkit-wrapper {\n\n                @apply flex flex-col justify-start items-start gap-1;\n\n                .formkit-label {\n                    @apply font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500\n                }\n\n                .formkit-inner {\n\n                    @apply w-full h-auto;\n\n                    input {\n                        @apply w-full h-6 px-2 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 border border-mystic-200 rounded-1;\n                    }\n\n                }\n            \n            }\n\n            .formkit-help {\n                @apply font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-roman text-nevada-500\n            }\n\n        }\n\n    }\n\n    \n    .form--tel {\n\n        @apply mb-2;\n\n        .formkit-outer {\n\n            @apply flex flex-col gap-1;\n\n            .formkit-wrapper {\n\n                @apply flex flex-col justify-start items-start gap-1 z-20;\n\n                .formkit-label {\n                    @apply font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500\n                }\n\n                .formkit-inner {\n\n                    @apply w-full h-auto;\n\n                    input {\n                        @apply  w-full h-6 px-2 pl-10 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 border border-mystic-200 rounded-1;\n                    }\n\n                }\n            \n            }\n\n            .formkit-help {\n                @apply font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-roman text-nevada-500\n            }\n\n        }\n\n    }\n\n    .vue-tel-input {\n        @apply absolute top-0 left-0 w-full h-6 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 bg-white-50 border border-mystic-200 rounded-1 shadow-none focus:shadow-none;\n\n        input {\n            @apply px-2 rounded-tr-1 rounded-br-1 \n        }\n\n        .vti__dropdown {\n            @apply rounded-tl-1 rounded-bl-1 border-r border-mystic-200 z-30\n        }\n        .vti__dropdown-list.below {\n            @apply top-6 border border-mystic-200 rounded-1\n        }\n\n    }\n\n    .form--email {\n\n        @apply mb-2;\n\n        .formkit-outer {\n\n            @apply flex flex-col gap-1;\n\n            .formkit-wrapper {\n\n                @apply flex flex-col justify-start items-start gap-1;\n\n                .formkit-label {\n                    @apply font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500\n                }\n\n                .formkit-inner {\n\n                    @apply w-full h-auto;\n\n                    input {\n                        @apply w-full h-6 px-2 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 border border-mystic-200 rounded-1;\n                    }\n\n                }\n            \n            }\n\n            .formkit-help {\n                @apply font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-roman text-nevada-500\n            }\n\n        }\n\n    }\n\n    .form--radios {\n\n        @apply mb-2;\n\n        .formkit-outer {\n\n            .formkit-fieldset {\n\n                @apply flex flex-col justify-start items-start gap-1;\n\n                .formkit-legend {\n                    @apply font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500\n                }\n\n                .formkit-help {\n                    @apply font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-roman text-nevada-500\n                }\n\n                .formkit-options {\n                    @apply m-0 mt-1 p-0 w-full h-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 lg:gap-2;\n\n                    .formkit-option {\n\n                        @apply m-0 py-2;\n\n                        .formkit-wrapper {\n                            @apply relative flex flex-row gap-2 pl-6 cursor-pointer;\n\n                            .formkit-inner {\n                                @apply hidden\n                            }\n\n                            &:after {\n                                @apply content-[''] w-4 h-4 absolute top-1/2 left-0 -translate-y-1/2  bg-center bg-contain bg-no-repeat;\n                                background-image: url(\"data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='32px' height='32px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Arrows/Circle Arrow - Left%3C/title%3E%3Cdefs%3E%3Cpath d='M16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 Z M16,2.17047318 C8.36216324,2.17047318 2.17047318,8.36216324 2.17047318,16 C2.17047318,23.6378368 8.36216324,29.8295268 16,29.8295268 C23.6378368,29.8295268 29.8295268,23.6378368 29.8295268,16 C29.8295268,8.36216324 23.6378368,2.17047318 16,2.17047318 Z M22.9916802,8.71247969 C23.4468324,9.0159145 23.5935495,9.60861927 23.3505517,10.0841959 L23.2875203,10.1916802 L14.0324532,24.074281 L7.7790861,17.8209139 C7.36252686,17.4043547 7.36252686,16.7289787 7.7790861,16.3124194 C8.16360233,15.9279032 8.76864879,15.898325 9.18709274,16.2236849 L9.28758057,16.3124194 L13.7002667,20.7242667 L21.5124797,9.00831979 C21.8392556,8.51815586 22.5015163,8.38570373 22.9916802,8.71247969 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='Wireframes' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Heatpumps' transform='translate(-312, -11384)'%3E%3Cg id='S-|-Whats-Included' transform='translate(0, 10367)'%3E%3Cg id='Included' transform='translate(312, 885)'%3E%3Cg id='Icons/Arrows/Circle-Arrow---Left' transform='translate(0, 132)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Combined-Shape' fill='%23000000' xlink:href='%23path-1'%3E%3C/use%3E%3Cg id='Colour' mask='url(%23mask-2)' fill='%23002B40'%3E%3Crect id='bg' x='0' y='0' width='32' height='32'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n                            }\n\n                            .formkit-label {\n                                @apply font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-medium text-nevada-500\n                            }\n\n\n                            &[data-checked=\"true\"] {\n                                &:after {\n                                    background-image: url(\"data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='32px' height='32px' viewBox='0 0 32 32' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Arrows/Circle Arrow - Left%3C/title%3E%3Cdefs%3E%3Cpath d='M16,0 C24.836556,0 32,7.163444 32,16 C32,24.836556 24.836556,32 16,32 C7.163444,32 0,24.836556 0,16 C0,7.163444 7.163444,0 16,0 Z M16,2.17047318 C8.36216324,2.17047318 2.17047318,8.36216324 2.17047318,16 C2.17047318,23.6378368 8.36216324,29.8295268 16,29.8295268 C23.6378368,29.8295268 29.8295268,23.6378368 29.8295268,16 C29.8295268,8.36216324 23.6378368,2.17047318 16,2.17047318 Z M22.9916802,8.71247969 C23.4468324,9.0159145 23.5935495,9.60861927 23.3505517,10.0841959 L23.2875203,10.1916802 L14.0324532,24.074281 L7.7790861,17.8209139 C7.36252686,17.4043547 7.36252686,16.7289787 7.7790861,16.3124194 C8.16360233,15.9279032 8.76864879,15.898325 9.18709274,16.2236849 L9.28758057,16.3124194 L13.7002667,20.7242667 L21.5124797,9.00831979 C21.8392556,8.51815586 22.5015163,8.38570373 22.9916802,8.71247969 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='Wireframes' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Heatpumps' transform='translate(-312, -11384)'%3E%3Cg id='S-|-Whats-Included' transform='translate(0, 10367)'%3E%3Cg id='Included' transform='translate(312, 885)'%3E%3Cg id='Icons/Arrows/Circle-Arrow---Left' transform='translate(0, 132)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Combined-Shape' fill='%23000000' xlink:href='%23path-1'%3E%3C/use%3E%3Cg id='Colour' mask='url(%23mask-2)' fill='%2300755f'%3E%3Crect id='bg' x='0' y='0' width='32' height='32'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n                                }\n                                .formkit-label {\n                                    @apply text-lima-600\n                                }\n                            }\n\n                            \n                        }\n\n                    }\n                }\n            \n            }\n\n        }\n\n    }\n\n    .form--checkboxes {\n\n        .formkit-outer {\n\n            .formkit-wrapper {\n                @apply flex flex-row gap-2 cursor-pointer;\n\n                .formkit-label {\n                    @apply font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500\n                }\n\n            }\n            \n        }\n\n    }\n\n    .form--textarea {\n\n        @apply mb-0 w-full;\n\n        .formkit-outer {\n\n            @apply flex flex-col gap-2;\n\n            .formkit-wrapper {\n\n                @apply order-2 flex flex-col justify-start items-start gap-1;\n\n                .formkit-inner {\n\n\n                    @apply w-full h-auto order-2;\n\n                    textarea {\n                        @apply w-full h-25 p-2 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 border border-mystic-200 rounded-1;\n                    }\n\n                }\n            \n            }\n\n            .formkit-label {\n                @apply order-1 font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-nevada-500 mb-2 #{!important}\n            }\n\n            .formkit-help {\n                @apply order-3 font-hass-text text-ps_mobile md:text-ps_tablet lg:text-ps_desktop font-normal text-nevada-500\n            }\n\n            .formkit-messages {\n                @apply order-4 font-hass-text text-ps_mobile md:text-ps_tablet lg:text-ps_desktop font-normal text-nevada-500\n            }\n\n        }\n\n    }\n\n    .next {\n        @apply \n        \n        transition-all ease-in-out duration-100 \n        \n        flex flex-col justify-center items-center \n        \n        font-hass-display text-p_mobile md:text-p_tablet lg:text-p_desktop font-roman text-center \n\n        bg-[var(--theme)] [&.button--ghost]:bg-[transparent]\n\n      text-white-50 [&.button--ghost]:text-[var(--theme)]\n\n        border-[2px] border-[var(--theme)]\n\n        h-5 md:h-6 w-auto px-4 rounded-full\n\n        disabled:cursor-not-allowed disabled:bg-hit-gray-400 disabled:border-hit-gray-400 disabled:text-white-50\n    }\n\n    .formkit-outer {\n\n        .formkit-messages {\n\n            @apply m-0 p-0;\n\n            .formkit-message {\n                @apply m-0 p-0 font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-medium text-[#f31e2b]\n            }\n\n        }\n\n    }\n\n    .formkit-form > .formkit-outer{\n        @apply col-span-12\n    }\n\n    .formkit-form > .formkit-messages {\n        @apply hidden\n    }\n}\n</style>"],"names":["searchPersons","usePipedrive","contactNumberValidate","emailValidate","useLoqate","checkContactNumber","ref","checkEmailAddress","submit","fields","contactNumber","emailAddress","updateContactNumber","updateEmailAddress"],"mappings":"g/BASU,KAAA,CAAE,cAAAA,GAAkBC,IACpB,CAAE,sBAAAC,EAAuB,cAAAC,CAAc,EAAIC,EAAU,EAErDC,EAAqBC,EAAI,EAAI,EAC7BC,EAAoBD,EAAI,EAAI,EAE5BE,EAAS,MAAOC,GAAe,CAEzB,QAAA,IAAI,OAAO,QAAQA,CAAM,EAAE,CAAC,EAAE,CAAC,CAAC,EAElC,MAAAC,EAAgB,OAAO,QAAQD,CAAM,EAAE,CAAC,EAAE,CAAC,EAAE,sBAAsB,cACnEE,EAAe,OAAO,QAAQF,CAAM,EAAE,CAAC,EAAE,CAAC,EAAE,sBAAsB,aAErDJ,EAAA,MAAQ,MAAMH,EAAsBQ,CAAa,EAClDH,EAAA,MAAQ,MAAMJ,EAAcQ,CAAY,EAEvDN,EAAmB,OAASE,EAAkB,OACvC,MAAAP,EAAc,OAAO,QAAQS,CAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CACpD,EAIEG,EAAsB,IAAM,CAC9BP,EAAmB,MAAQ,EAAA,EAGzBQ,EAAqB,IAAM,CAC7BN,EAAkB,MAAQ,EAAA"}