{"version":3,"file":"D56NgGFS.js","sources":["../../../../src/components/LanguageSwitcher.vue","../../../../src/components/PlatformSwitcher.vue","../../../../src/components/SiteFooter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nconst languageStore = useLanguageStore()\nconst route = useRoute()\n</script>\n\n<template>\n  <nav class=\"lang-switch\" data-cy=\"language_switcher\">\n    <v-menu>\n      <template #activator=\"{ props }\">\n        <v-btn variant=\"text\" color=\"primary\" v-bind=\"props\">\n          <template v-if=\"languageStore.locale === 'de-ch'\">\n            <nuxt-img class=\"lang-switch__flag\" width=\"20\" height=\"20\" src=\"/img/flags/DE.svg\" />\n            Deutsch\n          </template>\n          <template v-else-if=\"languageStore.locale === 'en-gb'\">\n            <nuxt-img class=\"lang-switch__flag\" width=\"20\" height=\"20\" src=\"/img/flags/GB.svg\" />\n            English\n          </template>\n          <template v-else-if=\"languageStore.locale === 'fr-ch'\">\n            <nuxt-img class=\"lang-switch__flag\" width=\"20\" height=\"20\" src=\"/img/flags/FR.svg\" />\n            Français\n          </template>\n          <v-icon>custom:expand_more</v-icon>\n        </v-btn>\n      </template>\n      <v-list>\n        <v-list-item\n          v-for=\"locale in languageStore.selectableLocales\"\n          :key=\"locale\"\n          :class=\"['lang-switch__link', { 'is-active': languageStore.locale === locale }]\"\n          :to=\"{ path: route.fullPath, query: { lang: locale.split('-')[0] } }\"\n          :ripple=\"false\"\n          exact\n        >\n          <template v-if=\"locale === 'de-ch'\">\n            <nuxt-img\n              class=\"lang-switch__flag\"\n              width=\"20\"\n              height=\"20\"\n              src=\"/img/flags/DE.svg\"\n              data-cy=\"german_selector\"\n            />\n            Deutsch\n          </template>\n          <template v-else-if=\"locale === 'en-gb'\">\n            <nuxt-img\n              class=\"lang-switch__flag\"\n              width=\"20\"\n              height=\"20\"\n              src=\"/img/flags/GB.svg\"\n              data-cy=\"english_selector\"\n            />\n            English\n          </template>\n          <template v-else-if=\"locale === 'fr-ch'\">\n            <nuxt-img\n              class=\"lang-switch__flag\"\n              width=\"20\"\n              height=\"20\"\n              src=\"/img/flags/FR.svg\"\n              data-cy=\"french_selector\"\n            />\n            Français\n          </template>\n        </v-list-item>\n      </v-list>\n    </v-menu>\n  </nav>\n</template>\n\n<style scoped lang=\"sass\">\n.lang-switch\n  display: flex\n  justify-content: space-between\n  align-items: center\n  padding-top: $bw\n  padding-bottom: $bw\n  +min-width\n    height: $sitefooter-height\n  +max-width\n    justify-content: flex-start\n    width: 100%\n    height: 56px\n    padding: 0\n    border-top: 1px solid $c-border\n    border-bottom: 1px solid $c-border\n\n  .v-icon\n    margin-left: 4px\n    margin-top: 2px\n\n  .v-btn\n    font-size: 1rem\n    &.text-primary\n      color: $c-text !important\n    &:before\n      background: $c-primary\n\n  &__list\n    display: flex\n    +clear-list-styles\n    +min-width\n      margin-left: -10px\n    +max-width\n      flex-direction: column\n      width: 100%\n\n  &__link\n    +apply-default-link-styling\n    +max-width\n\n    :deep(.v-list-item__content)\n      display: flex\n      align-items: center\n    &.is-active\n      font-weight: bold\n      color: $c-text-alt\n      cursor: default\n      &::before\n        opacity: 0 // Counteract Vuetify default styling\n\n  &__flag\n    margin-right: 4 * $bw\n</style>\n","<script lang=\"ts\" setup>\nimport TextButton from '@/components/business/TextButton.vue'\n\n// Use the system store to get platform information\nconst systemStore = useSystemStore()\nconst { t } = useI18n()\nconst route = useRoute()\n\n// Computed properties\nconst currentPlatform = computed(() => systemStore.platform)\n\nconst flagSrc = computed(() => {\n  const currentPlatformFlag = currentPlatform.value === 'CH' ? 'CH' : 'DE'\n  return `/img/flags/${currentPlatformFlag}-round.svg`\n})\n\nconst switchToUrl = computed(() => {\n  const toTld = currentPlatform.value === 'CH' ? 'de' : 'com'\n\n  // If the sign up page is opened through the Cello referral link,\n  // keep the Cello query params after redirecting so that the referral code can still be applied\n  if (route.query.ucc) {\n    const queryParams = new URLSearchParams(\n      Object.entries(route.query).map(([key, value]) => [key, String(value)])\n    ).toString()\n    return `https://my.skribble.${toTld}/business/signup?${queryParams}`\n  }\n  // For regular users redirect to the respective platform\n  return `https://my.skribble.${toTld}`\n})\n\nconst currentCountry = computed(() => {\n  return currentPlatform.value === 'CH' ? t('global.ch') : t('global.de')\n})\n\nconst switchToPlatformCountry = computed(() => {\n  return currentPlatform.value === 'CH' ? t('platform_switch.de') : t('platform_switch.ch')\n})\n</script>\n\n<template>\n  <div class=\"platform-switcher\" data-cy=\"platform_switcher\">\n    <v-row align=\"center\" dense :class=\"{ 'my-2': $vuetify.display.smAndDown }\">\n      <v-col cols=\"12\" md=\"auto\">\n        <v-row align=\"end\" class=\"platform-switcher__current\" no-gutters>\n          <v-col cols=\"12\" md=\"auto\">\n            <span class=\"mr-1\" :class=\"{ 'text-body-2': $vuetify.display.mdAndDown }\">{{\n              $t('platform_switch.currently_on')\n            }}</span>\n          </v-col>\n          <v-col cols=\"12\" md=\"auto\">\n            <div class=\"d-flex align-center\">\n              <span class=\"font-weight-bold grey-darker--text mr-2\">Skribble {{ currentCountry }}</span>\n              <nuxt-img class=\"flag-icon\" :src=\"flagSrc\" data-cy=\"platform_switcher_icon\" />\n            </div>\n          </v-col>\n        </v-row>\n      </v-col>\n      <v-col cols=\"12\" md=\"auto\">\n        <text-button\n          class=\"platform-switcher__button\"\n          color=\"primary\"\n          :href=\"switchToUrl\"\n          data-cy=\"platform_switcher_target_location\"\n        >\n          {{ $t('platform_switch.switch_to') }} {{ switchToPlatformCountry }}\n        </text-button>\n      </v-col>\n    </v-row>\n  </div>\n</template>\n\n<style scoped lang=\"sass\">\n\n.platform-switcher\n  &__current\n    display: flex\n    align-items: center\n    background-color: #fafafa\n    padding: 0.75rem 1rem\n    border-radius: 8px\n    margin: 0 1rem\n\n  &__current-platform\n    color: $c-grey-darker\n    font-weight: bold\n    margin-left: 0.5rem\n\n    &--flag-icon\n      display: inline-block\n      margin-left: 0.5rem\n      width: 24px\n      height: 24px\n      border-radius: 50%\n      object-fit: cover\n\n  &__button\n    flex-shrink: 0\n    padding: 0.75rem 1rem\n    white-space: nowrap\n    margin: 0 1rem\n</style>\n","<script lang=\"ts\" setup>\nimport LanguageSwitcher from '@/components/LanguageSwitcher.vue'\nimport PlatformSwitcher from '@/components/PlatformSwitcher.vue'\n\nconst route = useRoute()\n\nconst { platform } = storeToRefs(useSystemStore())\n\nconst { mdAndUp } = useDisplay()\n\n/**\n * Key for the footer to force a re-render when the viewport width changes.\n *\n * This is needed because Vuetify will crash if we try to dynamically change the `app` prop.\n */\nconst key = computed(() => (mdAndUp.value ? 'desktop' : 'mobile'))\n\nconst isPlatformSwitcher = computed(() => {\n  const redirectURL = sessionStorage.getItem('redirectURL') || ''\n  const hasNextLocation = !!(redirectURL && redirectURL !== '/')\n  return (\n    ['CH', 'EU'].includes(platform.value) &&\n    !hasNextLocation &&\n    ['login', 'signup', 'business-signup'].includes(String(route.name))\n  )\n})\n</script>\n\n<template>\n  <v-footer :key=\"key\" :absolute=\"mdAndUp\" :app=\"mdAndUp\" color=\"white\">\n    <v-row justify=\"space-between\" no-gutters>\n      <v-col cols=\"12\" md=\"auto\" class=\"flex-grow-1\">\n        <v-row align=\"center\" no-gutters>\n          <v-col v-if=\"isPlatformSwitcher\" order=\"1\" order-md=\"2\" cols=\"12\" md=\"auto\">\n            <platform-switcher />\n          </v-col>\n          <v-col order=\"2\" order-md=\"1\" cols=\"12\" md=\"auto\">\n            <language-switcher />\n          </v-col>\n        </v-row>\n      </v-col>\n      <v-col cols=\"12\" md=\"auto\">\n        <nav class=\"sitefooter__menu\">\n          <ul class=\"sitefooter__list\">\n            <li class=\"sitefooter__list-item\">\n              <a\n                class=\"sitefooter__link\"\n                target=\"_blank\"\n                rel=\"noopener\"\n                :href=\"$t('global.legal.privacy_policy_link')\"\n                >{{ $t('global.legal.privacy_policy') }}</a\n              >\n            </li>\n            <li class=\"sitefooter__list-item\">\n              <a class=\"sitefooter__link\" target=\"_blank\" rel=\"noopener\" :href=\"$t('global.legal.terms_of_use_link')\">{{\n                $t('global.legal.terms_of_use')\n              }}</a>\n            </li>\n            <li class=\"sitefooter__list-item\">\n              <a class=\"sitefooter__link\" target=\"_blank\" rel=\"noopener\" :href=\"$t('global.legal.gtc_link')\">{{\n                $t('global.legal.gtc')\n              }}</a>\n            </li>\n            <li class=\"sitefooter__list-item\">\n              <a class=\"sitefooter__link\" target=\"_blank\" rel=\"noopener\" :href=\"$t('global.legal.imprint_link')\">{{\n                $t('global.legal.imprint')\n              }}</a>\n            </li>\n          </ul>\n        </nav>\n      </v-col>\n    </v-row>\n  </v-footer>\n</template>\n\n<style scoped lang=\"sass\">\n\n.sitefooter\n  &__menu\n    +max-width\n      width: 100%\n\n  &__list\n    display: flex\n    +clear-list-styles\n    +min-width\n      padding: 0 14px\n    +max-width\n      flex-direction: column\n\n    &-item\n      +max-width\n        display: block\n        border-bottom: 1px solid $c-border\n\n  &__link\n    display: inline-flex\n    align-items: center\n    height: 60px\n    padding: 10px\n    +apply-default-link-styling\n    +apply-mobile-padding\n    +max-width\n      display: inline-flex\n      justify-content: flex-start\n      align-items: center\n      height: 14 * $bw\n</style>\n"],"names":["languageStore","useLanguageStore","route","useRoute","systemStore","useSystemStore","t","useI18n","currentPlatform","computed","flagSrc","currentPlatformFlag","switchToUrl","toTld","queryParams","key","value","currentCountry","switchToPlatformCountry","platform","storeToRefs","mdAndUp","useDisplay","isPlatformSwitcher","redirectURL","hasNextLocation"],"mappings":"4bACA,MAAMA,EAAgBC,EAAiB,EACjCC,EAAQC,EAAS,+tDCEvB,MAAMC,EAAcC,EAAe,EAC7B,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAChBL,EAAQC,EAAS,EAGjBK,EAAkBC,EAAS,IAAML,EAAY,QAAQ,EAErDM,EAAUD,EAAS,IAAM,CAC7B,MAAME,EAAsBH,EAAgB,QAAU,KAAO,KAAO,KACpE,MAAO,cAAc,OAAAG,EAAmB,aAAA,CACzC,EAEKC,EAAcH,EAAS,IAAM,CACjC,MAAMI,EAAQL,EAAgB,QAAU,KAAO,KAAO,MAIlD,GAAAN,EAAM,MAAM,IAAK,CACnB,MAAMY,EAAc,IAAI,gBACtB,OAAO,QAAQZ,EAAM,KAAK,EAAE,IAAI,CAAC,CAACa,EAAKC,CAAK,IAAM,CAACD,EAAK,OAAOC,CAAK,CAAC,CAAC,GACtE,SAAS,EACJ,MAAA,uBAAuB,OAAAH,EAAK,qBAAoB,OAAAC,EAAW,CAGpE,MAAO,uBAAuB,OAAAD,EAAK,CACpC,EAEKI,EAAiBR,EAAS,IACvBD,EAAgB,QAAU,KAAOF,EAAE,WAAW,EAAIA,EAAE,WAAW,CACvE,EAEKY,EAA0BT,EAAS,IAChCD,EAAgB,QAAU,KAAOF,EAAE,oBAAoB,EAAIA,EAAE,oBAAoB,CACzF,itCCjCD,MAAMJ,EAAQC,EAAS,EAEjB,CAAE,SAAAgB,CAAA,EAAaC,EAAYf,GAAgB,EAE3C,CAAE,QAAAgB,CAAQ,EAAIC,EAAW,EAOzBP,EAAMN,EAAS,IAAOY,EAAQ,MAAQ,UAAY,QAAS,EAE3DE,EAAqBd,EAAS,IAAM,CACxC,MAAMe,EAAc,eAAe,QAAQ,aAAa,GAAK,GACvDC,EAAkB,CAAC,EAAED,GAAeA,IAAgB,KAC1D,MACE,CAAC,KAAM,IAAI,EAAE,SAASL,EAAS,KAAK,GACpC,CAACM,GACD,CAAC,QAAS,SAAU,iBAAiB,EAAE,SAAS,OAAOvB,EAAM,IAAI,CAAC,CAAA,CAErE"}