{"version":3,"file":"PublicPageView-wpSnxok_.js","sources":["../../src/components/public-page/PublicCTA.vue","../../src/views/PublicPageView.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { useTranslate } from '@tolgee/vue'\nimport { usePublicData } from '@/stores/PublicData'\n\nimport CheckMarkIcon from '@/components/icons/CheckMarkIcon.vue'\nimport { useEditorStore } from '@/stores/Editor'\nimport { BackgroundTheme } from '@/api/interfaces'\nimport { getCSSVariable } from '@/helpers/utils'\nimport BackgroundIcon from '@/components/icons/backgrounds/BackgroundIcon.vue'\n\nconst publicStore = usePublicData()\nconst editorStore = useEditorStore()\nconst { t } = useTranslate()\n\nconst list = [\n  'PublicCTA.list.integrate',\n  'PublicCTA.list.impact',\n  'PublicCTA.list.plans',\n  'PublicCTA.list.goals',\n]\n\nconst listIconColor = computed(() => {\n  if (editorStore.editor.background.theme === BackgroundTheme.DARK) {\n    return getCSSVariable('darkest')\n  }\n\n  if (editorStore.editor.background.theme === BackgroundTheme.CUSTOM) {\n    return editorStore.editor.background.themeColor.background\n  }\n\n  return getCSSVariable('ui-emerald-green')\n})\n\nconst buttonColor = computed(() => {\n  if (editorStore.editor.background.theme === BackgroundTheme.DARK) {\n    return {\n      backgroundColor: getCSSVariable('darkest'),\n      textColor: getCSSVariable('lightest'),\n    }\n  }\n\n  if (editorStore.editor.background.theme === BackgroundTheme.CUSTOM) {\n    return {\n      backgroundColor: editorStore.editor.background.themeColor.background,\n      textColor: editorStore.editor.background.themeColor.text,\n    }\n  }\n\n  return { backgroundColor: getCSSVariable('ui-emerald-green'), textColor: '#2d2d2d' }\n})\n</script>\n\n<template>\n  <section class=\"section public-cta\">\n    <BackgroundIcon class=\"background-icon\" :icon-type=\"editorStore.editor.background.icon\" />\n    <v-container>\n      <div class=\"public-cta-container\">\n        <img\n          class=\"public-cta-image\"\n          src=\"@/assets/images/cta-img.webp\"\n          alt=\"man-with-dog-watching-sunset-under-lonely-tree\"\n          loading=\"lazy\"\n        />\n        <div class=\"public-cta-content\">\n          <h2 class=\"public-cta-title\">\n            {{ $t('PublicCTA.title', { name: publicStore.name }) }}\n          </h2>\n          <ul class=\"public-cta-list\">\n            <li v-for=\"item in list\" :key=\"item\">\n              <CheckMarkIcon :color=\"listIconColor\" /> {{ t(item) }}\n            </li>\n          </ul>\n          <div class=\"d-flex d-sm-block justify-center w-100\">\n            <GsButton\n              href=\"https://www.getgreenspark.com/account-type\"\n              target=\"_blank\"\n              width=\"250\"\n              :style=\"{\n                backgroundColor: buttonColor.backgroundColor,\n                color: buttonColor.textColor,\n              }\"\n            >\n              {{ $t('PublicCTA.action') }}\n            </GsButton>\n          </div>\n        </div>\n      </div>\n    </v-container>\n  </section>\n</template>\n\n<style lang=\"scss\" scoped>\n.section {\n  position: relative;\n\n  :deep(.background-icon) {\n    position: absolute;\n    display: none;\n\n    @include media('md-and-up') {\n      display: block;\n      top: 50%;\n      left: -50px;\n      z-index: 0;\n      width: 350px;\n      height: 280px;\n      transform: rotate(-25deg) translateY(-50%);\n    }\n  }\n}\n\n.public-cta-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  z-index: 1;\n  background: rgba(255, 255, 255, 0.4);\n\n  .dark & {\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  @include media('md-and-up') {\n    flex-direction: row;\n  }\n\n  .btn {\n    @include media('xs-only') {\n      margin: auto;\n    }\n  }\n}\n\n.public-cta-image {\n  max-width: 100%;\n  object-fit: cover;\n  max-height: 300px;\n\n  @include media('md-and-up') {\n    max-width: 440px;\n    max-height: 100%;\n  }\n}\n\n.public-cta-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px;\n\n  @include media('md-and-up') {\n    padding: 34px 32px 34px 64px;\n  }\n}\n\n.public-cta-title {\n  font-size: 24px;\n  font-weight: 600;\n\n  @include media('md-and-up') {\n    font-size: 36px;\n  }\n}\n\n.public-cta-list {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  margin: 32px 0 32px 0;\n  padding: 0;\n  list-style-type: none;\n\n  li {\n    font-size: 20px;\n    display: flex;\n\n    svg {\n      margin-right: 5px;\n    }\n\n    @include media('md-and-up') {\n      font-size: 24px;\n    }\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted } from 'vue'\nimport { useRoute } from 'vue-router'\nimport { useSeoMeta } from '@unhead/vue'\n\nimport { IMPACT_TYPES, type IProjectRequestParams } from '@/api/interfaces'\nimport { useEditorStore } from '@/stores/Editor'\nimport { usePublicData } from '@/stores/PublicData'\nimport { useEditorFrame, EVENT_TYPES } from '@/composables/iframe'\nimport { inIFrame } from '@/helpers/utils'\n\nimport PublicComparisonCardRow from '@/components/public-page/PublicComparisonCardRow.vue'\nimport PublicComparisonCardLoader from '@/components/public-page/PublicComparisonCardLoader.vue'\nimport PublicHeader from '@/components/public-page/PublicHeader.vue'\nimport PublicHero from '@/components/public-page/PublicHero.vue'\nimport PublicMap from '@/components/public-page/PublicMap.vue'\nimport PublicTopStatCardList from '@/components/public-page/PublicTopStatCardList.vue'\nimport PublicLedger from '@/components/public-page/PublicLedger.vue'\nimport PublicFooter from '@/components/public-page/PublicFooter.vue'\nimport PublicCTA from '@/components/public-page/PublicCTA.vue'\nimport PublicMapLoader from '@/components/public-page/PublicMapLoader.vue'\nimport PublicGoalsAchievements from '@/components/public-page/PublicGoalsAchievements.vue'\n\nconst publicDataStore = usePublicData()\nconst editorStore = useEditorStore()\nconst route = useRoute()\nconst { dispatchMessage } = useEditorFrame()\nconst companyId: string = route.params.id as string\nconst projectParams: IProjectRequestParams = {\n  statuses: ['approved', 'deprecated'],\n}\nconst pageTitle = `${route.params.name}'s sustainable impact with Greenspark`\nconst pageDescription = `${route.params.name}'s partnered with Greenspark to achieve their sustainable and environmental goals such as planting trees, rescuing plastic, offsetting CO2. Check out their journey so far!`\n\nconst init = () => {\n  publicDataStore.loading = true\n\n  Promise.all([\n    publicDataStore.fetchPublicData(companyId),\n    editorStore.fetchEditorSettings(companyId),\n    publicDataStore.fetchProjects({ ...projectParams }),\n    publicDataStore.fetchPurchases(),\n  ])\n    .catch((error) => console.error(error))\n    .finally(() => {\n      publicDataStore.loading = false\n\n      if (inIFrame()) {\n        dispatchMessage(window.parent, { type: EVENT_TYPES.INIT })\n      }\n    })\n}\n\nonMounted(() => {\n  init()\n})\n\nuseSeoMeta({\n  title: pageTitle,\n  description: pageDescription,\n  ogTitle: pageTitle,\n  ogType: 'website',\n  ogDescription: pageDescription,\n  ogUrl: window.location.href,\n  ogImage:\n    'https://cdn.prod.website-files.com/611391a1477389e3857d8014/673c84ac1ebcf01d18a6d07d_OG%20Image.png',\n})\n</script>\n\n<template>\n  <div\n    :class=\"[\n      'public-page',\n      editorStore.editor.background.theme,\n      editorStore.editor.background.icon,\n    ]\"\n  >\n    <PublicHeader />\n    <PublicHero\n      :editor-settings=\"editorStore.editor.hero\"\n      :theme=\"editorStore.editor.background.theme\"\n    />\n    <PublicTopStatCardList\n      v-if=\"publicDataStore.getTopStats\"\n      :icon-style=\"editorStore.editor.icon.style\"\n      :color-settings=\"editorStore.editor.icon.impactColors\"\n      :public-stat-data=\"publicDataStore.getPublicStats\"\n      :top-stat-data=\"publicDataStore.getTopStats\"\n    />\n    <PublicMap\n      v-if=\"publicDataStore.projectList.length && !publicDataStore.loading\"\n      :projects=\"publicDataStore.getActiveAndDeprecatedProjects\"\n      :color-settings=\"editorStore.editor.icon.impactColors\"\n    />\n    <PublicMapLoader v-if=\"publicDataStore.loading\" />\n    <template v-for=\"impactType in IMPACT_TYPES\" :key=\"impactType\">\n      <PublicComparisonCardRow\n        v-if=\"\n          publicDataStore.getTopStats[impactType] &&\n          editorStore.editor.icon.impactDisplay[impactType] &&\n          !publicDataStore.loading\n        \"\n        :icon-style=\"editorStore.editor.icon.style\"\n        :color-settings=\"editorStore.editor.icon.impactColors\"\n        :impact-type=\"impactType\"\n        :top-stat-data=\"publicDataStore.getTopStats\"\n      />\n      <PublicComparisonCardLoader v-if=\"publicDataStore.loading\" />\n    </template>\n    <PublicGoalsAchievements\n      v-if=\"\n        editorStore.editor.goalsAchievements[publicDataStore.lang]?.goals.length > 0 ||\n        editorStore.editor.goalsAchievements[publicDataStore.lang]?.achievements.length > 0\n      \"\n    />\n    <PublicLedger\n      :purchases=\"publicDataStore.purchases\"\n      :transferred-receipts=\"publicDataStore.getTransferredImpactInvoices\"\n    />\n    <PublicCTA />\n    <PublicFooter />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.public-page {\n  background-color: var(--gray-light-f1);\n  color: var(--ui-black);\n\n  &.dark {\n    background-color: var(--ui-dark);\n    color: var(--lightest);\n  }\n\n  &.custom {\n    background-color: rgba(var(--custom-theme-color-rgb), 0.5);\n    color: var(--lightest);\n  }\n}\n</style>\n"],"names":["publicStore","usePublicData","editorStore","useEditorStore","t","useTranslate","list","listIconColor","computed","BackgroundTheme","getCSSVariable","buttonColor","publicDataStore","route","useRoute","dispatchMessage","useEditorFrame","companyId","projectParams","pageTitle","pageDescription","init","error","inIFrame","EVENT_TYPES","onMounted","useSeoMeta"],"mappings":"yhEAWA,MAAMA,EAAcC,IACdC,EAAcC,IACd,CAAE,EAAAC,GAAMC,IAERC,EAAO,CACX,2BACA,wBACA,uBACA,sBAAA,EAGIC,EAAgBC,EAAS,IACzBN,EAAY,OAAO,WAAW,QAAUO,EAAgB,KACnDC,EAAe,SAAS,EAG7BR,EAAY,OAAO,WAAW,QAAUO,EAAgB,OACnDP,EAAY,OAAO,WAAW,WAAW,WAG3CQ,EAAe,kBAAkB,CACzC,EAEKC,EAAcH,EAAS,IACvBN,EAAY,OAAO,WAAW,QAAUO,EAAgB,KACnD,CACL,gBAAiBC,EAAe,SAAS,EACzC,UAAWA,EAAe,UAAU,CAAA,EAIpCR,EAAY,OAAO,WAAW,QAAUO,EAAgB,OACnD,CACL,gBAAiBP,EAAY,OAAO,WAAW,WAAW,WAC1D,UAAWA,EAAY,OAAO,WAAW,WAAW,IAAA,EAIjD,CAAE,gBAAiBQ,EAAe,kBAAkB,EAAG,UAAW,UAC1E,s1BC3BD,MAAME,EAAkBX,IAClBC,EAAcC,IACdU,EAAQC,IACR,CAAE,gBAAAC,GAAoBC,IACtBC,EAAoBJ,EAAM,OAAO,GACjCK,EAAuC,CAC3C,SAAU,CAAC,WAAY,YAAY,CAAA,EAE/BC,EAAY,GAAGN,EAAM,OAAO,IAAI,wCAChCO,EAAkB,GAAGP,EAAM,OAAO,IAAI,8KAEtCQ,EAAO,IAAM,CACjBT,EAAgB,QAAU,GAE1B,QAAQ,IAAI,CACVA,EAAgB,gBAAgBK,CAAS,EACzCf,EAAY,oBAAoBe,CAAS,EACzCL,EAAgB,cAAc,CAAE,GAAGM,EAAe,EAClDN,EAAgB,eAAe,CAAA,CAChC,EACE,MAAOU,GAAU,QAAQ,MAAMA,CAAK,CAAC,EACrC,QAAQ,IAAM,CACbV,EAAgB,QAAU,GAEtBW,KACFR,EAAgB,OAAO,OAAQ,CAAE,KAAMS,EAAY,KAAM,CAC3D,CACD,CAAA,EAGL,OAAAC,EAAU,IAAM,CACTJ,GAAA,CACN,EAEUK,EAAA,CACT,MAAOP,EACP,YAAaC,EACb,QAASD,EACT,OAAQ,UACR,cAAeC,EACf,MAAO,OAAO,SAAS,KACvB,QACE,qGAAA,CACH"}