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

package/src/components/myTicketsContainer/index.tsx

@@ -1,137 +1,201 @@
-import React, { useEffect, useState } 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 TablePagination from '@mui/material/TablePagination'
-import CircularProgress from '@mui/material/CircularProgress'
-import TextField from '@mui/material/TextField'
-import Autocomplete from '@mui/material/Autocomplete'
-import _get from 'lodash/get'
-import MyTicketsRow, { RowItems } from './row'
-import tableConfig from './tableConfig'
-import { getOrders } from '../../api'
-
-interface MyTicketsTypes {
-  handleDetailsInfo: (id: string) => void;
-  onGetOrdersSuccess: (res: any) => void;
-  onGetOrdersError: (err: any) => void;
-
-  theme?: 'light' | 'dark';
-}
-
-interface EventFilter {
-  event_name: string;
-  url_name: string;
-}
-
-export const MyTicketsContainer = ({
-  handleDetailsInfo = () => {},
-  onGetOrdersSuccess = () => {},
-  onGetOrdersError = () => {},
-  theme = 'dark',
-}: MyTicketsTypes) => {
-  const [data, setData] = useState<any>(null)
-  const [loading, setLoading] = useState(true)
-  const [limit, setLimit] = useState(10)
-  const [filter, setFilter] = useState('')
-
-  //just once
-  useEffect(() => {
-    fetchData(1, limit, filter)
-  }, [])
-
-  const fetchData = async (page: number, limit: number, filter: string) => {
-    try {
-      setLoading(true)
-      const response = await getOrders(page, limit, filter)
-      onGetOrdersSuccess(response)
-
-      const data = _get(response, 'data.data.attributes')
-      data.page -= 1
-
-      setData(data)
-    } catch (error) {
-      onGetOrdersError(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleChangePage = (_event: any, newPage: number) => {
-    fetchData(newPage + 1, limit, filter)
-  }
-
-  const handleChangeRowsPerPage = (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => {
-    fetchData(1, +event.target.value, filter)
-    setLimit(+event.target.value)
-  }
-
-  const onChange = (
-    _event: React.SyntheticEvent<Element, Event>,
-    eventFilter: EventFilter | null
-  ) => {
-    fetchData(1, limit, eventFilter?.url_name || '')
-    setFilter(eventFilter?.url_name || '')
-  }
-
-  return (
-    <div className={`my-ticket ${theme}`}>
-      {loading && (
-        <div className="loading">
-          <CircularProgress />
-        </div>
-      )}
-      {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}
-          />
-        </>
-      )}
-    </div>
-  )
-}
+import React, { useEffect, useState } 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 TablePagination from '@mui/material/TablePagination'
+import CircularProgress from '@mui/material/CircularProgress'
+import TextField from '@mui/material/TextField'
+import Autocomplete from '@mui/material/Autocomplete'
+import _get from 'lodash/get'
+import MyTicketsRow, { RowItems } from './row'
+// import tableConfig from './tableConfig'
+import { getOrders } from '../../api'
+import { LoginModal } from '../loginModal'
+import axios from 'axios'
+
+interface MyTicketsTypes {
+  handleDetailsInfo: (id: string) => void;
+  onGetOrdersSuccess: (res: any) => void;
+  onGetOrdersError: (err: any) => void;
+
+  theme?: 'light' | 'dark';
+}
+
+interface EventFilter {
+  event_name: string;
+  url_name: string;
+}
+
+export const MyTicketsContainer = ({
+  handleDetailsInfo = () => {},
+  onGetOrdersSuccess = () => {},
+  onGetOrdersError = () => {},
+  theme = 'dark',
+}: MyTicketsTypes) => {
+  const [data, setData] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+  const [limit, setLimit] = useState(10)
+  const [filter, setFilter] = useState('')
+
+  const isWindowDefined = typeof window !== 'undefined'
+  const [isLogged, setIsLogged] = useState(
+    isWindowDefined ? !!window.localStorage.getItem('access_token') : false
+  )
+  const [showModalLogin, setShowModalLogin] = useState(false)
+  const [userExpired, setUserExpired] = useState(false)
+
+  //just once
+  useEffect(() => {
+    fetchData(1, limit, filter)
+  }, [isLogged])
+
+  const fetchData = async (page: number, limit: number, filter: string) => {
+    try {
+      setLoading(true)
+      const response = await getOrders(page, limit, filter)
+      onGetOrdersSuccess(response)
+
+      const data = _get(response, 'data.data.attributes')
+      data.page -= 1
+
+      setData(data)
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        if (error.response?.data.error === 'invalid_token') {
+          if (isWindowDefined) {
+            window.localStorage.removeItem('user_data')
+            window.localStorage.removeItem('access_token')
+            setUserExpired(true)
+            setShowModalLogin(true)
+          }
+        }
+      }
+      onGetOrdersError(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChangePage = (_event: any, newPage: number) => {
+    fetchData(newPage + 1, limit, filter)
+  }
+
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    fetchData(1, +event.target.value, filter)
+    setLimit(+event.target.value)
+  }
+
+  const onChange = (
+    _event: React.SyntheticEvent<Element, Event>,
+    eventFilter: EventFilter | null
+  ) => {
+    fetchData(1, limit, eventFilter?.url_name || '')
+    setFilter(eventFilter?.url_name || '')
+  }
+
+  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)
+              }}
+            >
+              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}
+      {data && (
+        <>
+          <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 className="clear">CLEAR</button>
+          </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}
+          />
+        )}
+      </>
+    </div>
+  )
+}

