Onboarding form (#4910)

.github/workflows/client-test.yml

@@ -116,6 +116,7 @@ jobs:
             REACT_APP_VERSION_ID=${{ steps.vars.outputs.version }} \
             REACT_APP_VERSION_RELEASE_DATE=$(date -u '+%Y-%m-%dT%H:%M:%SZ') \
             REACT_APP_GOOGLE_ANALYTICS_ID=${{ secrets.GOOGLE_TAG_MANAGER_ID }} \
+            REACT_APP_SHOW_ONBOARDING_FORM=true \
             yarn build
 
       # Upload the build artifact so that it can be used by the test & deploy job in the workflow

app/client/netlify.toml

@@ -14,6 +14,7 @@
     REACT_APP_MAIL_ENABLED = "true"
     REACT_APP_SENTRY_DSN = "https://abf15a075d1347969df44c746cca7eaa@o296332.ingest.sentry.io/1546547"
     REACT_APP_SENTRY_ENVIRONMENT = "Production"
+    REACT_APP_SHOW_ONBOARDING_FORM = "true"
     SENTRY_AUTH_TOKEN = "dfdf7fa46c5b483a944b4571554d6466da3c64a6ed8b46e3b8a4285183a6bcc3"
     SENTRY_DSN = "https://abf15a075d1347969df44c746cca7eaa@o296332.ingest.sentry.io/1546547"
     SENTRY_ORG = "appsmith"

app/client/src/configs/index.ts

@@ -42,6 +42,7 @@ export type INJECTED_CONFIGS = {
   mailEnabled: boolean;
   disableTelemetry: boolean;
   cloudServicesBaseUrl: string;
+  onboardingFormEnabled: boolean;
 };
 declare global {
   interface Window {
@@ -115,6 +116,7 @@ const getConfigsFromEnvVars = (): INJECTED_CONFIGS => {
       : false,
     disableTelemetry: true,
     cloudServicesBaseUrl: process.env.REACT_APP_CLOUD_SERVICES_BASE_URL || "",
+    onboardingFormEnabled: !!process.env.REACT_APP_SHOW_ONBOARDING_FORM,
   };
 };
 
@@ -269,5 +271,6 @@ export const getAppsmithConfigs = (): AppsmithUIConfigs => {
     cloudServicesBaseUrl:
       ENV_CONFIG.cloudServicesBaseUrl ||
       APPSMITH_FEATURE_CONFIGS.cloudServicesBaseUrl,
+    onboardingFormEnabled: ENV_CONFIG.onboardingFormEnabled,
   };
 };

app/client/src/configs/types.ts

@@ -72,4 +72,6 @@ export type AppsmithUIConfigs = {
   commentsTestModeEnabled: boolean;
 
   cloudServicesBaseUrl: string;
+
+  onboardingFormEnabled: boolean;
 };

app/client/src/index.tsx

@@ -26,11 +26,7 @@ import AppErrorBoundary from "./AppErrorBoundry";
 import GlobalStyles from "globalStyles";
 appInitializer();
 
-import useRemoveSignUpCompleteParam from "utils/hooks/useRemoveSignUpCompleteParam";
-
 function App() {
-  useRemoveSignUpCompleteParam();
-
   return (
     <Sentry.ErrorBoundary fallback={"An error has occured"}>
       <Provider store={store}>

app/client/src/pages/Applications/OnboardingForm.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useScript, ScriptStatus } from "utils/hooks/useScript";
+import { getCurrentUser } from "selectors/usersSelectors";
+import styled from "styled-components";
+
+export const TypeformContainer = styled.div`
+  & iframe {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    border: 0;
+  }
+`;
+
+function OnboardingForm() {
+  const status = useScript(`https://embed.typeform.com/embed.js`);
+  const currentUser = useSelector(getCurrentUser);
+
+  if (status !== ScriptStatus.READY) return null;
+
+  return (
+    <TypeformContainer>
+      <iframe
+        allow="camera; microphone; autoplay; encrypted-media;"
+        frameBorder="0"
+        height="100%"
+        id="typeform-full"
+        src={`https://form.typeform.com/to/m7sRcK1Y?typeform-medium=embed-snippet#email=${currentUser?.email}`}
+        width="100%"
+      />
+    </TypeformContainer>
+  );
+}
+
+export default OnboardingForm;

app/client/src/pages/Applications/index.tsx

@@ -79,6 +79,8 @@ import { useIntiateOnboarding } from "components/editorComponents/Onboarding/uti
 import AnalyticsUtil from "utils/AnalyticsUtil";
 import { createOrganizationSubmitHandler } from "../organization/helpers";
 import ImportApplicationModal from "./ImportApplicationModal";
+import OnboardingForm from "./OnboardingForm";
+import { getAppsmithConfigs } from "configs";
 
 const OrgDropDown = styled.div`
   display: flex;
@@ -859,15 +861,26 @@ type ApplicationProps = {
   currentUser?: User;
   searchKeyword: string | undefined;
 };
+
+const getIsFromSignup = () => {
+  if (window.location.href) {
+    const url = new URL(window.location.href);
+    const searchParams = url.searchParams;
+    return !!searchParams.get("isFromSignup");
+  }
+  return false;
+};
+const { onboardingFormEnabled } = getAppsmithConfigs();
 class Applications extends Component<
   ApplicationProps,
-  { selectedOrgId: string }
+  { selectedOrgId: string; showOnboardingForm: boolean }
 > {
   constructor(props: ApplicationProps) {
     super(props);
 
     this.state = {
       selectedOrgId: "",
+      showOnboardingForm: false,
     };
   }
 
@@ -875,20 +888,29 @@ class Applications extends Component<
     PerformanceTracker.stopTracking(PerformanceTransactionName.LOGIN_CLICK);
     PerformanceTracker.stopTracking(PerformanceTransactionName.SIGN_UP);
     this.props.getAllApplication();
+    this.setState({
+      showOnboardingForm: getIsFromSignup() && onboardingFormEnabled,
+    });
   }
 
   public render() {
     return (
       <PageWrapper displayName="Applications">
-        <ProductUpdatesModal />
-        <LeftPane />
-        <SubHeader
-          search={{
-            placeholder: "Search for apps...",
-            queryFn: this.props.searchApplications,
-          }}
-        />
-        <ApplicationsSection searchKeyword={this.props.searchKeyword} />
+        {this.state.showOnboardingForm ? (
+          <OnboardingForm />
+        ) : (
+          <>
+            <ProductUpdatesModal />
+            <LeftPane />
+            <SubHeader
+              search={{
+                placeholder: "Search for apps...",
+                queryFn: this.props.searchApplications,
+              }}
+            />
+            <ApplicationsSection searchKeyword={this.props.searchKeyword} />
+          </>
+        )}
       </PageWrapper>
     );
   }

app/client/src/utils/hooks/useRemoveSignUpCompleteParam.ts

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import history from "utils/history";
-
-const useRemoveSignUpCompleteParam = () => {
-  useEffect(() => {
-    if (window.location.href) {
-      const url = new URL(window.location.href);
-      const searchParams = url.searchParams;
-      if (searchParams.get("isFromSignup")) {
-        searchParams.delete("isFromSignup");
-        history.replace({
-          pathname: url.pathname,
-          search: url.search,
-          hash: url.hash,
-        });
-      }
-    }
-  }, []);
-};
-
-export default useRemoveSignUpCompleteParam;