Beta end sign up form (#880)

## Issues connected

Ref #875 
Ref #876  
Resolves #878 

## What has been done

- Added logic for sign up form
- Added message for sign up form (success, failed, invalid email)

## Testing

- [x] Entering no email - "Invalid email" message is displayed
- [x] Entering not valid email - "Invalid email" message is displayed
- [x] Entering valid email - "Sign up successful" message is  displayed
- [x] If sign up successful, email input is cleared
- [x] All messages (success or fail) disappears after 3 seconds
- [x] After sign up, email used will be visible in customer.io -> People

## Screenshots / images / videos

![Zrzut ekranu 2023-12-12 o 15 02
53](https://github.com/tahowallet/dapp/assets/73061939/8e1cd934-c08d-44d4-81c9-372d8bbe2f2d)

Author: jagodarybacka

src/env.d.ts

@@ -43,3 +43,17 @@ declare namespace NodeJS {
 interface Navigator {
   brave?: { isBrave: () => boolean }
 }
+
+interface Window {
+  _cio: {
+    identify: ({
+      id,
+      email,
+      created_at,
+    }: {
+      id: string
+      email: string
+      created_at: number
+    }) => void
+  }
+}

src/public/index.html

@@ -4,6 +4,23 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Subscape</title>
+    <!-- Script for sending data to customer.io -->
+    <script type="text/javascript">
+      var _cio = _cio || [];
+      (function() {
+        var a,b,c;a=function(f){return function(){_cio.push([f].
+        concat(Array.prototype.slice.call(arguments,0)))}};b=["load","identify",
+        "sidentify","track","page"];for(c=0;c<b.length;c++){_cio[b[c]]=a(b[c])};
+        var t = document.createElement('script'),
+            s = document.getElementsByTagName('script')[0];
+        t.async = true;
+        t.id    = 'cio-tracker';
+        t.setAttribute('data-site-id', '27aa7555738fc28e5fe8');
+        t.src = 'https://assets.customer.io/assets/track.js';
+        s.parentNode.insertBefore(t, s);
+      })();
+    </script>
+    <!-- Script for sending data to customer.io -->
     <style>
       body {
         background: #142D2B;

src/shared/constants/regex.ts

@@ -1,5 +1,10 @@
+/* eslint-disable no-useless-escape */
+
 // Matches floating point numbers with optional thousands separators
 export const FLOATING_POINT_REGEX = /^[^0-9]*([0-9,]+)(?:\.([0-9]*))?$/
 
 // Matches number values and empty string
 export const NUMBER_INPUT_REGEX = /^-?[0-9]*\.?[0-9]*$/
+
+// Matches valid email
+export const EMAIL_REGEX = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g

src/ui/Island/Modals/BetaEndModal/GetUpdates.tsx

@@ -7,9 +7,9 @@ export default function GetUpdates() {
       <div className="modal_actions_column">
         <h2 className="modal_actions_header">Get Updates</h2>
         <p className="modal_actions_description">
-          Sign up for updates bellow to learn
+          Sign up for updates below to learn
           <br />
-          when Season 1 is starting
+          when Season 1 is starting.
         </p>{" "}
         <GetUpdatesForm />
       </div>

src/ui/Island/Modals/BetaEndModal/GetUpdatesForm.tsx

@@ -1,25 +1,75 @@
-import React, { FormEvent, useState } from "react"
+import React, { ChangeEvent, FormEvent, useState } from "react"
 import Button from "shared/components/Interface/Button"
+import { EMAIL_REGEX } from "shared/constants"
+import iconSuccess from "shared/assets/icons/m/notif-correct.svg"
+import iconFail from "shared/assets/icons/m/notif-wrong.svg"
+import Icon from "shared/components/Media/Icon"
+
+enum SignUpMessage {
+  SUCCESS = "Sign up successful",
+  FAIL = "Invalid email address",
+}
 
 export default function GetUpdatesForm() {
   const [emailAddress, setEmailAddress] = useState("")
+  const [signUpMessage, setSignUpMessage] = useState<string | null>(null)
 
   const formSubmitHandler = (e: FormEvent) => {
     e.preventDefault()
 
-    // TODO: logic for sending form
+    const trimmedEmailAddress = emailAddress.trim()
+    const isEmail = EMAIL_REGEX.test(trimmedEmailAddress)
+
+    if (trimmedEmailAddress === "" || !isEmail) {
+      setSignUpMessage(SignUpMessage.FAIL)
+      return
+    }
+
+    // eslint-disable-next-line no-underscore-dangle
+    window._cio.identify({
+      id: emailAddress,
+      email: emailAddress,
+      created_at: Math.floor(new Date().getTime() / 1000),
+    })
+
+    setEmailAddress("")
+    setSignUpMessage(SignUpMessage.SUCCESS)
+  }
+
+  const handleEmailInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmailAddress(e.target.value)
+    setSignUpMessage(null)
   }
 
   return (
     <>
       <form className="row_center" onSubmit={formSubmitHandler}>
-        <input
-          tabIndex={0}
-          placeholder="Email address"
-          value={emailAddress}
-          onChange={(e) => setEmailAddress(e.target.value)}
-          className="modal_actions_input"
-        />
+        <div style={{ position: "relative" }}>
+          <input
+            tabIndex={0}
+            placeholder="Email address"
+            value={emailAddress}
+            onChange={handleEmailInputChange}
+            className="modal_actions_input"
+          />
+          {signUpMessage && (
+            <div className="modal_actions_input_message row_center">
+              <Icon
+                src={
+                  signUpMessage === SignUpMessage.SUCCESS
+                    ? iconSuccess
+                    : iconFail
+                }
+                color={
+                  signUpMessage === SignUpMessage.SUCCESS
+                    ? "var(--trading-in)"
+                    : "var(--semantic-error)"
+                }
+              />
+              <span>{signUpMessage}</span>
+            </div>
+          )}
+        </div>
         <Button buttonType="submit" style={{ transform: "translateX(-20px)" }}>
           Sign up
         </Button>
@@ -29,17 +79,31 @@ export default function GetUpdatesForm() {
           font-size: 16px;
           line-height: 24px;
           background: var(--primary-p1-100);
-          padding: 12px 16px;
+          padding: 12px 32px 12px 16px;
           outline: none;
           border-radius: 4px;
           border: 1.5px solid var(--green-60);
           font-family: var(--sans);
           color: var(--secondary-s1-100);
+          width: 207px;
         }
         modal_actions_input:focus,
         modal_actions_input:active {
           border-color: var(--secondary-s1-100);
         }
+        .modal_actions_input_message {
+          position: absolute;
+          left: 0;
+          top: 100%;
+          padding: 4px 8px;
+          gap: 4px;
+          color: ${signUpMessage === SignUpMessage.SUCCESS
+            ? "var(--trading-in)"
+            : "var(--semantic-error)"};
+        }
+        .modal_actions_input_message > span {
+          font-size: 14px;
+        }
       `}</style>
     </>
   )