tf-checkout-react 1.0.43 → 1.0.47

package/dist/types/billing-info-data.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 export interface IGroupItem {
     name: string;
-    label: string;
+    label: string | JSX.Element;
     type?: string;
     className?: string;
     required?: boolean;
@@ -19,6 +19,6 @@ export interface IFieldData {
 export interface IBillingInfoData {
     id: number | string;
     fields: IFieldData[];
-    label?: string;
+    label?: string | JSX.Element;
     labelClassName?: string;
 }

package/dist/validators/index.d.ts

@@ -1,2 +1,3 @@
 export declare const combineValidators: (...validators: any) => (...value: any) => any;
-export declare const requiredValidator: (value?: string | number | undefined) => string;
+export declare const requiredValidator: (value?: string | number | undefined, message?: string | undefined) => string;
+export declare const emailValidator: (email: string) => "" | "Please enter a valid email address";

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.43",
+  "version": "1.0.47",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -66,7 +66,9 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
+    "@mui/lab": "^5.0.0-alpha.55",
     "@mui/material": "5.1.0",
+    "@mui/styles": "^5.1.1",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
     "autoprefixer": "^10.4.0",
@@ -76,6 +78,7 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
+    "nanoid": "^3.1.30",
     "react-bootstrap": "^2.0.2",
     "react-inlinesvg": "^2.3.0"
   }

package/src/api/index.ts

@@ -19,7 +19,7 @@ if (
   window.location.origin !== 'https://www.houseofx.nyc' &&
   window.location.origin !== 'https://tickets-staging.houseofx.nyc'
 ) {
-  //ttfHeaders['X-Source-Origin'] = 'houseofx.com'
+  ttfHeaders['X-Source-Origin'] = 'houseofx.nyc'
 }
 
 interface IPublicRequest extends AxiosInstance {
@@ -78,7 +78,7 @@ publicRequest.interceptors.request.use((config: AxiosRequestConfig) => {
   ) {
     const updatedHeaders = {
       ...config.headers,
-      // 'X-Source-Origin': 'houseofx.com',
+      'X-Source-Origin': 'houseofx.nyc',
     }
     config.headers = updatedHeaders
   }
@@ -215,4 +215,8 @@ export const getCountries = () => publicRequest.get('/countries/')
 
 export const getConfirmationData = (orderHash: string) => publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
 
-export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`) 
+export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`)
+
+export const addToWaitingList = (id: number, data: any) => publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
+
+export const getConditions = (eventId: string) => publicRequest.get(`v1/event/${eventId}/conditions`)

package/src/components/billing-info-container/index.tsx

@@ -1,4 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
+import { AxiosError } from 'axios'
 import {
   Field,
   Form,
@@ -7,7 +8,7 @@ import {
   FormikProps,
   FormikValues,
 } from 'formik'
-import Button from '@mui/material/Button'
+import LoadingButton from '@mui/lab/LoadingButton'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
@@ -25,6 +26,7 @@ import {
   register,
   setCustomHeader,
   getStates,
+  getConditions,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
@@ -37,6 +39,8 @@ import {
 import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
+import { CircularProgress } from '@mui/material'
+import { nanoid } from 'nanoid'
 
 // const TTFLOGO = require('./logo-ttf.png')
 
@@ -55,13 +59,45 @@ const getQueryVariable = (variable: string) => {
 }
 
 export interface IBillingInfoPage {
-  data: IBillingInfoData[];
-  handleSubmit: (
+  data?: IBillingInfoData[];
+  ticketHoldersFields?: IBillingInfoData;
+  handleSubmit?: (
     values: FormikValues,
     formikHelpers: FormikHelpers<FormikValues>,
     res?: any
   ) => void;
 
+  onRegisterSuccess?: (value: {
+    accessToken: string;
+    refreshToken: string;
+  }) => void;
+
+  onRegisterError?: (e: AxiosError) => void;
+
+  onSubmitError?: (e: AxiosError) => void;
+
+  onGetCartSuccess?: (res: any) => void;
+
+  onGetCartError?: (e: AxiosError) => void;
+
+  onGetCountriesSuccess?: (res: any) => void;
+
+  onGetCountriesError?: (e: AxiosError) => void;
+
+  onGetStatesSuccess?: (res: any) => void;
+
+  onGetStatesError?: (e: AxiosError) => void;
+
+  onGetProfileDataSuccess?: (res: any) => void;
+
+  onGetProfileDataError?: (e: AxiosError) => void;
+
+  onAuthorizeSuccess?: () => void;
+
+  onAuthorizeError?: (e: AxiosError) => void;
+
+  onLogin?: () => void;
+
   initialValues?: FormikValues;
   buttonName?: string;
   theme?: 'light' | 'dark';
@@ -73,7 +109,17 @@ const LogicRunner: FC<{
   setFieldValue: any;
   setValues: any;
   setUserValues: any;
-}> = ({ values, setStates, setFieldValue, setValues, setUserValues }) => {
+  onGetStatesSuccess: any;
+  onGetStatesError: any;
+}> = ({
+  values,
+  setStates,
+  setFieldValue,
+  setValues,
+  setUserValues,
+  onGetStatesSuccess,
+  onGetStatesError,
+}) => {
   useEffect(() => {
     const fetchStates = async () => {
       try {
@@ -84,7 +130,12 @@ const LogicRunner: FC<{
         }))
         setStates(mappedStates)
         setFieldValue('state', mappedStates[0]?.label ?? '')
-      } catch (e) {}
+        onGetStatesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetStatesError(e)
+        }
+      }
     }
     fetchStates()
   }, [values.country, setStates, setFieldValue])
@@ -105,9 +156,6 @@ const LogicRunner: FC<{
               email: parsedData?.email || '',
               phone: parsedData?.phone || '',
               confirmEmail: '',
-              holderFirstName: '',
-              holderLastName: '',
-              holderAge: '',
               state: parsedData?.state || '',
               street_address: parsedData?.street_address || '',
               country: parsedData?.country || 1,
@@ -119,9 +167,7 @@ const LogicRunner: FC<{
             }
             setValues(mappedValues)
             setUserValues(mappedValues)
-          } catch (e) {
-            console.log(e)
-          }
+          } catch (e) {}
         }
       }
     }
