tf-checkout-react 1.0.41 → 1.0.45

package/src/components/confirmationContainer/index.tsx

@@ -7,6 +7,7 @@ import _get from 'lodash/get'
 
 import { IReferralPromotion } from '../../types'
 import { getConfirmationData } from '../../api'
+import { AxiosError } from 'axios'
 
 export interface IShareButton {
   mainLabel: string;
@@ -26,6 +27,8 @@ export interface IConfirmationPage {
   shareLink: string;
   isReferralEnabled: boolean;
   shareButtons: IShareButton[];
+  onGetConfirmationDataSuccess: (res: any) => void;
+  onGetConfirmationDataError: (e: AxiosError) => void;
 }
 
 const defaultSvg =
@@ -35,6 +38,8 @@ export const ConfirmationContainer = ({
   referralPromotions = [],
   shareButtons = [],
   shareLink = '',
+  onGetConfirmationDataSuccess = () => {},
+  onGetConfirmationDataError = () => {},
 }: IConfirmationPage) => {
   const inputRef = useRef(null)
   const [data, setData] = useState<any>({})
@@ -55,14 +60,14 @@ export const ConfirmationContainer = ({
         try {
           const response = await getConfirmationData(hash)
           const data = _get(response, 'data.data.attributes')
-
           setData(data)
+          onGetConfirmationDataSuccess(response.data)
         } catch (error) {
-          //...
+          onGetConfirmationDataError(error.response)
         }
       }
     })()
-  }, [])
+  }, [onGetConfirmationDataSuccess, onGetConfirmationDataError])
 
   return (
     <div className="confirmation-page">

package/src/components/loginModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useState } from 'react'
+import { AxiosError } from 'axios'
 import {
   authorize,
   getAccessToken,
@@ -18,9 +19,12 @@ import axios from 'axios'
 interface Props {
   onClose: () => void;
   onLogin: () => void;
-  alreadyHasUser: boolean;
-  userExpired: boolean;
-  setUserExpired: React.Dispatch<React.SetStateAction<boolean>>;
+  alreadyHasUser?: boolean;
+  userExpired?: boolean;
+  onAuthorizeSuccess?: (res: any) => void;
+  onAuthorizeError?: (e: AxiosError) => void;
+  onGetProfileDataSuccess?: (res: any) => void;
+  onGetProfileDataError?: (e: AxiosError) => void;
 }
 
 const style: React.CSSProperties = {
@@ -37,9 +41,12 @@ const style: React.CSSProperties = {
 export const LoginModal: FC<Props> = ({
   onClose,
   onLogin,
-  alreadyHasUser,
-  userExpired,
-  setUserExpired,
+  alreadyHasUser = false,
+  userExpired = false,
+  onAuthorizeSuccess = () => {},
+  onAuthorizeError = () => {},
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
 }) => {
   const [error, setError] = useState('')
   return (
@@ -58,8 +65,8 @@ export const LoginModal: FC<Props> = ({
                 const bodyFormData = new FormData()
                 bodyFormData.append('email', email)
                 bodyFormData.append('password', password)
-                const resAutorize = await authorize(bodyFormData)
 
+                const resAutorize = await authorize(bodyFormData)
                 const bodyFormDataToken = new FormData()
                 bodyFormDataToken.append('code', resAutorize.data.data.code)
                 bodyFormDataToken.append('scope', 'profile')
@@ -73,22 +80,48 @@ export const LoginModal: FC<Props> = ({
                   ENV.CLIENT_SECRET ||
                     'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
                 )
-                const resAccessToken = await getAccessToken(bodyFormDataToken)
+
+                let resAccessToken = null
+
+                try {
+                  resAccessToken = await getAccessToken(bodyFormDataToken)
+                  onAuthorizeSuccess(resAccessToken.data)
+                } catch (e) {
+                  if (axios.isAxiosError(e)) {
+                    onAuthorizeError(e)
+                  }
+                  return
+                }
+
                 const accessToken = _get(resAccessToken, 'data.access_token')
                 handleSetAccessToken(accessToken)
-                const profileData = await getProfileData(accessToken)
-                const profileSpecifiedData = _get(profileData, 'data.data')
+
+                let profileResponse = null
+
+                try {
+                  profileResponse = await getProfileData(accessToken)
+                  onGetProfileDataSuccess(profileResponse.data)
+                } catch (e) {
+                  if (axios.isAxiosError(e)) {
+                    onGetProfileDataError(e)
+                  }
+                  return
+                }
+
+                const profileSpecifiedData = _get(profileResponse, 'data.data')
                 const profileDataObj = {
                   id: profileSpecifiedData.id,
                   first_name: profileSpecifiedData.firstName,
                   last_name: profileSpecifiedData.lastName,
-                  email: profileSpecifiedData.email
+                  email: profileSpecifiedData.email,
                 }
                 if (typeof window !== 'undefined') {
-                  window.localStorage.setItem('user_data', JSON.stringify(profileDataObj))
+                  window.localStorage.setItem(
+                    'user_data',
+                    JSON.stringify(profileDataObj)
+                  )
                   window.localStorage.setItem('access_token', accessToken)
                 }
-                setUserExpired(false)
                 onLogin()
               } catch (e) {
                 if (axios.isAxiosError(e)) {

package/src/components/paymentContainer/index.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { AxiosError } from 'axios'
 import Container from '@mui/material/Container'
 import Alert from '@mui/material/Alert'
 import { Elements } from '@stripe/react-stripe-js'
@@ -26,6 +27,9 @@ export interface IPaymentPage {
   formTitle?: string;
   errorText?: string;
   onErrorClose?: () => void;
+  onGetPaymentDataSuccess: (value: any) => void;
+  onGetPaymentDataError: (value: AxiosError) => void;
+  onPaymentError: (value: AxiosError) => void;
 }
 
 const initialOrderValues: IOrderData = {
@@ -53,6 +57,9 @@ export const PaymentContainer = ({
   errorText,
   checkoutData,
   onErrorClose = _identity,
+  onGetPaymentDataSuccess = () => {},
+  onGetPaymentDataError = () => {},
+  onPaymentError = () => {}
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -83,9 +90,11 @@ export const PaymentContainer = ({
             currency: order_details?.currency,
           }
           setOrderData(orderData)
+          onGetPaymentDataSuccess(response.data)
         }
       } catch (e) {
         setError(_get(e, 'response.data.message'))
+        onGetPaymentDataError(e.response)
       }
     })()
   }, [checkoutData])
@@ -109,6 +118,7 @@ export const PaymentContainer = ({
       }
     } catch (e) {
       setError(_get(e, 'response.data.message'))
+      onPaymentError(e.response)
     }
   }
 

package/src/components/registerModal/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from 'react'
+import { AxiosError } from 'axios'
 import './style.css'
 import { getProfileData, handleSetAccessToken, register } from '../../api'
 import { Field, Form, Formik } from 'formik'
@@ -10,9 +11,15 @@ import { ENV } from '../../env'
 interface Props {
   onClose: () => void;
   onRegister: () => void;
+  onGetProfileDataSuccess: (res: any) => void;
+  onGetProfileDataError: (e: AxiosError) => void;
 }
 
-export const RegisterModal: FC<Props> = ({ onClose }) => (
+export const RegisterModal: FC<Props> = ({
+  onClose,
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
+}) => (
   <div
     style={{
       display: 'flex',
@@ -63,8 +70,18 @@ export const RegisterModal: FC<Props> = ({ onClose }) => (
           'data.data.attributes.access_token'
         )
         handleSetAccessToken(access_token)
-        const profileData = await getProfileData(access_token)
-        const profileSpecifiedData = _get(profileData, 'data.data')
+
+        let profileResponse = null
+
+        try {
+          profileResponse = await getProfileData(access_token)
+          onGetProfileDataSuccess(profileResponse.data)
+        } catch (e) {
+          onGetProfileDataError(e.response)
+          return
+        }
+
+        const profileSpecifiedData = _get(profileResponse, 'data.data')
         const profileDataObj = {
           id: profileSpecifiedData.id,
           first_name: profileSpecifiedData.firstName,

package/src/components/ticketsContainer/index.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import axios, { AxiosError } from 'axios'
 import './style.css'
 
 import { getTickets, addToCart, setCustomHeader } from '../../api'
@@ -166,6 +167,9 @@ export interface IGetTickets {
   onAddToCartSuccess: (response: CartSuccess) => void;
   getTicketsLabel?: string;
   contentStyle?: React.CSSProperties;
+  onAddToCartError: (e: AxiosError) => void;
+  onGetTicketsSuccess: (response: any) => void;
+  onGetTicketsError: (e: AxiosError) => void;
 }
 
 export interface ITicket {
@@ -182,6 +186,9 @@ export const TicketsContainer = ({
   eventId,
   onAddToCartSuccess,
   contentStyle = {},
+  onAddToCartError = () => {},
+  onGetTicketsSuccess = () => {},
+  onGetTicketsError = () => {},
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -221,9 +228,12 @@ export const TicketsContainer = ({
             item => _isObject(item)
           )
           setTickets(tickets)
+          onGetTicketsSuccess(response.data)
         }
       } catch (e) {
-        console.log('e', e)
+        if (axios.isAxiosError(e)) {
+          onGetTicketsError(e)
+        }
       } finally {
         setIsLoading(false)
       }
@@ -283,7 +293,9 @@ export const TicketsContainer = ({
         })
       }
     } catch (e) {
-      console.log('e', e)
+      if (axios.isAxiosError(e)) {
+        onAddToCartError(e)
+      }
     } finally {
       setHandleBookIsLoading(false)
     }

package/src/index.ts

@@ -2,4 +2,5 @@ export { BillingInfoContainer } from './components/billing-info-container/index'
 export { PaymentContainer } from './components/paymentContainer/index'
 export { ConfirmationContainer } from './components/confirmationContainer/index'
 export { TicketsContainer } from './components/ticketsContainer/index'
-export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
+export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
+export { LoginModal } from './components/loginModal'

package/src/types/billing-info-data.ts

@@ -9,7 +9,7 @@ export interface IGroupItem {
   className?: string;
   required?: boolean;
   component?: ReactNode | JSX.Element | HTMLElement;
-  onValidate: (value: any) => void;
+  onValidate?: (value: any) => void;
 
   // aditional props
   [key: string]: any;
@@ -22,6 +22,7 @@ export interface IFieldData {
   groupClassname?: string;
   groupLabel?: string | JSX.Element | HTMLElement;
   groupLabelClassName?: string;
+  id: number;
 }
 export interface IBillingInfoData {
   id: number | string;