tf-checkout-react 1.0.78 → 1.0.79

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.78",
+  "version": "1.0.79",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -47,7 +47,7 @@ import { SelectField } from '../common/SelectField'
 import { ErrorFocus } from '../../utils/formikErrorFocus'
 import { FormikPhoneNumberField } from '../common/FormikPhoneNumberField'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styled-engine'
+import { CSSProperties } from '@mui/styles'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];

package/src/components/common/CheckboxField.tsx

@@ -4,6 +4,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'
 import Checkbox from '@mui/material/Checkbox'
 import { FieldInputProps } from 'formik'
 import { useTheme } from '@mui/styles'
+import { FormControl, FormHelperText } from '@mui/material'
 
 export interface ICheckboxField {
   label: string | number | JSX.Element;
@@ -24,14 +25,17 @@ export const CheckboxField = ({
 }: ICheckboxField & IOtherProps) => {
   const customTheme: any = useTheme()
   return (
-    <FormGroup>
-      <FormControlLabel
-        control={<Checkbox {...field} {...rest} />}
-        label={label}
-        componentsProps={{
-          typography: customTheme?.checkbox
-        }}
-      />
-    </FormGroup>
+    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""])}>
+      <FormGroup>
+        <FormControlLabel
+          control={<Checkbox {...field} {...rest} />}
+          label={label}
+          componentsProps={{
+            typography: customTheme?.checkbox
+          }}
+        />
+      </FormGroup>
+      {!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""]) ? <FormHelperText>Required</FormHelperText> : null}
+    </FormControl>
   )
 }

package/src/components/paymentContainer/index.tsx

