Merge pull request #536 from storytold/add-typeform-to-landing-page

Add typeform to landing page

package.json

@@ -39,6 +39,9 @@
   },
   "dependencies": {
     "@react-spring/types": "^9.7.3",
+    "@typeform/embed": "^4.8.1",
+    "@typeform/embed-react": "^3.15.0",
+    "local-storage": "^2.0.0",
     "moment": "^2.29.4",
     "universal-cookie": "^6.1.1",
     "yarn": "^1.22.19"

packages/fakeyou.com/package.json

@@ -75,6 +75,7 @@
     "react-select": "^5.7.0",
     "react-share": "^4.4.1",
     "react-twitch-embed": "^3.0.1",
+    "react-typeform-embed": "^1.0.8",
     "react-wavesurfer.js": "^0.0.8",
     "sass": "^1.57.1",
     "swiper": "^11.0.5",

packages/fakeyou.com/src/components/common/TypeformButton/TypeformButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { PopupButton } from "@typeform/embed-react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight, faPartyHorn } from "@fortawesome/pro-solid-svg-icons";
+import { get, set } from "local-storage";
+import Button from "../Button";
+
+interface TypeformButtonProps {
+  formId: string;
+  label: string;
+  labelSubmitted: string;
+}
+
+export default function TypeformButton({
+  formId,
+  label,
+  labelSubmitted,
+}: TypeformButtonProps) {
+  return (
+    <>
+      {!get<boolean>("isSubmit") ? (
+        <PopupButton
+          id={formId}
+          className="button button-primary button-small"
+          onSubmit={() => {
+            set<boolean>("isSubmit", true);
+            console.log("Form submitted!");
+          }}
+        >
+          {label}
+          <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+        </PopupButton>
+      ) : (
+        <Button
+          label={labelSubmitted}
+          small={true}
+          disabled={true}
+          variant="secondary"
+          icon={faPartyHorn}
+        />
+      )}
+    </>
+  );
+}

packages/fakeyou.com/src/components/common/TypeformButton/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TypeformButton";

packages/fakeyou.com/src/components/common/TypeformWidget/TypeformContainer.scss

@@ -0,0 +1,11 @@
+.typeformcontainer {
+  height: 50vh; // 50% of the viewport height
+
+  @media (min-width: 768px) { // Tablets and above
+    height: 60vh;
+  }
+
+  @media (min-width: 1024px) { // Desktops and above
+    height: 400px; // Fixed height for large screens
+  }
+}

packages/fakeyou.com/src/components/common/TypeformWidget/TypeformWidget.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Widget } from "@typeform/embed-react";
+import { get, set } from "local-storage";
+import "./TypeformContainer.scss";
+
+interface TypeformWidgetProps {
+  formId: string;
+}
+
+export default function TypeformWidget({ formId }: TypeformWidgetProps) {
+  return (
+    <>
+      {!get<boolean>("isSubmit") ? (
+        <div className="typeformcontainer">
+          <Widget
+            id={formId}
+            style={{ width: "100%", height: "100%" }}
+            opacity={80}
+            onSubmit={() => {
+              set<boolean>("isSubmit", true);
+              console.log("Form submitted!");
+            }}
+            hideHeaders
+            enableSandbox={false}
+          />
+        </div>
+      ) : null}
+    </>
+  );
+}

packages/fakeyou.com/src/components/common/TypeformWidget/index.tsx

@@ -0,0 +1 @@
+export { default } from "./TypeformWidget";

packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx

@@ -1,4 +1,4 @@
-import { Badge, Button, Panel } from "components/common";
+import { Badge, Panel } from "components/common";
 import React, { useEffect, useRef, useState } from "react";
 import "./VstSectionV2.scss";
 import { Swiper, SwiperSlide } from "swiper/react";
@@ -9,11 +9,12 @@ import "swiper/css/thumbs";
 import { Navigation, Thumbs } from "swiper/modules";
 import { Swiper as SwiperType } from "swiper/types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import {
   faArrowDownLong,
-  faArrowRight,
   faArrowRightLong,
 } from "@fortawesome/pro-solid-svg-icons";
+import TypeformButton from "components/common/TypeformButton";
 // import { Link } from "react-router-dom";
 
 interface VstSectionV2Props {}
