tf-checkout-react 1.0.56 → 1.0.60

package/dist/tf-checkout-styles.css

@@ -0,0 +1 @@
+.button-container{display:flex;justify-content:center;padding:20px}.billing-info-container{margin:0 auto;max-width:800px}.billing-info-container .is-half{width:49%}.billing-info-container p{color:#000}.billing-info-container .main-header{font-size:2rem;font-weight:600}.billing-info-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.billing-info-container__singleField{margin-top:15px}.account-actions-block{color:#182026;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif;margin-top:10px}.login-register-button,.MuiButtonBase-root.MuiButton-root,.MuiButtonBase-root.MuiButton-root:hover{background-color:#212529;border:#f28051;border-radius:5px;color:#fff;cursor:pointer;display:block;font-family:Inter-Bold;font-size:26px;font-weight:700;line-height:1.15;margin-top:10px;min-height:46px;outline:none;overflow:hidden;padding:14px 12px 12px;position:relative;text-align:center;text-overflow:ellipsis;text-transform:uppercase;width:49%}.logo-image-container{margin-top:5px;text-align:center;width:49%}.logo-image-container img{height:30px}.login-block{align-items:center;display:flex;flex-direction:column}.login-register-button:hover{background-color:#505050!important;border-color:#505050!important}.login-register-block{display:flex;justify-content:space-between}@media only screen and (max-width:820px){.billing-info-container{width:90%}.billing-info-container .main-header{font-size:1.5rem}}.email-checking{margin-bottom:15px}.modal-title{align-items:center;background-color:#fff;display:flex;font-family:Inter;font-size:18px;font-weight:700;height:49px;line-height:22px;padding-left:25px;position:relative}.login-modal-body{padding:15px 25px}.login-modal-body input{background:#fff!important}.login-modal-body__email,.login-modal-body__password{margin-bottom:20px}.login-action-button button{background-color:#212529;border:none;border-radius:0;color:#fff;cursor:pointer;font-size:26px;font-weight:600;height:45px;line-height:18px;margin:10px 0;outline:none;padding:10px;width:100%}.login-action-button button:hover{background-color:#505050;border-color:#505050}.server_auth__error{color:red;font-family:Inter;font-size:12px;font-style:normal;padding-left:25px;padding-top:15px}.info-text-for-login{font-size:14px;margin-bottom:4px;padding-left:10px}.register-container{margin:0 auto;max-width:800px}.register-container .is-half{width:49%}.register-container__twoFields{display:flex;justify-content:space-between;margin-top:15px}.register-container__singleField{margin-top:15px}button{margin-top:10px}.payment_page{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.payment_page .order_info_section{padding:15px 0}.payment_page .order_info_section .order_info_block{padding-bottom:15px;padding-top:15px}.payment_page .order_info_section .order_info_block .field-underline{border-bottom:1px solid #000;padding-bottom:15px}.payment_page .order_info_section .order_info_block .order_info_title{font-size:14px;font-weight:700;padding-bottom:3px}.payment_page .order_info_section .order_info_block .order_info_text{font-size:16px;line-height:1.15;outline:none}.payment_page .MuiBox-root{margin-left:auto;margin-right:auto;padding:20px;text-align:center}.payment_page .payment_info_label{padding:20px 0;text-align:center}.payment_page .payment_form{color:#fff;padding:20px}.payment_page .payment_form input,.payment_page .payment_form label{color:#fff}.payment_page .payment_button{padding-top:20px;text-align:center}.card_form_inner{background:#232323;border-radius:8px;margin:0 auto 20px;min-width:325px;padding:15px;width:50%}.card_form_inner .card_label_text{color:#fff}.card_form_inner .StripeElement{margin:5px 0 10px}.card_label_text{color:#fff}.payment_button{padding-top:15px;text-align:center}.payment_button button{background-color:#212529;border-radius:8px;color:#fff;cursor:pointer;font-size:26px;padding:15px 30px;transition:opacity .5s;width:200px}.payment_button button:hover{opacity:.7}.disabled-payment-button button{opacity:.3;pointer-events:none;user-select:none}.checkout_error_block{color:#e53935;font-weight:600;padding:15px 0}.zip_element p{margin-bottom:0}.zip_element input{background-color:#232323;border:none;color:#fff;font-size:18px;margin-top:5px;outline:none;width:100%}.confirmation-page{margin:0 auto;max-width:1024px}.confirmation-page .strong-text{font-weight:700}.confirmation-page .title{color:#333;font-size:24px;font-weight:600}.confirmation-page .share-message-section{background:#dff0d8;border:1px solid #d6e9c6;border-radius:5px;color:#2c7221;display:flex;flex-direction:column;margin:20px 0;padding:15px}.confirmation-page .main{font-size:15px;font-weight:700}.confirmation-page .helper,.confirmation-page .main{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,Icons16,sans-serif}.confirmation-page .helper{font-size:14px;margin-top:5px}.confirmation-page .referral_text_image_section{align-items:center;display:flex;flex-wrap:wrap;justify-content:space-between;margin:20px -10px}.confirmation-page .referral_text_image_section .referral_text_section{margin:10px}.confirmation-page .referral_text_image_section .referral_title_text{color:#f08057;font-size:28px;padding-bottom:10px}.confirmation-page .referral_text_image_section .referral_text{font-size:18px}.confirmation-page .referral_text_image_section img{margin:10px;max-width:200px}.confirmation-page .share_wrapper{column-gap:5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:10px}.confirmation-page .share_wrapper .invitation_title{font-size:22px;padding-bottom:12px;padding-top:12px}.confirmation-page .share_wrapper .share_section{display:flex;flex-wrap:wrap;justify-content:space-between;margin:0 -10px}.confirmation-page .share_wrapper .share_section .invitation_section{flex:1 1;padding:0 5px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons{display:grid;flex-wrap:wrap;margin:0 -7px}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.confirmation-page .share_wrapper .share_section .invitation_section .share_buttons .social-media-btns .sharing-btn{min-width:130px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner.share-by-link-copy{padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-button{flex:1 1}.confirmation-page .share_wrapper .share_section .invitation_section .convenient_buttons.sharing-btn{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link{background:#000;color:#fff;padding:0}.confirmation-page .share_wrapper .share_section .invitation_section .share-by-link.label{margin:0;padding:0;text-align:left}.confirmation-page .share_wrapper .share_section .invitation_section .sharing-btn{flex:1 1;padding:7px;text-align:center}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner{background:#000;color:#fff;padding:10px}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .svg_wrapper{display:inline}.confirmation-page .share_wrapper .share_section .invitation_section .share-btn-inner .share-input{background-color:#fff;text-align:left;width:300px}.confirmation-page .share_wrapper .share_section .invitation_section .share-text{display:block;font-size:13px;font-weight:600;padding-top:8px;width:100%}.confirmation-page .share_wrapper .pricing-section_wrapper{background:#e3e3e3;border:1px solid #dcdcdc;display:grid;grid-template-columns:1fr 1fr;margin:10px 0;padding:15px}.confirmation-page .share_wrapper .pricing-section_wrapper.free_price{background:#e9835b;border:1px solid #eb7b4a;color:#fff}.confirmation-page .share_wrapper .pricing-section_label{font-weight:600}.confirmation-page .share_wrapper .pricing-section_sublabel{font-size:14px;font-weight:100}.confirmation-page .share_wrapper .pricing-section_price{font-weight:600;text-align:right}body{margin:0;padding:0}.get-tickets-page{width:100%}.event-detail__tier{background-color:#fff;padding:17px 35px 20px}.event-detail__tier-name{color:#000;font-family:Inter-Bold;font-family:Bebas Neue;font-size:.85rem;font-weight:700;letter-spacing:.2em;line-height:1.3;margin-bottom:8px;margin-top:16px;padding-right:20%;text-transform:uppercase}.event-detail__tier-status{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:8px;width:100%}.event-detail__tier-status.ticket-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;font-weight:700;letter-spacing:.2em;line-height:1.5;margin-bottom:10px;width:200px}.event-tickets-container{align-items:center;display:flex;justify-content:space-between}.event-detail__tier-status.ticket-button.true{background-color:#c1c3c6;border-color:#afb0b1}.event-detail__tier-price{color:#000;font-family:Inter-Bold;font-size:1.5rem;font-weight:700;line-height:1;text-align:center}.event-detail__tier-price p{margin:0}.event-detail__tier-price .fees{font-size:14px;font-weight:400;margin-top:4px;text-align:left}.event-detail__tier-price .old-price{color:red;font-size:1.3rem;margin-bottom:5px;text-decoration:line-through}.alert-info{background-color:#d9edf7;border:1px solid #bce8f1;border-radius:4px;color:#3a87ad;font-size:1em;margin:0 35px;padding:8px 15px;text-align:center;text-shadow:0 1px 0 hsla(0,0%,100%,.5)}.event-detail__tier-state{color:#30bc9d;font-family:Inter-Bold;font-size:.75rem;font-weight:300;line-height:1;text-align:right;text-transform:uppercase}.promo-code-block input{font-size:14px;padding:1px 8px}.book-button{background-color:#212529;border:3px solid #000;border-radius:0;color:#fff;cursor:pointer;display:block;font-size:26px;font-weight:700;height:50px;letter-spacing:.2em;line-height:1.5;margin:25px auto 10px;text-align:center;width:100%}.book-button:hover{background-color:#505050;border-color:#505050}.loader-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.get-tickets-paper::-webkit-scrollbar{width:5px}.get-tickets-paper::-webkit-scrollbar-track{background:#f1f1f1}.get-tickets-paper::-webkit-scrollbar-thumb{background:#888}.get-tickets-paper::-webkit-scrollbar-thumb:hover{background:#555}.get-tickets .get-tickets__selectbox{width:100%}.disabled{pointer-events:none;user-select:none}.hidden{display:none}.waiting-list{padding:17px 35px 20px}.waiting-list .field-item{margin-bottom:30px}.waiting-list .waiting-list-button{width:100%!important}.waiting-list .waiting-list-button:hover{background-color:#505050}.waiting-list .success-message h3{margin:10px 0}.waiting-list .success-message p{margin:0}.waiting-list .no-tickets-text{font-weight:700;text-align:center}.waiting-list .added-success-message{font-size:22px}

package/dist/utils/getImage.d.ts

@@ -0,0 +1 @@
+export declare const getImage: (name?: string) => any;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.56",
+  "version": "1.0.60",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -56,8 +56,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-scss": "^3.0.0",
-    "sass": "^1.43.4",
+    "rollup-plugin-static-files": "^0.2.0",
     "size-limit": "^6.0.4",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
@@ -71,9 +70,7 @@
     "@mui/styles": "^5.1.1",
     "@stripe/react-stripe-js": "^1.6.0",
     "@stripe/stripe-js": "^1.21.1",
-    "autoprefixer": "^10.4.0",
     "axios": "^0.24.0",
-    "cssnano": "^5.0.10",
     "formik": "^2.2.9",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",

package/src/.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.png';

package/src/api/index.ts

@@ -215,7 +215,12 @@ export const getCountries = () => publicRequest.get('/countries/')
 
 export const getConfirmationData = (orderHash: string) => publicRequest.get(`/v1/order/${orderHash}/payment/complete`)
 
-export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`)
+export const getStates = (countryId: string) => publicRequest.get(`/countries/${countryId}/states/`) 
+
+export const getOrders = (page: number, limit: number, eventSlug: string) =>
+  publicRequest.get(`/v1/account/orders/?page=${page}&limit=${limit}&filter[event]=${eventSlug}`)
+
+export const getOrderDetails = (orderId: string) => publicRequest.get(`/v1/account/order/${orderId}`) 
 
 export const addToWaitingList = (id: number, data: any) => publicRequest.post(`/v1/event/${id}/add_to_waiting_list`, data)
 

package/src/components/billing-info-container/index.tsx

@@ -45,8 +45,9 @@ import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
+import { getImage } from '../../utils/getImage'
 
-// const TTFLOGO = require('./logo-ttf.png')
+const TTFLOGO = getImage('logo-ttf.png')
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -507,9 +508,9 @@ export const BillingInfoContainer = ({
                     >
                       Login
                     </button>
-                    {/* <div className="logo-image-container">
+                    <div className="logo-image-container">
                       <img src={TTFLOGO} alt="nodata" />
-                    </div> */}
+                    </div>
                   </div>
                 </div>
               )}

package/src/components/confirmationContainer/index.tsx

@@ -35,6 +35,7 @@ const defaultSvg =
   'https://img.icons8.com/ios-filled/50/000000/facebook-new.svg'
 
 export const ConfirmationContainer = ({
+  isReferralEnabled,
   referralPromotions = [],
   shareButtons = [],
   shareLink = '',
@@ -68,7 +69,7 @@ export const ConfirmationContainer = ({
       }
     })()
   }, [])
-
+  
   return (
     <div className="confirmation-page">
       <p className="title">Your Tickets are Confirmed!</p>
@@ -76,7 +77,7 @@ export const ConfirmationContainer = ({
         <span className="main">Your tickets have been emailed to you</span>
         <span className="helper">Please bring them with you to the event</span>
       </div>
-      {data.disable_referral === false && (
+      { data.disable_referral === false && isReferralEnabled && (
         <>
           <div className="referral_text_image_section">
             <div className="referral_text_section">

package/src/components/index.ts

@@ -2,3 +2,5 @@ export { BillingInfoContainer } from './billing-info-container'
 export { ConfirmationContainer } from './confirmationContainer'
 export { PaymentContainer } from './paymentContainer'
 export { TicketsContainer } from './ticketsContainer'
+export { MyTicketsContainer } from './myTicketsContainer'
+export { OrderDetailsContainer } from './orderDetailsContainer'

package/src/components/loginModal/index.tsx

@@ -136,6 +136,7 @@ export const LoginModal: FC<Props> = ({
             {props => (
               <Form onSubmit={props.handleSubmit}>
                 <div className="modal-title">Login</div>
+                <img className="login-logo-tff" src="https://www.ticketfairy.com/resources/images/logo-ttf-black.svg" alt=""/>
                 <div className="server_auth__error">{error}</div>
                 {alreadyHasUser && (
                   <p className="info-text-for-login">

package/src/components/myTicketsContainer/index.tsx

@@ -0,0 +1,125 @@
+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;
+}
+
+interface EventFilter {
+  event_name: string;
+  url_name: string;
+}
+
+export const MyTicketsContainer = ({
+  handleDetailsInfo = () => {},
+  onGetOrdersSuccess = () => {},
+  onGetOrdersError = () => {}
+}: 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'>
+      {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>
+  )
+}

package/src/components/myTicketsContainer/row.tsx

@@ -0,0 +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

package/src/components/myTicketsContainer/style.css

@@ -0,0 +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;
+}

package/src/components/myTicketsContainer/tableConfig.tsx

@@ -0,0 +1,34 @@
+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

package/src/components/orderDetailsContainer/index.tsx

@@ -0,0 +1,120 @@
+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 from './ticketsTable'
+
+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>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setLoading(true)
+        const orderId = window.location.href.split('/').slice(-1)[0]
+        const response = await getOrderDetails(orderId)
+        onGetOrdersSuccess(response)
+
+        const data = _get(response, 'data.data.attributes')
+
+        setData(data)
+      } catch (error) {
+        onGetOrdersError(error)
+      } finally {
+        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>
+              <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} />
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/orderDetailsContainer/style.css

@@ -0,0 +1,53 @@
+.order-details {
+  max-width: 940px;
+  margin: 0 auto;
+}
+.order-details .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);
+}
+.order-details .layout-title {
+  font-size: 24px;
+  font-weight: 400;
+}
+.order-details .sub-title {
+  font-size: 18px;
+  font-weight: 400;
+  margin: 10px 0;
+}
+.order-details .order-summary-box {
+  margin-top: 30px;
+}
+.order-details .total-row td {
+  font-weight: 700;
+}
+.order-details th {
+  font-weight: 700;
+}
+.order-details .tickets-box {
+  margin-top: 30px;
+}
+.order-details .ticket-add-on-table {
+  background-color: #fcf8e3;;
+}
+.order-details .download-button {
+  border: none;
+  border-radius: 4px;
+  text-decoration: none;
+  color: #fff;
+  background-color: #32325d;
+  font-size: 12px;
+  font-weight: 400;
+  transition: all 150ms ease;
+  padding: 8px 14px;
+}
+.order-details .download-button:hover {
+  background-color: #505050;
+}

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -0,0 +1,86 @@
+import React, { Fragment } from 'react'
+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'
+
+interface TicketsTableTypes {
+  tickets: any[];
+}
+
+interface TicketTypes {
+  add_ons: any[];
+  hash: string;
+  ticket_type: string;
+  holder_name: string;
+  status: string;
+  pdf_link: string;
+}
+
+interface AddOnTypes {
+  name: string;
+  status: string;
+}
+
+const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => {
+  return (
+    <div className='tickets-box'>
+      <h4 className='sub-title'>Your Tickets</h4>
+      <TableContainer component={Paper}>
+        <Table aria-label="collapsible table">
+          <TableHead>
+            <TableRow>
+              <TableCell>Ticket ID</TableCell>
+              <TableCell>Ticket Type</TableCell>
+              <TableCell>Ticket Holder Name</TableCell>
+              <TableCell>Status</TableCell>
+              <TableCell>Download</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {tickets.map((ticket: TicketTypes, index: number) => (
+              <Fragment key={index}>
+                <TableRow>
+                  <TableCell>{ticket.hash}</TableCell>
+                  <TableCell>{ticket.ticket_type}</TableCell>
+                  <TableCell>{ticket.holder_name}</TableCell>
+                  <TableCell>{ticket.status}</TableCell>
+                  <TableCell>
+                    <a className='download-button' href={ticket.pdf_link} download>Download</a>
+                  </TableCell>
+                </TableRow>
+                {!!ticket.add_ons?.length && (
+                  <TableRow>
+                    <TableCell colSpan={5}>
+                      <Table className='ticket-add-on-table'>
+                        <TableHead>
+                          <TableRow>
+                            <TableCell>Add-On</TableCell>
+                            <TableCell>Status</TableCell>
+                          </TableRow>
+                        </TableHead>
+                        <TableBody>
+                          {ticket.add_ons.map((add_on: AddOnTypes, index: number) => (
+                            <TableRow key={index}>
+                              <TableCell>{add_on.name}</TableCell>
+                              <TableCell>{add_on.status}</TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </TableCell>
+                  </TableRow>
+                )}
+              </Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  )
+}
+
+export default TicketsTable

package/src/components/ticketsContainer/index.tsx

@@ -40,6 +40,7 @@ export interface IGetTickets {
   onGetTicketsError: (e: AxiosError) => void;
 
   theme?: 'light' | 'dark';
+  queryPromoCode?: string;
 }
 
 export interface ITicket {
@@ -60,6 +61,7 @@ export const TicketsContainer = ({
   onGetTicketsSuccess = () => {},
   onGetTicketsError = () => {},
   theme = 'light',
+  queryPromoCode = ''
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -69,7 +71,7 @@ export const TicketsContainer = ({
   const [isLoading, setIsLoading] = useState(false)
   const [handleBookIsLoading, setHandleBookIsLoading] = useState(false)
   const [promoCode, setPromoCode] = useState('')
-  const [promoCodeUpdated, setPromoCodeUpdated] = useState('')
+  const [promoCodeUpdated, setPromoCodeUpdated] = useState(queryPromoCode)
   const [showPromoInput, setShowPromoInput] = useState(false)
   const [promoCodeIsApplied, setPromoCodeIsApplied] = useState(false)