Integrate URX Forms

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

src/components/pages/ContactUs/Template/Template.tsx

@@ -1,9 +1,14 @@
 // Dependencies
 import { FC, PropsWithChildren } from "react";
+import dynamic from "next/dynamic";
 
 // Components
 import Display from "@/components/ui/Display";
-import ContactForm from "@/components/ui/ContactForm";
+import Text from "@/components/ui/text";
+
+const UrxForms = dynamic(() => import("@/components/ui/UrxForms/UrxForms"), {
+  loading: () => <div style={{ height: "400px" }} />,
+});
 
 // Styles
 import styles from "./styles.module.scss";
@@ -31,7 +36,25 @@ const Template: FC<PropsWithChildren> = () => {
         <div className={`col ${styles.right}`}>
           <div className={styles.content}>
             <div className={styles.form}>
-              <ContactForm />
+              <Display
+                size={300}
+                weight={500}
+                className={styles.form__title}
+                fontFamily="inter"
+              >
+                Contact Us
+              </Display>
+              <UrxForms
+                formId="urx-54088"
+                stageFormId="urx-t53108"
+                instanceId="urx-form-1"
+                success={
+                  <Text size={200} className="mt-2">
+                    We've received your request and someone from our team will
+                    reach out shortly.
+                  </Text>
+                }
+              />
             </div>
           </div>
         </div>

src/components/pages/ContactUs/Template/styles.module.scss

@@ -24,6 +24,31 @@
     min-height: calc(100vh - 240px);
     background: none;
   }
