tf-checkout-react 1.0.81 → 1.0.82

package/package.json

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

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

@@ -27,6 +27,7 @@ import {
   register,
   setCustomHeader,
   getStates,
+  getPaymentData,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
@@ -41,7 +42,7 @@ import {
 import { CustomField } from '../common/CustomField'
 import axios from 'axios'
 import { CheckboxField } from '../common/CheckboxField'
-import { CircularProgress, ThemeOptions } from '@mui/material'
+import { Alert, CircularProgress, ThemeOptions } from '@mui/material'
 import { nanoid } from 'nanoid'
 import { getQueryVariable } from '../../utils/getQueryVariable'
 import { SelectField } from '../common/SelectField'
@@ -92,6 +93,7 @@ export interface IBillingInfoPage {
 
   onLogin?: () => void;
   onLoginSuccess?: () => void;
+  onErrorClose?: () => void;
 
   initialValues?: FormikValues;
   buttonName?: string;
@@ -117,7 +119,7 @@ const LogicRunner: FC<{
   setValues,
   setUserValues,
   onGetStatesSuccess,
-  onGetStatesError,
+  onGetStatesError
 }) => {
   const prevCountry = useRef(values.country)
   useEffect(() => {
@@ -211,7 +213,8 @@ export const BillingInfoContainer = ({
   isLoggedIn: pIsLoggedIn = false,
   accountInfoTitle = '',
   hideLogo,
-  themeOptions
+  themeOptions,
+  onErrorClose = () => {}
 }: IBillingInfoPage) => {
   const themeMui = createTheme(themeOptions)
   const isWindowDefined = typeof window !== 'undefined'
@@ -252,6 +255,7 @@ export const BillingInfoContainer = ({
     state: '',
     zip: '',
   })
+  const [error, setError] = useState(null)
   const emailLogged =
     _get(userData, 'email', '') || _get(userValues, 'email', '')
   const firstNameLogged =
@@ -403,6 +407,7 @@ export const BillingInfoContainer = ({
                 showDOB
               )
               const res = await postOnCheckout(checkoutBody, access_token)
+              await getPaymentData(res.data.data.attributes.hash)
               handleSubmit(
                 values,
                 formikHelpers as FormikHelpers<any>,
@@ -487,6 +492,7 @@ export const BillingInfoContainer = ({
               checkoutBody,
               access_token_register
             )
+            await getPaymentData(res.data.data.attributes.hash)
             handleSubmit(
               values,
               formikHelpers as FormikHelpers<any>,
@@ -503,6 +509,12 @@ export const BillingInfoContainer = ({
                   setShowModalLogin(true)
                 }
               }
+              if (e.response?.data.message) {
+                if (typeof document !== undefined) {
+                  document.body.scrollTop = document.documentElement.scrollTop = 0
+                }
+                setError(_get(e, 'response.data.message'))
+              }
               onSubmitError(e)
             }
           }
@@ -521,6 +533,11 @@ export const BillingInfoContainer = ({
               onGetStatesError={onGetStatesError}
             />
             <div className={`billing-info-container ${theme}`}>
+              {error && (
+                <Alert severity="error" onClose={onErrorClose} variant="filled">
+                  {error}
+                </Alert>
+              )}
               {!isLoggedIn && (
                 <div className="account-actions-block">
                   <div>{accountInfoTitle}</div>