Eagle eye onboarding

frontend/src/assets/scss/buttons.scss

@@ -93,8 +93,9 @@
     &:active {
       @apply bg-gray-200 text-gray-600 border-2 border-gray-200 border-solid;
     }
-    &[disabled] {
-      @apply cursor-not-allowed bg-white text-gray-400 border-2 border-gray-100 border-solid;
+    &[disabled],
+    &.disabled {
+      @apply cursor-not-allowed bg-white text-gray-400 border-none;
     }
   }
 

frontend/src/modules/layout/layout-page-content.js

@@ -0,0 +1,47 @@
+export const pageContent = {
+  organizations: {
+    icon: 'ri-community-line',
+    headerTitle: 'Organizations',
+    title:
+      'Get a pulse of the organizations represented in your community',
+    mainContent:
+      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also has its own profile page, which highlights key information about that organization and all the community members that belong to it. Keeping a pulse of which organizations your members are representing is extremely important for a successful bottom-up growth strategy.',
+    imageSrc: '/images/paywall/organizations.png',
+    imageClass: 'mt-8',
+    secondaryContent:
+      'Organizations are companies or entities within your community. If a member that works at a certain company joins your community, that company will be added as an organization.',
+    featuresList: []
+  },
+  eagleEye: {
+    icon: 'ri-search-eye-line',
+    headerTitle: 'Eagle Eye',
+    title: 'Locate & engage with the right content',
+    mainContent:
+      "Our Eagle Eye app allows you to monitor different community platforms to find relevant content to engage with, helping you to gain developers' mindshare and grow your community organically.",
+    imageSrc: '/images/paywall/eagle-eye.png',
+    imageClass: '',
+    featuresList: [
+      {
+        icon: 'ri-eye-2-line',
+        title:
+          'Keep an Eagle Eye view on relevant content & posts to grow',
+        content:
+          "On top of monitoring everything going on within your community, crowd.dev's Eagle Eye application is focused on helping you engage with relevant content outside of your community to help grow it further."
+      },
+      {
+        icon: 'ri-apps-2-line',
+        title:
+          'Identify and engage with content across platforms',
+        content:
+          'All you need to do is type in a few keywords and Eagle Eye will give you the most recent and relevant content to enage with accross platforms like HackerNews and Dev to connect you with like-minded people.'
+      },
+      {
+        icon: 'ri-character-recognition-line',
+        title:
+          'Search powered by Natural Language Processing',
+        content:
+          "The search engine behind Eagle Eye is based on a semantic model that delivers the most relevant content even when it doesn't match your keywords."
+      }
+    ]
+  }
+}

frontend/src/modules/layout/pages/paywall-page.vue

@@ -97,6 +97,7 @@ import config from '@/config'
 import AppPageWrapper from '@/shared/layout/page-wrapper.vue'
 import { defineProps, computed } from 'vue'
 import { premiumFeatureCopy } from '@/utils/posthog'
