tf-checkout-react 1.0.96 → 1.0.98

package/src/components/ticketResaleModal/index.tsx

@@ -0,0 +1,210 @@
+import React from 'react'
+import { Field, Form, Formik } from 'formik'
+import * as yup from 'yup';
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button';
+import { RadioField } from '../common/RadioField'
+import { CheckboxField } from '../common/CheckboxField'
+import { CustomField } from '../common/CustomField'
+import SVG from 'react-inlinesvg'
+import { getImage } from '../../utils/getImage'
+import { ITicketTypes } from '../orderDetailsContainer/ticketsTable'
+import './style.css'
+
+interface Props {
+  ticket: ITicketTypes;
+  onClose: () => void;
+  onSubmit: (values: InitialValuesTypes) => void;
+}
+
+export interface InitialValuesTypes {
+  to: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  confirm_email: string;
+  confirm: boolean;
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+}
+
+const schema = yup.object().shape({
+  to: yup.string().required(),
+  first_name: yup.string().when('to', {
+    is: (to: string) => to === 'friend',
+    then: yup.string().required('First Name is required')
+  }),
+  last_name: yup.string().when('to', {
+    is: (to: string) => to === 'friend',
+    then: yup.string().required('Last Name is required')
+  }),
+  email: yup.string().when('to', {
+    is: (to: string) => to === 'friend',
+    then: yup.string().email('Invalid email').required('Email is required')
+  }),
+  confirm_email: yup.string().when('to', {
+    is: (to: string) => to === 'friend',
+    then: yup.string().email('Invalid email').oneOf([yup.ref('email'), null], 'Emails must match').required('Confirm Email is required')
+  }),
+  confirm: yup.boolean().oneOf([true])
+})
+
+const initialValues: InitialValuesTypes = {
+  to: 'friend',
+  first_name: '',
+  last_name: '',
+  email: '',
+  confirm_email: '',
+  confirm: false
+}
+
+export const TicketResaleModal = ({
+  ticket = {} as ITicketTypes,
+  onClose = () => {},
+  onSubmit = () => {},
+}: Props) => {
+  const { hash, holder_name, event_name, currency, resale_fee_amount } = ticket
+  return (
+    <Modal
+      open={true}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className='resale-modal'
+    >
+      <Box style={style}>
+        <h3>Sell Ticket</h3>
+        <div>
+          <h3>Ticket Details</h3>
+          <div>
+            <h4>Event</h4>
+            <p>{event_name}</p>
+          </div>
+          <div>
+            <h4>Ticket Holder</h4>
+            <p>{holder_name}</p>
+          </div>
+          <div>
+            <h4>Ticket ID</h4>
+            <p>{hash}</p>
+          </div>
+        </div>
+        <div>
+          <h3>Sell to Whom</h3>
+          <Formik
+            initialValues={initialValues}
+            validationSchema={schema}
+            onSubmit={onSubmit}
+          >
+            {({ values, isValid, dirty }) => (
+              <Form>
+                <div>
+                  <Field
+                    name='to'
+                    label='I want to sell the ticket to someone I know'
+                    type='radio'
+                    value='friend'
+                    component={RadioField}
+                  />
+                  {values.to === 'friend' && (
+                    <div className='sell-to-friend'>
+                      <div className='user-info-box'>
+                        <div className='field-box'>
+                          <div className='icon'>
+                            <SVG
+                              src={getImage('user.svg')}
+                              width='24'
+                              height='24'
+                            />
+                          </div>
+                          <Field
+                            name='first_name'
+                            label='First Name'
+                            type='text'
+                            component={CustomField}
+                          />
+                        </div>
+                        <div className='field-box'>
+                          <div className='empty-box' />
+                          <Field
+                            name='last_name'
+                            label='Last Name'
+                            type='text'
+                            component={CustomField}
+                          />
+                        </div>
+                      </div>
+                      <div className='email-info-box'>
+                        <div className='field-box'>
+                          <div className='icon'>
+                            <SVG
+                              src={getImage('email.svg')}
+                              width='24'
+                              height='24'
+                            />
+                          </div>
+                          <Field
+                            name='email'
+                            label='Email address'
+                            type='text'
+                            component={CustomField}
+                          />
+                        </div>
+                        <div className='field-box'>
+                          <div className='empty-box' />
+                          <Field
+                            name='confirm_email'
+                            label='Confirm Email address'
+                            type='text'
+                            component={CustomField}
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+                <div>
+                  <Field
+                    name='to'
+                    label='I will sell my ticket to anyone who wants to buy it'
+                    type='radio'
+                    value='anyone'
+                    component={RadioField}
+                  />
+                </div>
+                <div>
+                  <h4>Terms of Resale</h4>
+                  <p>I confirm that I want to sell this ticket and that, if someone chooses to buy it, I will no longer own it or have the right to ask for it back.</p>
+                  <p>I also understand that, if no one chooses to buy it, it remains my property, is valid for entry to <strong>{event_name}</strong> and I will not receive any refund.</p>
+                  <p>If my ticket is sold, the original card I used to buy my ticket will be refunded with the original amount paid, minus a small handling fee of <strong>{currency + resale_fee_amount}</strong>, and that any existing refunds due to me for referring sales for this event are no longer valid.</p>
+                  <Field
+                    name='confirm'
+                    label='I agree'
+                    type='checkbox'
+                    component={CheckboxField}
+                  />
+                </div>
+                <div className="resale-action-button">
+                  <Button type="submit" disabled={!(isValid && dirty)}>Sell Ticket</Button>
+                </div>
+              </Form>
+            )}
+          </Formik>
+        </div>
+      </Box>
+    </Modal>
+  )
+}

package/src/components/ticketResaleModal/style.css

@@ -0,0 +1,28 @@
+.resale-modal .field-box {
+  margin-bottom: 10px;
+  display: flex;
+}
+.resale-modal .field-box .icon {
+  height: 56px;
+  min-width: 44px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.resale-modal .field-box .empty-box  {
+  min-width: 44px;
+}
+.resale-modal .resale-action-button button {
+  width: 100%;
+  color: white;
+  cursor: pointer;
+  background-color: #212529;
+}
+.resale-modal .resale-action-button button[disabled] {
+  opacity: .7;
+}
+.resale-modal .resale-action-button button:hover {
+  width: 100%;
+  background-color: #505050;
+  border-color: #505050;
+}

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Button from 'react-bootstrap/Button'
 import SVG from 'react-inlinesvg'
 import { getImage } from '../../utils/getImage'
+import { Loader } from '../common/index'
 
 export interface IPromoCodeSectionProps {
   promoCode: string;
@@ -10,6 +11,7 @@ export interface IPromoCodeSectionProps {
   isPromotionsEnabled: boolean;
   isAllTicketsSoldOut: boolean;
   isAccessCodeEnabled?: boolean;
+  isPromoLoading?: boolean;
   setPromoCode: (value: string) => void;
   setPromoCodeUpdated: (value: string) => void;
   setShowPromoInput: (value: boolean) => void;
@@ -24,6 +26,7 @@ export const PromoCodeSection = ({
   setPromoCodeUpdated,
   setShowPromoInput,
   isAccessCodeEnabled,
+  isPromoLoading,
 }: IPromoCodeSectionProps) => {
   const isPromoCodeHasValue = !!promoCode.trim()
 
@@ -64,7 +67,7 @@ export const PromoCodeSection = ({
       )
   }
 
-  return (
+  return isPromoLoading ? <Loader /> : (
     <div >
       {promoCodeIsApplied ? (
         <div className="alert-info">

package/src/components/ticketsContainer/index.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import axios, { AxiosError } from 'axios'
+import { Loader } from '../common/index'
 import './style.css'
 
 import {
@@ -14,7 +15,6 @@ import _some from 'lodash/some'
 import _every from 'lodash/every'
 import _find from 'lodash/find'
 import _isEmpty from 'lodash/isEmpty'
-import CircularProgress from '@mui/material/CircularProgress'
 import Button from 'react-bootstrap/Button'
 import jwt_decode from 'jwt-decode'
 import { TicketsSection } from './TicketsSection'
@@ -28,14 +28,6 @@ import { createTheme, ThemeOptions } from '@mui/material'
 import { CSSProperties } from '@mui/styles'
 import { ReferralLogic } from './ReferralLogic'
 
-function Loader() {
-  return (
-    <div className="loader-container">
-      <CircularProgress />
-    </div>
-  )
-}
-
 interface CartSuccess {
   skip_billing_page: boolean;
   names_required: boolean;
@@ -101,6 +93,7 @@ export const TicketsContainer = ({
   const [event, setEvent] = useState<any>(null)
   const [showWaitingList, setShowWaitingList] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
+  const [isPromoLoading, setIsPromoLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
   const [promoCode, setPromoCode] = useState('')
   const [promoCodeUpdated, setPromoCodeUpdated] = useState(getQueryVariable('r') || queryPromoCode)
@@ -121,7 +114,7 @@ export const TicketsContainer = ({
   }, [])
 
   useEffect(() => {
-    !!eventId && getTicketsApi()
+    !!eventId && getTicketsApi(!!promoCodeUpdated)
   }, [eventId, promoCodeUpdated])
 
   const handleLogout = () => {
@@ -148,9 +141,10 @@ export const TicketsContainer = ({
     }
   }
 
-  async function getTicketsApi() {
+  async function getTicketsApi(isUpdateingPromoCode?: boolean) {
     try {
-      setIsLoading(true)
+      !isUpdateingPromoCode && setIsLoading(true)
+      setIsPromoLoading(true)
       const response = await getTickets(eventId, promoCodeUpdated)
       const eventResponse = await getEvent(eventId)
       if (response.data.success) {
@@ -172,6 +166,7 @@ export const TicketsContainer = ({
       }
     } finally {
       setIsLoading(false)
+      setIsPromoLoading(false)
     }
   }
 
@@ -352,6 +347,7 @@ export const TicketsContainer = ({
               isPromotionsEnabled={isPromotionsEnabled}
               isAccessCodeEnabled={isAccessCodeEnabled}
               isAllTicketsSoldOut={isAllTicketsSoldOut}
+              isPromoLoading={isPromoLoading}
             />
             {(isTicketOnSale || !event?.salesEnded) && (
               <Button

package/src/components/waitingList/index.tsx

@@ -2,7 +2,7 @@ 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/CustomField'
+import { CustomField } from '../common/index'
 import { addToWaitingList } from '../../api'
 import {
   combineValidators,

package/src/index.ts

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