tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/paymentContainer/index.tsx

@@ -1,284 +1,352 @@
-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,
-  StripeElementsOptions,
-} from '@stripe/stripe-js'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import { CONFIGS } from '../../utils'
-import { nanoid } from 'nanoid'
-import { getQueryVariable } from '../../utils/getQueryVariable'
-
-import './style.css'
-import StripePayment from '../stripePayment'
-import { IOrderData, IPaymentField } from '../../types'
-
-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'
-import { CSSProperties } from '@mui/styles'
-import TimerWidget from '../timerWidget'
-import { Loader } from '../common/index'
-
-const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
-
-const getStripePromise = (reviewData: any) => {
-  const stripePublishableKey =
-    _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey
-  const stripeAccount = _get(
-    reviewData,
-    'payment_method.stripe_connected_account'
-  )
-
-  const options: StripeConstructorOptions = {}
-  if (stripeAccount) {
-    options.stripeAccount = stripeAccount
-  }
-
-  return loadStripe(stripePublishableKey, options)
-}
-
-export interface IPaymentPage {
-  paymentFields: IPaymentField[];
-  handlePayment: any;
-  checkoutData: any;
-  formTitle?: string;
-  errorText?: string;
-  onErrorClose?: () => void;
-  onGetPaymentDataSuccess: (value: any) => void;
-  onGetPaymentDataError: (value: AxiosError) => void;
-  onPaymentError: (value: AxiosError) => void;
-  stripeCardOptions?: StripeCardNumberElementOptions;
-  disableZipSection: boolean;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  elementsOptions?: StripeElementsOptions;
-  onCountdownFinish?: () => void;
-  enableTimer?: boolean;
-}
-
-const initialOrderValues: IOrderData = {
-  product_name: '',
-  ticketType: '',
-  quantity: '',
-  price: '',
-  total: '',
-  currency: '',
-}
-const initialReviewValues = {
-  order_details: {
-    order_hash: '',
-  },
-  payment_method: {
-    stripe_client_secret: '',
-  },
-  billing_info: {},
-}
-
-export const PaymentContainer = ({
-  paymentFields = [],
-  handlePayment,
-  formTitle = 'Get Your Tickets',
-  errorText,
-  checkoutData,
-  onErrorClose = _identity,
-  onGetPaymentDataSuccess = () => {},
-  onGetPaymentDataError = () => {},
-  onPaymentError = () => {},
-  stripeCardOptions = {},
-  disableZipSection = false,
-  themeOptions,
-  elementsOptions,
-  onCountdownFinish = () => {},
-  enableTimer = false,
-}: IPaymentPage) => {
-  const [reviewData, setReviewData] = useState(initialReviewValues)
-  const [orderData, setOrderData] = useState(initialOrderValues)
-  const [error, setError] = useState(null)
-  const [paymentIsLoading, setPaymentIsLoading] = useState(false)
-  const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
-  const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
-    []
-  )
-
-  const showFormTitle: boolean = Boolean(formTitle)
-  const showErrorText: boolean = Boolean(errorText)
-
-  const eventId = getQueryVariable('event_id')
-  const { hash, total } = checkoutData;
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const response = await getPaymentData(hash)
-        if (response.data.success) {
-          const attributes = _get(response, 'data.data.attributes')
-          setReviewData(attributes)
-          const { cart, order_details } = attributes
-          const {
-            tickets: [ticket],
-          } = order_details
-          const orderData = {
-            product_name: cart[0]?.product_name,
-            ticketType: ticket?.name,
-            quantity: ticket?.quantity,
-            price: ticket?.price,
-            total: order_details?.total,
-            currency: order_details?.currency,
-          }
-          setOrderData(orderData)
-          onGetPaymentDataSuccess(response.data)
-        }
-      } catch (e) {
-        setError(_get(e, 'response.data.message'))
-        onGetPaymentDataError(e.response)
-      } finally {
-        setPaymentDataIsLoading(false)
-      }
-    })()
-  }, [checkoutData])
-
-  //just once
-  useEffect(() => {
-    // fetch conditions data
-    const fetchConditions = async () => {
-      if (eventId) {
-        const res = await getConditions(eventId)
-        const conditionsInfo = _get(res, 'data.data.attributes')
-        setConditions(
-          conditionsInfo
-            ? conditionsInfo.map((item: string) => ({
-              id: nanoid(),
-              text: item,
-              checked: false,
-            }))
-            : []
-        )
-      }
-    }
-    fetchConditions()
-  }, [])
-
-  // 1. get payment data   ---> v1/order/${hash}/review/ done
-  // 2. handle payment     ---> v1/order/${orderHash}/pay/
-  // 3. redirect to confirmation page
-  const handlePaymentMiddleWare = async (error: any) => {
-    try {
-      if (error) {
-        setPaymentIsLoading(false)
-        throw error
-      }
-      const {
-        order_details: { order_hash },
-      } = reviewData
-      const paymentSuccessResponse = total === "0.00" ? (await handleFreeSuccess(order_hash)) : (await handlePaymentSuccess(order_hash))
-      if (paymentSuccessResponse.status === 200) {
-        handlePayment(paymentSuccessResponse)
-        setPaymentIsLoading(false)
-      }
-    } catch (e) {
-      setError(_get(e, 'response.data.message'))
-      onPaymentError(e.response)
-    }
-  }
-
-  const themeMui = createTheme(themeOptions)
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <div className="payment_page">
-        {!paymentIsLoading && !error && enableTimer && (
-          <TimerWidget
-            expires_at={_get(reviewData, 'expires_at', 0)}
-            buyLoading={paymentIsLoading}
-            onCountdownFinish={onCountdownFinish}
-          />
-        )}
-        {error && (
-          <Alert severity="error" onClose={onErrorClose} variant="filled">
-            {error}
-          </Alert>
-        )}
-        {paymentDataIsLoading && <Loader />}
-        {!paymentDataIsLoading && (
-          <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>
-            {total !== "0.00" ? <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={getStripePromise(reviewData)}
-                  options={elementsOptions}
-                >
-                  <StripePayment
-                    stripe_client_secret={_get(
-                      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}
-                    disableZipSection={disableZipSection}
-                  />
-                </Elements>
-              </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>
-    </ThemeProvider>
-  )
-}
+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,
+  StripeElementsOptions,
+} from '@stripe/stripe-js'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+import _identity from 'lodash/identity'
+import { CONFIGS } from '../../utils'
+import { nanoid } from 'nanoid'
+import { getQueryVariable } from '../../utils/getQueryVariable'
+
+import './style.css'
+import StripePayment from '../stripePayment'
+import { IOrderData, IPaymentField } from '../../types'
+
+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'
+import { CSSProperties } from '@mui/styles'
+import TimerWidget from '../timerWidget'
+import { Loader } from '../common/index'
+
+const publishableKey = CONFIGS.STRIPE_PUBLISHABLE_KEY || ''
+
+const getStripePromise = (reviewData: any) => {
+  const stripePublishableKey =
+    _get(reviewData, 'payment_method.stripe_publishable_key') || publishableKey
+  const stripeAccount = _get(
+    reviewData,
+    'payment_method.stripe_connected_account'
+  )
+
+  const options: StripeConstructorOptions = {}
+  if (stripeAccount) {
+    options.stripeAccount = stripeAccount
+  }
+
+  return loadStripe(stripePublishableKey, options)
+}
+
+export interface IPaymentPage {
+  paymentFields: IPaymentField[];
+  handlePayment: any;
+  checkoutData: any;
+  formTitle?: string;
+  errorText?: string;
+  onErrorClose?: () => void;
+  onGetPaymentDataSuccess: (value: any) => void;
+  onGetPaymentDataError: (value: AxiosError) => void;
+  onPaymentError: (value: AxiosError) => void;
+  stripeCardOptions?: StripeCardNumberElementOptions;
+  disableZipSection: boolean;
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
+  elementsOptions?: StripeElementsOptions;
+  onCountdownFinish?: () => void;
+  enableTimer?: boolean;
+  enablePaymentPlan?: boolean;
+  paymentButtonText?: string;
+}
+
+const initialOrderValues: IOrderData = {
+  product_name: '',
+  ticketType: '',
+  quantity: '',
+  price: '',
+  total: '',
+  currency: '',
+}
+const initialReviewValues = {
+  order_details: {
+    order_hash: '',
+  },
+  payment_method: {
+    stripe_client_secret: '',
+  },
+  billing_info: {},
+}
+
+export const PaymentContainer = ({
+  paymentFields = [],
+  handlePayment,
+  formTitle = 'Get Your Tickets',
+  errorText,
+  checkoutData,
+  onErrorClose = _identity,
+  onGetPaymentDataSuccess = () => { },
+  onGetPaymentDataError = () => { },
+  onPaymentError = () => { },
+  stripeCardOptions = {},
+  disableZipSection = false,
+  themeOptions,
+  elementsOptions,
+  onCountdownFinish = () => { },
+  enableTimer = false,
+  enablePaymentPlan = false,
+  paymentButtonText
+}: IPaymentPage) => {
+  const [reviewData, setReviewData] = useState(initialReviewValues)
+  const [orderData, setOrderData] = useState(initialOrderValues)
+  const [error, setError] = useState(null)
+  const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
+  const [paymentIsLoading, setPaymentIsLoading] = useState(false)
+  const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
+  const [conditions, setConditions] = useState<{ id: string; text: string }[]>(
+    []
+  )
+
+  const showFormTitle: boolean = Boolean(formTitle)
+  const showErrorText: boolean = Boolean(errorText)
+
+  const eventId = getQueryVariable('event_id')
+  const { hash, total } = checkoutData
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const response = await getPaymentData(hash)
+        if (response.data.success) {
+          const attributes = _get(response, 'data.data.attributes')
+          setReviewData(attributes)
+          const { cart, order_details } = attributes
+          const {
+            tickets: [ticket],
+          } = order_details
+          const orderData = {
+            product_name: cart[0]?.product_name,
+            ticketType: ticket?.name,
+            quantity: ticket?.quantity,
+            price: ticket?.price,
+            total: order_details?.total,
+            currency: order_details?.currency,
+          }
+          setOrderData(orderData)
+          onGetPaymentDataSuccess(response.data)
+        }
+      } catch (e) {
+        setError(_get(e, 'response.data.message'))
+        onGetPaymentDataError(e.response)
+      } finally {
+        setPaymentDataIsLoading(false)
+      }
+    })()
+  }, [checkoutData])
+
+  //just once
+  useEffect(() => {
+    // fetch conditions data
+    const fetchConditions = async () => {
+      if (eventId) {
+        const res = await getConditions(eventId)
+        const conditionsInfo = _get(res, 'data.data.attributes')
+        setConditions(
+          conditionsInfo
+            ? conditionsInfo.map((item: string) => ({
+              id: nanoid(),
+              text: item,
+              checked: false,
+            }))
+            : []
+        )
+      }
+    }
+    fetchConditions()
+  }, [])
+
+  // 1. get payment data   ---> v1/order/${hash}/review/ done
+  // 2. handle payment     ---> v1/order/${orderHash}/pay/
+  // 3. redirect to confirmation page
+  const handlePaymentMiddleWare = async (error: any) => {
+    try {
+      if (error) {
+        throw error
+      }
+      const {
+        order_details: { order_hash },
+      } = reviewData
+      const paymentSuccessResponse =
+        total === '0.00'
+          ? await handleFreeSuccess(order_hash)
+          : await handlePaymentSuccess(order_hash)
+      if (paymentSuccessResponse.status === 200) {
+        handlePayment(paymentSuccessResponse)
+        setPaymentIsLoading(false)
+      }
+    } catch (e) {
+      setError(_get(e, 'response.data.message'))
+      setPaymentIsLoading(false)
+      onPaymentError(e.response)
+    }
+  }
+
+  const themeMui = createTheme(themeOptions)
+
+  return (
+    <ThemeProvider theme={themeMui}>
+      <div className="payment_page">
+        {enableTimer && (
+          <TimerWidget
+            expires_at={_get(reviewData, 'expires_at', 0)}
+            buyLoading={paymentIsLoading}
+            onCountdownFinish={onCountdownFinish}
+          />
+        )}
+        {error && (
+          <Alert severity="error" onClose={onErrorClose} variant="filled">
+            {error}
+          </Alert>
+        )}
+        {paymentDataIsLoading && <Loader />}
+        {!paymentDataIsLoading && (
+          <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>
+            {enablePaymentPlan && <div className="payment_toggle">
+              <label htmlFor="togBtn" className="switch">
+                <input
+                  type="checkbox"
+                  id="togBtn"
+                  disabled={true}
+                  onChange={() =>
+                    setShowPaymentPlanSection(!showPaymentPlanSection)
+                  }
+                />
+                <div className="slider round"></div>
+                <span className="tog_text">
+                  Click to checkout using Payment Plan
+                </span>
+              </label>
+            </div>}
+            {showPaymentPlanSection && (
+              <div className="payment_plan">
+                <h2>PAYMENT PLAN</h2>
+                <div className="plan_block">
+                  <h3>Mbrand Payment Plan Terms</h3>
+                  <p>
+                    By clicking on the “Confirm Payment Plan” button, you are
+                    starting your payment plan of 2 payments of $115.00, which
+                    will be drawn from your account every 2 weeks, with the
+                    first payment taken later today.
+                  </p>
+                  <p>
+                    This includes a non-refundable admin fee of $3.00 per
+                    payment.
+                  </p>
+                  <p className="payment_note">
+                    NOTE: If today’s payment fails, your payment plan will not
+                    activate, and your tickets will not be issued until you
+                    complete your final payment.
+                  </p>
+                  <p>
+                    If you do not complete your payements, your order will be
+                    canceled. Your first payment of $115.00, plus the
+                    non-refundable admin fee of $3.00 will not be refunded.
+                  </p>
+                  <p>
+                    Your payment will proceed with the card ending in **** 4242.
+                  </p>
+                </div>
+              </div>
+            )}
+            {total !== '0.00' ? (
+              <div className="payment_info">
+                <div className="payment_info_label">ORDER CONFIRMATION</div>
+                {showErrorText && (
+                  <p className="payment_info__error">{errorText}</p>
+                )}
+                <div>
+                  <Elements
+                    stripe={getStripePromise(reviewData)}
+                    options={elementsOptions}
+                  >
+                    <StripePayment
+                      stripe_client_secret={_get(
+                        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}
+                      disableZipSection={disableZipSection}
+                      paymentButtonText={paymentButtonText}
+                    />
+                  </Elements>
+                </div>
+              </div>
+            ) : (
+              <div
+                className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''
+                  }`}
+              >
+                <button
+                  disabled={paymentIsLoading}
+                  type="button"
+                  onClick={() => {
+                    setPaymentIsLoading(true)
+                    handlePaymentMiddleWare(null)
+                  }}
+                >
+                  {paymentIsLoading ? (
+                    <CircularProgress size={26} />
+                  ) : (
+                    'Complete Registration'
+                  )}
+                </button>
+              </div>
+            )}
+          </Container>
+        )}
+      </div>
+    </ThemeProvider>
+  )
+}