From 1bf35cdc3335a13aba3547e4104a614ef99b7955 Mon Sep 17 00:00:00 2001
From: Kellan Wampler <kellan@Kellans-MacBook-Pro.local>
Date: Thu, 14 Jul 2022 14:13:43 -0400
Subject: [PATCH] Fixing error in height calculation with SVG graphics. Adding
 redirect on form submit to the /contact page. Adding metadata to the /contact
 page.

---
 frontend/pages/contact/index.js               | 101 +++++++++++-------
 .../src/components/EngineOverviewDiagram.js   |   6 +-
 frontend/src/components/SVGGraphics/Cloud.js  |   6 +-
 .../src/components/SVGGraphics/Rectangle.js   |   6 +-
 .../src/components/SVGGraphics/RoundedRect.js |   7 +-
 5 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/frontend/pages/contact/index.js b/frontend/pages/contact/index.js
index 462dcd5d..f47cbcf5 100644
--- a/frontend/pages/contact/index.js
+++ b/frontend/pages/contact/index.js
@@ -1,54 +1,75 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Box, Image, Center, VStack, Text, Spinner } from "@chakra-ui/react";
 import { getLayout, getLayoutProps } from "../../src/layouts/WideInfoPage";
 import HubspotForm from "react-hubspot-form";
+import { useRouter } from "next/router";
 