@@ -1,10 +1,10 @@
-import React, { CSSProperties, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { AxiosError } from 'axios'
 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'
@@ -20,6 +20,7 @@ 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 || ''
 
@@ -61,6 +62,7 @@ export interface IPaymentPage {
   stripeCardOptions?: StripeCardNumberElementOptions;
   disableZipSection: boolean;
   themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties };
+  elementsOptions?: StripeElementsOptions; 
 }
 
 const initialOrderValues: IOrderData = {
@@ -94,6 +96,7 @@ export const PaymentContainer = ({
   stripeCardOptions = {},
   disableZipSection = false,
   themeOptions,
+  elementsOptions
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -226,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">

package/src/components/ticketsContainer/index.tsx

@@ -22,6 +22,9 @@ import { PromoCodeSection } from './PromoCodeSection'
 import { LoginModal } from '../loginModal'
 import Countdown from '../countdown'
 import { createCheckoutDataBodyWithDefaultHolder } from '../../utils'
+import { ThemeProvider } from '@mui/private-theming'
+import { createTheme, ThemeOptions } from '@mui/material'
+import { CSSProperties } from '@mui/styles'
 
 function Loader() {
   return (
@@ -52,6 +55,7 @@ export interface IGetTickets {
   theme?: 'light' | 'dark';
   queryPromoCode?: string;
   isPromotionsEnabled?: boolean;
+  themeOptions?: ThemeOptions & { input?: CSSProperties; checkbox?: CSSProperties }
 }
 
 export interface ITicket {
@@ -75,6 +79,7 @@ export const TicketsContainer = ({
   theme = 'light',
   queryPromoCode = '',
   isPromotionsEnabled = true,
+  themeOptions,
 }: IGetTickets) => {
   const [selectedTickets, setSelectedTickets] = useState(
     {} as ISelectedTickets
@@ -274,6 +279,8 @@ export const TicketsContainer = ({
     item => !(item.sold_out || item.soldOut)
   )
 
+  const themeMui = createTheme(themeOptions)
+  
   useEffect(() => {
     isWindowDefined &&
       window.document.addEventListener('custom-logout', handleLogout)
@@ -296,91 +303,93 @@ export const TicketsContainer = ({
   }, [])
 
   return (
-    <div className={`get-tickets-page ${theme}`} style={contentStyle}>
-      {isLoading ? (
-        <Loader />
-      ) : (
-        <div>
-          <TicketsSection
-            ticketsList={tickets}
-            selectedTickets={selectedTickets}
-            handleTicketSelect={handleTicketSelect}
-            promoCodeIsApplied={promoCodeIsApplied}
-          />
-          {event?.salesEnded ? (
-            <p>Sales for this event are closed.</p>
-          ) : event?.salesStart ? (
-            <Countdown
-              startDate={event.salesStart}
-              timezone={event.timezone}
-              title="Sales start in:"
-              message="No tickets are currently available for this event."
-              callback={updateTickets}
+    <ThemeProvider theme={themeMui}>
+      <div className={`get-tickets-page ${theme}`} style={contentStyle}>
+        {isLoading ? (
+          <Loader />
+        ) : (
+          <div>
+            <TicketsSection
+              ticketsList={tickets}
+              selectedTickets={selectedTickets}
+              handleTicketSelect={handleTicketSelect}
+              promoCodeIsApplied={promoCodeIsApplied}
             />
-          ) : null}
-          {showWaitingList && (
-            <WaitingList tickets={tickets} eventId={eventId} />
-          )}
-          <PromoCodeSection
-            promoCode={promoCode}
-            promoCodeIsApplied={promoCodeIsApplied}
-            showPromoInput={showPromoInput}
-            setPromoCode={setPromoCode}
-            setPromoCodeUpdated={setPromoCodeUpdated}
-            setShowPromoInput={setShowPromoInput}
-            isPromotionsEnabled={isPromotionsEnabled}
-            isAllTicketsSoldOut={isAllTicketsSoldOut}
-          />
-          {!isAllTicketsSoldOut && (
-            <Button
-              aria-hidden={true}
-              className={`book-button ${
-                handleBookIsLoading ||
-                _isEmpty(selectedTickets) ||
-                Object.values(selectedTickets)[0] === 0
-                  ? 'disabled'
-                  : ''
-              }`}
-              onClick={
-                !handleBookIsLoading &&
-                !_isEmpty(selectedTickets) &&
-                Object.values(selectedTickets)[0] > 0
-                  ? handleBook
-                  : () => {}
-              }
-            >
-              {getTicketsLabel || 'GET TICKETS'}
-            </Button>
-          )}
-          {isLogged ? (
-            <div className="session-wrapper">
-              <span className="session-container">
-                <Button
-                  variant="outline-light"
-                  className="session-buttons"
-                  onClick={handleOrdersClick}
-                >
-                  My Orders
-                </Button>
-              </span>
-              <span className="session-container">
-                <Button
-                  variant="outline-light"
-                  className="session-buttons"
-                  onClick={handleLogout}
-                >
-                  Log out
-                </Button>
-              </span>
-            </div>
-          ) : (
-            ''
-          )}
-        </div>
-      )}
-      {showLoginModal ? (
-        <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} />
-      ) : null}
-    </div>
+            {event?.salesEnded ? (
+              <p>Sales for this event are closed.</p>
+            ) : event?.salesStart ? (
+                <Countdown
+                  startDate={event.salesStart}
+                  timezone={event.timezone}
+                  title="Sales start in:"
+                  message="No tickets are currently available for this event."
+                  callback={updateTickets}
+                />
+            ) : null}
+            {showWaitingList && event.salesStarted && (
+              <WaitingList tickets={tickets} eventId={eventId} />
+            )}
+            <PromoCodeSection
+              promoCode={promoCode}
+              promoCodeIsApplied={promoCodeIsApplied}
+              showPromoInput={showPromoInput}
+              setPromoCode={setPromoCode}
+              setPromoCodeUpdated={setPromoCodeUpdated}
+              setShowPromoInput={setShowPromoInput}
+              isPromotionsEnabled={isPromotionsEnabled}
+              isAllTicketsSoldOut={isAllTicketsSoldOut}
+            />
+            {!isAllTicketsSoldOut && (
+              <Button
+                aria-hidden={true}
+                className={`book-button ${
+                  handleBookIsLoading ||
+                  _isEmpty(selectedTickets) ||
+                  Object.values(selectedTickets)[0] === 0
+                    ? 'disabled'
+                    : ''
+                }`}
+                onClick={
+                  !handleBookIsLoading &&
+                  !_isEmpty(selectedTickets) &&
+                  Object.values(selectedTickets)[0] > 0
+                    ? handleBook
+                    : () => {}
+                }
+              >
+                {getTicketsLabel || 'GET TICKETS'}
+              </Button>
+            )}
+            {isLogged ? (
+              <div className="session-wrapper">
+                <span className="session-container">
+                  <Button
+                    variant="outline-light"
+                    className="session-buttons"
+                    onClick={handleOrdersClick}
+                  >
+                    My Orders
+                  </Button>
+                </span>
+                <span className="session-container">
+                  <Button
+                    variant="outline-light"
+                    className="session-buttons"
+                    onClick={handleLogout}
+                  >
+                    Log out
+                  </Button>
+                </span>
+              </div>
+            ) : (
+              ''
+            )}
+          </div>
+        )}
+        {showLoginModal ? (
+          <LoginModal onClose={handleOnClose} onLogin={handleOnLogin} />
+        ) : null}
+      </div>
+    </ThemeProvider>
   )
 }