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

package/src/components/orderDetailsContainer/index.tsx

@@ -1,249 +1,289 @@
-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 _map from 'lodash/map'
+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 {
+  columns: Array<{ label: string }>;
+  onGetOrdersSuccess: (res: any) => void;
+  onGetOrdersError: (err: any) => void;
+  personalLinkIcon?: string;
+}
+
+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 = ({
+  columns = [],
+  onGetOrdersSuccess = () => {},
+  onGetOrdersError = () => {},
+  personalLinkIcon = '',
+}: 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)
+    }
+  }
+
+  let orderSummery = `ID ${data.id}, placed`
+  if (data.date) {
+    orderSummery += ` ${data.date}`
+  }
+
+  return (
+    <div className="order-details">
+      {loading ? (
+        <div className="loading">
+          <CircularProgress />
+        </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>{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('/orders')
+                      }
+                    }}
+                  >
+                    Back to Orders
+                  </button>
+                </div>
+              </div>
+            </div>
+            <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="link-item">
+                <p>{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+              </div>
+            </div>
+            <TableContainer component={Paper}>
+              <Table className="tt-type" aria-label="collapsible table">
+                <TableHead>
+                  <TableRow>
+                    {_map(columns, item => (
+                      <TableCell>{item.label || ''}</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}
+          />
+        </>
+      )}
+      {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>
+  )
+}