tf-checkout-react 1.0.102 → 1.0.105

package/src/components/waitingList/index.tsx

@@ -1,178 +1,178 @@
-import React, { useState } from 'react'
-import Button from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-import { Field, Form, Formik } from 'formik'
-import { CustomField } from '../common/index'
-import { addToWaitingList } from '../../api'
-import {
-  combineValidators,
-  requiredValidator,
-  emailValidator,
-} from '../../validators'
-import { ErrorFocus } from '../../utils/formikErrorFocus'
-
-import './style.css'
-
-interface WaitingListProps {
-  tickets: any;
-  eventId: number;
-}
-
-interface WaitingListFields {
-  ticketTypeId: string;
-  quantity: string;
-  firstName: string;
-  lastName: string;
-  email: string;
-}
-
-const generateQuantity = (n: number) => {
-  const quantityList = []
-  for (let i = 1; i <= n; i++) {
-    quantityList.push({ label: i, value: i })
-  }
-  return quantityList
-}
- 
-const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
-  const isWindowDefined = typeof window !== 'undefined'
-  const userData =
-    isWindowDefined && window.localStorage.getItem('user_data')
-      ? JSON.parse(window.localStorage.getItem('user_data') || '')
-      : {}
-
-  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
-  const [loading, setLoading] = useState(false)
-  const ticketTypesList = Object.values(tickets).map((d: any) => ({
-    label: d.displayName,
-    value: d.id,
-  }))
-
-  const showTicketsField = Boolean(ticketTypesList.length)
-
-  const handleSubmit = async (values: WaitingListFields) => {
-    try {
-      setLoading(true)
-      const requestData = {
-        data: {
-          attributes: values,
-        },
-      }
-      const { data } = await addToWaitingList(eventId, requestData)
-
-      if (data.success) {
-        setShowSuccessMessage(true)
-      }
-    } catch (error) {
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <div className="waiting-list">
-      {showSuccessMessage ? (
-        <div className="success-message">
-          <p className="added-success-message">You've been added to the waiting list!</p>
-          <p>You'll be notified if tickets become available.</p>
-        </div>
-      ) : (
-        <>
-          <h2>WAITING LIST</h2>
-          <Formik
-            initialValues={{
-              ticketTypeId: '',
-              quantity: '',
-              firstName: userData.first_name || '',
-              lastName: userData.last_name || '',
-              email: userData.email || '',
-            }}
-            onSubmit={handleSubmit}
-          >
-            <Form>
-              <ErrorFocus />
-              {showTicketsField && (
-                <>
-                  <div className="field-item">
-                    <Field
-                      name="ticketTypeId"
-                      label="Type of Ticket"
-                      type="select"
-                      component={CustomField}
-                      selectOptions={[
-                        { label: 'Type of Ticket', value: '', disabled: true },
-                        ...ticketTypesList,
-                      ]}
-                    />
-                  </div>
-                  <div className="field-item">
-                    <Field
-                      name="quantity"
-                      label="Quantity Requested"
-                      type="select"
-                      component={CustomField}
-                      selectOptions={[
-                        {
-                          label: 'Quantity Requested',
-                          value: '',
-                          disabled: true,
-                        },
-                        ...generateQuantity(10),
-                      ]}
-                    />
-                  </div>
-                </>
-              )}
-              <div className="field-item">
-                <Field
-                  name="firstName"
-                  label="First name"
-                  validate={(value: string) =>
-                    requiredValidator(value, 'Please enter your First name')
-                  }
-                  component={CustomField}
-                />
-              </div>
-              <div className="field-item">
-                <Field
-                  name="lastName"
-                  label="Last name"
-                  validate={(value: string) =>
-                    requiredValidator(value, 'Please enter your Last name')
-                  }
-                  component={CustomField}
-                />
-              </div>
-              <div className="field-item">
-                <Field
-                  name="email"
-                  label="Email"
-                  validate={combineValidators(
-                    (value: string) =>
-                      requiredValidator(value, 'Please enter your Email'),
-                    (value: string) => emailValidator(value)
-                  )}
-                  component={CustomField}
-                />
-              </div>
-
-              <Button
-                type="submit"
-                variant="contained"
-                className="waiting-list-button"
-              >
-                {loading ? (
-                  <CircularProgress size="22px" />
-                ) : (
-                  'ADD TO WAITING LIST'
-                )}
-              </Button>
-            </Form>
-          </Formik>
-        </>
-      )}
-    </div>
-  )
-}
-
-export default WaitingList
+import React, { useState } from 'react'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import { Field, Form, Formik } from 'formik'
+import { CustomField } from '../common/index'
+import { addToWaitingList } from '../../api'
+import {
+  combineValidators,
+  requiredValidator,
+  emailValidator,
+} from '../../validators'
+import { ErrorFocus } from '../../utils/formikErrorFocus'
+
+import './style.css'
+
+interface WaitingListProps {
+  tickets: any;
+  eventId: number;
+}
+
+interface WaitingListFields {
+  ticketTypeId: string;
+  quantity: string;
+  firstName: string;
+  lastName: string;
+  email: string;
+}
+
+const generateQuantity = (n: number) => {
+  const quantityList = []
+  for (let i = 1; i <= n; i++) {
+    quantityList.push({ label: i, value: i })
+  }
+  return quantityList
+}
+ 
+const WaitingList = ({ tickets = {}, eventId }: WaitingListProps) => {
+  const isWindowDefined = typeof window !== 'undefined'
+  const userData =
+    isWindowDefined && window.localStorage.getItem('user_data')
+      ? JSON.parse(window.localStorage.getItem('user_data') || '')
+      : {}
+
+  const [showSuccessMessage, setShowSuccessMessage] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const ticketTypesList = Object.values(tickets).map((d: any) => ({
+    label: d.displayName,
+    value: d.id,
+  }))
+
+  const showTicketsField = Boolean(ticketTypesList.length)
+
+  const handleSubmit = async (values: WaitingListFields) => {
+    try {
+      setLoading(true)
+      const requestData = {
+        data: {
+          attributes: values,
+        },
+      }
+      const { data } = await addToWaitingList(eventId, requestData)
+
+      if (data.success) {
+        setShowSuccessMessage(true)
+      }
+    } catch (error) {
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="waiting-list">
+      {showSuccessMessage ? (
+        <div className="success-message">
+          <p className="added-success-message">You've been added to the waiting list!</p>
+          <p>You'll be notified if tickets become available.</p>
+        </div>
+      ) : (
+        <>
+          <h2>WAITING LIST</h2>
+          <Formik
+            initialValues={{
+              ticketTypeId: '',
+              quantity: '',
+              firstName: userData.first_name || '',
+              lastName: userData.last_name || '',
+              email: userData.email || '',
+            }}
+            onSubmit={handleSubmit}
+          >
+            <Form>
+              <ErrorFocus />
+              {showTicketsField && (
+                <>
+                  <div className="field-item">
+                    <Field
+                      name="ticketTypeId"
+                      label="Type of Ticket"
+                      type="select"
+                      component={CustomField}
+                      selectOptions={[
+                        { label: 'Type of Ticket', value: '', disabled: true },
+                        ...ticketTypesList,
+                      ]}
+                    />
+                  </div>
+                  <div className="field-item">
+                    <Field
+                      name="quantity"
+                      label="Quantity Requested"
+                      type="select"
+                      component={CustomField}
+                      selectOptions={[
+                        {
+                          label: 'Quantity Requested',
+                          value: '',
+                          disabled: true,
+                        },
+                        ...generateQuantity(10),
+                      ]}
+                    />
+                  </div>
+                </>
+              )}
+              <div className="field-item">
+                <Field
+                  name="firstName"
+                  label="First name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your First name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="lastName"
+                  label="Last name"
+                  validate={(value: string) =>
+                    requiredValidator(value, 'Please enter your Last name')
+                  }
+                  component={CustomField}
+                />
+              </div>
+              <div className="field-item">
+                <Field
+                  name="email"
+                  label="Email"
+                  validate={combineValidators(
+                    (value: string) =>
+                      requiredValidator(value, 'Please enter your Email'),
+                    (value: string) => emailValidator(value)
+                  )}
+                  component={CustomField}
+                />
+              </div>
+
+              <Button
+                type="submit"
+                variant="contained"
+                className="waiting-list-button"
+              >
+                {loading ? (
+                  <CircularProgress size="22px" />
+                ) : (
+                  'ADD TO WAITING LIST'
+                )}
+              </Button>
+            </Form>
+          </Formik>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default WaitingList

package/src/components/waitingList/style.css

@@ -1,27 +1,27 @@
-.waiting-list {
-  padding: 17px 35px 20px;
-}
-.waiting-list .field-item {
-  margin-bottom: 30px;
-}
-.waiting-list .waiting-list-button {
-  width: 100% !important;
-}
-.waiting-list .waiting-list-button:hover {
-  background-color: #505050;
-}
-.waiting-list .success-message {
-  text-align: center;
-  margin-bottom: 15px;
-}
-.waiting-list .success-message p {
-  margin: 0;
-}
-.waiting-list .no-tickets-text {
-  text-align: center;
-  font-weight: bold;
-}
-.waiting-list .added-success-message {
-  font-size: 22px;
-  margin-bottom: 10px;
+.waiting-list {
+  padding: 17px 35px 20px;
+}
+.waiting-list .field-item {
+  margin-bottom: 30px;
+}
+.waiting-list .waiting-list-button {
+  width: 100% !important;
+}
+.waiting-list .waiting-list-button:hover {
+  background-color: #505050;
+}
+.waiting-list .success-message {
+  text-align: center;
+  margin-bottom: 15px;
+}
+.waiting-list .success-message p {
+  margin: 0;
+}
+.waiting-list .no-tickets-text {
+  text-align: center;
+  font-weight: bold;
+}
+.waiting-list .added-success-message {
+  font-size: 22px;
+  margin-bottom: 10px;
 }

package/src/env.ts

@@ -1,20 +1,20 @@
-// preview
-export const ENV = {
-  EVENT_ID: 160,
-  BASE_URL: 'https://preview.ttf.fluxtech.me',
-  CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
-  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY:
-    'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
-  BRAND_SLUG: 'mana-onetree-testing-brand'
-}
-
-// prod
-export const ENV_PROD = {
-  EVENT_ID: 9766,
-  BASE_URL: 'https://www.ticketfairy.com',
-  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
-  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
-  STRIPE_PUBLISHABLE_KEY:
-    'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5',
-}
+// preview
+export const ENV = {
+  EVENT_ID: 160,
+  BASE_URL: 'https://preview.ttf.fluxtech.me',
+  CLIENT_ID: '4792a61f2fcb49197ab4c2d2f44df570',
+  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
+  STRIPE_PUBLISHABLE_KEY:
+    'pk_test_51H4BkOGqveRD6EShliLrT9vd7mPOBPvQSuqmvc3wIinDqxWsCLeS2N7HonPPn6MhjU35ayYy5v4I6MLlD4jNWrd000NSgAF6UL',
+  BRAND_SLUG: 'mana-onetree-testing-brand'
+}
+
+// prod
+export const ENV_PROD = {
+  EVENT_ID: 9766,
+  BASE_URL: 'https://www.ticketfairy.com',
+  CLIENT_ID: 'e9d8f8922797b4621e562255afe90dbf',
+  CLIENT_SECRET: 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9',
+  STRIPE_PUBLISHABLE_KEY:
+    'pk_live_51JucaXAnOd2Grid07FqHOkqcoh90bbCYL5bG7OuyM5RtzUoolrFcHroCWici0G9w0YpqO7qsGz6WP7K6HHYw1yhz00cm7fj5n5',
+}

package/src/index.ts

@@ -1,13 +1,14 @@
-export { BillingInfoContainer } from './components/billing-info-container/index'
-export { PaymentContainer } from './components/paymentContainer/index'
-export { ConfirmationContainer } from './components/confirmationContainer/index'
-export { TicketsContainer } from './components/ticketsContainer/index'
-export {
-  currencyNormalizerCreator,
-  createFixedFloatNormalizer,
-} from './normalizers'
-export { LoginModal } from './components/loginModal'
-export { MyTicketsContainer } from './components/myTicketsContainer'
-export { OrderDetailsContainer } from './components/orderDetailsContainer'
-export { setConfigs } from './utils/setConfigs'
-export { TicketResaleContainer } from './components'
+export { BillingInfoContainer } from './components/billing-info-container/index'
+export { PaymentContainer } from './components/paymentContainer/index'
+export { ConfirmationContainer } from './components/confirmationContainer/index'
+export { TicketsContainer } from './components/ticketsContainer/index'
+export {
+  currencyNormalizerCreator,
+  createFixedFloatNormalizer,
+} from './normalizers'
+export { LoginModal } from './components/loginModal'
+export { MyTicketsContainer } from './components/myTicketsContainer'
+export { OrderDetailsContainer } from './components/orderDetailsContainer'
+export { setConfigs } from './utils/setConfigs'
+export { TicketResaleContainer } from './components'
+export { RedirectModal } from './components/common/RedirectModal'

package/src/normalizers/index.ts

@@ -1,46 +1,46 @@
-export const currencyNormalizerCreator = (value: string | number, currency: string) =>
-  !value ? '' : `${getCurrencySymbolByCurrency(currency)}${value}`
-
-export const createFixedFloatNormalizer = (fixedValue: number) => (value: string | number) =>
-  value || `${value}` === '0' ? (+value).toFixed(fixedValue) : ''
-
-export const getCurrencySymbolByCurrency = (currency = '') => {
-  switch (currency) {
-    case 'GBP':
-      return '£'
-    case 'EUR':
-      return '€'
-    case 'INR':
-      return '₹'
-    case 'JMD':
-      return 'J$'
-    case 'NZD':
-      return 'NZ$'
-    case 'MYR':
-      return 'RM'
-    case 'MXN':
-      return 'Mex$'
-    case 'SGD':
-      return 'S$'
-    case 'AUD':
-      return 'A$'
-    case 'ZAR':
-      return 'R'
-    case 'ke':
-      return 'Ksh'
-    case 'TRY':
-      return '₺'
-    case 'CAD':
-      return 'CA$'
-    case 'THB':
-      return '฿'
-    case 'ISK':
-      return 'Kr'
-    case 'SEK':
-      return 'kr'
-    default:
-      return 'US$'
-  }
-}
-
+export const currencyNormalizerCreator = (value: string | number, currency: string) =>
+  !value ? '' : `${getCurrencySymbolByCurrency(currency)}${value}`
+
+export const createFixedFloatNormalizer = (fixedValue: number) => (value: string | number) =>
+  value || `${value}` === '0' ? (+value).toFixed(fixedValue) : ''
+
+export const getCurrencySymbolByCurrency = (currency = '') => {
+  switch (currency) {
+    case 'GBP':
+      return '£'
+    case 'EUR':
+      return '€'
+    case 'INR':
+      return '₹'
+    case 'JMD':
+      return 'J$'
+    case 'NZD':
+      return 'NZ$'
+    case 'MYR':
+      return 'RM'
+    case 'MXN':
+      return 'Mex$'
+    case 'SGD':
+      return 'S$'
+    case 'AUD':
+      return 'A$'
+    case 'ZAR':
+      return 'R'
+    case 'ke':
+      return 'Ksh'
+    case 'TRY':
+      return '₺'
+    case 'CAD':
+      return 'CA$'
+    case 'THB':
+      return '฿'
+    case 'ISK':
+      return 'Kr'
+    case 'SEK':
+      return 'kr'
+    default:
+      return 'US$'
+  }
+}
+
 export const removePlusSign = (string = '') => string.replace('+', '')

package/src/types/billing-info-data.ts

@@ -1,37 +1,37 @@
-import { ReactNode } from 'react'
-
-export interface IGroupItem {
-  name: string;
-  label: string | JSX.Element;
-
-  // optional
-  type?: string;
-  className?: string;
-  required?: boolean;
-  component?: ReactNode | JSX.Element | HTMLElement;
-  onValidate?: (value: any) => void;
-  uniqueId?: string;
-
-  // aditional props
-  [key: string]: any;
-}
-
-export interface IFieldData {
-  groupItems: IGroupItem[];
-
-  // optional
-  groupClassname?: string;
-  groupLabel?: string | JSX.Element | HTMLElement;
-  groupLabelClassName?: string;
-  id: number;
-  uniqueId?: string;
-}
-export interface IBillingInfoData {
-  id: number | string;
-  fields: IFieldData[];
-
-  // optional
-  label?: string | JSX.Element;
-  labelClassName?: string;
-  uniqueId?: string;
-}
+import { ReactNode } from 'react'
+
+export interface IGroupItem {
+  name: string;
+  label: string | JSX.Element;
+
+  // optional
+  type?: string;
+  className?: string;
+  required?: boolean;
+  component?: ReactNode | JSX.Element | HTMLElement;
+  onValidate?: (value: any) => void;
+  uniqueId?: string;
+
+  // aditional props
+  [key: string]: any;
+}
+
+export interface IFieldData {
+  groupItems: IGroupItem[];
+
+  // optional
+  groupClassname?: string;
+  groupLabel?: string | JSX.Element | HTMLElement;
+  groupLabelClassName?: string;
+  id: number;
+  uniqueId?: string;
+}
+export interface IBillingInfoData {
+  id: number | string;
+  fields: IFieldData[];
+
+  // optional
+  label?: string | JSX.Element;
+  labelClassName?: string;
+  uniqueId?: string;
+}

package/src/types/payment-field.ts

@@ -1,7 +1,7 @@
-export interface IPaymentField {
-  label: string;
-  id: string;
-
-  className?: string;
-  normalizer?: any;
-}
+export interface IPaymentField {
+  label: string;
+  id: string;
+
+  className?: string;
+  normalizer?: any;
+}