tf-checkout-react 1.0.58 → 1.0.59

package/package.json

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

package/src/api/index.ts

@@ -215,7 +215,12 @@ export const getCountries = () => publicRequest.get('/countries/')
 
 export const getConfirmationData = (orderHash: string) => publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
 
-export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`)
+export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`) 
+
+export const getOrders = (page: number, limit: number, eventSlug: string) =>
+  publicRequest.get(`/v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}`)
+
+export const getOrderDetails = (orderId: string) => publicRequest.get(`/v1/account/order/${orderId}`) 
 
 export const addToWaitingList = (id: number, data: any) => publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
 

package/src/components/index.ts

@@ -2,3 +2,5 @@ export { BillingInfoContainer } from './billing-info-container'
 export { ConfirmationContainer } from './confirmationContainer'
 export { PaymentContainer } from './paymentContainer'
 export { TicketsContainer } from './ticketsContainer'
+export { MyTicketsContainer } from './myTicketsContainer'
+export { OrderDetailsContainer } from './orderDetailsContainer'

package/src/components/myTicketsContainer/index.tsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react'
+import './style.css'
+
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import TablePagination from '@mui/material/TablePagination'
+import CircularProgress from '@mui/material/CircularProgress'
+import TextField from '@mui/material/TextField'
+import Autocomplete from '@mui/material/Autocomplete'
+import _get from 'lodash/get'
+import MyTicketsRow, { RowItems } from './row'
+import tableConfig from './tableConfig'
+import { getOrders } from '../../api'
+
+interface MyTicketsTypes {
+  handleDetailsInfo: (id: string) => void;
+  onGetOrdersSuccess: (res: any) => void;
+  onGetOrdersError: (err: any) => void;
+}
+
+interface EventFilter {
+  event_name: string;
+  url_name: string;
+}
+
+export const MyTicketsContainer = ({
+  handleDetailsInfo = () => {},
+  onGetOrdersSuccess = () => {},
+  onGetOrdersError = () => {}
+}: MyTicketsTypes) => {
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [limit, setLimit] = useState(10)
+  const [filter, setFilter] = useState('')
+
+  //just once
+  useEffect(() => {
+    fetchData(1, limit, filter)
+  }, [])
+
+  const fetchData = async (page: number, limit: number, filter: string) => {
+    try {
+      setLoading(true)
+      const response = await getOrders(page, limit, filter)
+      onGetOrdersSuccess(response)
+
+      const data = _get(response, 'data.data.attributes')
+      data.page -= 1
+
+      setData(data)
+    } catch (error) {
+      onGetOrdersError(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChangePage = (_event: any, newPage: number) => {
+    fetchData(newPage + 1, limit, filter)
+  }
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    fetchData(1, +event.target.value, filter)
+    setLimit(+event.target.value)
+  }
+
+  const onChange = (_event: React.SyntheticEvent<Element, Event>, eventFilter: EventFilter | null) => {
+    fetchData(1, limit, eventFilter?.url_name || '' )
+    setFilter(eventFilter?.url_name || '')
+  }
+
+  return ( 
+    <div className='my-ticket'>
+      {loading && (
+        <div className='loading'>
+          <CircularProgress />
+        </div>
+      )}
+      {data && (
+        <>
+          <Autocomplete
+            disablePortal
+            id="combo-box-demo"
+            getOptionLabel={(option: EventFilter) => option.event_name}
+            onChange={onChange}
+            options={data.purchased_events}
+            sx={{ width: 300 }}
+            renderInput={(params) => <TextField {...params} label="Events" />}
+          />
+          <TableContainer component={Paper} className='my-ticket-table'>
+            <Table aria-label="collapsible table">
+              <TableHead>
+                <TableRow>
+                  {tableConfig().header.map((column: string, index: number) => (
+                    <TableCell key={index}>{column}</TableCell>
+                  ))}
+                  <TableCell />
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {data.orders?.map((row: RowItems) => (
+                  <MyTicketsRow key={row.id} row={row} handleDetailsInfo={handleDetailsInfo} />
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <TablePagination
+            rowsPerPageOptions={[10, 25, 100]}
+            component="div"
+            count={data.total_count}
+            rowsPerPage={limit}
+            page={data.page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/myTicketsContainer/row.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import TableRow from '@mui/material/TableRow'
+import TableCell from '@mui/material/TableCell'
+import tableConfig from './tableConfig'
+
+export interface RowItems {
+  id: string;
+  date: string;
+  image: string;
+  eventName: string;
+  amount: string;
+  currency: string;
+}
+
+interface RowPropsTypes {
+  row: RowItems;
+  handleDetailsInfo: (id: string) => void;
+}
+
+const Row = ({ row, handleDetailsInfo }: RowPropsTypes) => {
+  return (
+    <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+      {tableConfig().body.map((column: any, index: number) => (
+        <TableCell component="th" scope="row" key={index}>
+          {column(row)}
+        </TableCell>
+      ))}
+      <TableCell component="th" scope="row">
+        <button
+          type='button'
+          className="order-details-button"
+          onClick={() => handleDetailsInfo(row.id)}
+        >
+          Details
+        </button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default Row

package/src/components/myTicketsContainer/style.css

@@ -0,0 +1,40 @@
+.my-ticket {
+  padding: 30px;
+}
+.my-ticket-table {
+  margin-top: 30px;
+}
+.my-ticket .loading {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .4);
+}
+.my-ticket .event-info {
+  display: flex;
+  align-items: center;
+}
+.my-ticket thead th {
+  font-weight: 700;
+}
+.my-ticket .event-info img {
+  width: 50px;
+  margin-right: 10px;
+}
+.my-ticket .order-details-button {
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  background-color: #32325d;
+  transition: all 150ms ease;
+  cursor: pointer;
+  padding: 10px 14px;
+}
+.my-ticket .order-details-button:hover {
+  background-color: #505050;
+}

package/src/components/myTicketsContainer/tableConfig.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+interface EventInfoTypes {
+  image: string;
+  name: string;
+}
+
+const EventInfoItem = ({ image, name }: EventInfoTypes) => {
+  return (
+    <div className='event-info'>
+      <img src={image} alt="event" />
+      {name}
+    </div>
+  )
+}
+
+const tableConfig = (key?: string) => {
+  let config;
+  switch (key) {
+    default:
+      config = {
+        header: ['Order No.', 'Date', 'Event', 'Total'],
+        body: [
+          (row: any) => row.id,
+          (row: any) => row.date,
+          (row: any) => <EventInfoItem image={row.image} name={row.eventName} />,
+          (row: any) => row.currency + row.amount
+        ],
+      }
+  }
+  return config
+}
+
+export default tableConfig

package/src/components/orderDetailsContainer/index.tsx

@@ -0,0 +1,120 @@
+import React, { useState, useEffect } from 'react'
+import './style.css'
+
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+import CircularProgress from '@mui/material/CircularProgress'
+import _get from 'lodash/get'
+import _has from 'lodash/has'
+import { getOrderDetails } from '../../api'
+import TicketsTable from './ticketsTable'
+
+interface TicketTypes {
+  currency: string;
+  discount: string;
+  name: string;
+  price: string;
+  quantity: string;
+  total: string;
+}
+
+interface OrderDetailsTypes {
+  onGetOrdersSuccess: (res: any) => void;
+  onGetOrdersError: (err: any) => void;
+}
+
+const getTotal = (data: any) => {
+  if(!data?.total || !_has(data, 'items.ticket_types.length')) return ''
+  
+  return data.items.ticket_types[0].currency + data.total
+}
+
+export const OrderDetailsContainer = ({
+  onGetOrdersSuccess = () => {},
+  onGetOrdersError = () => {}
+}: OrderDetailsTypes) => {
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true)
+        const orderId = window.location.href.split('/').slice(-1)[0]
+        const response = await getOrderDetails(orderId)
+        onGetOrdersSuccess(response)
+
+        const data = _get(response, 'data.data.attributes')
+
+        setData(data)
+      } catch (error) {
+        onGetOrdersError(error)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  return (
+    <div className="order-details">
+      {loading ? (
+        <div className='loading'>
+          <CircularProgress />
+        </div>
+      ) : (
+        <>
+          <h1 className='layout-title'>Order Details</h1>
+          <div className='order-summary-box'>
+            <h4 className='sub-title'>Order Summary</h4>
+            <div>
+              <b>Your personal share link for this event is:{" "}</b>
+              <a href={data?.personal_share_link} target='_blank' rel='noreferrer'>{data?.personal_share_link}</a>
+            </div>
+            <TableContainer component={Paper}>
+              <Table aria-label="collapsible table">
+                <TableHead>
+                  <TableRow>
+                    <TableCell>Items</TableCell>
+                    <TableCell>Price</TableCell>
+                    <TableCell>Quantity</TableCell>
+                    <TableCell>Total</TableCell>
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {data?.items.ticket_types?.map((ticket: TicketTypes, index: number) => (
+                    <TableRow key={index}>
+                      <TableCell><b>Ticket Type: </b>{ticket.name}</TableCell>
+                      <TableCell>{ticket.currency + ticket.price}</TableCell>
+                      <TableCell>{ticket.quantity}</TableCell>
+                      <TableCell>{ticket.currency + ticket.total}</TableCell>
+                    </TableRow>
+                  ))}
+                  {data?.items.add_ons?.map((ticket: TicketTypes, index: number) => (
+                    <TableRow key={index}>
+                      <TableCell><b>Add-On: </b>{ticket.name}</TableCell>
+                      <TableCell>{ticket.currency + ticket.price}</TableCell>
+                      <TableCell>{ticket.quantity}</TableCell>
+                      <TableCell>{ticket.currency + ticket.total}</TableCell>
+                    </TableRow>
+                  ))}
+                  <TableRow className='total-row'>
+                    <TableCell />
+                    <TableCell />
+                    <TableCell>Total</TableCell>
+                    <TableCell>{getTotal(data)}</TableCell>
+                  </TableRow>
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </div>
+          <TicketsTable tickets={data.tickets} />
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/orderDetailsContainer/style.css

@@ -0,0 +1,53 @@
+.order-details {
+  max-width: 940px;
+  margin: 0 auto;
+}
+.order-details .loading {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .4);
+}
+.order-details .layout-title {
+  font-size: 24px;
+  font-weight: 400;
+}
+.order-details .sub-title {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 10px 0;
+}
+.order-details .order-summary-box {
+  margin-top: 30px;
+}
+.order-details .total-row td {
+  font-weight: 700;
+}
+.order-details th {
+  font-weight: 700;
+}
+.order-details .tickets-box {
+  margin-top: 30px;
+}
+.order-details .ticket-add-on-table {
+  background-color: #fcf8e3;;
+}
+.order-details .download-button {
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+  color: #fff;
+  background-color: #32325d;
+  font-size: 12px;
+  font-weight: 400;
+  transition: all 150ms ease;
+  padding: 8px 14px;
+}
+.order-details .download-button:hover {
+  background-color: #505050;
+}

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -0,0 +1,86 @@
+import React, { Fragment } from 'react'
+import Table from '@mui/material/Table'
+import TableBody from '@mui/material/TableBody'
+import TableCell from '@mui/material/TableCell'
+import TableContainer from '@mui/material/TableContainer'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+import Paper from '@mui/material/Paper'
+
+interface TicketsTableTypes {
+  tickets: any[];
+}
+
+interface TicketTypes {
+  add_ons: any[];
+  hash: string;
+  ticket_type: string;
+  holder_name: string;
+  status: string;
+  pdf_link: string;
+}
+
+interface AddOnTypes {
+  name: string;
+  status: string;
+}
+
+const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => {
+  return (
+    <div className='tickets-box'>
+      <h4 className='sub-title'>Your Tickets</h4>
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Ticket ID</TableCell>
+              <TableCell>Ticket Type</TableCell>
+              <TableCell>Ticket Holder Name</TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Download</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tickets.map((ticket: TicketTypes, index: number) => (
+              <Fragment key={index}>
+                <TableRow>
+                  <TableCell>{ticket.hash}</TableCell>
+                  <TableCell>{ticket.ticket_type}</TableCell>
+                  <TableCell>{ticket.holder_name}</TableCell>
+                  <TableCell>{ticket.status}</TableCell>
+                  <TableCell>
+                    <a className='download-button' href={ticket.pdf_link} download>Download</a>
+                  </TableCell>
+                </TableRow>
+                {!!ticket.add_ons?.length && (
+                  <TableRow>
+                    <TableCell colSpan={5}>
+                      <Table className='ticket-add-on-table'>
+                        <TableHead>
+                          <TableRow>
+                            <TableCell>Add-On</TableCell>
+                            <TableCell>Status</TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {ticket.add_ons.map((add_on: AddOnTypes, index: number) => (
+                            <TableRow key={index}>
+                              <TableCell>{add_on.name}</TableCell>
+                              <TableCell>{add_on.status}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}
+
+export default TicketsTable

package/src/components/ticketsContainer/index.tsx

@@ -40,6 +40,7 @@ export interface IGetTickets {
   onGetTicketsError: (e: AxiosError) => void;
 
   theme?: 'light' | 'dark';
+  queryPromoCode?: string;
 }
 
 export interface ITicket {
@@ -60,6 +61,7 @@ export const TicketsContainer = ({
   onGetTicketsSuccess = () => {},
   onGetTicketsError = () => {},
   theme = 'light',
+  queryPromoCode = ''
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -69,7 +71,7 @@ export const TicketsContainer = ({
   const [isLoading, setIsLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
   const [promoCode, setPromoCode] = useState('')
-  const [promoCodeUpdated, setPromoCodeUpdated] = useState('')
+  const [promoCodeUpdated, setPromoCodeUpdated] = useState(queryPromoCode)
   const [showPromoInput, setShowPromoInput] = useState(false)
   const [promoCodeIsApplied, setPromoCodeIsApplied] = useState(false)
 

package/src/components/waitingList/index.tsx

@@ -66,7 +66,6 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
 
   return (
     <div className="waiting-list">
-      <p className="no-tickets-text">No tickets are currently available for this event.</p>
       {showSuccessMessage ? (
         <div className="success-message">
           <p className="added-success-message">{`You've been added to the waiting list!`}</p>
@@ -74,6 +73,7 @@ const WaitingList = ({ tickets = {} }: WaitingListProps) => {
         </div>
       ) : (
         <>
+          <p className="no-tickets-text">No tickets are currently available for this event.</p>
           <h2>WAITING LIST</h2>
           <Formik
             initialValues={{

package/src/components/waitingList/style.css

@@ -18,6 +18,7 @@
 }
 .waiting-list .no-tickets-text {
   text-align: center;
+  font-weight: bold;
 }
 .waiting-list .added-success-message {
   font-size: 22px;