tf-checkout-react 1.0.106 → 1.2.1

package/src/components/myTicketsContainer/index.tsx

@@ -1,29 +1,31 @@
-import React, { useEffect, useState } from 'react'
 import './style.css'
 
+import Autocomplete from '@mui/material/Autocomplete'
+import CircularProgress from '@mui/material/CircularProgress'
+import Paper from '@mui/material/Paper'
 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 TablePagination from '@mui/material/TablePagination'
-import CircularProgress from '@mui/material/CircularProgress'
+import TableRow from '@mui/material/TableRow'
 import TextField from '@mui/material/TextField'
-import Autocomplete from '@mui/material/Autocomplete'
+import axios from 'axios'
 import _get from 'lodash/get'
-import MyTicketsRow, { RowItems } from './row'
-import tableConfig from './tableConfig'
+import _identity from 'lodash/identity'
+import React, { useEffect, useState } from 'react'
+
 import { getOrders } from '../../api'
 import { LoginModal } from '../loginModal'
-import axios from 'axios'
+import MyTicketsRow, { RowItems } from './row'
+import tableConfig from './tableConfig'
 
 interface MyTicketsTypes {
   handleDetailsInfo: (id: string) => void;
   onGetOrdersSuccess: (res: any) => void;
   onGetOrdersError: (err: any) => void;
-
+  logo?: string;
   theme?: 'light' | 'dark';
 }
 
