codecombat · adamkecskes · Oct 3, 2024 · Sep 25, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/.storybook/container.scss b/.storybook/container.scss
@@ -2,4 +2,8 @@
 
 .sb-show-main, .sb-story {
     @extend %frontend-page;
+}
+
+.tooltip {
+    opacity: 1 !important;
 }
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,8 @@
 /** @type { import('@storybook/vue').Preview } */
 
 import fetch from 'node-fetch';
+const VTooltip = require('v-tooltip')
+
-const VTooltip = require('v-tooltip')
+import VTooltip from 'v-tooltip';
-const VTooltip = require('v-tooltip')
+import VTooltip from 'v-tooltip';
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -176,6 +178,9 @@ window.Vue = Vue
 window.me = {
   get() {
     return 'test value'
+  },
+  getSubscriptionLevel() {
+    return 'free'
   }
 }
 
@@ -227,6 +232,8 @@ const VueI18Next = {
   }
 }
 Vue.use(VueI18Next)
+Vue.use(VTooltip.default)
+
 
 const { $themePath } = require('app/core/initialize-themes')
 Vue.prototype.$themePath = $themePath

diff --git a/app/components/common/elements/AccessLevelIndicator.stories.js b/app/components/common/elements/AccessLevelIndicator.stories.js
@@ -0,0 +1,47 @@
+import AccessLevelIndicator from './AccessLevelIndicator.vue'
+
+export default {
+  title: 'AccessLevelIndicator',
+  component: AccessLevelIndicator,
+  argTypes: {
+    level: {
+      control: { type: 'select', options: ['free', 'sales-call', 'paid'] },
+      description: 'The access level of the user',
+    },
+    displayText: {
+      control: 'boolean',
+      description: 'Whether to display the text or not',
+    },
+    displayIcon: {
+      control: 'boolean',
+      description: 'Whether to display the icon or not',
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AccessLevelIndicator },
+  template: '<access-level-indicator v-bind="$props" />',
+})
+
+export const Free = Template.bind({})
+Free.args = {
+  level: 'free',
+  displayText: true,
+  displayIcon: false,
+}
+
+export const SalesCall = Template.bind({})
+SalesCall.args = {
+  level: 'sales-call',
+  displayText: false,
+  displayIcon: true,
+}
+
+export const Paid = Template.bind({})
+Paid.args = {
+  level: 'paid',
+  displayText: true,
+  displayIcon: true,
+}
diff --git a/app/components/common/elements/AccessLevelIndicator.vue b/app/components/common/elements/AccessLevelIndicator.vue
@@ -0,0 +1,95 @@
+<template>
+  <span
+    v-if="isDisplayable"
+    v-tooltip.bottom="{
+      content: $t(`paywall.badge_tooltip_${level}`),
+    }"
+    :class="badgeClass"
+  >
+    <span v-if="displayIcon">{{ icon }}</span>
+    <span v-if="displayText">{{ $t(`paywall.badge_${level}`) }}</span>
+  </span>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+import CourseSchema from 'app/schemas/models/course.schema'
+const ACCESS_LEVELS = CourseSchema.properties.modules.additionalProperties.properties.access.enum
+
+export default {
+  name: 'AccessLevelIndicator',
+  props: {
+    level: {
+      type: String,
+      required: false,
+      validator: value => ACCESS_LEVELS.includes(value),
+      default: 'free',
+    },
+    displayText: {
+      type: Boolean,
+      default: true,
+    },
+    displayIcon: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      isPaidTeacher: 'me/isPaidTeacher',
+    }),
+    isDisplayable () {
+      const userDisplayMap = {
+        free: ['free', 'sales-call'], // non-paying users will see the 'free' and 'sales-call' badges
+        'sales-call': ['paid'], // users after sales call will see the 'paid' badges
+        paid: [], // I'm not sure if we'll have this for users, but if we'll have no badges needed.
+      }
+      const userLevel = this.isPaidTeacher ? 'paid' : 'free'
+      return userDisplayMap[userLevel].includes(this.level)
+    },
+    badgeClass () {
+      return {
+        badge: true,
+        [`badge-${this.level}`]: true,
+      }
+    },
+    icon () {
+      const icons = 
5D32
{
+        free: '✨',
+        'sales-call': '📞',
+        paid: '🔒',
+      }
+      return icons[this.level] || ''
+    },
+  },
+  async created () {
+    await this.ensurePrepaidsLoadedForTeacher(me.get('_id'))
+  },
+  methods: {
+    ...mapActions({
+      ensurePrepaidsLoadedForTeacher: 'prepaids/ensurePrepaidsLoadedForTeacher',
+    }),
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.badge {
+  padding: 5px;
+  border-radius: 3px;
+  color: white;
+  font-size: 12px;
+}
+
+.badge-free {
+  background-color: green;
+}
+
+.badge-sales-call {
+  background-color: orange;
+}
+
+.badge-paid {
+  background-color: red;
+}
+</style>
diff --git a/app/components/common/labels/CodeRenderer.vue b/app/components/common/labels/CodeRenderer.vue
@@ -0,0 +1,13 @@
+<script>
+export default {
+  props: {
+    content: {
+      type: String,
+      required: true,
+    },
+  },
+  render (h) {
+    return h('span', { domProps: { innerHTML: this.content.replace(/`(.*?)`/g, '<code>$1</code>') } })
+  },
+}
+</script>