-const Contact = () => (
-  <Box>
-    <Box px="1.5rem" m="auto" mb={8} minWidth="1000px" minHeight="100vh">
-      <Image></Image>
-      <Center>
-        <VStack>
-          <Text my={5} fontSize={["lg", "xl"]} textAlign="center">
-            Thanks for your interest in Moonstream.
-            <br />
-            Please answer some questions to help us get acquainted with you.
+const Contact = () => {
+  const router = useRouter();
+  const formId = "b54d192f-59b1-410a-8ac1-a1e8383c423c";
+
+  useEffect(() => {
+    function handler(event) {
+      if (
+        event.data.type === "hsFormCallback" &&
+        event.data.eventName === "onFormSubmitted"
+      ) {
+        if (event.data.id === formId) {
+          router.push("/");
+        }
+      }
+    }
+
+    window.addEventListener("message", handler);
+    return () => {
+      window.removeEventListener("message", handler);
+    };
+  });
+
+  return (
+    <Box>
+      <Box px="1.5rem" m="auto" mb={8} minWidth="1000px" minHeight="100vh">
+        <Image></Image>
+        <Center>
+          <VStack>
+            <Text my={5} fontSize={["lg", "xl"]} textAlign="center">
+              Thanks for your interest in Moonstream.
+              <br />
+              Please answer some questions to help us get acquainted with you.
+            </Text>
+          </VStack>
+        </Center>
+        <HubspotForm
+          portalId="8018701"
+          formId={formId}
+          loading={<Spinner colorScheme="primary" speed="1s" />}
+        />
+        <Center>
+          <Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
+            <i>
+              Click the button to submit your answers. We&apos;ll reach out
+              directly within 3 days. You will not receive any marketing emails
+              from us.
+            </i>
           </Text>
-        </VStack>
-      </Center>
-      <HubspotForm
-        portalId="8018701"
-        formId="b54d192f-59b1-410a-8ac1-a1e8383c423c"
-        loading={<Spinner colorScheme="primary" speed="1s" />}
-      />
-      <Center>
-        <Text my={5} fontSize={["md", "lg"]} textAlign="center" width="60%">
-          <i>
-            Click the button to submit your answers. We&apos;ll reach out
-            directly within 3 days. You will not receive any marketing emails
-            from us.
-          </i>
-        </Text>
-      </Center>
+        </Center>
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 Contact.getLayout = getLayout;
 
 export async function getStaticProps() {
   const layoutProps = getLayoutProps();
-  // const metaTags = {
-  //   title: "Moonstream: privacy policy",
-  //   description: "Privacy policy and legal information",
-  //   keywords: "moonstream, privacy, policy, legal",
-  //   url: "https://www.moonstream.to/privacy-policy",
-  // };
-  // layoutProps.props.metaTags = {
-  //   ...layoutProps.props.metaTags,
-  //   ...DEFAULT_METATAGS,
-  //   ...metaTags,
-  // };
+  const metaTags = {
+    title: "Moonstream: Contact form",
+    description:
+      "Form requesting contact information to connect with Moonstream",
+    keywords: "moonstream, contact, web3, game economy, get acquainted",
+    url: "https://www.moonstream.to/contact",
+  };
+  layoutProps.props.metaTags = { ...layoutProps.props.metaTags, ...metaTags };
   return { ...layoutProps };
 }
 
diff --git a/frontend/src/components/EngineOverviewDiagram.js b/frontend/src/components/EngineOverviewDiagram.js
index 1c455fb3..ad88d8ca 100644
--- a/frontend/src/components/EngineOverviewDiagram.js
+++ b/frontend/src/components/EngineOverviewDiagram.js
@@ -65,7 +65,7 @@ const _EngineOverviewDiagram = () => {
             h={["73", "73", "114px"]}
             position="relative"
           >
-            <RoundedRectSVG scale={1} />
+            <RoundedRectSVG scaling={1.0} />
             <Center
               position="absolute"
               left="0"
@@ -128,7 +128,7 @@ const _EngineOverviewDiagram = () => {
             h={["160px", "160px", "205px"]}
             position="relative"
           >
-            <RectangleSVG scale={0.8}></RectangleSVG>
+            <RectangleSVG scaling={0.8}></RectangleSVG>
             <Center
               position="absolute"
               w={["155px", "155px", "189px"]}
@@ -194,7 +194,7 @@ const _EngineOverviewDiagram = () => {
             h={["120px", "120px", "188px"]}
             position="relative"
           >
-            <CloudSVG scale={0.5}></CloudSVG>
+            <CloudSVG scaling={0.5}></CloudSVG>
             <Center
               position="absolute"
               paddingTop="30px"
diff --git a/frontend/src/components/SVGGraphics/Cloud.js b/frontend/src/components/SVGGraphics/Cloud.js
index 21683fed..de46b063 100644
--- a/frontend/src/components/SVGGraphics/Cloud.js
+++ b/frontend/src/components/SVGGraphics/Cloud.js
@@ -1,11 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _CloudSVG = (scale) => {
-  scale = scale || 1.0;
+const _CloudSVG = (props) => {
+  const _scale = props.scaling || 1.0;
   return (
     <svg
-      height={250 * scale}
+      height={250 * _scale}
       viewBox="0 0 407 250"
       fill="white"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/SVGGraphics/Rectangle.js b/frontend/src/components/SVGGraphics/Rectangle.js
index 0efae5c4..2464a499 100644
--- a/frontend/src/components/SVGGraphics/Rectangle.js
+++ b/frontend/src/components/SVGGraphics/Rectangle.js
@@ -1,11 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _RectangleSVG = (scale) => {
-  scale = scale || 1.0;
+const _RectangleSVG = (props) => {
+  const _scale = props.scaling || 1.0;
   return (
     <svg
-      height={265 * scale}
+      height={265 * _scale}
       viewBox="0 0 245 265"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/frontend/src/components/SVGGraphics/RoundedRect.js b/frontend/src/components/SVGGraphics/RoundedRect.js
index 7b9f67f1..6721720c 100644
--- a/frontend/src/components/SVGGraphics/RoundedRect.js
+++ b/frontend/src/components/SVGGraphics/RoundedRect.js
@@ -1,12 +1,11 @@
 import { React } from "react";
 import { chakra } from "@chakra-ui/react";
 
-const _RoundedRectSVG = (scale) => {
-  scale = scale || 1.0;
-  console.log(scale);
+const _RoundedRectSVG = (props) => {
+  const _scale = props.scaling || 1.0;
   return (
     <svg
-      height={134 * scale}
+      height={134 * _scale}
       viewBox="0 0 472 134"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"