feat(ui): add FormBricks survey to setup wizard flow

ui/src/views/Setup.vue

@@ -42,19 +42,54 @@
           />
           <v-btn
             :disabled="!hasSign"
-            type="submit"
             data-test="sign-btn"
             color="primary"
             variant="tonal"
             block
-            text="Setup"
+            text="Next"
             @click="step = 2"
           />
         </v-window-item>
+
         <v-window-item :value="2">
           <v-card-subtitle
-            class="text-wrap text-center mb-3"
+            class="text-wrap text-center mb-4"
             data-test="subtitle-2"
+          >
+            Help us improve ShellHub by sharing your feedback
+          </v-card-subtitle>
+
+          <div style="position: relative; height: 500px; overflow: auto;">
+            <iframe
+              :src="formbricksUrl"
+              frameborder="0"
+              style="position: absolute; left: 0; top: 0; width: 100%; height: 500px; border: 0; border-radius: 4px;"
+            />
+          </div>
+
+          <v-card-actions class="mt-4">
+            <v-btn
+              color="primary"
+              variant="text"
+              @click="step = 1"
+            >
+              Back
+            </v-btn>
+            <v-spacer />
+            <v-btn
+              color="primary"
+              variant="tonal"
+              @click="step = 3"
+            >
+              Continue
+            </v-btn>
+          </v-card-actions>
+        </v-window-item>
+
+        <v-window-item :value="3">
+          <v-card-subtitle
+            class="text-wrap text-center mb-3"
+            data-test="subtitle-3"
           >
             Please complete the following form to set up your account with your personal information.
           </v-card-subtitle>
@@ -114,14 +149,21 @@
             @click:append-inner="showConfirmPassword = !showConfirmPassword"
           />
 
-          <v-card-actions>
+          <v-card-actions class="mt-4">
+            <v-btn
+              color="primary"
+              variant="text"
+              @click="step = 2"
+            >
+              Back
+            </v-btn>
+            <v-spacer />
             <v-btn
               :disabled="!isFormValid"
               type="submit"
               data-test="setup-account-btn"
               color="primary"
               variant="tonal"
-              block
               text="Create Account"
             />
           </v-card-actions>
@@ -148,6 +190,20 @@ const alertMessage = ref("");
 const alertType = ref<"success" | "error">("success");
 const step = ref<number>(1);
 const hasQuery = computed(() => route.query.sign as string);
+const formbricksUrl = computed(() => {
+  const baseUrl = "https://forms.infra.ossystems.io/s/nhq8yq73j9lp3qor3jwxrhs2";
+  const params = new URLSearchParams({
+    consent_to_contact: "accepted",
+    source: "self-hosted",
+    embed: "true",
+  });
+
+  if (import.meta.env.DEV) {
+    params.append("preview", "true");
+  }
+
+  return `${baseUrl}?${params.toString()}`;
+});
 
 const {
   value: sign,

ui/tests/views/Setup.spec.ts

@@ -50,6 +50,12 @@ describe("Setup Account", () => {
     await nextTick();
 
     expect(wrapper.find('[data-test="subtitle-2"]').exists()).toBe(true);
+
+    wrapper.vm.step = 3;
+
+    await nextTick();
+
+    expect(wrapper.find('[data-test="subtitle-3"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="name-text"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="username-text"]').exists()).toBe(true);
     expect(wrapper.find('[data-test="email-text"]').exists()).toBe(true);
@@ -60,7 +66,7 @@ describe("Setup Account", () => {
   });
 
   it("disables submit button when the form is invalid", async () => {
-    wrapper.vm.step = 2;
+    wrapper.vm.step = 3;
 
     await nextTick();
 
@@ -82,7 +88,7 @@ describe("Setup Account", () => {
 
     await wrapper.findComponent('[data-test="sign-text"]').setValue("sign");
 
-    wrapper.vm.step = 2;
+    wrapper.vm.step = 3;
 
     await nextTick();
 
@@ -110,7 +116,7 @@ describe("Setup Account", () => {
 
     await wrapper.findComponent('[data-test="sign-text"]').setValue("sign");
 
-    await wrapper.find('[data-test="sign-btn"]').trigger("click");
+    wrapper.vm.step = 3;
 
     await nextTick();
 

ui/tests/views/__snapshots__/Setup.spec.ts.snap

@@ -99,8 +99,8 @@ exports[`Setup Account > Renders the component 1`] = `
                 </transition-group-stub>
                 <!---->
               </div>
-            </div><button type="submit" class="v-btn v-btn--block v-btn--disabled v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-tonal" disabled="" data-test="sign-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
-              <!----><span class="v-btn__content" data-no-activator="">Setup</span>
+            </div><button type="button" class="v-btn v-btn--block v-btn--disabled v-theme--light text-primary v-btn--density-default v-btn--size-default v-btn--variant-tonal" disabled="" data-test="sign-btn"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+              <!----><span class="v-btn__content" data-no-activator="">Next</span>
               <!---->
               <!---->
             </button>
@@ -111,6 +111,11 @@ exports[`Setup Account > Renders the component 1`] = `
             <!---->
           </div>
         </transition-stub>
+        <transition-stub name="" appear="false" persisted="false" css="true">
+          <div class="v-window-item" style="display: none;">
+            <!---->
+          </div>
+        </transition-stub>
         <!---->
       </div>
       <!---->