+
+  :global(.company-typeahead) {
+    input {
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      padding-right: 30% !important;
+
+      @media (max-width: 1055px) {
+        padding-right: 15% !important;
+      }
+
+      @include media-breakpoint-down(sm) {
+        padding-right: 20% !important;
+      }
+
+      @media (max-width: 420px) {
+        padding-right: 25% !important;
+      }
+    }
+  }
+
+  :global(.notice-choice) {
+    margin-top: var(--spacer-1) !important;
+  }
 }
 
 .container {
@@ -80,6 +105,12 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+
+  &__title {
+    color: var(--interface-light-gray-75);
+    margin-bottom: var(--spacer-1);
+    font-size: 1.5rem !important;
+  }
 }
 
 .heading {

src/components/pages/DesktopNew/Template/Template.tsx

@@ -1,14 +1,17 @@
+"use client";
+
 // Dependencies
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from "react";
+import Image from "next/image";
 
 // Components
-import Display from '@/components/ui/Display';
+import Display from "@/components/ui/Display";
+import TopBadge from "@/components/ui/icons/TopBadge";
+import UrxForms from "@/components/ui/UrxForms";
+import DownloadOptions from "@/components/ui/DownloadForm/DownloadOptions";
 
 // Styles
-import styles from './styles.module.scss';
-import TopBadge from '@/components/ui/icons/TopBadge';
-import Image from 'next/image';
-import DownloadForm from '@/components/ui/DownloadForm';
+import styles from "./styles.module.scss";
 
 const Template: FC<PropsWithChildren> = () => {
   return (
@@ -20,7 +23,13 @@ const Template: FC<PropsWithChildren> = () => {
           </Display>
           <TopBadge />
           <div className={styles.imageContainer}>
-            <Image src="/images/desktop-hero.png" alt="Langflow for Desktop" width={680} height={442} className={styles.imageHero} />
+            <Image
+              src="/images/desktop-hero.png"
+              alt="Langflow for Desktop"
+              width={680}
+              height={442}
+              className={styles.imageHero}
+            />
           </div>
         </div>
         <div className={`col ${styles.right}`}>
@@ -29,7 +38,13 @@ const Template: FC<PropsWithChildren> = () => {
               <Display className="text-white" size={400} weight={500}>
                 Download the App
               </Display>
-              <DownloadForm />
+              <UrxForms
+                formId="urx-54089"
+                stageFormId="urx-t53109"
+                instanceId="urx-form-2"
+                success={<DownloadOptions />}
+                text="Fill out the form below to receive access to download the desktop app for Mac or Windows."
+              />
             </div>
           </div>
         </div>

src/components/pages/DesktopNew/Template/styles.module.scss

@@ -24,6 +24,39 @@
     min-height: calc(100vh - 240px);
     background: none;
   }
+
+  :global(.company-typeahead) {
+    input {
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      padding-right: 16% !important;
+
+      @include media-breakpoint-down(sm) {
+        padding-right: 20% !important;
+      }
+
+      @media (max-width: 420px) {
+        padding-right: 25% !important;
+      }
+    }
+  }
+
+  :global(.country-container) {
+    min-width: 100% !important;
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+
+  :global(.company-container) {
+    min-width: 100% !important;
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+
+  :global(.notice-choice) {
+    margin-top: 0px !important;
+  }
 }
 
 .container {

src/components/ui/DownloadForm/DownloadForm.tsx

@@ -3,39 +3,21 @@
 // Dependencies
 import { useState } from "react";
 
-// Components
-import Display from "@/components/ui/Display";
-import MarketoForm from "@/components/ui/form";
-
-// Utils
-import { DOWNLOAD_OPTIONS, NEWSLETTER_BLURB } from "@/utils/constants";
+// Utilities
+import { NEWSLETTER_BLURB } from "@/utils/constants";
 import { trackEvent } from "@/lib/utils/tracking";
 import { kitSubscribe } from "@/app/actions/kitSubscribe";
 
-// Styles
-import styles from "./styles.module.scss";
+// Components
+import Display from "@/components/ui/Display";
+import MarketoForm from "@/components/ui/form";
+import DownloadOptions from "./DownloadOptions";
 
 const CHECKBOX_ID = "newsletter-optin-checkbox";
 
 const DownloadForm = () => {
   const [formSubmitted, setFormSubmitted] = useState(false);
 
-  const handleDownload = async (url: string, filename: string) => {
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    trackEvent("CTA Clicked", {
-      CTA: "Download",
-      channel: "webpage",
-      location: "download-form",
-      filename: filename,
-    });
-    a.click();
-    window.URL.revokeObjectURL(url);
-    document.body.removeChild(a);
-  };
-
   // Creates and inserts a checkbox for newsletter subscription into the Marketo form
   // Yes, this is a bit hacky, but I couldn't find a better way to insert
   // a custom field into the Marketo form.
@@ -131,45 +113,7 @@ const DownloadForm = () => {
   };
 
   if (formSubmitted) {
-    return (
-      <div className={styles.list}>
-        {DOWNLOAD_OPTIONS.map((option) => (
-          <div key={option.name} className={styles.listItem}>
-            <div
-              className={`${styles.detailsItem} ${option.isComingSoon ? styles.opacity : ""}`}
-            >
-              {option.icon}
-              <Display size={100} weight={600} className={styles.itemName}>
-                {option.name}
-              </Display>
-            </div>
-
-            {option.isComingSoon ? (
-              <Display size={100} weight={400} className={styles.comingSoon}>
-                Coming Soon
-              </Display>
-            ) : (
-              <a
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  handleDownload(option.link, option.fileName);
-                }}
-                className={styles.downloadButton}
-              >
-                <Display
-                  size={100}
-                  weight={600}
-                  className={"text-center text-black"}
-                >
-                  {option.btnText}
-                </Display>
-              </a>
-            )}
-          </div>
-        ))}
-      </div>
-    );
+    <DownloadOptions />;
   }
 
   return (

src/components/ui/DownloadForm/DownloadOptions.tsx

@@ -0,0 +1,66 @@
+// Utilities
+import { DOWNLOAD_OPTIONS } from "@/utils/constants";
+import { trackEvent } from "@/lib/utils/tracking";
+
+// Components
+import Display from "@/components/ui/Display";
+
+// Styles
+import styles from "./styles.module.scss";
+
+const DownloadOptions = () => {
+  const handleDownload = async (url: string, filename: string) => {
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    trackEvent("Langflow.org - Langflow Desktop Downloaded", {
+      text: "Download",
+      filename: filename,
+    });
+    a.click();
+    window.URL.revokeObjectURL(url);
+    document.body.removeChild(a);
+  };
+  return (
+    <div className={styles.list}>
+      {DOWNLOAD_OPTIONS.map((option) => (
+        <div key={option.name} className={styles.listItem}>
+          <div
+            className={`${styles.detailsItem} ${option.isComingSoon ? styles.opacity : ""}`}
+          >
+            {option.icon}
+            <Display size={100} weight={600} className={styles.itemName}>
+              {option.name}
+            </Display>
+          </div>
+
+          {option.isComingSoon ? (
+            <Display size={100} weight={400} className={styles.comingSoon}>
+              Coming Soon
+            </Display>
+          ) : (
+            <a
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                handleDownload(option.link, option.fileName);
+              }}
+              className={styles.downloadButton}
+            >
+              <Display
+                size={100}
+                weight={600}
+                className={"text-center text-black"}
+              >
+                {option.btnText}
+              </Display>
+            </a>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DownloadOptions;