[SNOW-1887437] Pass query params to snowflake trial signup page link (#1220)

* [SNOW-1887437] Pass query params to snowflake trial signup page link

* Rename component to SnowflakeTrial

* [SNOW-1887437] Cleanup

---------

Co-authored-by: Debbie Matthews <debbie.matthews@snowflake.com>

Author: sfc-gh-dswiecki

components/blocks/snowflakeTrial.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+const useQuery = () => {
+  const router = useRouter();
+  return router.query;
+};
+
+const SnowflakeTrial = ({ text }) => {
+  const query = useQuery();
+  const utm_content = query.utm_content;
+  const baseUrl = "https://signup.snowflake.com/";
+  const params = new URLSearchParams({
+    utm_source: "streamlit",
+    utm_medium: "referral",
+    utm_campaign: "na-us-en-",
+    utm_content: utm_content || "-ss-streamlit-docs",
+  });
+  const signupUrlWithUTMs = `${baseUrl}?${params.toString()}`;
+  const linkText = text || "signup.snowflake.com";
+  return (
+    <a href={signupUrlWithUTMs} target="_blank">
+      {linkText}
+    </a>
+  );
+};
+
+export default SnowflakeTrial;

components/blocks/tile.js

@@ -3,6 +3,7 @@ import classNames from "classnames";
 import Link from "next/link";
 
 import styles from "./tile.module.css";
+import { useRouter } from "next/router";
 
 const Tile = ({
   img,
@@ -54,6 +55,7 @@ const Tile = ({
   }
 
   const backgroundColor = BG_CLASS[background];
+  const router = useRouter();
 
   return (
     <div
@@ -63,7 +65,10 @@ const Tile = ({
         backgroundColor,
       )}
     >
-      <Link href={link || "/"} className={classNames("not-link", styles.Link)}>
+      <Link
+        href={{ pathname: link || "/", query: router.query }}
+        className={classNames("not-link", styles.Link)}
+      >
         {image}
         <div>
           <h4 className={styles.Title}>{title || "Install Streamlit"}</h4>

content/get-started/installation/sis.md

@@ -19,7 +19,7 @@ All you need is an email address! Everything else happens in your 30-day trial a
 
 ## Create an account
 
-1. Go to <a href="https://signup.snowflake.com/?utm_source=streamlit&utm_medium=referral&utm_campaign=na-us-en-&utm_content=-ss-streamlit-docs" target="_blank">signup.snowflake.com</a>. (This link will open in a new tab.)
+1. Go to <SnowflakeTrial />. (This link will open in a new tab.)
 
 1. Fill in your information, and click "**CONTINUE**."
 

pages/[...slug].js

@@ -69,6 +69,7 @@ import Tip from "../components/blocks/tip";
 import Warning from "../components/blocks/warning";
 import YouTube from "../components/blocks/youTube";
 import Cloud from "../components/blocks/cloud";
+import SnowflakeTrial from "../components/blocks/snowflakeTrial";
 
 import styles from "../components/layouts/container.module.css";
 
@@ -147,6 +148,7 @@ export default function Article({
     Image,
     Download,
     Flex,
+    SnowflakeTrial,
     Autofunction: (props) => (
       <Autofunction
         {...props}