+import { pageContent } from '@/modules/layout/layout-page-content'
 
 const props = defineProps({
   module: {
@@ -109,54 +110,6 @@ const page = computed(() => pageContent[props.module])
 const computedFeaturePlan = computed(() => {
   return config.isCommunityVersion ? 'Custom' : 'Growth'
 })
-
-const pageContent = {
-  organizations: {
-    icon: 'ri-community-line',
-    headerTitle: 'Organizations',
-    title:
-      'Get a pulse of the organizations represented in your community',
-    mainContent:
-      'Get a complete organization directory that you can search, filter, and sort instantly. Each organization also has its own profile page, which highlights key information about that organization and all the community members that belong to it. Keeping a pulse of which organizations your members are representing is extremely important for a successful bottom-up growth strategy.',
-    imageSrc: '/images/paywall/organizations.png',
-    imageClass: 'mt-8',
-    secondaryContent:
-      'Organizations are companies or entities within your community. If a member that works at a certain company joins your community, that company will be added as an organization.',
-    featuresList: []
-  },
-  eagleEye: {
-    icon: 'ri-search-eye-line',
-    headerTitle: 'Eagle Eye',
-    title: 'Locate & engage with the right content',
-    mainContent:
-      'Our Eagle Eye app allows you to monitor different community platforms to find relevant content to engage with, helping you to gain developers’ mindshare and grow your community organically',
-    imageSrc: '/images/paywall/eagle-eye.png',
-    imageClass: '',
-    featuresList: [
-      {
-        icon: 'ri-eye-2-line',
-        title:
-          'Keep an Eagle Eye view on relevant content & posts to grow',
-        content:
-          'On top of monitoring everything going on within your community, crowd.dev’s Eagle Eye application is focused on helping you engage with relevant content outside of your community to help grow it further.'
-      },
-      {
-        icon: 'ri-apps-2-line',
-        title:
-          'Identify and engage with content across platforms',
-        content:
-          'All you need to do is type in a few keywords and Eagle Eye will give you the most recent and relevant content to enage with accross platforms like HackerNews and Dev to connect you with like-minded people.'
-      },
-      {
-        icon: 'ri-character-recognition-line',
-        title:
-          'Search powered by Natural Language Processing',
-        content:
-          'The search engine behind Eagle Eye is based on a semantic model that delivers the most relevant content even when it doesn’t match your keywords.'
-      }
-    ]
-  }
-}
 </script>
 
 <style lang="scss">

frontend/src/premium/eagle-eye/components/onboard/eagle-eye-banner.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="bg-brand-50/50 relative p-8 h-fit"
+    :class="{ 'h-68': showImage }"
+  >
+    <div class="">
+      <div
+        class="uppercase text-xs text-brand-500 font-semibold"
+      >
+        {{ preTitle }}
+      </div>
+      <h4 class="text-gray-900 mt-2">
+        {{ title }}
+      </h4>
+    </div>
+
+    <img
+      v-if="showImage"
+      class="absolute bottom-0 right-0 h-68"
+      src="/images/eagle-eye/banner.png"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  preTitle: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  showImage: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>

frontend/src/premium/eagle-eye/components/onboard/eagle-eye-footer.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    class="flex mt-16"
+    :class="{
+      'justify-between': showPreviousStep,
+      'justify-end': !showPreviousStep
+    }"
+  >
+    <el-button
+      v-if="showPreviousStep"
+      class="btn btn--transparent btn--lg"
+      :disabled="loadingUpdateSettings"
+      @click="emit('onStepChange', -1)"
+      ><i class="ri-arrow-left-s-line mr-3 text-lg" /><span
+        >Previous step</span
+      ></el-button
+    >
+
+    <el-button
+      class="btn btn--primary btn--lg"
+      :disabled="
+        isNextButtonDisabled || loadingUpdateSettings
+      "
+      :loading="loadingUpdateSettings"
+      @click="
+        showFinalStep
+          ? emit('onSubmit')
+          : emit('onStepChange', 1)
+      "
+      ><span>{{
+        showFinalStep
+          ? 'Start exploring Eagle Eye'
+          : 'Next step'
+      }}</span
+      ><i
+        v-if="!showFinalStep"
+        class="ri-arrow-right-s-line ml-3 text-lg"
+    /></el-button>
+  </div>
+</template>
+
+<script setup>
+import { mapState } from '@/shared/vuex/vuex.helpers'
+import { defineProps, defineEmits } from 'vue'
+
+const emit = defineEmits(['onStepChange', 'onSubmit'])
+defineProps({
+  showPreviousStep: {
+    type: Boolean,
+    default: false
+  },
+  showFinalStep: {
+    type: Boolean,
+    default: false
+  },
+  isNextButtonDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { loadingUpdateSettings } = mapState('eagleEye')
+</script>

frontend/src/premium/eagle-eye/components/onboard/eagle-eye-intro.vue

@@ -0,0 +1,45 @@
+<template>
+  <h5>{{ pageContent.eagleEye.title }}</h5>
+
+  <div class="text-xs text-gray-600 mt-6">
+    {{ pageContent.eagleEye.mainContent }}
+  </div>
+
+  <div class="flex flex-col gap-5 mt-6 mb-16">
+    <div
+      v-for="(feature, index) of pageContent.eagleEye
+        .featuresList"
+      :key="index"
+      class="flex items-center"
+    >
+      <i
+        class="text-brand-500 text-lg"
+        :class="feature.icon"
+      />
+      <div class="ml-4 text-xs">
+        {{ feature.title }}
+      </div>
+    </div>
+  </div>
+
+  <el-button
+    class="btn btn--primary btn--full btn--md"
+    @click="emit('onStepChange', 1)"
+    >Set up your feed</el-button
+  >
+  <a
+    href="https://docs.crowd.dev/docs/eagle-eye"
+    target="_blank"
+    class="btn btn--secondary btn--full btn--md mt-5 hover:!text-gray-600"
+    ><i class="ri-book-open-line" /><span
+      >Read more</span
+    ></a
+  >
+</template>
+
+<script setup>
+import { pageContent } from '@/modules/layout/layout-page-content'
+import { defineEmits } from 'vue'
+
+const emit = defineEmits(['onStepChange'])
+</script>

frontend/src/premium/eagle-eye/components/onboard/eagle-eye-keywords.vue

@@ -0,0 +1,100 @@
+<template>
+  <h6 class="text-gray-900">Choose keywords</h6>
+  <div class="text-xs text-gray-500 mt-2">
+    Choose keywords that are relevant to the niche that you
+    want to grow in. For example, we at crowd.dev are
+    monitoring “community-led growth”, “community building”,
+    and “DevRel”.
+  </div>
+
+  <div class="mt-8">
+    <div
+      class="uppercase text-gray-400 text-2xs font-semibold tracking-wide"
+    >
+      Include<span class="text-brand-500 ml-0.5">*</span>
+    </div>
+
+    <el-form
+      class="mt-3 eagle-eye-keywords-form flex flex-col gap-3"
+    >
+      <div
+        v-for="(keyword, index) in keywords"
+        :key="index"
+        class="flex gap-3"
+      >
+        <el-form-item class="flex-1">
+          <el-input v-model="keyword.value" />
+        </el-form-item>
+
+        <el-button
+          class="btn btn--md btn--transparent w-10 h-10"
+          :disabled="keywords.length === 1"
+          @click="deleteKeyword(index)"
+        >
+          <i class="ri-delete-bin-line text-lg"></i>
+        </el-button>
+      </div>
+    </el-form>
+
+    <el-button
+      class="btn btn-link btn-link--md btn-link--primary mt-3"
+      @click="addKeyword"
+      >+ Add keyword</el-button
+    >
+  </div>
+
+  <eagle-eye-footer
+    :is-next-button-disabled="!isKeywordsFormValid"
+    @on-step-change="
+      (increment) => emit('onStepChange', increment)
+    "
+  />
+</template>
+
+<script setup>
+import EagleEyeFooter from '@/premium/eagle-eye/components/onboard/eagle-eye-footer.vue'
+import { defineEmits, computed, defineProps } from 'vue'
+
+const emit = defineEmits([
+  'update:modelValue',
+  'onStepChange'
+])
+const props = defineProps({
+  modelValue: {
+    type: Array,
+    required: true
+  }
+})
+
+const keywords = computed({
+  get() {
+    return props.modelValue
+  },
+  set(v) {
+    emit('update:modelValue', v)
+  }
+})
+
+const isKeywordsFormValid = computed(
+  () => !keywords.value.some((k) => !k.value)
+)
+
+const addKeyword = () => {
+  keywords.value.push({
+    value: null
+  })
+}
+
+const deleteKeyword = (index) => {
+  keywords.value.splice(index, 1)
+}
+</script>
+
+<style lang="scss">
+.eagle-eye-keywords-form {
+  .el-form-item,
+  .el-form-item__content {
+    @apply mb-0;
+  }
+}
+</style>