Improve onboarding and pricing UI (#1772)

Author: joanagmaia

frontend/public/images/integrations/onboard/onboard-github-preview.png

@@ -1,7 +1,7 @@
 <template>
   <div class="s panel" :class="computedClass">
     <div class="flex items-center justify-between">
-      <img :alt="integration.name" :src="integration.image" class="h-6 mb-4" />
+      <img :alt="integration.name" :src="integration.image" class="h-6 w-6 mb-4" />
       <div>
         <div class="mb-1 flex justify-end">
           <span v-if="isDone" class="badge badge--green">Connected</span>

frontend/src/modules/integration/components/integration-list-item.vue

@@ -6,7 +6,7 @@
   >
     <div class="flex gap-16">
       <div class="flex gap-3 items-start flex-grow">
-        <img :alt="integration.name" :src="integration.image" class="h-5" />
+        <img :alt="integration.name" :src="integration.image" class="h-5 w-5" />
         <div class="flex flex-col gap-1">
           <span class="text-black text-sm font-semibold">{{ integration.name }}</span>
           <span class="text-gray-500 text-xs">{{ integration.onboard?.description }}</span>

frontend/src/modules/onboard/components/onboard-integration-item.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="relative">
+    <div class="flex gap-3 mb-6 justify-start bg-gray-100 border border-gray-200 rounded-lg py-2.5 px-3 -mt-4">
+      <div class="flex items-center justify-center h-5">
+        <i class="ri-information-line text-gray-600 text-base" />
+      </div>
+      <div class="text-gray-600 text-xs">
+        Sync your community data to get the most out of crowd.dev. Connect at least 1 integration in order to create your workspace.
+      </div>
+    </div>
     <div
       v-if="loading"
       class="flex items-center justify-center"
@@ -55,8 +63,16 @@ import {
 
 import { CrowdIntegrations } from '@/integrations/integrations-config';
 import AppOnboardIntegrationItem from '@/modules/onboard/components/onboard-integration-item.vue';
+import { minValue } from '@vuelidate/validators';
+import useVuelidate from '@vuelidate/core';
 
 const emit = defineEmits(['allowRedirect', 'inviteColleagues']);
+const props = defineProps({
+  modelValue: {
+    type: Object,
+    default: () => {},
+  },
+});
 
 const store = useStore();
 
@@ -69,6 +85,12 @@ const highlightedIntegrationsArray = computed(() => CrowdIntegrations.mappedConf
   .filter((i) => i.onboard?.highlight && !!i.onboard));
 const showGithubDialog = ref(false);
 
+useVuelidate({
+  activeIntegrations: {
+    minValue: minValue(1),
+  },
+}, props.modelValue);
+
 onMounted(async () => {
   const params = new URLSearchParams(window.location.search);
   // GitHub redirects back here. This might have to be changed.

frontend/src/modules/onboard/components/onboard-sync-data-step.vue

@@ -9,8 +9,7 @@ import { RoleEnum } from '@/modules/user/types/Roles';
 const inviteColleagues: OnboardStepConfig = {
   name: 'Invite colleagues',
   component: AppOnboardInviteColleaguesStep,
-  hasValidation: true,
-  cta: () => 'Finish setup',
+  cta: 'Finish setup',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 3,
     'text-brand-400': currentStep > 3,
@@ -71,14 +70,6 @@ const inviteColleagues: OnboardStepConfig = {
 
         return store.dispatch('auth/doRefreshCurrentUser');
       })
-      // Populate tenant with sample data if user hasn't connected any integrations
-      .then(() => {
-        if (activeIntegrations.length) {
-          return Promise.resolve();
-        }
-
-        return TenantService.populateSampleData(currentTenant.id);
-      })
       // Redirect to Book a demo page
       .then(() => {
         router.push('/onboard/demo');

frontend/src/modules/onboard/config/steps/invite-colleagues.ts

@@ -4,8 +4,8 @@ import { OnboardStepConfig } from '@/modules/onboard/types/OnboardStepsConfig';
 const syncData: OnboardStepConfig = {
   name: 'Sync data',
   component: AppOnboardSyncDataStep,
-  hasValidation: false,
-  cta: (touched: boolean) => (touched ? 'Continue' : 'I will set this up later'),
+  cta: 'Continue',
+  ctaTooltip: 'Connect at least 1 integration to proceed',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 2,
     'text-brand-400': currentStep > 2,

frontend/src/modules/onboard/config/steps/sync-data.ts

@@ -7,8 +7,7 @@ import Errors from '@/shared/error/errors';
 const workspaceDetails: OnboardStepConfig = {
   name: 'Workspace details',
   component: AppOnboardWorkspaceDetailsStep,
-  hasValidation: true,
-  cta: () => 'Continue',
+  cta: 'Continue',
   textColor: (currentStep: number) => ({
     'text-gray-400': currentStep < 1,
     'text-brand-400': currentStep > 1,

frontend/src/modules/onboard/config/steps/workspace-details.ts

@@ -30,54 +30,15 @@
 </template>
 
 <script setup lang="ts">
-/* eslint-disable */ 
 import { onMounted } from 'vue';
 import { useRouter } from 'vue-router';
+import { renderCal } from '@/utils/cals';
 
 const router = useRouter();
 
 onMounted(() => {
-  (function (C, A, L) {
-    const p = function (a, ar) {
-      a.q.push(ar);
-    };
-    const d = C.document;
-    C.Cal = C.Cal
-      || function () {
-        const cal = C.Cal;
-        const ar = arguments;
-        if (!cal.loaded) {
-          cal.ns = {};
-          cal.q = cal.q || [];
-          d.head.appendChild(d.createElement('script')).src = A;
-          cal.loaded = true;
-        }
-        if (ar[0] === L) {
-          const api = function () {
-            p(api, arguments);
-          };
-          const namespace = ar[1];
-          api.q = api.q || [];
-          typeof namespace === 'string'
-            ? (cal.ns[namespace] = api) && p(api, ar)
-            : p(cal, ar);
-          return;
-        }
-        p(cal, ar);
-      };
-  }(window, 'https://app.cal.com/embed/embed.js', 'init'));
-  Cal('init', { origin: 'https://cal.com' });
-
-  Cal('inline', {
-    elementOrSelector: '#embbeded-script',
+  renderCal({
     calLink: 'team/crowddotdev/get-personalised-onboarding',
-    layout: 'month_view',
-  });
-
-  Cal('ui', {
-    styles: { branding: { brandColor: '#E94F2E' } },
-    hideEventTypeDetails: false,
-    layout: 'month_view',
   });
 });
 

frontend/src/modules/onboard/pages/onboard-book-a-demo-page.vue

@@ -10,7 +10,7 @@
         <h3
           class="text-lg font-semibold leading-8"
         >
-          Howdie<span v-if="currentUser">, {{ currentUser.fullName }}</span>
+          Howdie<span v-if="currentUser?.fullName">, {{ currentUser.fullName }}</span>
         </h3>
         <p class="text-sm text-gray-600 leading-5">
           Let's setup your workspace.
@@ -20,7 +20,7 @@
   </div>
 
   <div class="flex justify-center py-8 border-b border-gray-200 sticky top-0 bg-gray-50 z-10">
-    <div class="flex justify-between items-center limit-width">
+    <div class="flex gap-10 items-center limit-width">
       <div
         v-for="(step, index) in Object.values(onboardingSteps)"
         :key="step.name"
@@ -46,12 +46,7 @@
     <main class="limit-width">
       <component
         :is="stepConfig.component"
-        v-if="stepConfig.hasValidation"
         v-model="form"
-      />
-      <component
-        :is="stepConfig.component"
-        v-else
         @allow-redirect="onConnect"
         @invite-colleagues="onInviteColleagues"
       />
@@ -60,14 +55,22 @@
 
   <div class="fixed bottom-0 w-full bg-white flex justify-center py-4 px-8 border-t border-gray-200">
     <div class="limit-width">
-      <el-button
-        class="btn btn--primary btn--md btn--full"
-        :disabled="$v.$invalid || loadingSubmitAction"
-        @click="onBtnClick"
+      <el-tooltip
+        placement="top"
+        :disabled="!stepConfig.ctaTooltip || !$v.$invalid"
+        :content="stepConfig.ctaTooltip"
       >
-        <span class="text-base">{{ stepConfig.cta(!!activeIntegrations?.length) }}</span>
-        <i class="ri-arrow-right-line text-white text-lg ml-3" />
-      </el-button>
+        <div>
+          <el-button
+            class="btn btn--primary btn--lg btn--full"
+            :disabled="$v.$invalid || loadingSubmitAction"
+            @click="onBtnClick"
+          >
+            <span class="text-base">{{ stepConfig.cta }}</span>
+            <i class="ri-arrow-right-line text-white text-lg ml-3" />
+          </el-button>
+        </div>
+      </el-tooltip>
     </div>
   </div>
 </template>
@@ -95,6 +98,7 @@ const allowRedirect = ref(false);
 const currentStep = ref(1);
 const form = reactive({
   tenantName: currentTenant.value?.name,
+  activeIntegrations: 0,
   invitedUsers: [{
     emails: [],
     roles: ['admin'],
@@ -149,6 +153,8 @@ watch(currentTenant, (tenant, oldTenant) => {
 
 // If currentTenant and activeIntegrations, set second step as the active one
 watch(activeIntegrations, (integrations) => {
+  form.activeIntegrations = integrations.length;
+
   if (integrations.length && currentStep.value < 2) {
     currentStep.value = 2;
   }

frontend/src/modules/onboard/pages/onboard-page.vue

@@ -1,14 +1,14 @@
 export interface OnboardStepConfig {
   name: string;
   component: any;
-  hasValidation: boolean;
   textColor: (currentStep: number) => {
     [key: string]: boolean
   }
   bgColor: (currentStep: number) => {
     [key: string]: boolean
   }
-  cta: (touch?: boolean) => string;
+  cta: string;
+  ctaTooltip?: string;
   submitAction: (payload: any, activeIntegrations?: any[]) => Promise
   alert: () => string;
 }