tf-checkout-react 1.6.6 → 1.7.2

package/src/components/orderDetailsContainer/index.tsx

@@ -1,12 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
+import { Backdrop, CircularProgress, ThemeOptions } from '@mui/material'
 import Paper from '@mui/material/Paper'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 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 { CSSProperties } from '@mui/styles'
 import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
@@ -61,6 +65,10 @@ interface OrderDetailsTypes {
   personalLinkIcon?: string;
   displayColumnNameInRow?: boolean;
   canSellTicket?: boolean;
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
   ticketsTableColumns?: Array<{
     id?: string | number;
     key: keyof ITicketTypes & keyof IActionColumns;
@@ -71,6 +79,7 @@ interface OrderDetailsTypes {
   referralTitle?: string;
   itemsTitle?: string;
   ticketsTitle?: string;
+  displayLoading?: boolean;
 }
 
 export interface CustomFieldOption {
@@ -130,6 +139,8 @@ export const OrderDetailsContainer = ({
   referralTitle = '',
   itemsTitle = '',
   ticketsTitle = 'Your Tickets',
+  themeOptions,
+  displayLoading = false,
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
   const [removeFromResaleLoading, setRemoveFromResaleLoading] = useState(false)
@@ -138,6 +149,7 @@ export const OrderDetailsContainer = ({
   const [showRemoveResaleModal, setShowRemoveResaleModal] = useState(false)
   const [activeTicket, setActiveTicket] = useState<any>(null)
   const [showOrderCustomFieldsSection, setShowOrderCustomFieldsSection] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
 
   const isTable = _get(data, 'tickets[0].is_table', false)
   const columnsProps = isTable
@@ -193,16 +205,19 @@ export const OrderDetailsContainer = ({
           const params: URLSearchParams = new URL(`${window.location}`).searchParams
           orderId = params.get('o') || ''
         }
+        setIsLoading(true)
         const response = await getOrderDetails(String(orderId))
         onGetOrdersSuccess(response)
 
         const data = _get(response, 'data.attributes')
         setData(data)
+        setIsLoading(false)
       } catch (error) {
         onGetOrdersError(error)
+        setIsLoading(false)
       }
     })()
-  }, [])
+  }, [onGetOrdersError, onGetOrdersSuccess, pOrderId])
 
   const handleSellTicket = (ticket: ITicketTypes) => {
     const ticketTypesArr = data.items.ticket_types
@@ -352,194 +367,211 @@ export const OrderDetailsContainer = ({
     }
   }
 
+  const theme = createTheme(themeOptions ?? {})
+
+  if (isLoading && displayLoading) {
+    return (
+      <Backdrop
+        sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
+        open={true}
+      >
+        <CircularProgress color="inherit" />
+      </Backdrop>
+    )
+  }
+
   return (
-    <div className="order-details">
-      <div className="layout-block">
-        <h1 className="layout-title">Order Details</h1>
-        {!_isEmpty(orderUpdatableCustomFields) && (
-          <SVG src={EditSvg} onClick={() => setShowOrderCustomFieldsSection(true)} />
-        )}
-      </div>
-      <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 (isBrowser) {
-                    window.location.assign(ordersPath ?? '/orders')
-                  }
-                }}
-              >
-                Back to Orders
-              </button>
-            </div>
-          </div>
+    <ThemeProvider theme={theme}>
+      <div className="order-details">
+        <div className="layout-block">
+          <h1 className="layout-title">Order Details</h1>
+          {!_isEmpty(orderUpdatableCustomFields) && (
+            <SVG src={EditSvg} onClick={() => setShowOrderCustomFieldsSection(true)} />
+          )}
         </div>
-        {!_isEmpty(orderCustomFields) && (
-          <>
-            <div className="custom-field-value-container">
-              {orderCustomFields.map((customField: CustomFieldTypes) => (
-                <div className="info-item" key={customField.id}>
-                  <b>{customField.label} :</b> {renderCustomFieldValue(customField)}
-                </div>
-              ))}
+        <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>
-            {!_isEmpty(orderUpdatableCustomFields) && (
-              <div
-                className={`custom-fields-block ${
-                  showOrderCustomFieldsSection ? 'show' : ''
-                }`}
-              >
-                <p className="title">Aditional Information Request</p>
-                <CustomFieldsForm
-                  initialValues={orderEditableFieldsFormInitialValues}
-                  fields={orderUpdatableCustomFields}
-                  handleFormSubmit={handleOrderCustomFieldsUpdate}
-                  handleFormClose={() => setShowOrderCustomFieldsSection(false)}
-                />
+            <div className="summary-item">
+              <div className="return-button-container">
+                <button
+                  type="button"
+                  className="return-button"
+                  onClick={() => {
+                    if (isBrowser) {
+                      window.location.assign(ordersPath ?? '/orders')
+                    }
+                  }}
+                >
+                  Back to Orders
+                </button>
               </div>
-            )}
-          </>
-        )}
-        {!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>
+          {!_isEmpty(orderCustomFields) && (
+            <>
+              <div className="custom-field-value-container">
+                {orderCustomFields.map((customField: CustomFieldTypes) => (
+                  <div className="info-item" key={customField.id}>
+                    <b>{customField.label} :</b> {renderCustomFieldValue(customField)}
+                  </div>
+                ))}
               </div>
-              {data?.sales_referred ? (
+              {!_isEmpty(orderUpdatableCustomFields) && (
+                <div
+                  className={`custom-fields-block ${
+                    showOrderCustomFieldsSection ? 'show' : ''
+                  }`}
+                >
+                  <p className="title">Aditional Information Request</p>
+                  <CustomFieldsForm
+                    initialValues={orderEditableFieldsFormInitialValues}
+                    fields={orderUpdatableCustomFields}
+                    handleFormSubmit={handleOrderCustomFieldsUpdate}
+                    handleFormClose={() => setShowOrderCustomFieldsSection(false)}
+                  />
+                </div>
+              )}
+            </>
+          )}
+          {!data?.disable_referral && (
+            <>
+              {referralTitle && (
+                <h4 className="referral-title sub-title">{referralTitle}</h4>
+              )}
+              <div className="personal-link">
                 <div className="link-item">
-                  <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                  <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>
-              ) : 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>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {data?.items?.ticket_types?.map((ticket: TicketTypes, index: number) =>
-                data?.tickets && !data?.tickets[0].is_table ? (
+                {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>
+                  ))}
+                </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>
-                      <b>Ticket Type:</b> {ticket.name}
+                      <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 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 className="total-row">
+                  <TableCell />
+                  <TableCell />
+                  <TableCell>Total</TableCell>
+                  <TableCell>{getTotal(data)}</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}
-        ticketHoldersCustomFields={ticketHoldersCustomFields}
-        handleTicketHoldersUpdate={handleTicketHoldersUpdate}
-      />
-      <div className="return-button-container">
-        <button
-          type="button"
-          className="return-button"
-          onClick={() => {
-            if (onReturnButtonClick) {
-              onReturnButtonClick(data)
-            } else if (isBrowser) {
-              window.location.assign(ordersPath ?? '/orders')
-            }
-          }}
-        >
-          Return to Order History
-        </button>
-      </div>
-      {showResaleModal && (
-        <TicketResaleModal
-          ticket={activeTicket}
-          onClose={handleOnClose}
-          onSubmit={handleOnSubmit}
-          loading={resaleTicketLoading}
-        />
-      )}
-      {showRemoveResaleModal && (
-        <ConfirmModal
-          message="Are you sure you want to withdraw your ticket from resale?"
-          onClose={onCloseRemoveResale}
-          onConfirm={onConfirmRemoveResale}
-          loading={removeFromResaleLoading}
+              </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}
+          ticketHoldersCustomFields={ticketHoldersCustomFields}
+          handleTicketHoldersUpdate={handleTicketHoldersUpdate}
         />
-      )}
-    </div>
+        <div className="return-button-container">
+          <button
+            type="button"
+            className="return-button"
+            onClick={() => {
+              if (onReturnButtonClick) {
+                onReturnButtonClick(data)
+              } else if (isBrowser) {
+                window.location.assign(ordersPath ?? '/orders')
+              }
+            }}
+          >
+            Return to Order History
+          </button>
+        </div>
+        {showResaleModal && (
+          <TicketResaleModal
+            ticket={activeTicket}
+            onClose={handleOnClose}
+            onSubmit={handleOnSubmit}
+            loading={resaleTicketLoading}
+          />
+        )}
+        {showRemoveResaleModal && (
+          <ConfirmModal
+            message="Are you sure you want to withdraw your ticket from resale?"
+            onClose={onCloseRemoveResale}
+            onConfirm={onConfirmRemoveResale}
+            loading={removeFromResaleLoading}
+          />
+        )}
+      </div>
+    </ThemeProvider>
   )
 }