tf-checkout-react 1.0.67 → 1.0.71

package/src/components/loginModal/index.tsx

@@ -13,7 +13,7 @@ import { TextField } from '@mui/material'
 import Modal from '@mui/material/Modal'
 import Box from '@mui/material/Box'
 import './style.css'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 import axios from 'axios'
 
 interface Props {
@@ -25,6 +25,7 @@ interface Props {
   onAuthorizeError?: (e: AxiosError) => void;
   onGetProfileDataSuccess?: (res: any) => void;
   onGetProfileDataError?: (e: AxiosError) => void;
+  modalClassname?: string;
 }
 
 const style: React.CSSProperties = {
@@ -47,6 +48,7 @@ export const LoginModal: FC<Props> = ({
   onAuthorizeError = () => {},
   onGetProfileDataSuccess = () => {},
   onGetProfileDataError = () => {},
+  modalClassname = '',
 }) => {
   const [error, setError] = useState('')
   return (
@@ -55,6 +57,7 @@ export const LoginModal: FC<Props> = ({
       onClose={onClose}
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
+      className={`login-modal ${modalClassname}`}
     >
       <Box style={style}>
         <div>
@@ -73,11 +76,11 @@ export const LoginModal: FC<Props> = ({
                 bodyFormDataToken.append('grant_type', 'authorization_code')
                 bodyFormDataToken.append(
                   'client_id',
-                  ENV.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+                  CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
                 )
                 bodyFormDataToken.append(
                   'client_secret',
-                  ENV.CLIENT_SECRET ||
+                  CONFIGS.CLIENT_SECRET ||
                     'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
                 )
 
@@ -136,7 +139,11 @@ export const LoginModal: FC<Props> = ({
             {props => (
               <Form onSubmit={props.handleSubmit}>
                 <div className="modal-title">Login</div>
-                <img className="login-logo-tff" src="https://www.ticketfairy.com/resources/images/logo-ttf-black.svg" alt=""/>
+                <img
+                  className="login-logo-tff"
+                  src="https://www.ticketfairy.com/resources/images/logo-ttf-black.svg"
+                  alt=""
+                />
                 <div className="server_auth__error">{error}</div>
                 {alreadyHasUser && (
                   <p className="info-text-for-login">

package/src/components/paymentContainer/index.tsx

@@ -7,7 +7,7 @@ import { loadStripe } from '@stripe/stripe-js'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 
@@ -19,10 +19,9 @@ import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 
-const testId = ENV.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
+const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
 const stripePromise = loadStripe(
-  testId
-  // 'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5'
+  publishableKey
 )
 export interface IPaymentPage {
   paymentFields: IPaymentField[];

package/src/components/registerModal/index.tsx

@@ -6,7 +6,7 @@ import { Field, Form, Formik } from 'formik'
 import { requiredValidator } from '../../validators'
 import { TextField } from '@mui/material'
 import _get from 'lodash/get'
-import { ENV } from '../../env'
+import { CONFIGS } from '../../utils'
 
 interface Props {
   onClose: () => void;
@@ -57,11 +57,11 @@ export const RegisterModal: FC<Props> = ({
         bodyFormData.append('password_confirmation', confirmPassword)
         bodyFormData.append(
           'client_id',
-          ENV.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
+          CONFIGS.CLIENT_ID || 'e9d8f8922797b4621e562255afe90dbf'
         )
         bodyFormData.append(
           'client_secret',
-          ENV.CLIENT_SECRET ||
+          CONFIGS.CLIENT_SECRET ||
             'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
         )
         const resRegister = await register(bodyFormData)

package/src/components/stripePayment/index.tsx

@@ -168,10 +168,12 @@ const CheckoutForm = ({
         (item: any) => item?.checked === true
       )
       setAllowSubmit(allChecked)
+    } else {
+      setAllowSubmit(true)
     }
   }, [checkboxes])
 
-  const buttonIsDiabled = !stripe || !!error || isLoading
+  const buttonIsDiabled = !stripe || !!error || isLoading || !allowSubmit
 
   return (
     <div className="stripe_payment_container">
@@ -225,9 +227,7 @@ const CheckoutForm = ({
           </div>
         ))}
         <div
-          className={`payment_button ${
-            buttonIsDiabled || !allowSubmit ? 'disabled-payment-button' : ''
-          }`}
+          className={`payment_button ${buttonIsDiabled ? 'disabled-payment-button' : ''}`}
         >
           <button disabled={buttonIsDiabled} type="submit">
             {isLoading ? (

package/src/components/ticketsContainer/index.tsx

@@ -7,8 +7,6 @@ import _get from 'lodash/get'
 import _some from 'lodash/some'
 import _find from 'lodash/find'
 import _isEmpty from 'lodash/isEmpty'
-import _filter from 'lodash/filter'
-import _isObject from 'lodash/isObject'
 import CircularProgress from '@mui/material/CircularProgress'
 import Button from 'react-bootstrap/Button'
 import jwt_decode from 'jwt-decode'
@@ -185,7 +183,7 @@ export const TicketsContainer = ({
       ) : (
         <>
           {showWaitingList ? (
-            <WaitingList tickets={tickets} />
+            <WaitingList tickets={tickets} eventId={eventId} />
           ) : (
             <div>
               <TicketsSection

package/src/components/waitingList/index.tsx

@@ -9,13 +9,13 @@ import {
   requiredValidator,
   emailValidator,
 } from '../../validators'
-import { ENV } from '../../env'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 
 import './style.css'
 
 interface WaitingListProps {
   tickets: any;
+  eventId: number;
 }
 
 interface WaitingListFields {
@@ -34,7 +34,7 @@ const generateQuantity = (n: number) => {
   return quantityList
 }
 
-const WaitingList = ({ tickets = {} }: WaitingListProps) => {
+const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
   const [showSuccessMessage, setShowSuccessMessage] = useState(false)
   const [loading, setLoading] = useState(false)
   const ticketTypesList = Object.values(tickets).map((d: any) => ({
@@ -47,13 +47,12 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
   const handleSubmit = async (values: WaitingListFields) => {
     try {
       setLoading(true)
-      const id = ENV.EVENT_ID
       const requestData = {
         data: {
           attributes: values,
         },
       }
-      const { data } = await addToWaitingList(id, requestData)
+      const { data } = await addToWaitingList(eventId, requestData)
 
       if (data.success) {
         setShowSuccessMessage(true)
@@ -73,7 +72,9 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
         </div>
       ) : (
         <>
-          <p className="no-tickets-text">No tickets are currently available for this event.</p>
+          <p className="no-tickets-text">
+            No tickets are currently available for this event.
+          </p>
           <h2>WAITING LIST</h2>
           <Formik
             initialValues={{

package/src/env.ts

@@ -1,7 +1,7 @@
-// preview1
+// preview
 export const ENV_TEST = {
-  EVENT_ID: 3483,
-  BASE_URL: 'https://preview1.ttf.fluxtech.me/api',
+  EVENT_ID: 162,
+  BASE_URL: 'https://preview.ttf.fluxtech.me/api',
   CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
   CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
   STRIPE_PUBLISHABLE_KEY:

package/src/index.ts

@@ -9,3 +9,4 @@ export {
 export { LoginModal } from './components/loginModal'
 export { MyTicketsContainer } from './components/myTicketsContainer'
 export { OrderDetailsContainer } from './components/orderDetailsContainer'
+export { setConfigs } from './utils/setConfigs'

package/src/types/referral-promotion.ts

@@ -1,7 +1,7 @@
 export interface IReferralPromotion {
   label: string;
   price: string;
-  id: number | string;
+  id?: number | string;
 
   subLabel?: string;
 }

package/src/utils/index.ts

@@ -0,0 +1,3 @@
+export { setConfigs, CONFIGS } from './setConfigs'
+export { getQueryVariable } from './getQueryVariable'
+export { ErrorFocus } from './formikErrorFocus'

package/src/utils/setConfigs.ts

@@ -0,0 +1,21 @@
+import _forEach from 'lodash/forEach'
+import { publicRequest } from '../api'
+
+interface IConfigs {
+  BASE_URL: string;
+  CLIENT_ID: string;
+  CLIENT_SECRET: string;
+  STRIPE_PUBLISHABLE_KEY: string;
+
+  [key: string]: string;
+}
+
+export const CONFIGS: IConfigs = {} as IConfigs
+
+export const setConfigs = (configs: IConfigs) => {
+  _forEach(configs, (value, key) => {
+    CONFIGS[key] = value
+  })
+
+  publicRequest.setBaseUrl(CONFIGS.BASE_URL)
+}