feat(ecommerce): Validate Email Addresses (#4043)

* ✨ Validate Email Addresses

* ✨ Add Email Validation to Billing

* ✨ Change to HTML Form Validation

Co-authored-by: Dustin Eaton <deaton@influxdata.com>

Author: abshierjoel

src/billing/components/PayAsYouGo/NotificationSettingsOverlay.tsx

@@ -1,6 +1,7 @@
 import React, {FC, useContext, useState} from 'react'
 
 import {
+  ButtonType,
   Overlay,
   SlideToggle,
   InputLabel,
@@ -41,7 +42,11 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
   )
   const [hasThresholdError, setHasThresholdError] = useState<boolean>(false)
 
-  const onSubmitThreshold = () => {
+  const [notifyEmail, setNotifyEmail] = useState(billingSettings.notifyEmail)
+
+  const onSubmitThreshold = e => {
+    e.preventDefault()
+
     if (`${balanceThreshold}`.includes('.')) {
       setHasThresholdError(true)
       return
@@ -58,8 +63,6 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
     onHideOverlay()
   }
 
-  const [notifyEmail, setNotifyEmail] = useState(billingSettings.notifyEmail)
-
   const onToggleChange = () => {
     setIsNotifyActive(prevState => !prevState)
   }
@@ -87,8 +90,8 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
           title="Notification Settings"
           onDismiss={onHideOverlay}
         />
-        <Overlay.Body>
-          <Form>
+        <Form onSubmit={onSubmitThreshold}>
+          <Overlay.Body>
             <Form.Element label="">
               <FlexBox
                 direction={FlexDirection.Row}
@@ -111,7 +114,7 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
               <>
                 <Form.Element label="Email Address">
                   <Input
-                    type={InputType.Text}
+                    type={InputType.Email}
                     value={notifyEmail}
                     onChange={onEmailChange}
                   />
@@ -131,18 +134,18 @@ const NotificationSettingsOverlay: FC<Props> = ({onHideOverlay}) => {
                 </Form.Element>
               </>
             ) : null}
-          </Form>
-        </Overlay.Body>
-        <Overlay.Footer>
-          <Button
-            color={ComponentColor.Primary}
-            onClick={onSubmitThreshold}
-            text="Save"
-            size={ComponentSize.Small}
-            status={saveStatus}
-            testID="save-settings--button"
-          />
-        </Overlay.Footer>
+          </Overlay.Body>
+          <Overlay.Footer>
+            <Button
+              type={ButtonType.Submit}
+              color={ComponentColor.Primary}
+              text="Save"
+              size={ComponentSize.Small}
+              status={saveStatus}
+              testID="save-settings--button"
+            />
+          </Overlay.Footer>
+        </Form>
       </Overlay.Container>
     </Overlay>
   )

src/checkout/CheckoutForm.tsx

@@ -65,7 +65,7 @@ const CheckoutForm: FC = () => {
   }
 
   return (
-    <Form noValidate onSubmit={onSubmit}>
+    <Form onSubmit={onSubmit}>
       <AppWrapper type="funnel">
         <FunnelPage logo={<LogoWithCubo />} enableGraphic={true}>
           <h1

src/users/components/UserListInviteForm.tsx

@@ -14,9 +14,9 @@ import {
   Heading,
   HeadingElement,
   Input,
+  InputType,
   Panel,
 } from '@influxdata/clockface'
-
 import {gaEvent} from 'src/cloud/utils/reporting'
 
 // Constants
@@ -69,6 +69,7 @@ const UserListInviteForm: FC = () => {
                     placeholder="email address"
                     onChange={onChangeInvitee}
                     value={draftInvite.email}
+                    type={InputType.Email}
                     required={true}
                   />
                 </Form.Element>