{"version":3,"file":"Dtmhes1z.js","sources":["../../../../storyblok/panels/PanelHomeLoan.vue"],"sourcesContent":["<template>\n  <div class=\"panel-container\">\n    <div\n      class=\"panel-header\"\n      v-if=\"blok.title || hasRichTextContent(blok.subtitle)\"\n    >\n      <h3 v-if=\"blok.title\">{{ blok.title }}</h3>\n      <RichText\n        :text=\"blok.subtitle\"\n        v-if=\"hasRichTextContent(blok.subtitle)\"\n      />\n    </div>\n\n    <div class=\"form-container\">\n      <div class=\"input-group\">\n        <div class=\"input-head\">\n          <div class=\"input-title\">\n            {{\n              t(\n                `input.wantToBorrow.title.${\n                  blok.loanType == \"transfer\" ? \"transfer\" : \"default\"\n                }`\n              )\n            }}\n          </div>\n          <CurrencyInput\n            ref=\"wantToBorrowInput\"\n            v-model=\"wantToBorrowDisplay\"\n            :label=\"\n              t(\n                `input.wantToBorrow.title.${\n                  blok.loanType == 'transfer' ? 'transfer' : 'default'\n                }`\n              )\n            \"\n            :validation=\"wantToBorrowValidation\"\n            :error-display=\"false\"\n          />\n        </div>\n        <SliderInput\n          v-model=\"wantToBorrowStep\"\n          :min=\"1\"\n          :max=\"110\"\n          :step=\"1\"\n          :label=\"\n            t(\n              `input.wantToBorrow.title.${\n                blok.loanType == 'transfer' ? 'transfer' : 'default'\n              }`\n            )\n          \"\n        />\n\n        <div class=\"input-description\">\n          <div>{{ t(\"input.wantToBorrow.min\") }}</div>\n          <div>{{ t(\"input.wantToBorrow.max\") }}</div>\n        </div>\n\n        <InputError\n          :errorMessage=\"wantToBorrowInput.errorMessage\"\n          v-if=\"wantToBorrowInput?.errorMessage\"\n        />\n      </div>\n\n      <div class=\"input-group\">\n        <div class=\"input-head\">\n          <div class=\"input-title\">\n            {{ t(\"input.wantToBorrowTime.title\") }}\n          </div>\n          <TextInput\n            ref=\"wantToBorrowTimeInput\"\n            v-model=\"wantToBorrowTime\"\n            :suffix=\"t('input.wantToBorrowTime.suffix')\"\n            :validation=\"wantToBorrowTimeValidation\"\n            :error-display=\"false\"\n            inputmode=\"numeric\"\n            :label=\"t('input.wantToBorrowTime.title')\"\n          />\n        </div>\n        <SliderInput\n          v-model=\"wantToBorrowTime\"\n          :min=\"wantToBorrowTimeMin\"\n          :max=\"wantToBorrowTimeMax\"\n          :step=\"1\"\n          :label=\"t('input.wantToBorrowTime.title')\"\n        />\n        <div class=\"input-description\">\n          <div>\n            {{ t(\"input.wantToBorrowTime.min\", { n: wantToBorrowTimeMin }) }}\n          </div>\n          <div>\n            {{ t(\"input.wantToBorrowTime.max\", { n: wantToBorrowTimeMax }) }}\n          </div>\n        </div>\n\n        <InputError\n          :errorMessage=\"wantToBorrowTimeInput.errorMessage\"\n          v-if=\"wantToBorrowTimeInput?.errorMessage\"\n        />\n      </div>\n    </div>\n\n    <div class=\"btn-container\">\n      <NavigationButton\n        :blok=\"button\"\n        v-for=\"button in blok.button\"\n        @click=\"submit\"\n      />\n    </div>\n\n    <div\n      class=\"disclaimer-container\"\n      v-if=\"hasRichTextContent(blok.disclaimer)\"\n    >\n      <RichText :text=\"blok.disclaimer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  formatCurrency,\n  CurrencyInput,\n  InputError,\n  SliderInput,\n  TextInput,\n  formValidation,\n  useValidateForm,\n} from \"cja-phoenix\";\nimport { hasRichTextContent } from \"@/utils/storyblok\";\nimport { PanelHomeLoanStoryblok } from \"~/types/bloks\";\n\nconst props = defineProps<{\n  blok: PanelHomeLoanStoryblok;\n}>();\n\nconst { t } = useI18n();\n\nconst transformDisplay = (n: number) =>\n  n > 100 ? 1000000 + (n - 100) * 100000 : n * 10000;\n\nconst transformStep = (n: number) =>\n  n > 1000000 ? 100 + (n - 1000000) / 100000 : n / 10000;\n\nconst sliderMin = 10000;\nconst sliderMax = 2000000;\n\nconst wantToBorrowInput = ref();\nconst wantToBorrowStep = ref(15);\nconst wantToBorrow = ref(150000);\n\nconst wantToBorrowDisplay = computed({\n  get: () => wantToBorrow.value,\n  set: (n) => {\n    wantToBorrowStep.value = transformStep(n);\n    wantToBorrow.value = n;\n  },\n});\n\nwatch(wantToBorrowStep, (n) => {\n  wantToBorrow.value = transformDisplay(n);\n});\n\nconst wantToBorrowValidation = formValidation.number(\n  {\n    required: t(\"input.error.required\"),\n    min: t(\"input.error.wantToBorrowMin\", {\n      min: formatCurrency(sliderMin),\n    }),\n    max: t(\"input.error.wantToBorrowMax\", {\n      max: formatCurrency(sliderMax),\n    }),\n  },\n  { min: sliderMin, max: sliderMax }\n);\n\nconst wantToBorrowTimeInput = ref();\nconst wantToBorrowTime = ref(35);\nconst wantToBorrowTimeMin = 5;\nconst wantToBorrowTimeMax = 40;\nconst wantToBorrowTimeValidation = formValidation.number(\n  {\n    required: t(\"input.error.required\"),\n    min: t(\"input.error.wantToBorrowTimeMin\", { min: wantToBorrowTimeMin }),\n    max: t(\"input.error.wantToBorrowTimeMax\", { max: wantToBorrowTimeMax }),\n  },\n  { min: wantToBorrowTimeMin, max: wantToBorrowTimeMax }\n);\n\nconst { submit } = useValidateForm({\n  fields: [wantToBorrowInput, wantToBorrowTimeInput],\n  onSubmit: async () => {\n    await navigateTo({\n      path: \"/credito-habitacao/simular\",\n      query: {\n        \"marketing-campaign\": props.blok.marketingCampaign\n          ? props.blok.marketingCampaign\n          : undefined,\n        wantToBorrow: wantToBorrow.value,\n        wantToBorrowTime: wantToBorrowTime.value,\n        loanType: props.blok.loanType,\n      },\n    });\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.panel-container {\n  @include hero-panel;\n  max-width: 400px;\n  margin: 0 auto;\n  width: 100%;\n\n  @media screen and (min-width: $break-md-min) {\n    max-width: none;\n    margin: 0;\n  }\n\n  .panel-header {\n    @include hero-panel-header;\n\n    @media screen and (max-width: $break-sm-max) {\n      display: none;\n    }\n  }\n\n  .form-container {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n    margin-bottom: 24px;\n\n    .input-group {\n      .input-head {\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 16px;\n\n        :deep(.input-wrapper) {\n          max-width: 140px;\n        }\n      }\n\n      .input-title {\n        font-size: 18px;\n        line-height: 24px;\n        font-weight: 600;\n\n        @media screen and (min-width: $break-md-min) {\n          font-size: 20px;\n          line-height: 26px;\n        }\n      }\n\n      .input-description {\n        display: flex;\n        justify-content: space-between;\n        gap: 16px;\n        font-size: 14px;\n        line-height: 20px;\n        margin-top: 8px;\n      }\n\n      .input-error {\n        margin-top: 8px;\n      }\n    }\n  }\n\n  .btn-container {\n    display: grid;\n\n    @media screen and (min-width: $break-md-min) {\n      display: flex;\n      justify-content: center;\n    }\n\n    button {\n      @media screen and (min-width: $break-md-min) {\n        width: 200px;\n      }\n    }\n  }\n\n  .disclaimer-container {\n    margin-top: 12px;\n    color: $dark-grey;\n    text-align: center;\n    font-size: 14px;\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"input\": {\n      \"wantToBorrow\": {\n        \"title\": {\n          \"default\": \"Empréstimo\",\n          \"transfer\": \"Valor em dívida\"\n        },\n        \"min\": \"10.000 €\",\n        \"max\": \"até 2.000.000 €\"\n      },\n      \"wantToBorrowTime\": {\n        \"title\": \"Prazo\",\n        \"suffix\": \"anos\",\n        \"min\": \"{n} anos\",\n        \"max\": \"até {n} anos\"\n      },\n      \"error\": {\n        \"wantToBorrowMin\": \"O valor mínimo é de {min}\",\n        \"wantToBorrowMax\": \"O valor máximo é de {max}\",\n        \"wantToBorrowTimeMin\": \"O prazo mínimo é de {min} anos\",\n        \"wantToBorrowTimeMax\": \"O prazo máximo é de {max} anos\"\n      }\n    }\n  }\n}\n</i18n>\n"],"names":["sliderMin","sliderMax","wantToBorrowTimeMin","wantToBorrowTimeMax","props","__props","t","useI18n","transformDisplay","n","transformStep","wantToBorrowInput","ref","wantToBorrowStep","wantToBorrow","wantToBorrowDisplay","computed","watch","wantToBorrowValidation","formValidation","formatCurrency","wantToBorrowTimeInput","wantToBorrowTime","wantToBorrowTimeValidation","submit","useValidateForm","navigateTo"],"mappings":"krBAgJMA,EAAY,IACZC,EAAY,IAiCZC,EAAsB,EACtBC,EAAsB,wDA/C5B,MAAMC,EAAQC,EAIR,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAEhBC,EAAoBC,GACxBA,EAAI,IAAM,KAAWA,EAAI,KAAO,IAASA,EAAI,IAEzCC,EAAiBD,GACrBA,EAAI,IAAU,KAAOA,EAAI,KAAW,IAASA,EAAI,IAK7CE,EAAoBC,EAAI,EACxBC,EAAmBD,EAAI,EAAE,EACzBE,EAAeF,EAAI,IAAM,EAEzBG,EAAsBC,EAAS,CACnC,IAAK,IAAMF,EAAa,MACxB,IAAML,GAAM,CACOI,EAAA,MAAQH,EAAcD,CAAC,EACxCK,EAAa,MAAQL,CAAA,CACvB,CACD,EAEKQ,EAAAJ,EAAmBJ,GAAM,CAChBK,EAAA,MAAQN,EAAiBC,CAAC,CAAA,CACxC,EAED,MAAMS,EAAyBC,EAAe,OAC5C,CACE,SAAUb,EAAE,sBAAsB,EAClC,IAAKA,EAAE,8BAA+B,CACpC,IAAKc,EAAepB,CAAS,CAAA,CAC9B,EACD,IAAKM,EAAE,8BAA+B,CACpC,IAAKc,EAAenB,CAAS,CAC9B,CAAA,CACH,EACA,CAAE,IAAKD,EAAW,IAAKC,CAAU,CACnC,EAEMoB,EAAwBT,EAAI,EAC5BU,EAAmBV,EAAI,EAAE,EAGzBW,EAA6BJ,EAAe,OAChD,CACE,SAAUb,EAAE,sBAAsB,EAClC,IAAKA,EAAE,kCAAmC,CAAE,IAAKJ,EAAqB,EACtE,IAAKI,EAAE,kCAAmC,CAAE,IAAKH,CAAqB,CAAA,CACxE,EACA,CAAE,IAAKD,EAAqB,IAAKC,CAAoB,CACvD,EAEM,CAAE,OAAAqB,CAAO,EAAIC,EAAgB,CACjC,OAAQ,CAACd,EAAmBU,CAAqB,EACjD,SAAU,SAAY,CACpB,MAAMK,EAAW,CACf,KAAM,6BACN,MAAO,CACL,qBAAsBtB,EAAM,KAAK,kBAC7BA,EAAM,KAAK,kBACX,OACJ,aAAcU,EAAa,MAC3B,iBAAkBQ,EAAiB,MACnC,SAAUlB,EAAM,KAAK,QAAA,CACvB,CACD,CAAA,CACH,CACD"}