@@ -135,10 +181,28 @@ const SectionContainer: FC = ({ children }) => <>{children}</>
 
 export const BillingInfoContainer = ({
   data = [],
+  ticketHoldersFields = {
+    id: 1,
+    fields: [],
+  },
   initialValues = {},
   buttonName = 'Submit',
   handleSubmit = _identity,
   theme = 'light',
+  onRegisterSuccess = () => {},
+  onRegisterError = () => {},
+  onSubmitError = () => {},
+  onGetCartSuccess = () => {},
+  onGetCartError = () => {},
+  onGetCountriesSuccess = () => {},
+  onGetCountriesError = () => {},
+  onGetStatesSuccess = () => {},
+  onGetStatesError = () => {},
+  onGetProfileDataSuccess = () => {},
+  onGetProfileDataError = () => {},
+  onAuthorizeSuccess = () => {},
+  onAuthorizeError = () => {},
+  onLogin = () => {},
 }: IBillingInfoPage) => {
   const userData =
     typeof window !== 'undefined' && window.localStorage.getItem('user_data')
@@ -156,6 +220,8 @@ export const BillingInfoContainer = ({
   const [alreadyHasUser, setAlreadyHasUser] = useState(false)
   const [userExpired, setUserExpired] = useState(false)
   const [showModalRegister, setShowModalRegister] = useState(false)
+  const [ticketsQuantity, setTicketsQuantity] = useState<string[]>([])
+  const [conditions, setConditions] = useState<{id: string, text: string}[]>([])
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
     lastName: '',
@@ -181,15 +247,66 @@ export const BillingInfoContainer = ({
 
   const showDOB = getQueryVariable('age_required') === 'true'
   const showTicketHolderName = getQueryVariable('names_required') === 'true'
+  const eventId = getQueryVariable('event_id')
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
+  const hideOptIn: boolean = _get(cartInfoData, 'hide_ttf_opt_in', false)
+
+  const getQuantity = (cart: any = []) => {
+    let qty: any = 0
+    cart.forEach((item: any) => {
+      qty += +item.quantity
+    })
+    return qty
+  }
+
+  //just once
+  useEffect(() => {
+    // fetch conditions data
+    const fetchConditions = async () => {
+      if (eventId) {
+        const res = await getConditions(eventId)
+        const conditionsInfo = _get(res, 'data.data.attributes')
+        setConditions(conditionsInfo ? conditionsInfo.map((item: string) => ({ id: nanoid(), text: item })) : [])
+      }
+    }
+    fetchConditions()
+    // fetch countries data
+    const fetchCountries = async () => {
+      try {
+        const res = await getCountries()
+        setCustomHeader(res)
+        setCountries(
+          _map(_get(res, 'data.data'), (item, key) => ({
+            label: item,
+            value: Number(key),
+          }))
+        )
+        onGetCountriesSuccess(res.data)
+      } catch (e) {
+        if (axios.isAxiosError(e)) {
+          onGetCountriesError(e)
+        }
+      }
+    }
+    fetchCountries()
+    fetchCart()
+  }, [])
 
   // fetch cart data
   const fetchCart = async () => {
     try {
       const res = await getCart()
       setCustomHeader(res)
-      setCartInfo(_get(res, 'data.data.attributes'))
-    } catch (e) {}
+      const cartInfo = _get(res, 'data.data.attributes')
+      setCartInfo(cartInfo)
+      const { cart = [] } = cartInfo
+      setTicketsQuantity(new Array(getQuantity(cart)).fill(null).map(() => nanoid()))
+      onGetCartSuccess(res.data)
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetCartError(e)
+      }
+    }
   }
 
   // fetch user data
@@ -204,42 +321,34 @@ export const BillingInfoContainer = ({
           'user_data',
           JSON.stringify(profileDataObj)
         )
+        onGetProfileDataSuccess(userDataResponse.data)
+      }
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetProfileDataError(e)
       }
-    } catch (e) {}
+    }
   }
 
   useEffect(() => {
-    fetchCart()
     fetchUserData(access_token)
-
-    // fetch countries data
-    const fetchCountries = async () => {
-      const res = await getCountries()
-      setCustomHeader(res)
-      setCountries(
-        _map(_get(res, 'data.data'), (item, key) => ({
-          label: item,
-          value: Number(key),
-        }))
-      )
-    }
-
-    if (!(countries && countries.length)) {
-      fetchCountries()
-    }
-  }, [access_token, countries])
+  }, [access_token])
 
   return (
     <>
       <Formik
-        initialValues={getInitialValues(data, {
-          ...initialValues,
-          email: emailLogged,
-          firstName: firstNameLogged,
-          lastName: lastNameLogged,
-          country: 1,
-          brand_opt_in: optedInFieldValue,
-        })}
+        initialValues={getInitialValues(
+          data,
+          {
+            ...initialValues,
+            email: emailLogged,
+            firstName: firstNameLogged,
+            lastName: lastNameLogged,
+            country: 1,
+            brand_opt_in: optedInFieldValue,
+          },
+          userValues
+        )}
         enableReinitialize={true}
         onSubmit={async (values, formikHelpers) => {
           try {
@@ -256,6 +365,7 @@ export const BillingInfoContainer = ({
                 }
               }
               const checkoutBody = createCheckoutDataBody(
+                ticketsQuantity.length,
                 values,
                 { emailLogged, firstNameLogged, lastNameLogged },
                 showDOB
@@ -266,12 +376,50 @@ export const BillingInfoContainer = ({
             }
 
             const bodyFormData = createRegisterFormData(values)
-            const resRegister = await register(bodyFormData)
-            const access_token_register = _get(
-              resRegister,
-              'data.data.attributes.access_token'
-            )
-            handleSetAccessToken(access_token_register)
+
+            let access_token_register = null
+            try {
+              const resRegister = await register(bodyFormData)
+              access_token_register = _get(
+                resRegister,
+                'data.data.attributes.access_token'
+              )
+              const refreshToken = _get(
+                resRegister,
+                'data.data.attributes.refresh_token'
+              )
+              handleSetAccessToken(access_token_register)
+
+              const tokens = {
+                accessToken: access_token_register,
+                refreshToken,
+              }
+
+              onRegisterSuccess(tokens)
+            } catch (e) {
+              if (axios.isAxiosError(e)) {
+                const error = e?.response?.data?.message
+                if (_includes(error, 'You must be aged')) {
+                  formikHelpers.setFieldError('holderAge', error)
+                }
+
+                if (error?.password) {
+                  formikHelpers.setFieldError('password', error.password)
+                  formikHelpers.setFieldError(
+                    'confirmPassword',
+                    error.password
+                  )
+                }
+
+                if (error?.email) {
+                  setAlreadyHasUser(true)
+                  setShowModalLogin(true)
+                }
+                onRegisterError(e)
+              }
+              return
+            }
+
             const profileData = await getProfileData(access_token_register)
             const profileSpecifiedData = _get(profileData, 'data.data')
             const profileDataObj = setLoggedUserData(profileSpecifiedData)
@@ -283,6 +431,7 @@ export const BillingInfoContainer = ({
             }
 
             const checkoutBody = createCheckoutDataBody(
+              ticketsQuantity.length,
               values,
               { emailLogged, firstNameLogged, lastNameLogged },
               showDOB
@@ -294,20 +443,6 @@ export const BillingInfoContainer = ({
             handleSubmit(values, formikHelpers as FormikHelpers<any>, res)
           } catch (e) {
             if (axios.isAxiosError(e)) {
-              const error = e?.response?.data?.message
-              if (_includes(error, 'You must be aged')) {
-                formikHelpers.setFieldError('holderAge', error)
-              }
-
-              if (error?.password) {
-                formikHelpers.setFieldError('password', error.password)
-                formikHelpers.setFieldError('confirmPassword', error.password)
-              }
-
-              if (error?.email) {
-                setAlreadyHasUser(true)
-                setShowModalLogin(true)
-              }
               if (e.response?.data.error === 'invalid_token') {
                 if (typeof window !== 'undefined') {
                   window.localStorage.removeItem('user_data')
@@ -316,6 +451,7 @@ export const BillingInfoContainer = ({
                   setShowModalLogin(true)
                 }
               }
+              onSubmitError(e)
             }
           }
         }}
@@ -328,6 +464,8 @@ export const BillingInfoContainer = ({
               setFieldValue={props.setFieldValue}
               setValues={props.setValues}
               setUserValues={setUserValues}
+              onGetStatesSuccess={onGetStatesSuccess}
+              onGetStatesError={onGetStatesError}
             />
             <div className={`billing-info-container ${theme}`}>
               {!isLoggedIn && (
@@ -341,6 +479,7 @@ export const BillingInfoContainer = ({
                       className="login-register-button"
                       type="button"
                       onClick={() => {
+                        onLogin()
                         setShowModalLogin(true)
                       }}
                     >
@@ -396,6 +535,9 @@ export const BillingInfoContainer = ({
                                 if (el.name === 'holderAge' && !showDOB) {
                                   return false
                                 }
+                                if (el.name === 'brand_opt_in' && hideOptIn) {
+                                  return false
+                                }
                                 return true
                               }),
                               element =>
@@ -445,20 +587,80 @@ export const BillingInfoContainer = ({
                   </SectionContainer>
                 )
               })}
-              <div
-                style={{
-                  display: 'flex',
-                  padding: 20,
-                  justifyContent: 'center',
-                }}
-              >
-                <Button
+              
+              {showTicketHolderName && (
+                <>
+                  <p>{ticketHoldersFields.label}</p>
+                  {_map(ticketsQuantity, (_item, index) => (
+                    <div key={_item}>
+                      <h5>Ticket {index + 1}</h5>
+                      {_map(ticketHoldersFields.fields, group => {
+                        const { groupClassname, groupItems } = group
+                        return (
+                          <div key={group.id}>
+                            <div className={groupClassname}>
+                              {_map(groupItems, element => (
+                                <div
+                                  className={element.className}
+                                  key={`${element.name}-${index}`}
+                                >
+                                  <Field
+                                    name={`${element.name}-${index}`}
+                                    key={`${element.name}-${index}`}
+                                    label={element.label}
+                                    type={element.type}
+                                    required={true}
+                                    component={
+                                      element.type === 'checkbox'
+                                        ? CheckboxField
+                                        : CustomField
+                                    }
+                                    validate={combineValidators(
+                                      element.required
+                                        ? requiredValidator
+                                        : () => {},
+                                      element.onValidate
+                                        ? element.onValidate
+                                        : () => {}
+                                    )}
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  ))}
+                </>
+              )}
+              {conditions?.map(checkbox => (
+                <div className={'billing-info-container__singleField'} key={checkbox.id}>
+                  <div className="width-fc">
+                    <Field
+                      name={checkbox.id}
+                      label={checkbox.text}
+                      type={'checkbox'}
+                      required={true}
+                      component={CheckboxField}
+                      validate={combineValidators(requiredValidator)}
+                    />
+                  </div>
+                </div>
+              ))}
+              <div className="button-container">
+                <LoadingButton
                   type="submit"
                   variant="contained"
                   className="login-register-button"
+                  loadingIndicator={
+                    <CircularProgress color="inherit" size={26} />
+                  }
+                  loading={props.isSubmitting}
+                  disabled={props.isSubmitting}
                 >
                   {buttonName}
-                </Button>
+                </LoadingButton>
               </div>
             </div>
           </Form>
@@ -471,10 +673,14 @@ export const BillingInfoContainer = ({
           }}
           onLogin={() => {
             setShowModalLogin(false)
+            setUserExpired(false)
           }}
           alreadyHasUser={alreadyHasUser}
           userExpired={userExpired}
-          setUserExpired={setUserExpired}
+          onAuthorizeSuccess={onAuthorizeSuccess}
+          onAuthorizeError={onAuthorizeError}
+          onGetProfileDataSuccess={onGetProfileDataSuccess}
+          onGetProfileDataError={onGetProfileDataError}
         />
       )}
       {showModalRegister && (
@@ -485,6 +691,8 @@ export const BillingInfoContainer = ({
           onRegister={() => {
             setShowModalRegister(false)
           }}
+          onGetProfileDataSuccess={onGetProfileDataSuccess}
+          onGetProfileDataError={onGetProfileDataError}
         />
       )}
     </>

package/src/components/billing-info-container/style.css

@@ -1,3 +1,9 @@
+.button-container {
+  display: flex;
+  padding: 20px;
+  justify-content: center;
+}
+
 .billing-info-container {
   max-width: 800px;
   margin: 0 auto;
@@ -84,4 +90,13 @@ button {
 .login-register-block {
   display: flex;
   justify-content: space-between;
+}
+
+@media only screen and (max-width: 820px) {
+  .billing-info-container {
+    width: 90%;
+  }
+  .billing-info-container .main-header {
+    font-size: 1.5rem;
+  }
 }