@@ -33,10 +35,11 @@ interface EventFilter {
 }
 
 export const MyTicketsContainer = ({
-  handleDetailsInfo = () => {},
-  onGetOrdersSuccess = () => {},
-  onGetOrdersError = () => {},
+  handleDetailsInfo = _identity,
+  onGetOrdersSuccess = _identity,
+  onGetOrdersError = _identity,
   theme = 'dark',
+  logo,
 }: MyTicketsTypes) => {
   const [data, setData] = useState<any>(null)
   const [loading, setLoading] = useState(true)
@@ -103,94 +106,95 @@ export const MyTicketsContainer = ({
 
   return (
     <div className={`my-ticket ${theme}`}>
-      {loading && (
-        <div className="loading">
-          <CircularProgress />
-        </div>
-      )}
-      {!isLogged ? (
-        <div className="account-actions-block">
-          <div className="login-block">
-            <button
-              className="login-register-button"
-              type="button"
-              onClick={() => {
-                  setShowModalLogin(true)
+      <>
+        {showModalLogin ||
+          (!isLogged && (
+            <LoginModal
+              onClose={() => {
+                setShowModalLogin(false)
               }}
-            >
-              Login
-            </button>
-            <div className="logo-image-container">
-              <img
-                src={
-                  theme === 'dark'
-                    ? 'https://www.ticketfairy.com/resources/images/logo-ttf.svg'
-                    : 'https://www.ticketfairy.com/resources/images/logo-ttf-black.svg'
-                }
-                alt="nodata"
-              />
-            </div>
-          </div>
-        </div>
-      ) : null}
+              onLogin={() => {
+                setShowModalLogin(false)
+                setUserExpired(false)
+                setIsLogged(true)
+              }}
+              userExpired={userExpired}
+              logo={logo}
+            />
+          ))}
+      </>
       {data && (
         <>
-          <Autocomplete
-            disablePortal
-            id="combo-box-demo"
-            getOptionLabel={(option: EventFilter) => option.event_name}
-            onChange={onChange}
-            options={data.purchased_events}
-            sx={{ width: 300 }}
-            renderInput={params => <TextField {...params} label="Events" />}
-          />
-          <TableContainer component={Paper} className="my-ticket-table">
-            <Table aria-label="collapsible table">
-              <TableHead>
-                <TableRow>
-                  {tableConfig().header.map((column: string, index: number) => (
-                    <TableCell key={index}>{column}</TableCell>
-                  ))}
-                  <TableCell />
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {data.orders?.map((row: RowItems) => (
-                  <MyTicketsRow
-                    key={row.id}
-                    row={row}
-                    handleDetailsInfo={handleDetailsInfo}
-                  />
-                ))}
-              </TableBody>
-            </Table>
-          </TableContainer>
-          <TablePagination
-            rowsPerPageOptions={[10, 25, 100]}
-            component="div"
-            count={data.total_count}
-            rowsPerPage={limit}
-            page={data.page}
-            onPageChange={handleChangePage}
-            onRowsPerPageChange={handleChangeRowsPerPage}
-          />
+          <h2>My Ticket Orders</h2>
+          <div className="order_event">
+            <Autocomplete
+                disablePortal
+                id="combo-box-demo"
+                getOptionLabel={(option: EventFilter) => option.event_name}
+                onChange={onChange}
+                options={data.purchased_events}
+                sx={{ width: 300 }}
+                renderInput={params => <TextField {...params} label="Events" />}
+            />
+            <button type="button" className="clear">CLEAR</button>
+          </div>
+          {loading ? (
+            <div className="loading">
+              <CircularProgress />
+            </div>
+          ) : (
+            <>
+              <TableContainer component={Paper} className="my-ticket-table">
+                <Table aria-label="collapsible table">
+                  <TableHead>
+                    <TableRow>
+                      {tableConfig().header.map(
+                        (column: string, index: number) => (
+                          <TableCell key={index}>{column}</TableCell>
+                        )
+                      )}
+                      <TableCell />
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {data.orders?.map((row: RowItems) => (
+                      <MyTicketsRow
+                        key={row.id}
+                        row={row}
+                        handleDetailsInfo={handleDetailsInfo}
+                      />
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+              <TablePagination
+                rowsPerPageOptions={[10, 25, 100]}
+                component="div"
+                count={data.total_count}
+                rowsPerPage={limit}
+                page={data.page}
+                onPageChange={handleChangePage}
+                onRowsPerPageChange={handleChangeRowsPerPage}
+              />
+            </>
+          )}
         </>
       )}
-    <>
-    {showModalLogin && (
-        <LoginModal
-          onClose={() => {
-            setShowModalLogin(false)
-          }}
-          onLogin={() => {
-            setShowModalLogin(false)
-            setUserExpired(false)
-            setIsLogged(true)
-          }}
-          userExpired={userExpired}
-        />
-      )}
-    </>
+      <>
+        {showModalLogin && (
+          <LoginModal
+            onClose={() => {
+              setShowModalLogin(false)
+            }}
+            onLogin={() => {
+              setShowModalLogin(false)
+              setUserExpired(false)
+              setIsLogged(true)
+            }}
+            userExpired={userExpired}
+          />
+        )}
+      </>
     </div>
   )
 }

package/src/components/myTicketsContainer/style.css

@@ -13,7 +13,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, .4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .my-ticket .event-info {
   display: flex;
@@ -37,4 +37,4 @@
 }
 .my-ticket .order-details-button:hover {
   background-color: #505050;
-}
+}

package/src/components/myTicketsContainer/tableConfig.tsx

@@ -5,23 +5,20 @@ interface EventInfoTypes {
   name: string;
 }
 
-const EventInfoItem = ({ image, name }: EventInfoTypes) => {
-  return (
+const EventInfoItem = ({ image, name }: EventInfoTypes) => (
     <div className='event-info'>
       <img src={image} alt="event" />
       {name}
     </div>
   )
-}
 
 const tableConfig = (key?: string) => {
-  let config;
+  let config
   switch (key) {
     default:
       config = {
-        header: ['Order No.', 'Date', 'Event', 'Total'],
+        header: [],
         body: [
-          (row: any) => row.id,
           (row: any) => row.date,
           (row: any) => <EventInfoItem image={row.image} name={row.eventName} />,
           (row: any) => row.currency + row.amount

package/src/components/orderDetailsContainer/index.tsx

@@ -12,6 +12,7 @@ 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'
@@ -28,8 +29,11 @@ interface TicketTypes {
 }
 
 interface OrderDetailsTypes {
+  columns: Array<{ label: string }>;
   onGetOrdersSuccess: (res: any) => void;
   onGetOrdersError: (err: any) => void;
+  onReturnButtonClick: (data: any) => void;
+  personalLinkIcon?: string;
 }
 
 const getTotal = (data: any) => {
@@ -39,8 +43,11 @@ const getTotal = (data: any) => {
 }
 
 export const OrderDetailsContainer = ({
+  columns = [],
   onGetOrdersSuccess = () => {},
   onGetOrdersError = () => {},
+  onReturnButtonClick,
+  personalLinkIcon = '',
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
   const [loading, setLoading] = useState(true)
@@ -74,8 +81,14 @@ export const OrderDetailsContainer = ({
 
   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 })
+    const sellTicketType = _find(
+      ticketTypesArr,
+      ticketType => ticketType.hash === ticket.ticket_type_hash
+    )
+    setActiveTicket({
+      ...ticket,
+      ticket_type_is_active: sellTicketType?.active,
+    })
     setShowResaleModal(true)
   }
 
@@ -87,8 +100,15 @@ export const OrderDetailsContainer = ({
   const handleOnSubmit = async (values: InitialValuesTypes) => {
     try {
       setLoading(true)
-      const { to, first_name, last_name, email, confirm_email, confirm } = values
-      const formData = new FormData();
+      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)
@@ -99,7 +119,7 @@ export const OrderDetailsContainer = ({
       await resaleTicket(formData, activeTicket.hash)
       const updatedData = { ...data }
       updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
-        if(ticket.hash === activeTicket.hash) {
+        if (ticket.hash === activeTicket.hash) {
           ticket.is_sellable = false
           ticket.is_on_sale = true
         }
@@ -130,7 +150,7 @@ export const OrderDetailsContainer = ({
       await removeFromResale(activeTicket.hash)
       const updatedData = { ...data }
       updatedData?.tickets?.forEach((ticket: ITicketTypes) => {
-        if(ticket.hash === activeTicket.hash) {
+        if (ticket.hash === activeTicket.hash) {
           ticket.is_sellable = true
           ticket.is_on_sale = false
         }
@@ -145,6 +165,11 @@ export const OrderDetailsContainer = ({
     }
   }
 
+  let orderSummery = `ID ${data.id}, placed`
+  if (data.date) {
+    orderSummery += ` ${data.date}`
+  }
+
   return (
     <div className="order-details">
       {loading ? (
@@ -155,25 +180,57 @@ export const OrderDetailsContainer = ({
         <>
           <h1 className="layout-title">Order Details</h1>
           <div className="order-summary-box">
-            <h4 className="sub-title">Order Summary</h4>
+            <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">
-              <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 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>
+            {data?.sales_referred ? (
+              <div className="total-referrer">
+                <b>So far, you've referred {data.sales_referred} tickets.</b>
+              </div>
+            ) : null}
             <TableContainer component={Paper}>
-              <Table aria-label="collapsible table">
+              <Table className="tt-type" aria-label="collapsible table">
                 <TableHead>
                   <TableRow>
-                    <TableCell>Items</TableCell>
-                    <TableCell>Price</TableCell>
-                    <TableCell>Quantity</TableCell>
-                    <TableCell>Total</TableCell>
+                    {_map(columns, item => (
+                      <TableCell>{item.label || ''}</TableCell>
+                    ))}
                   </TableRow>
                 </TableHead>
                 <TableBody>
@@ -223,7 +280,9 @@ export const OrderDetailsContainer = ({
               type="button"
               className="return-button"
               onClick={() => {
-                if (typeof window !== 'undefined') {
+                if (onReturnButtonClick) {
+                  onReturnButtonClick(data)
+                } else if (typeof window !== 'undefined') {
                   window.location.assign('/orders')
                 }
               }}

package/src/components/orderDetailsContainer/style.css

@@ -11,7 +11,7 @@
   position: fixed;
   top: 0;
   left: 0;
-  background-color: rgba(0, 0, 0, .4);
+  background-color: rgba(0, 0, 0, 0.4);
   z-index: 1400;
 }
 .order-details .layout-title {
@@ -38,7 +38,7 @@
   margin-top: 30px;
 }
 .order-details .ticket-add-on-table {
-  background-color: #fcf8e3;;
+  background-color: #fcf8e3;
 }
 .order-details .action-button {
   width: max-content;
@@ -70,4 +70,8 @@
 
 .order-details .personal-link {
   padding: 20px 0;
-}
+}
+
+.order-details .total-referrer {
+  padding: 0px 0px 20px 0px;
+}