tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/orderDetailsContainer/style.css

@@ -1,73 +1,73 @@
-.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);
-  z-index: 1400;
-}
-.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;
-  color: white;
-}
-.order-details th {
-  font-weight: 700;
-  color: white;
-}
-.order-details .tickets-box {
-  margin-top: 30px;
-}
-.order-details .ticket-add-on-table {
-  background-color: #fcf8e3;;
-}
-.order-details .action-button {
-  width: max-content;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: normal;
-  min-height: auto;
-  padding: 12px;
-  border: 1px solid white;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  background-color: #212529;
-  border-radius: 0;
-  color: #fff;
-  position: relative;
-  display: block;
-  cursor: pointer;
-  font-family: 'Bebas Neue';
-  text-transform: uppercase;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  outline: none;
-  text-decoration: none;
-}
-.order-details .download-button:hover {
-  background-color: #505050;
-}
-
-.order-details .personal-link {
-  padding: 20px 0;
-}
+.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, 0.4);
+  z-index: 1400;
+}
+.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;
+  color: white;
+}
+.order-details th {
+  font-weight: 700;
+  color: white;
+}
+.order-details .tickets-box {
+  margin-top: 30px;
+}
+.order-details .ticket-add-on-table {
+  background-color: #fcf8e3;
+}
+.order-details .action-button {
+  width: max-content;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: normal;
+  min-height: auto;
+  padding: 12px;
+  border: 1px solid white;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  background-color: #212529;
+  border-radius: 0;
+  color: #fff;
+  position: relative;
+  display: block;
+  cursor: pointer;
+  font-family: 'Bebas Neue';
+  text-transform: uppercase;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  text-decoration: none;
+}
+.order-details .download-button:hover {
+  background-color: #505050;
+}
+
+.order-details .personal-link {
+  padding: 20px 0;
+}

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -1,124 +1,177 @@
-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'
-import { downloadPDF } from '../../utils'
-
-interface IAddOnTypes {
-  name: string;
-  status: string;
-}
-export interface ITicketTypes {
-  add_ons?: IAddOnTypes[];
-  hash: string;
-  ticket_type: string;
-  holder_name: string;
-  status: string;
-  pdf_link: string;
-  is_sellable: boolean;
-  is_on_sale?: boolean;
-  event_name: string;
-  currency: string;
-  resale_fee_amount: number | string;
-}
-
-interface TicketsTableTypes {
-  tickets: ITicketTypes[];
-  handleSellTicket: (ticket: ITicketTypes) => void;
-  handleRemoveFromResale: (ticket: ITicketTypes) => void;
-}
-
-const TicketsTable = ({
-  tickets = [],
-  handleSellTicket = () => {},
-  handleRemoveFromResale = () => {}
-}: TicketsTableTypes) => (
-  <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>
-            <TableCell />
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {tickets.map((ticket: ITicketTypes, 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>
-                  <span
-                    aria-hidden={true}
-                    className="action-button"
-                    onClick={() => downloadPDF(ticket.pdf_link)}
-                  >
-                    Download
-                  </span>
-                </TableCell>
-                <TableCell>
-                  {ticket.is_sellable && (
-                    <span
-                      aria-hidden={true}
-                      className="action-button"
-                      onClick={() => handleSellTicket(ticket)}
-                    >
-                      Sell Ticket
-                    </span>
-                  )}
-                  {ticket.is_on_sale && (
-                    <span
-                      aria-hidden={true}
-                      className="action-button"
-                      onClick={() => handleRemoveFromResale(ticket)}
-                    >
-                      Remove from Resale
-                    </span>
-                  )}
-                </TableCell>
-              </TableRow>
-              {!!ticket.add_ons?.length && (
-                <TableRow>
-                  <TableCell colSpan={6}>
-                    <Table className="ticket-add-on-table">
-                      <TableHead>
-                        <TableRow>
-                          <TableCell>Add-On</TableCell>
-                          <TableCell>Status</TableCell>
-                        </TableRow>
-                      </TableHead>
-                      <TableBody>
-                        {ticket.add_ons.map(
-                          (add_on: IAddOnTypes, 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
+import React, { Fragment, useState } 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'
+import { downloadPDF } from '../../utils'
+import SnackbarAlert from '../common/SnackbarAlert'
+
+interface IAddOnTypes {
+  name: string
+  status: string
+}
+export interface ITicketTypes {
+  add_ons?: IAddOnTypes[]
+  hash: string
+  ticket_type: string
+  holder_name: string
+  status: string
+  pdf_link: string
+  is_sellable: boolean
+  is_on_sale?: boolean
+  event_name: string
+  currency: string
+  resale_fee_amount: number | string
+  ticket_type_hash: string
+  ticket_type_is_active?: boolean
+}
+
+interface TicketsTableTypes {
+  tickets: ITicketTypes[];
+  handleSellTicket: (ticket: ITicketTypes) => void;
+  handleRemoveFromResale: (ticket: ITicketTypes) => void;
+
+  icon?: string;
+}
+
+const TicketsTable = ({
+  tickets = [],
+  handleSellTicket = () => {},
+  handleRemoveFromResale = () => {},
+  icon = '',
+}: TicketsTableTypes) => {
+  const [pdfError, setPdfError] = useState<any>(null)
+  return (
+    <div className="tickets-box">
+      <SnackbarAlert
+        type="error"
+        isOpen={!!pdfError}
+        message={pdfError || ''}
+        onClose={() => setPdfError(null)}
+      />
+      <h4 className="sub-title">Your Tickets</h4>
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <TableHead>
+            <TableRow>
+              <TableCell></TableCell>
+              <TableCell></TableCell>
+              <TableCell></TableCell>
+              <TableCell></TableCell>
+              <TableCell></TableCell>
+              <TableCell />
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tickets.map((ticket: ITicketTypes, index: number) => (
+              <Fragment key={index}>
+                <TableRow>
+                  <TableCell>
+                    <div className="cell-block">
+                      <span>Ticket ID</span>
+                      <span>{ticket.hash}</span>
+                    </div>
+                  </TableCell>
+                <TableCell>
+                  <div className="cell-block">
+                    <span>Ticket Type</span>
+                    <span>{ticket.ticket_type}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="cell-block">
+                    <span>Ticket Holder</span>
+                    <span>{ticket.holder_name}</span>
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <div className="cell-block">
+                    <span>Status</span>
+                    <span>{ticket.status}</span>
+                  </div>
+                </TableCell>
+                  <TableCell>
+                    {ticket.status !== 'Sold' && (
+                    <div className="tb-download">
+                      {Boolean(icon) && <img src={icon} alt="" />}
+                      <span
+                        aria-hidden={true}
+                        className="action-button"
+                        onClick={async () => {
+                          try {
+                            const pdfDownloadError = await downloadPDF(
+                              ticket.pdf_link
+                            )
+                            if (pdfDownloadError) {
+                              setPdfError(pdfDownloadError?.message)
+                            }
+                          } catch (err) {
+                            if (err && typeof err === 'string') {
+                              setPdfError(err)
+                            }
+                          }
+                        }}
+                      >
+                        Download
+                      </span>
+                    </div>
+                    )}
+                </TableCell>
+                <TableCell>
+                  {ticket.is_sellable && (
+                    <span
+                      aria-hidden={true}
+                      className="action-button"
+                      onClick={() => handleSellTicket(ticket)}
+                    >
+                      Sell Ticket
+                    </span>
+                  )}
+                  {ticket.is_on_sale && (
+                    <span
+                      aria-hidden={true}
+                      className="action-button"
+                      onClick={() => handleRemoveFromResale(ticket)}
+                    >
+                      Remove from Resale
+                    </span>
+                  )}
+                </TableCell>
+              </TableRow>
+              {!!ticket.add_ons?.length && (
+                <TableRow>
+                  <TableCell colSpan={6}>
+                    <Table className="ticket-add-on-table">
+                      <TableHead>
+                        <TableRow>
+                          <TableCell>Add-On</TableCell>
+                          <TableCell>Status</TableCell>
+                        </TableRow>
+                      </TableHead>
+                      <TableBody>
+                        {ticket.add_ons.map(
+                          (add_on: IAddOnTypes, 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