[ENG-1818] Market Konfig SDKs (#671)

* make company optional in sdk signup * SdkSignupForm on /sdk
konfig-dev · Apr 1, 2024 · 3cfe389 · 3cfe389
1 parent cee4d1f
commit 3cfe389
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 11 deletions.
diff --git a/generator/konfig-dash/api/src/functions/sdkSignupForm/sdkSignupForm.ts b/generator/konfig-dash/api/src/functions/sdkSignupForm/sdkSignupForm.ts
@@ -74,26 +74,28 @@ async function createPageInDatabase({
     [databaseProperties.Email.name]: {
       email: email,
     },
-    [databaseProperties.Company.name]: {
-      rich_text: [
+    [databaseProperties.Name.name]: {
+      title: [
         {
           type: 'text',
           text: {
-            content: company,
+            content: 'New SDK Signup',
           },
         },
       ],
     },
-    [databaseProperties.Name.name]: {
-      title: [
+  }
+  if (company !== undefined) {
+    properties[databaseProperties.Company.name] = {
+      rich_text: [
         {
           type: 'text',
           text: {
-            content: 'New SDK Signup',
+            content: company,
           },
         },
       ],
-    },
+    }
   }
   if (language !== undefined) {
     properties[databaseProperties.Language.name] = {
@@ -198,7 +200,7 @@ const databaseProperties = {
 
 const sdkSignupFormSchema = z.object({
   email: z.string(),
-  company: z.string(),
+  company: z.string().optional(),
   service: z.string().optional(),
   language: z.union([z.literal('TypeScript'), z.literal('Python')]).optional(),
 })

diff --git a/generator/konfig-docs/src/components/SdkSignupForm.tsx b/generator/konfig-docs/src/components/SdkSignupForm.tsx
@@ -0,0 +1,78 @@
+import { IconPencil } from "@tabler/icons-react";
+import { useSdkSignup } from "../util/use-sdk-signup";
+import { LoadingIcon } from "./LoadingIcon";
+import clsx from "clsx";
+
+export function SdkSignupForm({
+  doNotShowQuestion,
+}: {
+  doNotShowQuestion?: boolean;
+}) {
+  const { setEmail, signedUp, signedUpEmail, loading, handleSubmit, email } =
+    useSdkSignup({});
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      id="signup"
+      className="py-4 px-8 rounded-md bg-blue-100 ring-1 transition-all hover:scale-[1.01] hover:shadow-lg shadow-md my-8"
+    >
+      <div className="flex flex-col">
+        {((!signedUp && !doNotShowQuestion) || signedUp) && (
+          <h2
+            className={clsx("text-base md:text-lg text-blue-900 font-bold", {
+              "mb-3": !signedUp,
+            })}
+          >
+            {signedUp
+              ? `Thanks for signing up for access to Konfig SDKs 🎉!`
+              : `Start building faster with Konfig SDKs`}
+          </h2>
+        )}
+        {signedUp ? (
+          <div className="text-blue-800">
+            <p className="mb-4 !mt-0">
+              Your email, <span className="italic">{signedUpEmail}</span>, has
+              been successfully registered for access to Konfig SDKs. We will
+              notify you by email soon.
+            </p>
+            <p className="mb-0">
+              For questions, please contact us at{" "}
+              <a href="mailto:[email protected]" className="font-bold">
+                [email protected]
+              </a>
+            </p>
+          </div>
+        ) : null}
+        {signedUp ? null : (
+          <input
+            type="email"
+            name="email"
+            className="rounded-md border px-2 py-1 w-full mb-2"
+            placeholder="Email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        )}
+        {signedUp ? null : (
+          <button
+            type="submit"
+            className="font-medium group flex gap-3 hover:gap-2 items-center transition-all bg-gradient-to-br text-white w-fit text-center px-3 py-2 from-blue-600 to-blue-800 rounded-md text-sm"
+          >
+            {loading ? (
+              <LoadingIcon />
+            ) : (
+              <>
+                <div>Sign up for access to Konfig SDKs</div>
+                <IconPencil
+                  size="1rem"
+                  className="transition-all group-hover:text-blue-50 text-blue-300"
+                />
+              </>
+            )}
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}
diff --git a/generator/konfig-docs/src/pages/sdk/index.mdx b/generator/konfig-docs/src/pages/sdk/index.mdx
@@ -2,9 +2,10 @@
 image: /img/konfig-sdks.png
 title: Konfig SDKs for Public APIs
 description: Konfig SDKs is a one-of-a-kind service for developers that want to write and maintain less API integration code. If you're ready to simplify your API integrations, get started with Konfig today!
-
 ---
 
+import { SdkSignupForm } from "@site/src/components/SdkSignupForm";
+
 <div style={{maxWidth: "740px"}} class="markdown ml-auto">
 
 ![Banner](/img/konfig-sdks.png)
@@ -14,6 +15,8 @@ write and maintain less API integration code. We do this by providing consistent
 and well-documented SDKs for your API integrations, reducing code in your
 codebase and ensuring it stays up-to-date.
 
+<SdkSignupForm />
+
 ## Why?
 
 External API integrations are a pain to develop. Writing and maintaining your
@@ -50,6 +53,8 @@ We charge based on the number of SDKs you use.
 
 ## Interested?
 
-Checkout the growing list of [SDKs](/sdk/category/all) we offer and email us for access at [email protected]
+Checkout the growing list of [SDKs](/sdk/category/all) and sign up below.
+
+<SdkSignupForm />
 
 </div>
diff --git a/generator/konfig-docs/src/util/use-sdk-signup.ts b/generator/konfig-docs/src/util/use-sdk-signup.ts
@@ -5,7 +5,7 @@ export function useSdkSignup({
   serviceName,
   language,
 }: {
-  company: string;
+  company?: string;
   serviceName?: string;
   language?: string;
 }) {