tf-checkout-react 1.6.6 → 1.7.2

package/src/components/registerModal/index.tsx

@@ -1,14 +1,15 @@
 import './style.css'
 
-import { TextField } from '@mui/material'
 import { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
 import _get from 'lodash/get'
+import _identity from 'lodash/identity'
 import React, { FC } from 'react'
 
 import { getProfileData, register } from '../../api'
 import { CONFIGS } from '../../utils'
 import { requiredValidator } from '../../validators'
+import { CustomField } from '../common/CustomField'
 import { PoweredBy } from '../common/PoweredBy'
 
 interface Props {
@@ -21,8 +22,8 @@ interface Props {
 
 export const RegisterModal: FC<Props> = ({
   onClose,
-  onGetProfileDataSuccess = () => {},
-  onGetProfileDataError = () => {},
+  onGetProfileDataSuccess = _identity,
+  onGetProfileDataError = _identity,
   showPoweredByImage = false,
 }) => (
   <div
@@ -54,14 +55,8 @@ export const RegisterModal: FC<Props> = ({
         bodyFormData.append('email', email)
         bodyFormData.append('password', password)
         bodyFormData.append('password_confirmation', confirmPassword)
-        bodyFormData.append(
-          'client_id',
-          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
-        )
-        bodyFormData.append(
-          'client_secret',
-          CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
-        )
+        bodyFormData.append('client_id', CONFIGS.CLIENT_ID)
+        bodyFormData.append('client_secret', CONFIGS.CLIENT_SECRET)
         await register(bodyFormData)
         let profileResponse = null
 
@@ -69,7 +64,7 @@ export const RegisterModal: FC<Props> = ({
           profileResponse = await getProfileData()
           onGetProfileDataSuccess(profileResponse.data)
         } catch (e) {
-          onGetProfileDataError(e.response)
+          onGetProfileDataError(e as AxiosError)
           return
         }
 
@@ -95,78 +90,58 @@ export const RegisterModal: FC<Props> = ({
             </button>
             <div className="register-container__twoFields">
               <div className="is-half">
-                <Field name={'firstName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'First Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="firstName"
+                  label="First Name"
+                  type="text"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
               <div className="is-half">
-                <Field name={'lastName'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Last Name'}
-                      type={'text'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="lastName"
+                  label="Last Name"
+                  type="text"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
             </div>
             <div className="register-container__singleField">
               <div className="">
-                <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>
             <div className="register-container__twoFields">
               <div className="is-half">
-                <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="is-half">
-                <Field name={'confirmPassword'} validate={requiredValidator()}>
-                  {({ field, meta }: { [key: string]: any }) => (
-                    <TextField
-                      label={'Confirm Passwod'}
-                      type={'password'}
-                      fullWidth
-                      error={!!meta.error && meta.touched}
-                      helperText={meta.touched && meta.error}
-                      {...field}
-                    />
-                  )}
-                </Field>
+                <Field
+                  name="confirmPassword"
+                  label="Confirm Password"
+                  type="password"
+                  component={CustomField}
+                  theme="light"
+                  validate={requiredValidator()}
+                />
               </div>
             </div>
           </div>

package/src/components/resetPasswordContainer/index.tsx

@@ -1,31 +1,38 @@
-import React, { FC, useState } from 'react'
-import { Field, Form, Formik } from 'formik'
+import './style.css'
+
 import { CircularProgress } from '@mui/material'
-import { CustomField } from '../common/CustomField'
 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'
+
 import { resetPassword } from '../../api'
-import './style.css'
+import { CustomField } from '../common/CustomField'
 
 interface IResetPasswordProps {
-  token?: string
-  onResetPasswordSuccess?: (res: any) => void
-  onResetPasswordError?: (e: AxiosError) => void
+  token?: string;
+  onResetPasswordSuccess?: (res: any) => void;
+  onResetPasswordError?: (e: AxiosError) => void;
 }
 
 const Schema = Yup.object().shape({
   password: Yup.string()
-    .min(6, 'Password must have 5+ characters')
-    .required('Required'),
-    password_confirmation: Yup.string()
+    .min(8, 'Password must have 8+ characters')
+    .required('Required')
+    .matches(
+      new RegExp('^(?=.*[@$!%*#?&])'),
+      'Password must contain at least one special character'
+    ),
+  password_confirmation: Yup.string()
     .required('Required')
     .oneOf([Yup.ref('password'), null], 'Passwords must match'),
 })
 
 export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
   token: tokenProps = '',
-  onResetPasswordSuccess = () => {},
-  onResetPasswordError = () => {},
+  onResetPasswordSuccess = _identity,
+  onResetPasswordError = _identity,
 }) => {
   const [loading, setLoading] = useState(false)
   return (
@@ -42,8 +49,7 @@ export const ResetPasswordContainer: FC<IResetPasswordProps> = ({
               token = tokenProps
             } else {
               if (typeof window !== 'undefined') {
-                const params: URLSearchParams = new URL(`${window.location}`)
-                  .searchParams
+                const params: URLSearchParams = new URL(`${window.location}`).searchParams
                 token = params.get('token')
               }
             }

package/src/components/seatMapContainer/TicketsSection.tsx

@@ -1,11 +1,11 @@
 import { CSSProperties } from '@emotion/serialize'
-import { createTheme, Select, SelectChangeEvent, ThemeOptions } from '@mui/material'
+import { Select, SelectChangeEvent, ThemeOptions } from '@mui/material'
 import CircularProgress from '@mui/material/CircularProgress'
 import FormControl from '@mui/material/FormControl'
 import InputLabel from '@mui/material/InputLabel'
 import MenuItem from '@mui/material/MenuItem'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 import Tooltip from '@mui/material/Tooltip'
-import { ThemeProvider } from '@mui/private-theming'
 import _find from 'lodash/find'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'

package/src/components/signupModal/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'
 
@@ -43,17 +44,23 @@ const SignupSchema = Yup.object().shape({
   firstName: Yup.string().required('Required'),
   lastName: Yup.string().required('Required'),
   email: Yup.string().email('Invalid email').required('Required'),
-  password: Yup.string().min(6, 'Password must have 5+ characters').required('Required'),
+  password: Yup.string()
+    .min(8, 'Password must have 8+ characters')
+    .required('Required')
+    .matches(
+      new RegExp('^(?=.*[@$!%*#?&])'),
+      'Password must contain at least one special character'
+    ),
   confirmPassword: Yup.string()
     .required('Required')
     .oneOf([Yup.ref('password'), null], 'Passwords must match'),
 })
 
 export const SignupModal: FC<ISignupProps> = ({
-  onClose = () => {},
-  onLogin = () => {},
-  onRegisterSuccess = () => {},
-  onRegisterError = () => {},
+  onClose = _identity,
+  onLogin = _identity,
+  onRegisterSuccess = _identity,
+  onRegisterError = _identity,
   showPoweredByImage = false,
 }) => {
   const [loading, setLoading] = useState(false)
@@ -89,7 +96,7 @@ export const SignupModal: FC<ISignupProps> = ({
     }
   }
 
-  const _onClose = loading ? () => {} : onClose
+  const _onClose = loading ? _identity : onClose
 
   return (
     <Modal

package/src/components/ticketResale/index.tsx

@@ -33,6 +33,7 @@ export const TicketResaleContainer = ({
         const params: URLSearchParams = new URL(`${window.location}`).searchParams
         const hash = params.get('invitation_hash') || orderHash || null
         const isDeclined = params.get('decline') || false
+        window.localStorage.removeItem('checkoutAdditionalConfigs')
 
         if (hash) {
           // Process of declining ticket purchase invitation
@@ -53,6 +54,12 @@ export const TicketResaleContainer = ({
           try {
             const response = await processTicket(hash)
             const event_id = _get(response.data.data.attributes, 'event_id')
+            const eventHasAddons = _get(response.data.data.attributes, 'has_add_on')
+            const invitationIncludesAddons = _get(response.data.data.attributes, 'include_add_on')
+            window.localStorage.setItem('checkoutAdditionalConfigs', JSON.stringify({
+              resale: true,
+              resaleWithAddons: eventHasAddons && invitationIncludesAddons,
+            }))
 
             onProcessTicketSuccess(response.data)
             if (defaultRedirection) {

package/src/components/ticketsContainer/InfoIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+const InfoIcon = ({ size = 17 }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={size}
+    height={size}
+    viewBox="0 0 17 17"
+    fill="none"
+  >
+    <circle
+      cx="8.5"
+      cy="8.5"
+      r="8"
+      stroke="black"
+      strokeWidth="1"
+    />
+    <rect
+      x="7.5"
+      y="4"
+      width="2"
+      height="2"
+      fill="black"
+    />
+    <rect
+      x="7.5"
+      y="7"
+      width="2"
+      height="5"
+      fill="black"
+    />
+  </svg>
+)
+
+export default InfoIcon

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -33,38 +33,39 @@ export const PromoCodeSection = ({
   showAlertIcons
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
+  const appliedPromoCode = window?.localStorage?.getItem('appliedPromoCode')
 
   const renderInputField = () => (
+    <div className="promo-code-block">
       <div className="promo-code-block">
-        <div className="promo-code-block">
-          <p className="promo-code-text">Promo code</p>
-        </div>
-        <input
-          className="promo-code-input"
-          placeholder=""
-          onChange={e => {
-            setCode(e.target.value)
-          }}
-          onKeyPress={event => {
-            if (event.key === 'Enter' && isPromoCodeHasValue) {
-              setShowPromoInput(false)
-              updateTickets(true, 'promo')
-            }
-          }}
-        />
-        <Button
-          className="promo-submit-button"
-          onClick={() => {
-            if (isPromoCodeHasValue) {
-              setShowPromoInput(false)
-              updateTickets(true, 'promo')
-            }
-          }}
-        >
-          APPLY
-        </Button>
+        <p className="promo-code-text">Promo code</p>
       </div>
-    )
+      <input
+        className="promo-code-input"
+        placeholder=""
+        onChange={e => {
+          setCode(e.target.value)
+        }}
+        onKeyPress={event => {
+          if (event.key === 'Enter' && isPromoCodeHasValue) {
+            setShowPromoInput(false)
+            updateTickets(true, 'promo')
+          }
+        }}
+      />
+      <Button
+        className="promo-submit-button"
+        onClick={() => {
+          if (isPromoCodeHasValue) {
+            setShowPromoInput(false)
+            updateTickets(true, 'promo')
+          }
+        }}
+      >
+        APPLY
+      </Button>
+    </div>
+  )
 
   return (
     <div>
@@ -81,6 +82,11 @@ export const PromoCodeSection = ({
           <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
+      {codeIsApplied ? (
+        <div className="alert-info">
+          <p className="promo-code-success">PROMO CODE: {appliedPromoCode}</p>
+        </div>
+      ) : null}
       {codeIsInvalid ? (
         <div className="alert-info fail">
           {showAlertIcons && (

package/src/components/ticketsContainer/TicketRow.tsx

@@ -83,7 +83,7 @@ export const TicketRow = ({
   // ticketTier.soldOut === false --> means that ticket is in the stock
   const isSoldOut =
     ticketTier.sold_out ||
-    !ticketTier.displayTicket ||
+    !(ticketTier.displayTicket || ticketTier.slotGroupId) ||
     ticketTier.soldOut ||
     ticketTier.soldOut === false