tf-checkout-react 1.3.26 → 1.3.28

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.26",
+  "version": "1.3.28",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -110,6 +110,7 @@ export interface IBillingInfoPage {
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
   brandOptIn?: boolean;
+  showPoweredByImage?: boolean;
 }
 
 const LogicRunner: FC<{
@@ -247,6 +248,7 @@ export const BillingInfoContainer = React.memo(
     showForgotPasswordButton = false,
     showSignUpButton = false,
     brandOptIn = false,
+    showPoweredByImage = false,
   }: IBillingInfoPage) => {
     const [isNewUser, setIsNewUser] = useState(false)
     const themeMui = createTheme(themeOptions)
@@ -713,7 +715,7 @@ export const BillingInfoContainer = React.memo(
                   <div className="account-actions-block">
                     <div className="action-item">
                       <div>{accountInfoTitle}</div>
-                      <div>Login & skip ahead:</div>
+                      <div>Log in & skip ahead:</div>
                     </div>
                     <div className="action-item login-block">
                       <button
@@ -728,7 +730,7 @@ export const BillingInfoContainer = React.memo(
                           }
                         }}
                       >
-                        Login
+                        Log in
                       </button>
                       {!hideLogo && (
                         <div className="logo-image-container">
@@ -1004,6 +1006,7 @@ export const BillingInfoContainer = React.memo(
               setShowModalLogin(false)
               setShowModalSignup(true)
             }}
+            showPoweredByImage={showPoweredByImage}
           />
         )}
         {showModalSignup && (
@@ -1017,6 +1020,7 @@ export const BillingInfoContainer = React.memo(
             }}
             onRegisterSuccess={onRegisterSuccess}
             onRegisterError={onRegisterError}
+            showPoweredByImage={showPoweredByImage}
           />
         )}
         {showModalForgotPassword && (
@@ -1030,6 +1034,7 @@ export const BillingInfoContainer = React.memo(
             }}
             onForgotPasswordSuccess={onForgotPasswordSuccess}
             onForgotPasswordError={onForgotPasswordError}
+            showPoweredByImage={showPoweredByImage}
           />
         )}
       </ThemeProvider>

package/src/components/common/DatePickerField.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
+import { createTheme,ThemeProvider } from '@mui/material/styles'
 import { DatePicker } from '@mui/x-date-pickers'
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
+import React from 'react'
+
 import { CustomField } from './CustomField'
 
 const DATE_SIZE = 32
