tf-checkout-react 1.6.6 → 1.7.2

package/src/components/delegationsContainer/IssueComponent.tsx

@@ -1,4 +1,5 @@
 import axios, { AxiosError } from 'axios'
+import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import React, { useEffect, useState } from 'react'
@@ -123,7 +124,7 @@ const IssueComponent = ({
                     resetForm()
                   } catch (e) {
                     if (axios.isAxiosError(e)) {
-                      const error = e?.response?.data?.message || 'Error'
+                      const error = _get(e, 'response.data.message') || 'Error'
                       setError(error)
                     } else if (e instanceof Error) {
                       setError(e?.message || 'Error')

package/src/components/forgotPasswordModal/index.tsx

@@ -3,6 +3,7 @@ import './style.css'
 import { Box, CircularProgress, Modal } from '@mui/material'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
 import React, { FC, useState } from 'react'
 import * as Yup from 'yup'
 
@@ -13,9 +14,10 @@ import { PoweredBy } from '../common/PoweredBy'
 export interface IForgotPasswordProps {
   onClose: () => void;
   onLoginButtonClick: () => void;
-  onForgotPasswordSuccess: (res: any) => void;
+  onForgotPasswordSuccess: (res: IAxiosResponseData) => void;
   onForgotPasswordError: (e: AxiosError) => void;
   showPoweredByImage?: boolean;
+  displaySuccessMessage?: boolean;
 }
 
 interface ValuesTypes {
@@ -39,21 +41,37 @@ const Schema = Yup.object().shape({
 })
 
 export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
-  onClose = () => {},
-  onLoginButtonClick = () => {},
-  onForgotPasswordSuccess = () => {},
-  onForgotPasswordError = () => {},
+  onClose = _identity,
+  onLoginButtonClick = _identity,
+  onForgotPasswordSuccess = _identity,
+  onForgotPasswordError = _identity,
   showPoweredByImage = false,
+  displaySuccessMessage = false,
 }) => {
   const [loading, setLoading] = useState(false)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+  const showSuccess = displaySuccessMessage && successMessage
 
   const onForgotPassword = async ({ email }: ValuesTypes) => {
+    if (showSuccess) {
+      setSuccessMessage(null)
+      onClose()
+      return
+    }
+
     try {
       setLoading(true)
       const { data } = await forgotPassword(email)
 
       onForgotPasswordSuccess(data)
-      onClose()
+
+      if (displaySuccessMessage && data?.success) {
+        setSuccessMessage(data?.message)
+      }
+
+      if (!displaySuccessMessage) {
+        onClose()
+      }
     } catch (e) {
       if (axios.isAxiosError(e)) {
         onForgotPasswordError(e)
@@ -63,12 +81,10 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
     }
   }
 
-  const _onClose = loading ? () => {} : onClose
-
   return (
     <Modal
       open={true}
-      onClose={_onClose}
+      onClose={loading ? _identity : onClose}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
       className="forgot-password-modal"
@@ -85,16 +101,31 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
                 <div className="forgot-password-container">
                   <div className="title">Password Reset</div>
                   <div className="forgot-password-container__singleField">
-                    <Field name="email" label="Email" component={CustomField} />
+                    {showSuccess ? (
+                      <p id="forgot-password-success-message">{successMessage}</p>
+                    ) : (
+                      <Field name="email" label="Email" component={CustomField} />
+                    )}
                   </div>
                 </div>
                 <div className="forgot-password-action-button">
-                  <button type="submit" disabled={!(isValid && dirty)}>
-                    {loading ? <CircularProgress size="22px" /> : 'Submit'}
+                  <button
+                    type="submit"
+                    disabled={showSuccess ? false : !(isValid && dirty)}
+                  >
+                    {loading ? (
+                      <CircularProgress size="22px" />
+                    ) : showSuccess ? (
+                      'Close'
+                    ) : (
+                      'Submit'
+                    )}
                   </button>
                 </div>
                 <div className="login">
-                  <span onClick={onLoginButtonClick}>Back to Log In</span>
+                  <span aria-hidden onClick={onLoginButtonClick}>
+                    Back to Log In
+                  </span>
                 </div>
                 {showPoweredByImage ? <PoweredBy /> : null}
               </Form>

package/src/components/loginForm/index.tsx

@@ -106,7 +106,7 @@ export const LoginForm: FC<ILoginFormProps> = ({
             onLoginSuccess(_get(authRes, 'data'))
           } catch (e) {
             if (axios.isAxiosError(e)) {
-              const error = e?.response?.data?.message || 'Error'
+              const error = _get(e, 'response.data.message') || 'Error'
               setError(error)
               onLoginError(e)
             } else if (e instanceof Error) {

package/src/components/loginModal/index.tsx

@@ -1,6 +1,5 @@
 import './style.css'
 
-import { TextField } from '@mui/material'
 import Box from '@mui/material/Box'
 import Modal from '@mui/material/Modal'
 import axios, { AxiosError } from 'axios'
@@ -12,6 +11,7 @@ import React, { FC, useState } from 'react'
 import { authorize, getProfileData } from '../../api'
 import { isBrowser, setLoggedUserData } from '../../utils'
 import { requiredValidator } from '../../validators'
+import { CustomField } from '../common/CustomField'
 import { PoweredBy } from '../common/PoweredBy'
 
 export interface Props {
@@ -93,10 +93,10 @@ export const LoginModal: FC<Props> = ({
                   const event = new window.CustomEvent('tf-login')
                   window.document.dispatchEvent(event)
                 }
-                onLogin(_get(authRes, 'data.data'))
+                onLogin(_get(authRes, 'data.data', {}) as IProfileData)
               } catch (e) {
                 if (axios.isAxiosError(e)) {
-                  const error = e?.response?.data?.message || 'Error'
+                  const error = _get(e, 'response.data.message', 'Error')
                   setError(error)
                 } else if (e instanceof Error) {
                   setError(e?.message || 'Error')
@@ -131,32 +131,24 @@ export const LoginModal: FC<Props> = ({
                 )}
                 <div className="login-modal-body">
                   <div className="login-modal-body__email">
-                    <Field name={'email'} validate={requiredValidator}>
-                      {({ field, meta }: { [key: string]: any }) => (
-                        <TextField
-                          label={'Email'}
-                          type={'email'}
-                          fullWidth
-                          error={!!meta.error && meta.touched}
-                          helperText={meta.touched && meta.error}
-                          {...field}
-                        />
-                      )}
-                    </Field>
+                    <Field
+                      name="email"
+                      label="Email"
+                      type="email"
+                      component={CustomField}
+                      theme="light"
+                      validate={requiredValidator}
+                    />
                   </div>
                   <div className="login-modal-body__password">
-                    <Field name={'password'} validate={requiredValidator}>
-                      {({ field, meta }: { [key: string]: any }) => (
-                        <TextField
-                          label="Password"
-                          type="password"
-                          fullWidth
-                          error={!!meta.error && meta.touched}
-                          helperText={meta.touched && meta.error}
-                          {...field}
-                        />
-                      )}
-                    </Field>
+                    <Field
+                      name="password"
+                      label="Password"
+                      type="password"
+                      component={CustomField}
+                      theme="light"
+                      validate={requiredValidator}
+                    />
                   </div>
                   <div className="login-action-button">
                     <button type="submit">Login</button>

package/src/components/loginModal/style.css

@@ -46,7 +46,9 @@
   background-color: #505050;
   border-color: #505050;
 }
-
+.login-logo-tff{
+    height: 60px;
+}
 .server_auth__error {
     color: red;
     padding-left: 25px;

package/src/components/myTicketsContainer/index.tsx

@@ -31,6 +31,7 @@ interface MyTicketsTypes {
   selectEventsLabel?: string;
   openLoginModal?: () => void;
   hideDetailsButton?: boolean;
+  customNoOrderContent?: React.ReactNode;
   columns?: IColumnData[];
 }
 
@@ -49,6 +50,7 @@ export const MyTicketsContainer = ({
   hideDetailsButton = false,
   columns = [],
   openLoginModal,
+  customNoOrderContent = null,
 }: MyTicketsTypes) => {
   const [data, setData] = useState<any>(null)
   const [loading, setLoading] = useState(true)
@@ -79,7 +81,7 @@ export const MyTicketsContainer = ({
       setData(data)
     } catch (error) {
       if (axios.isAxiosError(error)) {
-        if (error.response?.data.error === 'invalid_token') {
+        if (_get(error, 'response.data.error') === 'invalid_token') {
           if (isWindowDefined) {
             window.localStorage.removeItem('user_data')
             setUserExpired(true)
@@ -110,6 +112,15 @@ export const MyTicketsContainer = ({
     setFilter(eventFilter?.url_name || '')
   }
 
+  const noOrderContent = customNoOrderContent || (<div className="no_orders_section">
+    <div className="nodata_title">
+      You have no current ticket orders on this account
+    </div>
+    <div className="nodata_subtitle">
+      Discover your next nite out <a href="/events">here</a>.
+    </div>
+  </div>)
+
   return (
     <div className={`my-ticket ${theme}`}>
       <>
@@ -191,14 +202,7 @@ export const MyTicketsContainer = ({
         !loading && (
           <>
             <h2>My Ticket Orders</h2>
-            <div className="no_orders_section">
-              <div className="nodata_title">
-                You have no current ticket orders on this account
-              </div>
-              <div className="nodata_subtitle">
-                Discover your next nite out <a href="/events">here</a>.
-              </div>
-            </div>
+            {noOrderContent}
           </>
         )
       )}