tf-checkout-react 1.0.42 → 1.0.46

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

@@ -6,7 +6,7 @@ export interface IGroupItem {
     className?: string;
     required?: boolean;
     component?: ReactNode | JSX.Element | HTMLElement;
-    onValidate: (value: any) => void;
+    onValidate?: (value: any) => void;
     [key: string]: any;
 }
 export interface IFieldData {
@@ -14,6 +14,7 @@ export interface IFieldData {
     groupClassname?: string;
     groupLabel?: string | JSX.Element | HTMLElement;
     groupLabelClassName?: string;
+    id: number;
 }
 export interface IBillingInfoData {
     id: number | 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.42",
+  "version": "1.0.46",
   "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",

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,6 @@ 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)

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'
@@ -37,6 +38,7 @@ import {
 import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
+import { CircularProgress } from '@mui/material'
 
 // const TTFLOGO = require('./logo-ttf.png')
 
@@ -55,13 +57,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 +107,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 +128,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 +154,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 +165,7 @@ const LogicRunner: FC<{
             }
             setValues(mappedValues)
             setUserValues(mappedValues)
-          } catch (e) {
-            console.log(e)
-          }
+          } catch (e) {}
         }
       }
     }
@@ -135,10 +179,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 +218,7 @@ export const BillingInfoContainer = ({
   const [alreadyHasUser, setAlreadyHasUser] = useState(false)
   const [userExpired, setUserExpired] = useState(false)
   const [showModalRegister, setShowModalRegister] = useState(false)
+  const [ticketsQuantity, setTicketsQuantity] = useState(1)
   const [userValues, setUserValues] = useState<any>({
     firstName: '',
     lastName: '',
@@ -183,13 +246,28 @@ export const BillingInfoContainer = ({
   const showTicketHolderName = getQueryVariable('names_required') === 'true'
   const optedInFieldValue: boolean = _get(cartInfoData, 'optedIn', false)
 
+  const getQuantity = (cart: any = []) => {
+    let qty: any = 0
+    cart.forEach((item: any) => {
+      qty += +item.quantity
+    })
+    return qty
+  }
   // 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(getQuantity(cart))
+      onGetCartSuccess(res.data)
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetCartError(e)
+      }
+    }
   }
 
   // fetch user data
@@ -204,8 +282,13 @@ export const BillingInfoContainer = ({
           'user_data',
           JSON.stringify(profileDataObj)
         )
+        onGetProfileDataSuccess(userDataResponse.data)
       }
-    } catch (e) {}
+    } catch (e) {
+      if (axios.isAxiosError(e)) {
+        onGetProfileDataError(e)
+      }
+    }
   }
 
   useEffect(() => {
@@ -214,14 +297,21 @@ export const BillingInfoContainer = ({
 
     // 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),
-        }))
-      )
+      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)
+        }
+      }
     }
 
     if (!(countries && countries.length)) {
@@ -232,14 +322,18 @@ export const BillingInfoContainer = ({
   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 +350,7 @@ export const BillingInfoContainer = ({
                 }
               }
               const checkoutBody = createCheckoutDataBody(
+                ticketsQuantity,
                 values,
                 { emailLogged, firstNameLogged, lastNameLogged },
                 showDOB
@@ -266,12 +361,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 +416,7 @@ export const BillingInfoContainer = ({
             }
 
             const checkoutBody = createCheckoutDataBody(
+              ticketsQuantity,
               values,
               { emailLogged, firstNameLogged, lastNameLogged },
               showDOB
@@ -294,20 +428,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 +436,7 @@ export const BillingInfoContainer = ({
                   setShowModalLogin(true)
                 }
               }
+              onSubmitError(e)
             }
           }
         }}
@@ -328,6 +449,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 +464,7 @@ export const BillingInfoContainer = ({
                       className="login-register-button"
                       type="button"
                       onClick={() => {
+                        onLogin()
                         setShowModalLogin(true)
                       }}
                     >
@@ -364,7 +488,7 @@ export const BillingInfoContainer = ({
                 return (
                   <SectionContainer key={id}>
                     <p className={labelClassName}>{label}</p>
-                    {_map(fields, (group, index) => {
+                    {_map(fields, group => {
                       const {
                         groupClassname,
                         groupItems,
@@ -372,7 +496,7 @@ export const BillingInfoContainer = ({
                         groupLabelClassName,
                       } = group
                       return (
-                        <div key={index}>
+                        <SectionContainer key={group.id}>
                           {!isLoggedIn && (
                             <div className={groupLabelClassName}>
                               {groupLabel}
@@ -439,26 +563,72 @@ export const BillingInfoContainer = ({
                                 )
                             )}
                           </div>
-                        </div>
+                        </SectionContainer>
                       )
                     })}
                   </SectionContainer>
                 )
               })}
-              <div
-                style={{
-                  display: 'flex',
-                  padding: 20,
-                  justifyContent: 'center',
-                }}
-              >
-                <Button
+
+              {showTicketHolderName && (
+                <div>
+                  <p>{ticketHoldersFields.label}</p>
+                  {_map(new Array(ticketsQuantity), (_item, index) => (
+                    <div key={index}>
+                      <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>
+                  ))}
+                </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 +641,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 +659,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;
+  }
 }