tf-checkout-react 1.0.62 → 1.0.66

package/src/components/paymentContainer/index.tsx

@@ -17,6 +17,7 @@ import { IOrderData, IPaymentField } from '../../types'
 
 import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
 
 const testId = ENV.STRIPE_PUBLISHABLE_KEY || 'pk_test_3Ov1P1oP33A1cxaSjxWE0VjT'
 const stripePromise = loadStripe(
@@ -34,6 +35,7 @@ export interface IPaymentPage {
   onGetPaymentDataError: (value: AxiosError) => void;
   onPaymentError: (value: AxiosError) => void;
   stripeCardOptions?: StripeCardNumberElementOptions;
+  fontFamily?: string
 }
 
 const initialOrderValues: IOrderData = {
@@ -65,6 +67,7 @@ export const PaymentContainer = ({
   onGetPaymentDataError = () => {},
   onPaymentError = () => {},
   stripeCardOptions = {},
+  fontFamily,
 }: IPaymentPage) => {
   const [reviewData, setReviewData] = useState(initialReviewValues)
   const [orderData, setOrderData] = useState(initialOrderValues)
@@ -153,54 +156,64 @@ export const PaymentContainer = ({
     }
   }
 
+  const themeMui = createTheme({
+    typography: {
+      allVariants: {
+        fontFamily
+      },
+    },
+  })
+
   return (
-    <div className="payment_page">
-      {error && (
-        <Alert severity="error" onClose={onErrorClose} variant="filled">
-          {error}
-        </Alert>
-      )}
-      <Container maxWidth="md">
-        {showFormTitle && <h1>{formTitle}</h1>}
-        <div className="order_info_text">Order Review</div>
-        <div className="order_info_section">
-          {_map(paymentFields, field => {
-            const { id, label, className = '', normalizer = _identity } = field
-            return (
-              <div key={id} className="order_info_block">
-                <div className="order_info_title">{label}</div>
-                <div className={`${className} order_info_text`}>
-                  {normalizer(orderData[id], orderData.currency)}
+    <ThemeProvider theme={themeMui}>
+      <div className="payment_page">
+        {error && (
+          <Alert severity="error" onClose={onErrorClose} variant="filled">
+            {error}
+          </Alert>
+        )}
+        <Container maxWidth="md">
+          {showFormTitle && <h1>{formTitle}</h1>}
+          <div className="order_info_text">Order Review</div>
+          <div className="order_info_section">
+            {_map(paymentFields, field => {
+              const { id, label, className = '', normalizer = _identity } = field
+              return (
+                <div key={id} className="order_info_block">
+                  <div className="order_info_title">{label}</div>
+                  <div className={`${className} order_info_text`}>
+                    {normalizer(orderData[id], orderData.currency)}
+                  </div>
                 </div>
-              </div>
-            )
-          })}
-        </div>
-        <div className="payment_info">
-          <div className="payment_info_label">
-            Please provide your payment information
+              )
+            })}
           </div>
-          {showErrorText && <p className="payment_info__error">{errorText}</p>}
-          <div>
-            <Elements stripe={stripePromise}>
-              <StripePayment
-                stripe_client_secret={
-                  reviewData.payment_method.stripe_client_secret
-                }
-                total={orderData.total}
-                onSubmit={handlePaymentMiddleWare}
-                error={error}
-                currency={orderData.currency}
-                billing_info={reviewData.billing_info}
-                isLoading={paymentIsLoading}
-                handleSetLoading={value => setPaymentIsLoading(value)}
-                conditions={conditions}
-                stripeCardOptions={stripeCardOptions}
-              />
-            </Elements>
+          <div className="payment_info">
+            <div className="payment_info_label">
+              Please provide your payment information
+            </div>
+            {showErrorText && <p className="payment_info__error">{errorText}</p>}
+            <div>
+              <Elements stripe={stripePromise}>
+                <StripePayment
+                  stripe_client_secret={
+                    reviewData.payment_method.stripe_client_secret
+                  }
+                  total={orderData.total}
+                  onSubmit={handlePaymentMiddleWare}
+                  error={error}
+                  currency={orderData.currency}
+                  billing_info={reviewData.billing_info}
+                  isLoading={paymentIsLoading}
+                  handleSetLoading={value => setPaymentIsLoading(value)}
+                  conditions={conditions}
+                  stripeCardOptions={stripeCardOptions}
+                />
+              </Elements>
+            </div>
           </div>
-        </div>
-      </Container>
-    </div>
+        </Container>
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/ticketsContainer/TicketRow.tsx

@@ -41,6 +41,9 @@ export const TicketRow = ({
       <Box className="get-tickets__selectbox">
         <FormControl fullWidth>
           <Select
+            sx={{
+              borderRadius: 0,
+            }}
             value={
               selectedTickets[ticketTier.id]
                 ? selectedTickets[ticketTier.id]

package/src/index.ts

@@ -2,5 +2,10 @@ export { BillingInfoContainer } from './components/billing-info-container/index'
 export { PaymentContainer } from './components/paymentContainer/index'
 export { ConfirmationContainer } from './components/confirmationContainer/index'
 export { TicketsContainer } from './components/ticketsContainer/index'
-export { currencyNormalizerCreator, createFixedFloatNormalizer } from './normalizers'
-export { LoginModal } from './components/loginModal'
+export {
+  currencyNormalizerCreator,
+  createFixedFloatNormalizer,
+} from './normalizers'
+export { LoginModal } from './components/loginModal'
+export { MyTicketsContainer } from './components/myTicketsContainer'
+export { OrderDetailsContainer } from './components/orderDetailsContainer'