{"version":3,"sources":["webpack:///./src/views/Pricing.vue?fcc4","webpack:///./src/views/Pricing.vue","webpack:///./src/views/Pricing.vue?71fb","webpack:///./src/views/Pricing.vue?0ffa"],"names":["class","products","$t","product","name","index","key","id","type","value","selectedProductSize","checked","for","selectedProduct","pContent","pItem","content","item","price","iterations","reports","components","Button","Icon","Footer","url","getProducts","Object","entries","async","baseURL","data","method","then","resp","console","log","catch","err","render","__scopeId"],"mappings":"kIAAA,W,8IC4DaA,MAAM,Q,GACJA,MAAM,uB,SACRA,MAAM,wB,EACT,eAAyB,UAArB,oBAAgB,G,GACjBA,MAAM,c,GAEJA,MAAM,uC,aAaNA,MAAM,c,SAIHA,MAAM,qB,GAEDA,MAAM,Y,GACJA,MAAM,Q,GACPA,MAAM,S,GACPA,MAAM,e,GAINA,MAAM,e,GACLA,MAAM,Y,GACJA,MAAM,Q,GACFA,MAAM,U,uBAINA,MAAM,W,GAGVA,MAAM,Q,GACFA,MAAM,U,GAGNA,MAAM,W,gIA/ClC,eA4DO,aA3DL,eA0DU,UA1DV,EA0DU,CAzDR,eAwDU,UAxDV,EAwDU,CAvDgC,EAAAC,U,iBAAxC,eAsDM,MAtDN,EAsDM,CArDJ,EACA,eAAqD,IAArD,EAAqD,eAA5B,EAAAC,GAAG,oBAAD,GAE3B,eAQM,MARN,EAQM,E,mBAPJ,eAMM,2BANgC,EAAAD,SAAQ,CAAjCE,EAASC,EAAMC,K,iBAA5B,eAMM,OAN2CC,IAAKF,EAAMJ,MAAM,a,gBAChE,eAC0C,SADlCO,GAAIF,EAAOG,KAAK,QAASC,MAAOL,E,qCAAe,EAAAM,oBAAmB,GACvEC,QAAmB,IAAVN,G,0CAD2C,EAAAK,uBAEvD,eAEQ,SAFAE,IAAKP,GAAK,eACbD,GAAI,e,QAOF,EAAAS,iB,iBAAX,eAqCM,SApCJ,eAEI,IAFJ,EAEI,eADC,EAAAX,GAAG,SAAS,EAAAQ,sBAAmB,I,mBAEpC,eAgCM,2BAhC2B,EAAAG,gBAAe,CAAnCC,EAAUC,K,iBAAvB,eAgCM,OAhC6CT,IAAKQ,GAAQ,CACjB,WAATC,G,iBAApC,eA8BK,KA9BL,EA8BK,E,mBA7BH,eA4BK,2BA5B0DD,EAAQ,CAA1BE,EAASC,K,iBAAtD,eA4BK,MA5BDjB,MAAM,2BAAgEM,IAAKU,G,CAC7E,eAMM,MANN,EAMM,CALJ,eAAkC,MAAlC,EAAkC,eAAbC,GAAI,GACzB,eAA6C,KAA7C,EAA6C,eAAxBD,EAAQE,OAAQ,MAAG,GACxC,eAEI,IAFJ,EAEI,eADC,EAAAhB,GAAG,WAAWe,UAAI,KAGzB,eAmBM,MAnBN,EAmBM,CAlBJ,eAiBK,KAjBL,EAiBK,CAhBH,eAOK,KAPL,EAOK,CANH,eAGuC,OAHvC,EAGuC,CAFzBD,EAAQG,Y,iBAApB,eAES,wBADTH,EAAQG,YAAU,K,iBACT,eAAqB,SAAR,QACxB,eACuC,OADvC,EACuC,eAAlC,EAAAjB,GAAG,WAAWe,SAAI,KAEzB,eAOK,KAPL,EAOK,CANH,eAES,OAFT,EAES,eADTD,EAAQI,QAAUJ,EAAQI,QAAU,GAAH,GAEjC,eAES,OAFT,EAES,eADT,EAAAlB,GAAG,WAAWe,SAAI,a,iGAaxC,eAAiB,I,mEC/GJ,iBAAgB,CAC7BI,WAAY,CACVC,SAAA,KACAC,OAAA,KACAC,OAAA,QAEF,QACE,MAAMC,EAAM,yBAEZ,eAAU,KACRC,MAGF,MAAMzB,EAAW,eAAI,IACrB,IAAIS,EAAsB,eAAI,KAE9B,MAAMG,EAAkB,eAAS,KAC/B,IAAK,MAAOP,EAAKG,KAAUkB,OAAOC,QAAQ3B,EAASQ,OACjD,GAAIH,GAAOI,EAAoBD,MAC7B,OAAOA,IAKPiB,EAAcG,UAClB,IAAM,CACJC,QAASL,EACTA,IAAK,mBACLM,KAAM,GACNC,OAAQ,QAEPC,KAAMC,IACLjC,EAASQ,MAAQyB,EAAKH,KACtBI,QAAQC,IAAInC,EAASQ,SAEtB4B,MAAOC,IACNH,QAAQC,IAAIE,MAIlB,MAAO,CACLrC,WACAS,sBACAG,sB,UC/CN,EAAO0B,OAASA,EAChB,EAAOC,UAAY,kBAEJ","file":"js/Pricing.a66b970e.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/index.js??ref--1-1!./Pricing.vue?vue&type=style&index=0&id=76249ea3&lang=scss&scoped=true\"","<script lang=\"ts\">\nimport { onMounted, defineComponent, ref, onUnmounted, computed } from \"vue\"\n\nimport Button from \"../components/Button.vue\"\nimport Icon from \"../components/Icon.vue\"\nimport Footer from \"../components/footer.vue\"\nimport axios from \"axios\"\nimport { useStore } from \"vuex\"\n\nexport default defineComponent({\n  components: {\n    Button,\n    Icon,\n    Footer,\n  },\n  setup() {\n    const url = \"https://api.otonomi.no\"\n\n    onMounted(() => {\n      getProducts()\n    })\n\n    const products = ref({})\n    let selectedProductSize = ref(\"S\")\n\n    const selectedProduct = computed(() => {\n      for (const [key, value] of Object.entries(products.value)) {\n        if (key == selectedProductSize.value) {\n          return value\n        }\n      }\n    })\n\n    const getProducts = async () => {\n      axios({\n        baseURL: url,\n        url: \"/order/products/\",\n        data: {},\n        method: \"GET\",\n      })\n        .then((resp) => {\n          products.value = resp.data\n          console.log(products.value)\n        })\n        .catch((err) => {\n          console.log(err)\n        })\n    }\n\n    return {\n      products,\n      selectedProductSize,\n      selectedProduct,\n    }\n  },\n})\n</script>\n\n<template>\n  <main>\n    <section class=\"page\">\n      <section class=\"pricing text-center\">\n        <div class=\"content align-center\" v-if=\"products\">\n          <h1>Flexible pricing</h1>\n          <p class=\"light-text\">{{ $t(`pricing.pricing`) }}</p>\n\n          <div class=\"priceSelections flex justify-center\">\n            <div v-for=\"(product, name, index) in products\" :key=\"name\" class=\"priceItem\">\n              <input :id=\"index\" type=\"radio\" :value=\"name\" v-model=\"selectedProductSize\"\n                :checked=\"index === 0 ? true : false\" />\n              <label :for=\"index\">\n                {{ name }}\n              </label>\n            </div>\n          </div>\n\n          <!-- <div v-if=\"products[\"L\"][\"PACKAGE\"]\">{{ products[\"L\"].PACKAGE }}</div> -->\n\n          <div v-if=\"selectedProduct\">\n            <p class=\"light-text\">\n              {{ $t(`sizes.${selectedProductSize}`) }}\n            </p>\n            <div v-for=\"(pContent, pItem) in selectedProduct\" :key=\"pContent\">\n              <ul class=\"pricing-container\" v-if=\"pItem == 'PACKAGE'\">\n                <li class=\"PricingPlanBox white-box\" v-for=\"(content, item) in pContent\" :key=\"content\">\n                  <div class=\"top-half\">\n                    <div class=\"size\">{{ item }}</div>\n                    <h2 class=\"price\">{{ content.price }} kr</h2>\n                    <p class=\"description\">\n                      {{ $t(`pricing.${item}Desc`) }}\n                    </p>\n                  </div>\n                  <div class=\"bottom-half\">\n                    <ul class=\"features\">\n                      <li class=\"item\">\n                        <span class=\"number\">\n                          <span v-if=\"content.iterations\">{{\n                          content.iterations\n                          }}</span><span v-else>0</span></span>\n                        <span class=\"feature\">\n                          {{ $t(`pricing.${item}Sim`) }}</span>\n                      </li>\n                      <li class=\"item\">\n                        <span class=\"number\">{{\n                        content.reports ? content.reports : 0\n                        }}</span>\n                        <span class=\"feature\">{{\n                        $t(`pricing.${item}Rep`)\n                        }}</span>\n                      </li>\n                    </ul>\n                  </div>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </section>\n    </section>\n  </main>\n  <Footer></Footer>\n</template>\n\n<style lang=\"scss\" scoped>\n@import \"../css/home.scss\";\n\n.page {\n  font-size: 1rem;\n  margin: 200px auto;\n  width: 80vw;\n  max-width: 1000px;\n}\n\n.white-box {\n  background: white;\n  padding: 30px;\n  text-align: left;\n  border-radius: 24px;\n  box-shadow: var(--shadow-light);\n}\n\n.light-text {\n  color: var(--color-text-light);\n}\n\n.priceSelections {\n  margin-bottom: 2rem;\n\n  .priceItem {\n    padding: 5px;\n    border-radius: 12px;\n    font-weight: 700;\n    margin-right: 1rem;\n\n    &:has(input[type=\"radio\"]:checked) {\n      background: var(--color-blue);\n    }\n\n    label {\n      padding: 0px 12px 0 5px;\n      font-size: 1.3rem;\n    }\n  }\n}\n\n.pricing-container {\n  display: flex;\n  list-style-type: none;\n  margin: 0 auto;\n  padding: 0;\n\n  @media (max-width: 800px) {\n    flex-direction: column;\n  }\n\n  .PricingPlanBox {\n    flex-grow: 1;\n    flex-basis: 0;\n    margin: 0 10px;\n    max-width: 225px;\n    margin: 0 auto;\n\n    .top-half {\n      border-bottom: 1px solid var(--color-light-blue-grey);\n      padding-bottom: 10px;\n\n      .title {\n        font-size: 1.5rem;\n        margin-top: 0;\n        margin-bottom: 0;\n        // color: var(--color-dark-green);\n      }\n\n      .size {\n        font-size: 1rem;\n        font-weight: 600;\n        margin-top: 0;\n        margin-bottom: 1.5rem;\n        color: var(--color-dark-green);\n      }\n\n      .price {\n        font-size: clamp(25px, 2.5vw, 3rem);\n        letter-spacing: -0.2rem;\n        font-weight: 900;\n      }\n\n      .description {\n        font-size: 1rem;\n        color: var(--color-text-light);\n      }\n    }\n\n    .bottom-half {\n      padding-top: 35px;\n\n      .features {\n        margin: 0;\n        padding: 0 0 0 1.3rem;\n      }\n\n      .item {\n        display: flex;\n        margin-bottom: 10px;\n      }\n\n      .feature {\n        font-size: 0.8rem;\n        font-weight: 500;\n        color: var(--color-text-light);\n        margin: auto 10px;\n      }\n\n      .number {\n        font-size: 1.1rem;\n        font-weight: 700;\n        position: relative;\n\n        &::before {\n          content: \">\";\n          position: absolute;\n          left: -1.3rem;\n          color: var(--color-dark-green);\n        }\n      }\n    }\n  }\n\n  .highlight {\n    background: var(--color-bg-dark);\n    color: white;\n    border: 5px solid white;\n    box-sizing: border-box;\n    box-shadow: var(--shadow-dark);\n  }\n}\n</style>\n","\nimport { onMounted, defineComponent, ref, onUnmounted, computed } from \"vue\"\n\nimport Button from \"../components/Button.vue\"\nimport Icon from \"../components/Icon.vue\"\nimport Footer from \"../components/footer.vue\"\nimport axios from \"axios\"\nimport { useStore } from \"vuex\"\n\nexport default defineComponent({\n  components: {\n    Button,\n    Icon,\n    Footer,\n  },\n  setup() {\n    const url = \"https://api.otonomi.no\"\n\n    onMounted(() => {\n      getProducts()\n    })\n\n    const products = ref({})\n    let selectedProductSize = ref(\"S\")\n\n    const selectedProduct = computed(() => {\n      for (const [key, value] of Object.entries(products.value)) {\n        if (key == selectedProductSize.value) {\n          return value\n        }\n      }\n    })\n\n    const getProducts = async () => {\n      axios({\n        baseURL: url,\n        url: \"/order/products/\",\n        data: {},\n        method: \"GET\",\n      })\n        .then((resp) => {\n          products.value = resp.data\n          console.log(products.value)\n        })\n        .catch((err) => {\n          console.log(err)\n        })\n    }\n\n    return {\n      products,\n      selectedProductSize,\n      selectedProduct,\n    }\n  },\n})\n","import { render } from \"./Pricing.vue?vue&type=template&id=76249ea3&scoped=true\"\nimport script from \"./Pricing.vue?vue&type=script&lang=ts\"\nexport * from \"./Pricing.vue?vue&type=script&lang=ts\"\n\nimport \"./Pricing.vue?vue&type=style&index=0&id=76249ea3&lang=scss&scoped=true\"\nscript.render = render\nscript.__scopeId = \"data-v-76249ea3\"\n\nexport default script"],"sourceRoot":""}