tf-checkout-react 1.0.75 → 1.0.79

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -6,13 +6,14 @@ 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 { downloadPDF } from '../../utils'
 
-interface TicketsTableTypes {
-  tickets: any[];
+interface IAddOnTypes {
+  name: string;
+  status: string;
 }
-
-interface TicketTypes {
-  add_ons: any[];
+interface ITicketTypes {
+  add_ons?: IAddOnTypes[];
   hash: string;
   ticket_type: string;
   holder_name: string;
@@ -20,67 +21,72 @@ interface TicketTypes {
   pdf_link: string;
 }
 
-interface AddOnTypes {
-  name: string;
-  status: string;
+interface TicketsTableTypes {
+  tickets: ITicketTypes[];
 }
 
-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}>
+const TicketsTable = ({ tickets = [] }: TicketsTableTypes) => (
+  <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: ITicketTypes, 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>
+                  <span
+                    aria-hidden={true}
+                    className="download-button"
+                    onClick={() => downloadPDF(ticket.pdf_link)}
+                  >
+                    Download
+                  </span>
+                </TableCell>
+              </TableRow>
+              {!!ticket.add_ons?.length && (
                 <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) => (
+                  <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: IAddOnTypes, 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>
-  )
-}
+                          )
+                        )}
+                      </TableBody>
+                    </Table>
+                  </TableCell>
+                </TableRow>
+              )}
+            </Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  </div>
+)
 
 export default TicketsTable

package/src/components/paymentContainer/index.tsx

@@ -4,7 +4,7 @@ import Container from '@mui/material/Container'
 import CircularProgress from '@mui/material/CircularProgress'
 import Alert from '@mui/material/Alert'
 import { Elements } from '@stripe/react-stripe-js'
-import { loadStripe, StripeConstructorOptions } from '@stripe/stripe-js'
+import { loadStripe, StripeConstructorOptions, StripeElementsOptions } from '@stripe/stripe-js'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
@@ -19,6 +19,8 @@ import { IOrderData, IPaymentField } from '../../types'
 import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { ThemeOptions } from '@mui/material'
+import { CSSProperties } from "@mui/styles"
 
 const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
 
@@ -59,7 +61,8 @@ export interface IPaymentPage {
   onPaymentError: (value: AxiosError) => void;
   stripeCardOptions?: StripeCardNumberElementOptions;
   disableZipSection: boolean;
-  fontFamily?: string;
+  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties };
+  elementsOptions?: StripeElementsOptions; 
 }
 
 const initialOrderValues: IOrderData = {
@@ -92,7 +95,8 @@ export const PaymentContainer = ({
   onPaymentError = () => {},
   stripeCardOptions = {},
   disableZipSection = false,
-  fontFamily,
+  themeOptions,
+  elementsOptions
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -184,13 +188,7 @@ export const PaymentContainer = ({
     }
   }
 
-  const themeMui = createTheme({
-    typography: {
-      allVariants: {
-        fontFamily,
-      },
-    },
-  })
+  const themeMui = createTheme(themeOptions)
 
   return (
     <ThemeProvider theme={themeMui}>
@@ -231,7 +229,7 @@ export const PaymentContainer = ({
                 <p className="payment_info__error">{errorText}</p>
               )}
               <div>
-                <Elements stripe={getStripePromise(reviewData)}>
+                <Elements stripe={getStripePromise(reviewData)} options={elementsOptions}>
                   <StripePayment
                     stripe_client_secret={_get(
                       reviewData,

package/src/components/stripePayment/index.tsx

@@ -191,7 +191,7 @@ const CheckoutForm = ({
           <label className="card_number_element">
             <span className="card_label_text">Card number</span>
             <CardNumberElement
-              options={{ ...options.style, ...stripeCardOptions }}
+              options={{ ...options, ...stripeCardOptions, }}
               onReady={_identity}
               onChange={_identity}
               onBlur={_identity}
@@ -200,11 +200,11 @@ const CheckoutForm = ({
           </label>
           <label className="expiration_element">
             <span className="card_label_text">Expiration date</span>
-            <CardExpiryElement options={{ ...options.style, ...stripeCardOptions }} />
+            <CardExpiryElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           <label className="cvc_element">
             <span className="card_label_text">CVC</span>
-            <CardCvcElement options={{ ...options.style, ...stripeCardOptions }} />
+            <CardCvcElement options={{ ...options, ...stripeCardOptions }} />
           </label>
           {!disableZipSection && (
             <label className="zip_element">
@@ -239,7 +239,7 @@ const CheckoutForm = ({
         >
           <button disabled={buttonIsDiabled} type="submit">
             {isLoading ? (
-              <CircularProgress />
+              <CircularProgress size={26} />
             ) : (
               `Pay ${getCurrencySymbolByCurrency(currency)}${total}`
             )}

package/src/components/ticketsContainer/PromoCodeSection.tsx

@@ -34,13 +34,14 @@ export const PromoCodeSection = ({
             src={getImage('done.svg')}
             preProcessor={(code) => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
           />
-          <p>PROMO CODE APPLIED SUCCESSFULLY</p>
+          <p className="promo-code-success">PROMO CODE APPLIED SUCCESSFULLY</p>
         </div>
       ) : null}
       {showPromoInput && (
         <div className="promo-code-block">
+          <label>PROMO CODE</label>
           <input
-            placeholder="Promo Code"
+            placeholder=""
             onChange={e => {
               setPromoCode(e.target.value)
             }}

package/src/components/ticketsContainer/TicketsSection.tsx

@@ -66,12 +66,16 @@ export const TicketsSection = ({
                 className="event-detail__tier-state"
                 style={{ minWidth: 55 }}
               >
-                <TicketRow
-                  ticketTier={ticket}
-                  prevTicketTier={arr[i - 1]}
-                  selectedTickets={selectedTickets}
-                  handleTicketSelect={ticketSelect}
-                />
+                {ticket.salesStarted ? (
+                  <TicketRow
+                    ticketTier={ticket}
+                    prevTicketTier={arr[i - 1]}
+                    selectedTickets={selectedTickets}
+                    handleTicketSelect={ticketSelect}
+                  />
+                ) : (
+                  <p className='ticket-not-started-message'>Sales not started</p>
+                )}
               </div>
             </div>
           </div>