@@ -51,17 +51,17 @@ const compactStyleTheme = createTheme({
 })
 
 export interface IDatePickerFieldProps {
-  label: string
+  label: string;
 
-  field: FieldInputProps<any>
-  form: FormikProps<any>
-  theme: 'dark' | 'light'
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+  theme: 'dark' | 'light';
 
-  useCompact?: boolean
+  useCompact?: boolean;
 }
 
 interface IOtherProps {
-  [key: string]: any
+  [key: string]: any;
 }
 
 export const DatePickerField = ({
@@ -70,8 +70,7 @@ export const DatePickerField = ({
   form,
   theme,
   useCompact = true,
-}: IDatePickerFieldProps & IOtherProps) => {
-  return (
+}: IDatePickerFieldProps & IOtherProps) => (
     <ThemeProvider theme={useCompact ? compactStyleTheme : {}}>
       <LocalizationProvider dateAdapter={AdapterMoment}>
         <DatePicker
@@ -83,9 +82,8 @@ export const DatePickerField = ({
           showDaysOutsideCurrentMonth={true}
           disableFuture={true}
           inputFormat="DD/MM/YYYY"
-          mask="__/__/____" 
-          renderInput={params => {
-            return (
+          mask="__/__/____"
+          renderInput={(params: any) => (
               <CustomField
                 {...params}
                 inputProps={{ ...params.inputProps, placeholder: 'dd/mm/yyyy' }}
@@ -93,7 +91,7 @@ export const DatePickerField = ({
                 field={{
                   ...field, onChange: (evt: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>) => {
                     if (params.inputProps && params.inputProps.onChange) {
-                      params.inputProps.onChange(evt);
+                      params.inputProps.onChange(evt)
                     }
                   }
                 }}
@@ -101,10 +99,8 @@ export const DatePickerField = ({
                 label={label}
                 type="tel"
               />
-            )
-          }}
+            )}
         />
       </LocalizationProvider>
     </ThemeProvider>
   )
-}

package/src/components/common/PoweredBy.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export const PoweredBy = () => (
+  <div className="powered-container">
+    <div className='powered-text'>Powered By</div>
+    <img
+      className='powered-img'
+      alt="The Ticket Fairy"
+      src={"https://cdn-checkout.s3.us-east-2.amazonaws.com/IconTicketFairy.svg"}
+    />
+    <div className='powered-ttf'>
+      The<strong>Ticket</strong>Fairy
+    </div>
+  </div>
+)

package/src/components/forgotPasswordModal/index.tsx

@@ -1,17 +1,21 @@
-import React, { FC, useState } from 'react'
-import { Field, Form, Formik } from 'formik'
+import './style.css'
+
+import { Box, CircularProgress,Modal } from '@mui/material'
 import axios, { AxiosError } from 'axios'
-import { Modal, Box, CircularProgress } from '@mui/material'
-import { CustomField } from '../common/CustomField'
+import { Field, Form, Formik } from 'formik'
+import React, { FC, useState } from 'react'
 import * as Yup from 'yup'
+
 import { forgotPassword } from '../../api'
-import './style.css'
+import { CustomField } from '../common/CustomField'
+import { PoweredBy } from '../common/PoweredBy'
 
 interface IForgotPasswordProps {
   onClose: () => void;
   onLogin: () => void;
   onForgotPasswordSuccess: (res: any) => void;
   onForgotPasswordError: (e: AxiosError) => void;
+  showPoweredByImage?: boolean;
 }
 
 interface ValuesTypes {
@@ -41,6 +45,7 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
   onLogin = () => {},
   onForgotPasswordSuccess = () => {},
   onForgotPasswordError = () => {},
+  showPoweredByImage = false,
 }) => {
   const [loading, setLoading] = useState(false)
 
@@ -97,6 +102,7 @@ export const ForgotPasswordModal: FC<IForgotPasswordProps> = ({
                 <div className="login">
                   <span onClick={onLogin}>Back to Log In</span>
                 </div>
+                {showPoweredByImage ? <PoweredBy /> : null}
               </Form>
             )}
           </Formik>

package/src/components/loginModal/index.tsx

@@ -14,6 +14,7 @@ import {
   getProfileData,
 } from '../../api'
 import { requiredValidator } from '../../validators'
+import { PoweredBy } from '../common/PoweredBy'
 
 interface Props {
   onClose: () => void;
@@ -30,6 +31,7 @@ interface Props {
   logo?: string;
   showForgotPasswordButton?: boolean;
   showSignUpButton?: boolean;
+  showPoweredByImage?: boolean;
 }
 
 const style: React.CSSProperties = {
@@ -85,6 +87,7 @@ export const LoginModal: FC<Props> = ({
   logo,
   showForgotPasswordButton = false,
   showSignUpButton = false,
+  showPoweredByImage = false,
 }) => {
   const [error, setError] = useState('')
   return (
@@ -137,7 +140,7 @@ export const LoginModal: FC<Props> = ({
           >
             {props => (
               <Form onSubmit={props.handleSubmit}>
-                <div className="modal-title">Login</div>
+                <div className="modal-title">Log in</div>
                 <div className='login-logo-container'>
                   <img
                     className="login-logo-tff"
@@ -187,7 +190,7 @@ export const LoginModal: FC<Props> = ({
                     </Field>
                   </div>
                   <div className="login-action-button">
-                    <button type="submit">Login</button>
+                    <button type="submit">Log in</button>
                   </div>
                   {showForgotPasswordButton && (
                     <div className="forgot-password">
@@ -199,6 +202,7 @@ export const LoginModal: FC<Props> = ({
                       <span aria-hidden="true" onClick={onSignup}>Sign up</span>
                     </div>
                   )}
+                  {showPoweredByImage ? <PoweredBy /> : null}
                 </div>
               </Form>
             )}

package/src/components/registerModal/index.tsx

@@ -1,24 +1,29 @@
-import React, { FC } from 'react'
-import { AxiosError } from 'axios'
 import './style.css'
-import { getProfileData, register } from '../../api'
-import { Field, Form, Formik } from 'formik'
-import { requiredValidator } from '../../validators'
+
 import { TextField } from '@mui/material'
+import { AxiosError } from 'axios'
+import { Field, Form, Formik } from 'formik'
 import _get from 'lodash/get'
+import React, { FC } from 'react'
+
+import { getProfileData, register } from '../../api'
 import { CONFIGS } from '../../utils'
+import { requiredValidator } from '../../validators'
+import { PoweredBy } from '../common/PoweredBy'
 
 interface Props {
   onClose: () => void;
   onRegister: () => void;
   onGetProfileDataSuccess: (res: any) => void;
   onGetProfileDataError: (e: AxiosError) => void;
+  showPoweredByImage?: boolean;
 }
 
 export const RegisterModal: FC<Props> = ({
   onClose,
   onGetProfileDataSuccess = () => {},
   onGetProfileDataError = () => {},
+  showPoweredByImage = false,
 }) => (
   <div
     style={{
@@ -176,6 +181,7 @@ export const RegisterModal: FC<Props> = ({
             </div>
           </div>
           <button type="submit">Submit</button>
+          {showPoweredByImage ? <PoweredBy /> : null}
         </Form>
       )}
     </Formik>

package/src/components/signupModal/index.tsx

@@ -1,30 +1,34 @@
-import React, { FC, useState } from 'react'
+import './style.css'
+
+import { Box, CircularProgress,Modal } from '@mui/material'
 import axios, { AxiosError } from 'axios'
 import { Field, Form, Formik } from 'formik'
-import { Modal, Box, CircularProgress } from '@mui/material'
-import { CustomField } from '../common/CustomField'
-import * as Yup from 'yup'
 import _get from 'lodash/get'
-import { register, handleSetAccessToken } from '../../api'
-import './style.css'
+import React, { FC, useState } from 'react'
+import * as Yup from 'yup'
+
+import { handleSetAccessToken,register } from '../../api'
 import { CONFIGS } from '../../utils'
+import { CustomField } from '../common/CustomField'
+import { PoweredBy } from '../common/PoweredBy'
 
 interface ISignupProps {
-  onClose: () => void
-  onLogin: () => void
+  onClose: () => void;
+  onLogin: () => void;
   onRegisterSuccess: (value: {
     accessToken: string;
     refreshToken: string;
-  }) => void
-  onRegisterError: (e: AxiosError, email: string) => void
+  }) => void;
+  onRegisterError: (e: AxiosError, email: string) => void;
+  showPoweredByImage?: boolean;
 }
 
 interface ValuesTypes {
-  firstName: string
-  lastName: string
-  email: string
-  password: string
-  confirmPassword: string
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
 }
 
 const style: React.CSSProperties = {
@@ -58,6 +62,7 @@ export const SignupModal: FC<ISignupProps> = ({
   onLogin = () => {},
   onRegisterSuccess = () => {},
   onRegisterError = () => {},
+  showPoweredByImage = false,
 }) => {
   const [loading, setLoading] = useState(false)
 
@@ -90,7 +95,7 @@ export const SignupModal: FC<ISignupProps> = ({
         'data.data.attributes.refresh_token'
       )
       handleSetAccessToken(access_token_register)
-      
+
       const tokens = {
         accessToken: access_token_register,
         refreshToken,
@@ -183,8 +188,9 @@ export const SignupModal: FC<ISignupProps> = ({
                   </button>
                 </div>
                 <div className="login">
-                  <span onClick={onLogin}>Login</span>
+                  <span onClick={onLogin}>Log in</span>
                 </div>
+                {showPoweredByImage ? <PoweredBy /> : null}
               </Form>
             )}
           </Formik>

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -14,6 +14,7 @@ export interface IPromoCodeSectionProps {
   setCodeIsApplied: (value: boolean) => void;
   codeIsInvalid: boolean;
   setCodeIsInvalid: (value: boolean) => void;
+  promoText?: string;
 }
 
 export const PromoCodeSection = ({
@@ -25,7 +26,8 @@ export const PromoCodeSection = ({
   updateTickets,
   setCodeIsApplied,
   codeIsInvalid,
-  setCodeIsInvalid
+  setCodeIsInvalid,
+  promoText,
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!code.trim()
 
@@ -92,7 +94,7 @@ export const PromoCodeSection = ({
             setCodeIsInvalid(false)
           }}
         >
-          Got a promo code? Click here
+          {promoText ?? 'Got a promo code? Click here'}
         </Button>
       )}
       {showPromoInput && renderInputField()}

package/src/components/ticketsContainer/index.tsx

@@ -88,6 +88,7 @@ export interface IGetTickets {
   enableInfluencersSection?: boolean;
   enableAddOns?: boolean;
   ordersPath?: string;
+  promoText?: string;
 }
 
 export interface ITicket {
@@ -133,6 +134,7 @@ export const TicketsContainer = ({
   handleNotInvitedModalClose = _identity,
   handleInvalidLinkModalClose = _identity,
   ordersPath,
+  promoText,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState({} as ISelectedTickets)
   const isWindowDefined = typeof window !== 'undefined'
@@ -567,6 +569,7 @@ export const TicketsContainer = ({
                 updateTickets={updateTickets}
                 codeIsInvalid={codeIsInvalid}
                 setCodeIsInvalid={setCodeIsInvalid}
+                promoText={promoText}
               />
             ) : null}
             {wrappedActionsSectionComponent}

package/src/index.ts

@@ -15,4 +15,5 @@ export { RedirectModal } from './components/common/RedirectModal'
 export { RsvpContainer } from './components/rsvpContainer'
 export { ResetPasswordContainer } from './components/resetPasswordContainer'
 export { ForgotPasswordModal } from './components/forgotPasswordModal'
-export { AddonsContainter } from './components/addonsContainer'
+export { AddonsContainter } from './components/addonsContainer'
+export { PoweredBy } from './components/common/PoweredBy'