tf-checkout-react 1.4.14 → 1.4.15

package/package.json

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

package/src/components/orderDetailsContainer/index.tsx

@@ -1,6 +1,5 @@
 import './style.css'
 
-import CircularProgress from '@mui/material/CircularProgress'
 import Paper from '@mui/material/Paper'
 import Table from '@mui/material/Table'
 import TableBody from '@mui/material/TableBody'
@@ -14,7 +13,7 @@ import _has from 'lodash/has'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
 import moment from 'moment-timezone'
-import React, { Fragment, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { getOrderDetails, removeFromResale, resaleTicket } from '../../api'
 import { isBrowser } from '../../utils'
@@ -84,10 +83,9 @@ export const OrderDetailsContainer = ({
   orderId: pOrderId,
   referralTitle = '',
   itemsTitle = '',
-  ticketsTitle = 'Your Tickets'
+  ticketsTitle = 'Your Tickets',
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
-  const [loading, setLoading] = useState(true)
   const [removeFromResaleLoading, setRemoveFromResaleLoading] = useState(false)
   const [resaleTicketLoading, setResaleTicketLoading] = useState(false)
   const [showResaleModal, setShowResaleModal] = useState(false)
@@ -102,17 +100,18 @@ export const OrderDetailsContainer = ({
   useEffect(() => {
     (async () => {
       try {
-        setLoading(true)
+        let orderId = pOrderId || ''
+        if (isBrowser && !pOrderId) {
+          const params: URLSearchParams = new URL(`${window.location}`).searchParams
+          orderId = params.get('o') || ''
+        }
         const response = await getOrderDetails(String(orderId))
         onGetOrdersSuccess(response)
 
         const data = _get(response, 'data.data.attributes')
-
         setData(data)
       } catch (error) {
         onGetOrdersError(error)
-      } finally {
-        setLoading(false)
       }
     })()
   }, [])
@@ -142,14 +141,7 @@ export const OrderDetailsContainer = ({
 
     try {
       setResaleTicketLoading(true)
-      const {
-        to,
-        first_name,
-        last_name,
-        email,
-        confirm_email,
-        confirm,
-      } = values
+      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)
@@ -223,9 +215,7 @@ export const OrderDetailsContainer = ({
 
   let orderSummery = `ID ${data.id}, placed`
   if (data.date && data.timezone) {
-    const date = moment
-      .tz(data.date, data.timezone)
-      .format('dddd, DD MMMM YYYY')
+    const date = moment.tz(data.date, data.timezone).format('dddd, DD MMMM YYYY')
     orderSummery += ` ${date}`
   }
   const isTable = _get(data, 'tickets[0].is_table', false)
@@ -241,166 +231,144 @@ export const OrderDetailsContainer = ({
 
   return (
     <div className="order-details">
-      {loading ? (
-        <div className="loading">
-          <CircularProgress />
+      <h1 className="layout-title">Order Details</h1>
+      <div className="order-summary-box">
+        <div className="summary-block">
+          <div className="summary-item">
+            <h6 className="sub-title">Order Summary</h6>
+            <p className="order-summary-date">{orderSummery}</p>
+          </div>
+          <div className="summary-item">
+            <div className="return-button-container">
+              <button
+                type="button"
+                className="return-button"
+                onClick={() => {
+                  if (typeof window !== 'undefined') {
+                    window.location.assign(ordersPath ?? '/orders')
+                  }
+                }}
+              >
+                Back to Orders
+              </button>
+            </div>
+          </div>
         </div>
-      ) : (
-        <>
-          <h1 className="layout-title">Order Details</h1>
-          <div className="order-summary-box">
-            <div className="summary-block">
-              <div className="summary-item">
-                <h6 className="sub-title">Order Summary</h6>
-                <p className='order-summary-date'>{orderSummery}</p>
+        {!data?.disable_referral && (
+          <>
+            {referralTitle && (
+              <h4 className="referral-title sub-title">{referralTitle}</h4>
+            )}
+            <div className="personal-link">
+              <div className="link-item">
+                <span>Personal Share Link: </span>
+                <a href={data?.personal_share_link} target="_blank" rel="noreferrer">
+                  {Boolean(personalLinkIcon) && <img src={personalLinkIcon} alt="Icon" />}
+                  {data?.personal_share_link}
+                </a>
               </div>
-              <div className="summary-item">
-                <div className="return-button-container">
-                  <button
-                    type="button"
-                    className="return-button"
-                    onClick={() => {
-                      if (typeof window !== 'undefined') {
-                        window.location.assign(ordersPath ?? '/orders')
-                      }
-                    }}
-                  >
-                    Back to Orders
-                  </button>
+              {data?.sales_referred ? (
+                <div className="link-item">
+                  <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
                 </div>
-              </div>
+              ) : null}
             </div>
-            {!data?.disable_referral && (
-              <>
-                {referralTitle && <h4 className="referral-title sub-title">{referralTitle}</h4>}
-                <div className="personal-link">
-                  <div className="link-item">
-                    {!isTable && (
-                      <Fragment>
-                        <span>Personal Share Link: </span>
-                        <a
-                          href={data?.personal_share_link}
-                          target="_blank"
-                          rel="noreferrer"
-                        >
-                          {Boolean(personalLinkIcon) && (
-                            <img src={personalLinkIcon} alt="Icon" />
-                          )}
-                          {data?.personal_share_link}
-                        </a>
-                      </Fragment>
-                    )}
-                  </div>
-                  {data?.sales_referred ? (
-                    <div className="link-item">
-                      <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
-                    </div>
-                  ) : null}
-                </div>
-              </>
-            )}
-            {itemsTitle && <h4 className="items-title sub-title">{itemsTitle}</h4>}
-            <TableContainer component={Paper}>
-              <Table className="tt-type" aria-label="collapsible table">
-                <TableHead>
-                  <TableRow>
-                    {_map(columnsProps, item => (
-                      <TableCell>{item.label || ''}</TableCell>
-                    ))}
+          </>
+        )}
+        {itemsTitle && <h4 className="items-title sub-title">{itemsTitle}</h4>}
+        <TableContainer component={Paper}>
+          <Table className="tt-type" aria-label="collapsible table">
+            <TableHead>
+              <TableRow>
+                {_map(columnsProps, item => (
+                  <TableCell>{item.label || ''}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data?.items?.ticket_types?.map((ticket: TicketTypes, index: number) =>
+                data?.tickets && !data?.tickets[0].is_table ? (
+                  <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>
-                </TableHead>
-                <TableBody>
-                  {data?.items?.ticket_types?.map(
-                    (ticket: TicketTypes, index: number) =>
-                      data?.tickets && !data?.tickets[0].is_table ? (
-                        <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>
-                      ) : (
-                        <TableRow key={index}>
-                          <TableCell>
-                            <b>Ticket Type:</b> {ticket.name}
-                          </TableCell>
-                          <TableCell>
-                            {ticket.currency + ticket.price}
-                          </TableCell>
-                          <TableCell>{ticket.guests_count}</TableCell>
-                          <TableCell>{ticket.deposit_paid}</TableCell>
-                          <TableCell>{ticket.remaining}</TableCell>
-                        </TableRow>
-                      )
-                  )}
-                  {data?.items?.add_ons?.map(
-                    (ticket: TicketTypes, index: number) => (
-                      <TableRow key={index}>
-                        <TableCell>
-                          <div>
-                            <b>Add-On: </b>
-                            <div>{ticket.groupName && `${ticket.groupName}: `} {ticket.name}</div>
-                          </div>
-                        </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 key={index}>
+                    <TableCell>
+                      <b>Ticket Type:</b> {ticket.name}
+                    </TableCell>
+                    <TableCell>{ticket.currency + ticket.price}</TableCell>
+                    <TableCell>{ticket.guests_count}</TableCell>
+                    <TableCell>{ticket.deposit_paid}</TableCell>
+                    <TableCell>{ticket.remaining}</TableCell>
                   </TableRow>
-                </TableBody>
-              </Table>
-            </TableContainer>
-          </div>
-          <TicketsTable
-            ticketsTitle={ticketsTitle}
-            tickets={data.tickets}
-            columns={
-              ticketsTableColumns?.length
-                ? ticketsTableColumns
-                : [
-                    { key: 'hash' as never, label: 'Ticket ID' },
-                    { key: 'ticket_type' as never, label: 'Ticket Type' },
-                    { key: 'holder_name' as never, label: 'Ticket Holder' },
-                    { key: 'status' as never, label: 'Status' },
-                    { key: 'download' as never, label: '' },
-                    { key: 'sell_ticket' as never, label: '' },
-                  ]
+                )
+              )}
+              {data?.items?.add_ons?.map((ticket: TicketTypes, index: number) => (
+                <TableRow key={index}>
+                  <TableCell>
+                    <div>
+                      <b>Add-On</b>
+                      <div>
+                        {ticket.groupName && `${ticket.groupName}: `} {ticket.name}
+                      </div>
+                    </div>
+                  </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
+        ticketsTitle={ticketsTitle}
+        tickets={data.tickets}
+        columns={
+          ticketsTableColumns?.length
+            ? ticketsTableColumns
+            : [
+                { key: 'hash' as never, label: 'Ticket ID' },
+                { key: 'ticket_type' as never, label: 'Ticket Type' },
+                { key: 'holder_name' as never, label: 'Ticket Holder' },
+                { key: 'status' as never, label: 'Status' },
+                { key: 'download' as never, label: '' },
+                { key: 'sell_ticket' as never, label: '' },
+              ]
+        }
+        handleSellTicket={handleSellTicket}
+        handleRemoveFromResale={handleRemoveFromResale}
+        displayColumnNameInRow={displayColumnNameInRow}
+        canSellTicket={canSellTicket}
+      />
+      <div className="return-button-container">
+        <button
+          type="button"
+          className="return-button"
+          onClick={() => {
+            if (onReturnButtonClick) {
+              onReturnButtonClick(data)
+            } else if (typeof window !== 'undefined') {
+              window.location.assign(ordersPath ?? '/orders')
             }
-            handleSellTicket={handleSellTicket}
-            handleRemoveFromResale={handleRemoveFromResale}
-            displayColumnNameInRow={displayColumnNameInRow}
-            canSellTicket={canSellTicket}
-          />
-          <div className="return-button-container">
-            <button
-              type="button"
-              className="return-button"
-              onClick={() => {
-                if (onReturnButtonClick) {
-                  onReturnButtonClick(data)
-                } else if (typeof window !== 'undefined') {
-                  window.location.assign(ordersPath ?? '/orders')
-                }
-              }}
-            >
-              Return to Order History
-            </button>
-          </div>
-        </>
-      )}
+          }}
+        >
+          Return to Order History
+        </button>
+      </div>
+
       {showResaleModal && (
         <TicketResaleModal
           ticket={activeTicket}