tf-checkout-react 1.0.103 → 1.0.106

package/src/components/orderDetailsContainer/index.tsx

@@ -1,249 +1,252 @@
-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, { ITicketTypes } from './ticketsTable'
-import { TicketResaleModal, InitialValuesTypes } from '../ticketResaleModal'
-import ConfirmModal from '../confirmModal'
-import { resaleTicket, removeFromResale } from '../../api'
-
-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>({})
-  const [loading, setLoading] = useState(true)
-  const [showResaleModal, setShowResaleModal] = useState(false)
-  const [showRemoveResaleModal, setShowRemoveResaleModal] = useState(false)
-  const [activeTicket, setActiveTicket] = useState<any>(null)
-
-  useEffect(() => {
-    (async () => {
-      try {
-        setLoading(true)
-        let orderId = ''
-        if (typeof window !== 'undefined') {
-          const params: URLSearchParams = new URL(`${window.location}`)
-            .searchParams
-          orderId = params.get('o') || ''
-        }
-        const response = await getOrderDetails(orderId)
-        onGetOrdersSuccess(response)
-
-        const data = _get(response, 'data.data.attributes')
-
-        setData(data)
-      } catch (error) {
-        onGetOrdersError(error)
-      } finally {
-        setLoading(false)
-      }
-    })()
-  }, [])
-
-  const handleSellTicket = (ticket: ITicketTypes) => {
-    setActiveTicket(ticket)
-    setShowResaleModal(true)
-  }
-
-  const handleOnClose = () => {
-    setShowResaleModal(false)
-    setActiveTicket(null)
-  }
-
-  const handleOnSubmit = async (values: InitialValuesTypes) => {
-    try {
-      setLoading(true)
-      const { to, first_name, last_name, email, confirm_email, confirm } = values
-      const formData = new FormData();
-      formData.append('to', to)
-      formData.append('first_name', first_name)
-      formData.append('last_name', last_name)
-      formData.append('email', email)
-      formData.append('confirm_email', confirm_email)
-      formData.append('confirm', String(confirm))
-
-      await resaleTicket(formData, activeTicket.hash)
-      const updatedData = { ...data }
-      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
-        if(ticket.hash === activeTicket.hash) {
-          ticket.is_sellable = false
-          ticket.is_on_sale = true
-        }
-      })
-
-      setData(updatedData)
-    } catch (error) {
-      // ...
-    } finally {
-      setShowResaleModal(false)
-      setLoading(false)
-    }
-  }
-
-  const handleRemoveFromResale = (ticket: ITicketTypes) => {
-    setShowRemoveResaleModal(true)
-    setActiveTicket(ticket)
-  }
-
-  const onCloseRemoveResale = () => {
-    setShowRemoveResaleModal(false)
-    setActiveTicket(null)
-  }
-
-  const onConfirmRemoveResale = async () => {
-    try {
-      setLoading(true)
-      await removeFromResale(activeTicket.hash)
-      const updatedData = { ...data }
-      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
-        if(ticket.hash === activeTicket.hash) {
-          ticket.is_sellable = true
-          ticket.is_on_sale = false
-        }
-      })
-
-      setData(updatedData)
-    } catch (error) {
-      // ...
-    } finally {
-      setShowRemoveResaleModal(false)
-      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 className="personal-link">
-              <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}
-            handleSellTicket={handleSellTicket}
-            handleRemoveFromResale={handleRemoveFromResale}
-          />
-          <div className="return-button-container">
-            <button
-              type="button"
-              className="return-button"
-              onClick={() => {
-                if (typeof window !== 'undefined') {
-                  window.location.assign('/orders')
-                }
-              }}
-            >
-              Return to Order History
-            </button>
-          </div>
-        </>
-      )}
-      {showResaleModal && (
-        <TicketResaleModal
-          ticket={activeTicket}
-          onClose={handleOnClose}
-          onSubmit={handleOnSubmit}
-        />
-      )}
-      {showRemoveResaleModal && (
-        <ConfirmModal
-          message="Are you sure you want to withdraw your ticket from resale?"
-          onClose={onCloseRemoveResale}
-          onConfirm={onConfirmRemoveResale}
-        />
-      )}
-    </div>
-  )
-}
+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 _find from 'lodash/find'
+import { getOrderDetails } from '../../api'
+import TicketsTable, { ITicketTypes } from './ticketsTable'
+import { TicketResaleModal, InitialValuesTypes } from '../ticketResaleModal'
+import ConfirmModal from '../confirmModal'
+import { resaleTicket, removeFromResale } from '../../api'
+
+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>({})
+  const [loading, setLoading] = useState(true)
+  const [showResaleModal, setShowResaleModal] = useState(false)
+  const [showRemoveResaleModal, setShowRemoveResaleModal] = useState(false)
+  const [activeTicket, setActiveTicket] = useState<any>(null)
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true)
+        let orderId = ''
+        if (typeof window !== 'undefined') {
+          const params: URLSearchParams = new URL(`${window.location}`)
+            .searchParams
+          orderId = params.get('o') || ''
+        }
+        const response = await getOrderDetails(orderId)
+        onGetOrdersSuccess(response)
+
+        const data = _get(response, 'data.data.attributes')
+
+        setData(data)
+      } catch (error) {
+        onGetOrdersError(error)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [])
+
+  const handleSellTicket = (ticket: ITicketTypes) => {
+    const ticketTypesArr = data.items.ticket_types
+    const sellTicketType = _find(ticketTypesArr, ticketType => ticketType.hash === ticket.ticket_type_hash)
+    setActiveTicket({ ...ticket, ticket_type_is_active: sellTicketType?.active })
+    setShowResaleModal(true)
+  }
+
+  const handleOnClose = () => {
+    setShowResaleModal(false)
+    setActiveTicket(null)
+  }
+
+  const handleOnSubmit = async (values: InitialValuesTypes) => {
+    try {
+      setLoading(true)
+      const { to, first_name, last_name, email, confirm_email, confirm } = values
+      const formData = new FormData();
+      formData.append('to', to)
+      formData.append('first_name', first_name)
+      formData.append('last_name', last_name)
+      formData.append('email', email)
+      formData.append('confirm_email', confirm_email)
+      formData.append('confirm', String(confirm))
+
+      await resaleTicket(formData, activeTicket.hash)
+      const updatedData = { ...data }
+      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
+        if(ticket.hash === activeTicket.hash) {
+          ticket.is_sellable = false
+          ticket.is_on_sale = true
+        }
+      })
+
+      setData(updatedData)
+    } catch (error) {
+      // ...
+    } finally {
+      setShowResaleModal(false)
+      setLoading(false)
+    }
+  }
+
+  const handleRemoveFromResale = (ticket: ITicketTypes) => {
+    setShowRemoveResaleModal(true)
+    setActiveTicket(ticket)
+  }
+
+  const onCloseRemoveResale = () => {
+    setShowRemoveResaleModal(false)
+    setActiveTicket(null)
+  }
+
+  const onConfirmRemoveResale = async () => {
+    try {
+      setLoading(true)
+      await removeFromResale(activeTicket.hash)
+      const updatedData = { ...data }
+      updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
+        if(ticket.hash === activeTicket.hash) {
+          ticket.is_sellable = true
+          ticket.is_on_sale = false
+        }
+      })
+
+      setData(updatedData)
+    } catch (error) {
+      // ...
+    } finally {
+      setShowRemoveResaleModal(false)
+      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 className="personal-link">
+              <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}
+            handleSellTicket={handleSellTicket}
+            handleRemoveFromResale={handleRemoveFromResale}
+          />
+          <div className="return-button-container">
+            <button
+              type="button"
+              className="return-button"
+              onClick={() => {
+                if (typeof window !== 'undefined') {
+                  window.location.assign('/orders')
+                }
+              }}
+            >
+              Return to Order History
+            </button>
+          </div>
+        </>
+      )}
+      {showResaleModal && (
+        <TicketResaleModal
+          ticket={activeTicket}
+          onClose={handleOnClose}
+          onSubmit={handleOnSubmit}
+        />
+      )}
+      {showRemoveResaleModal && (
+        <ConfirmModal
+          message="Are you sure you want to withdraw your ticket from resale?"
+          onClose={onCloseRemoveResale}
+          onConfirm={onConfirmRemoveResale}
+        />
+      )}
+    </div>
+  )
+}

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, .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;
 }