tf-checkout-react 1.0.45 → 1.0.46

package/src/components/waitingList/index.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import { Field, Form, Formik } from 'formik'
+import { CustomField } from '../common/CustomField'
+import { addToWaitingList } from '../../api'
+import {
+  combineValidators,
+  requiredValidator,
+  emailValidator,
+} from '../../validators'
+import { ENV } from '../../env'
+
+import './style.css'
+
+interface WaitingListProps {
+  tickets: any;
+}
+
+interface WaitingListFields {
+  ticketTypeId: string;
+  quantity: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+const generateQuantity = (n: number) => {
+  const quantityList = []
+  for (let i = 1; i <= n; i++) {
+    quantityList.push({ label: i, value: i })
+  }
+  return quantityList
+}
+
+const WaitingList = ({ tickets = {} }: WaitingListProps) => {
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const ticketTypesList = Object.values(tickets).map((d: any) => ({
+    label: d.displayName,
+    value: d.id,
+  }))
+
+  const handleSubmit = async (values: WaitingListFields) => {
+    try {
+      setLoading(true)
+      const id = ENV.EVENT_ID
+      const requestData = {
+        data: {
+          attributes: values,
+        },
+      }
+      const { data } = await addToWaitingList(id, requestData)
+
+      if (data.success) {
+        setShowSuccessMessage(true)
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="waiting-list">
+      {showSuccessMessage ? (
+        <div className="success-message">
+          <h3>{`You've been added to the waiting list!`}</h3>
+          <p>{`You'll be notified if tickets become available.`}</p>
+        </div>
+      ) : (
+        <>
+          <h2>WAITING LIST</h2>
+          <Formik
+            initialValues={{
+              ticketTypeId: '',
+              quantity: '',
+              firstName: '',
+              lastName: '',
+              email: '',
+            }}
+            onSubmit={handleSubmit}
+          >
+            <Form>
+              <div className="field-item">
+                <Field
+                  name="ticketTypeId"
+                  label="Ticket types"
+                  type="select"
+                  component={CustomField}
+                  selectOptions={[
+                    { label: 'Type of Ticket', value: '', disabled: true },
+                    ...ticketTypesList,
+                  ]}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="quantity"
+                  label="Quantity"
+                  type="select"
+                  component={CustomField}
+                  selectOptions={[
+                    { label: 'Quantity Requested', value: '', disabled: true },
+                    ...generateQuantity(10),
+                  ]}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="firstName"
+                  label="First name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your First name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="lastName"
+                  label="Last name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your Last name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="email"
+                  label="Email"
+                  validate={combineValidators(
+                    (value: string) =>
+                      requiredValidator(value, 'Please enter your Email'),
+                    (value: string) => emailValidator(value)
+                  )}
+                  component={CustomField}
+                />
+              </div>
+
+              <Button
+                type="submit"
+                variant="contained"
+                className="waiting-list-button"
+              >
+                {loading ? (
+                  <CircularProgress size="22px" />
+                ) : (
+                  'ADD TO WAITING LIST'
+                )}
+              </Button>
+            </Form>
+          </Formik>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WaitingList

package/src/components/waitingList/style.css

@@ -0,0 +1,18 @@
+.waiting-list {
+  padding: 17px 35px 20px;
+}
+.waiting-list .field-item {
+  margin-bottom: 30px;
+}
+.waiting-list .waiting-list-button {
+  width: 100% !important;
+}
+.waiting-list .waiting-list-button:hover {
+  background-color: #505050;
+}
+.waiting-list .success-message h3 {
+  margin: 10px 0;
+}
+.waiting-list .success-message p {
+  margin: 0;
+}

package/src/validators/index.ts

@@ -1,14 +1,20 @@
+const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+
 export const combineValidators = (...validators: any) => (...value: any) => {
   for (let i = 0; i < validators.length; ++i) {
     const error_message = validators[i](...value)
-    if (error_message !== undefined) return error_message
+    if (error_message) return error_message
   }
 }
 
-export const requiredValidator = (value?: string | number): string => {
+export const requiredValidator = (value?: string | number, message?: string): string => {
   let errorMessage = ''
   if (!value) {
-    errorMessage = 'Required'
+    errorMessage = message || 'Required'
   }
   return errorMessage
 }
+
+export const emailValidator = (email: string) => {
+  return !emailRegex.test(email) ? 'Please enter a valid email address' : '' 
+}