@@ -117,12 +118,17 @@ export default function VstSectionV2(props: VstSectionV2Props) {
           unique styles and effects to create visually captivating content.
         </p>
         <div className="d-flex">
-          <Button
-            label="Try Video Style Transfer"
+          {/* <Button
+            onClick={openTypeform}
+            label="Join Waitlist for Video Style Transfer"
             small={true}
             icon={faArrowRight}
             iconFlip={true}
-            to="/video-styletransfer"
+          /> */}
+          <TypeformButton
+            label="Join the Waitlist"
+            formId="oWnV91Z9"
+            labelSubmitted="You're on the waitlist!"
           />
         </div>
       </div>

yarn.lock

@@ -4484,6 +4484,7 @@ __metadata:
     react-select: ^5.7.0
     react-share: ^4.4.1
     react-twitch-embed: ^3.0.1
+    react-typeform-embed: ^1.0.8
     react-wavesurfer.js: ^0.0.8
     sass: ^1.57.1
     swiper: ^11.0.5
@@ -4591,10 +4592,13 @@ __metadata:
   resolution: "@storyteller/root@workspace:."
   dependencies:
     "@react-spring/types": ^9.7.3
+    "@typeform/embed": ^4.8.1
+    "@typeform/embed-react": ^3.15.0
     craco: ^0.0.3
     cross-env: ^7.0.3
     husky: ^8.0.3
     lerna: ^4.0.0
+    local-storage: ^2.0.0
     moment: ^2.29.4
     prettier: ^3.1.0
     pretty-quick: ^3.1.3
@@ -5033,6 +5037,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typeform/embed-react@npm:^3.15.0":
+  version: 3.15.0
+  resolution: "@typeform/embed-react@npm:3.15.0"
+  dependencies:
+    "@typeform/embed": 4.8.1
+    fast-deep-equal: ^3.1.3
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: d5e5d4b1cdfc128de2ce6c17ba648adbe98bfecc5a2c296fbedc8fb32da0c302e813baa6ce3ecc3de9dc84f36ccfd42250a4693f846d84ce2574e6fedcaa86e5
+  languageName: node
+  linkType: hard
+
+"@typeform/embed@npm:4.8.1, @typeform/embed@npm:^4.8.1":
+  version: 4.8.1
+  resolution: "@typeform/embed@npm:4.8.1"
+  checksum: 1e7ac3d0d95c1ea823160f1478a973f871550a4bab7de1501f557b1e18966ab5a740b6a913d9436b5ee59d0f25d707b66582a8c41dea195383cca3afb1955b23
+  languageName: node
+  linkType: hard
+
+"@typeform/embed@npm:^1.28.2":
+  version: 1.38.0
+  resolution: "@typeform/embed@npm:1.38.0"
+  checksum: 41115134e5cee28f5e031181b4525c7885d23707699cf183921110262717c7544bfd101428267410b812914c235687783e373ce98e37bdc447d72f8177663597
+  languageName: node
+  linkType: hard
+
 "@types/aria-query@npm:^4.2.0":
   version: 4.2.2
   resolution: "@types/aria-query@npm:4.2.2"
@@ -14247,6 +14277,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"local-storage@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "local-storage@npm:2.0.0"
+  checksum: 921f381cafc4c0cac263a87e9e11093adf0bfb13b3520107bb5065bbccf5e7d22eea81148a40bc10d9f44aba8a5afe0157183205714d0221e02e36cb8afaa70b
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^2.0.0":
   version: 2.0.0
   resolution: "locate-path@npm:2.0.0"
@@ -18177,6 +18214,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-typeform-embed@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "react-typeform-embed@npm:1.0.8"
+  dependencies:
+    "@typeform/embed": ^1.28.2
+  peerDependencies:
+    react: ^17.0.2
+    react-dom: ^17.0.2
+  checksum: f47ee0077046e282a482ef1a9d754ff255be65174e05b58f4c51c873ce8d771d1af98c5829f8860f2a33b0f4ebabcc4557e0f1e3b14b0d8bf3b23f460f1df18a
+  languageName: node
+  linkType: hard
+
 "react-wavesurfer.js@npm:^0.0.5":
   version: 0.0.5
   resolution: "react-wavesurfer.js@npm:0.0.5"