tf-checkout-react 1.6.6-beta.32 → 1.6.6-beta.33

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.6.6-beta.32",
+  "version": "1.6.6-beta.33",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -49,7 +49,7 @@ export const SimpleAddonsContainer = ({
   onAddOnSelect = _identity,
   handleConfirm = _identity,
 }: ISimpleAddonContainerProps) => {
-  const [addons, setAddons] = useState<any>([])
+  const [addons, setAddons] = useState<any>(null)
   const [addonsOptions, setAddonsOptions] = useState<any>({})
   const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
   const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] =
@@ -191,7 +191,7 @@ export const SimpleAddonsContainer = ({
     return addOnsData
   }, [addons, addOnDataWithCustomFields])
 
-  if (loading) {
+  if (loading || !addons) {
     return (
       <div className={`${classNamePrefix}_loader`}>
         <CircularProgress size={50} />
@@ -199,10 +199,6 @@ export const SimpleAddonsContainer = ({
     )
   }
 
-  if (addons?.length === 0) {
-    return null
-  }
-
   return (
     <div className={`${classNamePrefix}_container`}>
       <div className={`${classNamePrefix}_block`}>

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

@@ -315,8 +315,11 @@ const BillingInfoContainer = React.memo(
         : {}
     const additionalConfigs =
       isBrowser && window.localStorage.getItem('checkoutAdditionalConfigs')
-        ? JSON.parse(window.localStorage.getItem('checkoutAdditionalConfigs') || '{"resale": false, "resaleWithAddons": false}')
-        : {resale: false, resaleWithAddons: false}
+        ? JSON.parse(
+            window.localStorage.getItem('checkoutAdditionalConfigs') ||
+              '{"resale": false, "resaleWithAddons": false}'
+          )
+        : { resale: false, resaleWithAddons: false }
     const [dataWithUniqueIds, setDataWithUniqueIds] = useState<IBillingInfoData[]>(
       assingUniqueIds(data)
     )
@@ -763,20 +766,25 @@ const BillingInfoContainer = React.memo(
     const stripePublishableKey =
       reviewData?.payment_method?.stripe_publishable_key ||
       checkoutUpdateData?.additional_payment_information?.basic_config?.apiKey
-    const stripeAccountId = reviewData?.payment_method?.stripe_connected_account ||
+    const stripeAccountId =
+      reviewData?.payment_method?.stripe_connected_account ||
       checkoutUpdateData?.additional_payment_information?.basic_config?.accountId
-    const addOnsIncludedOnInvitation = additionalConfigs.resale && additionalConfigs.resaleWithAddons
+    const addOnsIncludedOnInvitation =
+      additionalConfigs.resale && additionalConfigs.resaleWithAddons
+
+    if (loading || cardLoading || isCountriesLoading || isConfigLoading || !eventId) {
+      return (
+        <Backdrop
+          sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
+          open={true}
+        >
+          <CircularProgress color="inherit" />
+        </Backdrop>
+      )
+    }
 
     return (
       <ThemeProvider theme={themeMui}>
-        {(loading || cardLoading || isCountriesLoading || isConfigLoading) && (
-          <Backdrop
-            sx={{ color: '#fff', backgroundColor: '#000000bd', zIndex: 1205 }}
-            open={true}
-          >
-            <CircularProgress color="inherit" />
-          </Backdrop>
-        )}
         {!!expirationTime && enableTimer && (
           <TimerWidget
             expires_at={expirationTime}
@@ -817,13 +825,14 @@ const BillingInfoContainer = React.memo(
 
                 if (isSinglePageCheckout && !orderIsFree) {
                   const card = cardRef.current
-                  const stripePaymentMethodResponse = await stripeRef.current.createPaymentMethod({
-                    type: 'card',
-                    card: card || { token: '' },
-                    billing_details: {
-                      address: addressRef.current,
-                    },
-                  })
+                  const stripePaymentMethodResponse =
+                    await stripeRef.current.createPaymentMethod({
+                      type: 'card',
+                      card: card || { token: '' },
+                      billing_details: {
+                        address: addressRef.current,
+                      },
+                    })
 
                   if (stripePaymentMethodResponse?.error) {
                     setError('' + stripePaymentMethodResponse?.error?.message)
@@ -1000,12 +1009,13 @@ const BillingInfoContainer = React.memo(
                         return
                       }
 
-                      const confirmationResult = await stripeRef.current.confirmCardPayment(
-                        paymentMethod.stripe_client_secret,
-                        {
-                          payment_method: stripePaymentMethod.id,
-                        }
-                      )
+                      const confirmationResult =
+                        await stripeRef.current.confirmCardPayment(
+                          paymentMethod.stripe_client_secret,
+                          {
+                            payment_method: stripePaymentMethod.id,
+                          }
+                        )
 
                       if (confirmationResult?.error) {
                         setError('' + confirmationResult?.error?.message)
@@ -1103,15 +1113,17 @@ const BillingInfoContainer = React.memo(
                   shouldFetchCountries={shouldFetchCountries}
                 />
                 <div className={`billing-info-container ${theme}`}>
-                  <SnackbarAlert
-                    type="error"
-                    isOpen={!!error}
-                    message={error || ''}
-                    onClose={() => {
-                      setError(null)
-                      onErrorClose()
-                    }}
-                  />
+                  {!!error && (
+                    <SnackbarAlert
+                      type="error"
+                      isOpen={!!error}
+                      message={error || ''}
+                      onClose={() => {
+                        setError(null)
+                        onErrorClose()
+                      }}
+                    />
+                  )}
                   {!isLoggedIn && !isSinglePageCheckout && (
                     <div className="account-actions-block">
                       <div className="action-item">