package/src/components/myTicketsContainer/row.tsx

@@ -1,41 +1,41 @@
-import React from 'react'
-import TableRow from '@mui/material/TableRow'
-import TableCell from '@mui/material/TableCell'
-import tableConfig from './tableConfig'
-
-export interface RowItems {
-  id: string;
-  date: string;
-  image: string;
-  eventName: string;
-  amount: string;
-  currency: string;
-}
-
-interface RowPropsTypes {
-  row: RowItems;
-  handleDetailsInfo: (id: string) => void;
-}
-
-const Row = ({ row, handleDetailsInfo }: RowPropsTypes) => {
-  return (
-    <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
-      {tableConfig().body.map((column: any, index: number) => (
-        <TableCell component="th" scope="row" key={index}>
-          {column(row)}
-        </TableCell>
-      ))}
-      <TableCell component="th" scope="row">
-        <button
-          type='button'
-          className="order-details-button"
-          onClick={() => handleDetailsInfo(row.id)}
-        >
-          Details
-        </button>
-      </TableCell>
-    </TableRow>
-  );
-}
-
-export default Row
+import React from 'react'
+import TableRow from '@mui/material/TableRow'
+import TableCell from '@mui/material/TableCell'
+import tableConfig from './tableConfig'
+
+export interface RowItems {
+  id: string;
+  date: string;
+  image: string;
+  eventName: string;
+  amount: string;
+  currency: string;
+}
+
+interface RowPropsTypes {
+  row: RowItems;
+  handleDetailsInfo: (id: string) => void;
+}
+
+const Row = ({ row, handleDetailsInfo }: RowPropsTypes) => {
+  return (
+    <TableRow sx={{ '& > *': { borderBottom: 'unset' } }}>
+      {tableConfig().body.map((column: any, index: number) => (
+        <TableCell component="th" scope="row" key={index}>
+          {column(row)}
+        </TableCell>
+      ))}
+      <TableCell component="th" scope="row">
+        <button
+          type='button'
+          className="order-details-button"
+          onClick={() => handleDetailsInfo(row.id)}
+        >
+          Details
+        </button>
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export default Row

package/src/components/myTicketsContainer/style.css

@@ -1,40 +1,40 @@
-.my-ticket {
-  padding: 30px;
-}
-.my-ticket-table {
-  margin-top: 30px;
-}
-.my-ticket .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);
-}
-.my-ticket .event-info {
-  display: flex;
-  align-items: center;
-}
-.my-ticket thead th {
-  font-weight: 700;
-}
-.my-ticket .event-info img {
-  width: 50px;
-  margin-right: 10px;
-}
-.my-ticket .order-details-button {
-  border: none;
-  border-radius: 4px;
-  color: #fff;
-  background-color: #32325d;
-  transition: all 150ms ease;
-  cursor: pointer;
-  padding: 10px 14px;
-}
-.my-ticket .order-details-button:hover {
-  background-color: #505050;
-}
+.my-ticket {
+  padding: 30px;
+}
+.my-ticket-table {
+  margin-top: 30px;
+}
+.my-ticket .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, 0.4);
+}
+.my-ticket .event-info {
+  display: flex;
+  align-items: center;
+}
+.my-ticket thead th {
+  font-weight: 700;
+}
+.my-ticket .event-info img {
+  width: 50px;
+  margin-right: 10px;
+}
+.my-ticket .order-details-button {
+  border: none;
+  border-radius: 4px;
+  color: #fff;
+  background-color: #32325d;
+  transition: all 150ms ease;
+  cursor: pointer;
+  padding: 10px 14px;
+}
+.my-ticket .order-details-button:hover {
+  background-color: #505050;
+}

package/src/components/myTicketsContainer/tableConfig.tsx

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