{"version":3,"file":"DoubleThicknessExplainerDrawer-CZpHKFV1.js","sources":["../../../app/javascript/images/double-thick-explainer-graphic.png","../../../app/javascript/components/listings/DoubleThicknessExplainerDrawer.vue"],"sourcesContent":["export default \"__VITE_ASSET__DhUsayTZ__\"","<template>\n  <drawer\n    :transition-from-bottom=\"smallScreen\"\n    :is-open=\"drawerOpen\"\n    @close-drawer=\"closeDrawer\">\n    <template #header>\n      <h4 class=\"typeset-3 mb-6\">\n        {{ t(\"double-thick-upgrade.drawer.drawer-header\") }}\n      </h4>\n    </template>\n    <template #content>\n      <overlay\n        v-if=\"!prices\"\n        absolutely-positioned />\n      <div v-else>\n        <div class=\"mb-6\">\n          <div class=\"flex justify-between mb-1 items-center\">\n            <h5 class=\"typeset-6\">\n              {{ t(\"double-thick-upgrade.drawer.standard-card-stock\") }}\n            </h5>\n            <p class=\"text-ink-4\">\n              {{ formattedPrice(currentStandardPrice) }}\n            </p>\n          </div>\n          <p class=\"typeset-4 text-ink-4 mb-3\">\n            {{ t(\"double-thick-upgrade.drawer.paper-weight-standard\") }}\n          </p>\n          <p class=\"text-ink mb-6\">\n            {{\n              t(\"double-thick-upgrade.drawer.standard-card-stock-description\")\n            }}\n          </p>\n        </div>\n        <div class=\"mb-6\">\n          <div class=\"flex justify-between mb-1 items-center\">\n            <h5 class=\"typeset-6\">\n              {{ t(\"double-thick-upgrade.drawer.premium-card-stock\") }}\n            </h5>\n            <p class=\"text-ink-4\">\n              {{ formattedPrice(currentThickPrice) }}\n            </p>\n          </div>\n          <p class=\"typeset-4 text-ink-4 mb-3\">\n            {{ t(\"double-thick-upgrade.drawer.paper-weight-premium\") }}\n          </p>\n          <p class=\"text-ink\">\n            {{\n              t(\"double-thick-upgrade.drawer.premium-card-stock-description\")\n            }}\n          </p>\n        </div>\n        <div class=\"bg-paper p-4 flex flex-col items-center\">\n          <p\n            class=\"mb-4\"\n            v-html=\"\n              t('double-thick-upgrade.drawer.paper-weight-explanation-html')\n            \"></p>\n          <img\n            class=\"items-center w-full\"\n            :src=\"explainerGraphic\" />\n        </div>\n      </div>\n    </template>\n  </drawer>\n</template>\n\n<script>\nimport api from \"@/app/javascript/api\";\n\nimport Drawer from \"@/app/javascript/components/shared/Drawer.vue\";\nimport Overlay from \"@/app/javascript/components/shared/Overlay.vue\";\nimport explainerGraphic from \"@/app/javascript/images/double-thick-explainer-graphic.png\";\n\nexport default {\n  name: \"DoubleThicknessExplainerDrawer\",\n  components: {\n    Drawer,\n    Overlay\n  },\n  props: {\n    designableTypeId: {\n      type: Number,\n      required: true\n    }\n  },\n  data() {\n    return {\n      drawerOpen: false,\n      explainerGraphic,\n      prices: null,\n      qty: null,\n      smallScreen: false\n    };\n  },\n  computed: {\n    standardPricingValues() {\n      return this.prices.filter(price => !price.thickness);\n    },\n    thickPricingValues() {\n      return this.prices.filter(price => price.thickness);\n    },\n    currentStandardPrice() {\n      return this.standardPricingValues.find(price => {\n        return price.qty === this.qty;\n      });\n    },\n    currentThickPrice() {\n      return this.thickPricingValues.find(price => {\n        return price.qty === this.qty;\n      });\n    },\n    formattedPrice() {\n      return price => {\n        return `${price.currencySymbol}${price.price.toFixed(2)}${this.t(\n          \"double-thick-upgrade.drawer.per-invitation\"\n        )}`;\n      };\n    }\n  },\n  mounted() {\n    const xsQuery = window.matchMedia(\"(max-width: 479px)\");\n    xsQuery.addListener(this.xsScreenSize);\n    this.xsScreenSize(xsQuery);\n\n    window.addEventListener(\n      \"openDoubleThicknessExplainerDrawer\",\n      this.openDrawer\n    );\n  },\n  methods: {\n    closeDrawer() {\n      this.drawerOpen = false;\n    },\n    async openDrawer(e) {\n      this.qty = parseInt(e.detail.qty, 10);\n      this.drawerOpen = true;\n      this.prices = this.prices || (await this.fetchPrices());\n    },\n    async fetchPrices() {\n      const response = await api.get(\n        `/designable_types/${this.designableTypeId}/all_pricing_values`\n      );\n      return response.data.prices;\n    },\n    xsScreenSize(mediaQuery) {\n      if (mediaQuery.matches) {\n        this.smallScreen = true;\n      } else {\n        this.smallScreen = false;\n      }\n    }\n  }\n};\n</script>\n"],"names":["explainerGraphic","_sfc_main","Drawer","Overlay","price","xsQuery","api","mediaQuery","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_createBlock","_component_drawer","$data","$options","_createElementVNode","_toDisplayString","_ctx","_openBlock","_createElementBlock","_hoisted_2","_component_overlay"],"mappings":"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"}