tf-checkout-react 1.0.95 → 1.0.96

package/package.json

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

package/src/api/index.ts

@@ -216,6 +216,15 @@ export const handlePaymentSuccess = (orderHash: string) => {
   return res
 }
 
+export const handleFreeSuccess = (orderHash: string) => {
+  const res = publicRequest
+    .post(`v1/order/${orderHash}/complete_free_registration`)
+    .catch(error => {
+      throw error
+    })
+  return res
+}
+
 export const getProfileData = (accessToken: any) =>
   publicRequest
     .get('/customer/profile/', {

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

@@ -28,7 +28,6 @@ import {
   register,
   setCustomHeader,
   getStates,
-  getPaymentData,
 } from '../../api'
 import { LoginModal } from '../loginModal'
 import { RegisterModal } from '../registerModal'
@@ -448,7 +447,6 @@ export const BillingInfoContainer = ({
 
               const checkoutBody = collectCheckoutBody(values)
               const res = await postOnCheckout(checkoutBody, access_token)
-              await getPaymentData(res.data.data.attributes.hash)
               handleSubmit(
                 values,
                 formikHelpers as FormikHelpers<any>,
@@ -521,7 +519,6 @@ export const BillingInfoContainer = ({
               checkoutBody,
               access_token_register
             )
-            await getPaymentData(res.data.data.attributes.hash)
             handleSubmit(
               values,
               formikHelpers as FormikHelpers<any>,

package/src/components/paymentContainer/index.tsx

@@ -20,7 +20,7 @@ import './style.css'
 import StripePayment from '../stripePayment'
 import { IOrderData, IPaymentField } from '../../types'
 
-import { getPaymentData, handlePaymentSuccess, getConditions } from '../../api'
+import { getPaymentData, handlePaymentSuccess, getConditions, handleFreeSuccess } from '../../api'
 import { StripeCardNumberElementOptions } from '@stripe/stripe-js'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import { ThemeOptions } from '@mui/material'
@@ -121,9 +121,9 @@ export const PaymentContainer = ({
   const showErrorText: boolean = Boolean(errorText)
 
   const eventId = getQueryVariable('event_id')
+  const { hash, total } = checkoutData;
 
   useEffect(() => {
-    const { hash } = checkoutData;
     (async () => {
       try {
         const response = await getPaymentData(hash)
@@ -187,7 +187,7 @@ export const PaymentContainer = ({
       const {
         order_details: { order_hash },
       } = reviewData
-      const paymentSuccessResponse = await handlePaymentSuccess(order_hash)
+      const paymentSuccessResponse = total === "0.00" ? (await handleFreeSuccess(order_hash)) : (await handlePaymentSuccess(order_hash))
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
         setPaymentIsLoading(false)
@@ -238,7 +238,7 @@ export const PaymentContainer = ({
                 )
               })}
             </div>
-            <div className="payment_info">
+            {total !== "0.00" ? <div className="payment_info">
               <div className="payment_info_label">
                 Please provide your payment information
               </div>
@@ -268,7 +268,20 @@ export const PaymentContainer = ({
                   />
                 </Elements>
               </div>
-            </div>
+            </div> : 
+            <div
+              className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''}`}
+            >
+              <button disabled={paymentIsLoading} type="button" onClick={() => {
+                handlePaymentMiddleWare(null)
+              }}>
+                {paymentIsLoading ? (
+                  <CircularProgress size={26} />
+                ) : (
+                  "Complete Registration"
+                )}
+              </button>
+            </div>}
           </Container>
         )}
       </div>