tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/paymentContainer/index.tsx

@@ -1,643 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable max-len */
-import './style.css'
-
-import { ThemeOptions } from '@mui/material'
-import Alert from '@mui/material/Alert'
-import CircularProgress from '@mui/material/CircularProgress'
-import Container from '@mui/material/Container'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import { Elements, PaymentElement, useElements, useStripe } from '@stripe/react-stripe-js'
-import {
-  loadStripe,
-  StripeConstructorOptions,
-  StripeElementsOptions,
-} from '@stripe/stripe-js'
-import { StripePaymentElementOptions } from '@stripe/stripe-js'
-import { AxiosError } from 'axios'
-import _get from 'lodash/get'
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { getPaymentData } from '../../api'
-import { FEES_STYLES } from '../../constants'
-import { usePixel } from '../../hooks/usePixel'
-import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
-import { IAddOn, IOrderData, IPaymentField } from '../../types'
-import {
-  IPaymentPlanConfig,
-  IPaymentPlanConfigCard,
-} from '../../types/payment-plan-configuration'
-import { CONFIGS, isBrowser } from '../../utils'
-import { getQueryVariable } from '../../utils/getQueryVariable'
-import { Checkbox, Loader } from '../common/index'
-import TimerWidget from '../timerWidget'
-import { handlePaymentMiddleWare } from './handlePayment'
-import { PaymentPlanSection } from './PaymentPlanSection'
-
-// Wrapper component to access Stripe hooks inside Elements context
-const StripeWrapper = ({
-  options,
-  onStripeReady,
-  onPaymentElementChange,
-}: {
-  options?: StripePaymentElementOptions;
-  onStripeReady: (stripe: any, elements: any) => void;
-  onPaymentElementChange?: (event: any) => void;
-}) => {
-  const stripe = useStripe()
-  const elements = useElements()
-
-  useEffect(() => {
-    if (stripe && elements) {
-      onStripeReady(stripe, elements)
-    }
-  }, [stripe, elements, onStripeReady])
-
-  return <PaymentElement options={options} onChange={onPaymentElementChange} />
-}
-
-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, slug?: string) => void;
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-  elementsOptions?: StripeElementsOptions;
-  paymentElementOptions?: StripePaymentElementOptions;
-  onCountdownFinish?: () => void;
-  enableTimer?: boolean;
-  paymentInfoLabel?: string;
-  orderInfoLabel?: string;
-  displayPaymentButton?: boolean;
-  hidePaymentForm?: boolean;
-  hideFieldsBlock?: boolean;
-  isSinglePageCheckout?: boolean;
-  stripePublishableKey?: string;
-  stripeAccountId?: string;
-  onStripeReady?: (stripe: any, elements: any) => void;
-  onPaymentElementChange?: (event: any) => void;
-  enablePaymentPlan?: boolean;
-}
-
-const initialPaymentPlanConfiguration: IPaymentPlanConfig = {
-  requires_deposit: false,
-  deposit: 0,
-  interval: 0,
-  non_refundable_amount: 0,
-  non_refundable_type: null,
-  has_admin_fee: false,
-  admin_fee: 0,
-  total_installments: 0,
-  price_per_installment: 0,
-  stripe_setup_intent_secret: '',
-  total: 0,
-  saved_card: {
-    last_4_digits: null,
-    stripe_payment_method_id: null,
-  } as IPaymentPlanConfigCard,
-}
-
-const initialOrderValues: IOrderData = {
-  id: '',
-  product_name: '',
-  ticketType: '',
-  quantity: '',
-  price: '',
-  total: '',
-  currency: 'USD',
-  guest_count: '',
-  pay_now: '',
-  add_ons: [] as IAddOn[],
-  cost: '',
-}
-
-const initialReviewValues = {
-  order_details: {
-    id: '',
-    order_hash: '',
-  },
-  payment_method: {
-    stripe_client_secret: '',
-    stripe_payment_plan_enabled: false,
-    stripe_payment_plan_configuration: {} as any,
-    stripe_publishable_key: '',
-    id: '',
-    name: '',
-    stripeConnectedAccount: '',
-  },
-  billing_info: {},
-  event_details: {
-    flagSeatMapAllowed: false,
-    slug: '',
-  },
-}
-
-export const PaymentContainer = ({
-  paymentFields = [],
-  handlePayment,
-  formTitle = 'Get Your Tickets',
-  errorText,
-  checkoutData,
-  onErrorClose = _identity,
-  onGetPaymentDataSuccess = _identity,
-  onGetPaymentDataError = _identity,
-  onPaymentError = _identity,
-  themeOptions,
-  elementsOptions,
-  paymentElementOptions,
-  onCountdownFinish = _identity,
-  enableTimer = false,
-  orderInfoLabel = 'Order Review',
-  paymentInfoLabel = 'Order Confirmation',
-  displayPaymentButton = true,
-  hidePaymentForm = false,
-  hideFieldsBlock = false,
-  isSinglePageCheckout = false,
-  stripePublishableKey,
-  stripeAccountId,
-  onStripeReady = _identity,
-  onPaymentElementChange,
-  enablePaymentPlan = true,
-}: 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 [currency, setCurrency] = useState('')
-  const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
-
-  const [paymentPlanIsAvailable, setPaymentPlanIsAvailable] = useState(false)
-  const [paymentPlanConfig, setPaymentPlanConfig] = useState(
-    initialPaymentPlanConfiguration
-  )
-  const [paymentPlanUseSavedCard, setPaymentPlanUseSavedCard] = useState(true)
-
-  const showFormTitle = Boolean(formTitle)
-  const showErrorText = Boolean(errorText)
-
-  const eventId =
-    getQueryVariable('event_id') || _get(reviewData, 'cart[0].product_id') || ''
-  const { hash, total } = checkoutData
-  const isFreeTickets = useMemo(
-    () => (!Number(total) && !Number(orderData.total)) || !Number(orderData.pay_now),
-    [total, orderData]
-  )
-
-  const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
-  usePixel(eventId, { page: 'review', pageUrl })
-
-
-  useEffect(() => {
-    const fetchPaymentData = async () => {
-      try {
-        const paymentDataResponse = await getPaymentData(hash)
-        if (paymentDataResponse.success) {
-          const attributes = paymentDataResponse?.data?.attributes
-          setReviewData(attributes)
-          const { cart, order_details } = attributes
-          const {
-            tickets: [ticket],
-          } = order_details
-
-          const orderDataArray = _map(order_details.tickets, item => ({
-            product_name: cart[0]?.product_name,
-            ticketType: item?.name,
-            quantity: item?.guest_count,
-            price: item?.price,
-            cost: item?.cost,
-            id: item.id,
-            count: item?.quantity,
-          }))
-
-          const orderData = {
-            id: order_details?.id,
-            product_name: cart[0]?.product_name,
-            ticketType: ticket?.name,
-            quantity: ticket?.quantity,
-            price: ticket?.price,
-            total: order_details?.total,
-            currency: order_details?.currency,
-            add_ons: order_details?.add_ons || [],
-            pay_now: order_details?.pay_now || '',
-            guest_count: order_details?.guest_count || '',
-            debt: order_details?.debt || null,
-            tableTypes: orderDataArray,
-            cost: ticket?.cost,
-            subtotal: order_details?.subtotal,
-            fees: order_details?.fees,
-          }
-          setOrderData(orderData)
-          setCurrency(order_details?.currency)
-          onGetPaymentDataSuccess(paymentDataResponse.data)
-        }
-      } catch (e) {
-        setError(_get(e, 'response.data.message', null))
-        onGetPaymentDataError((e as Record<string, unknown>).response as AxiosError)
-      } finally {
-        setPaymentDataIsLoading(false)
-      }
-    }
-
-    if (isSinglePageCheckout) {
-      if (!orderData?.total) {
-        setOrderData(current => ({ ...current, pay_now: 1, total: 1 }))
-        setPaymentDataIsLoading(false)
-      }
-    } else {
-      fetchPaymentData()
-    }
-  }, [
-    orderData,
-    hash,
-    isSinglePageCheckout,
-    onGetPaymentDataError,
-    onGetPaymentDataSuccess,
-  ])
-
-  const showPaymentForm = () => {
-    if (hidePaymentForm) {
-      return false
-    }
-
-    let showPaymentForm = !isFreeTickets
-
-    if (
-      paymentPlanIsAvailable &&
-      showPaymentPlanSection &&
-      !!paymentPlanConfig.saved_card?.stripe_payment_method_id
-    ) {
-      showPaymentForm = !paymentPlanUseSavedCard
-    }
-
-    return showPaymentForm
-  }
-
-  const getPublishableKey = () =>
-    stripePublishableKey || _get(reviewData, 'payment_method.stripe_publishable_key')
-
-  const getStripePromise = useCallback(() => {
-    const stripePublishableKey = getPublishableKey()
-    const stripeAccount =
-      stripeAccountId || _get(reviewData, 'payment_method.stripe_connected_account')
-
-    const options: StripeConstructorOptions = {}
-
-    if (stripeAccount) {
-      options.stripeAccount = stripeAccount
-    }
-
-    return loadStripe(stripePublishableKey, options)
-  }, [reviewData, stripePublishableKey])
-
-  const themeMui = createTheme(themeOptions)
-  const hasTableTypes = Boolean(Number(orderData.guest_count))
-  const paymentFieldsData = hasTableTypes
-    ? [
-        {
-          label: 'Event',
-          id: 'product_name',
-        },
-        {
-          label: '',
-          id: 'tableTypes',
-        },
-        {
-          label: 'Add-ons',
-          id: 'add_ons',
-        },
-        {
-          label: 'Total (incl. fees, card processing and taxes)',
-          id: 'total',
-          normalizer: (value: string, currency: string) =>
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(value)),
-              currency
-            ),
-        },
-        {
-          label: 'Pay Now',
-          id: 'pay_now',
-          normalizer: (value: string, currency: string) =>
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(value)),
-              currency
-            ),
-        },
-        {
-          label: 'Pay On Check-in',
-          id: 'debt',
-          normalizer: (value: string, currency: string) =>
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(value)),
-              currency
-            ),
-        },
-      ]
-    : paymentFields
-  const isTable = orderData?.guest_count
-
-  useEffect(() => {
-    const paymentMethod = reviewData.payment_method || {}
-    const paymentPlanAvailable =
-      paymentMethod.stripe_payment_plan_enabled && enablePaymentPlan
-    setPaymentPlanIsAvailable(paymentPlanAvailable)
-
-    if (paymentPlanAvailable) {
-      const paymentPlanConfig =
-        paymentMethod.stripe_payment_plan_configuration || initialPaymentPlanConfiguration
-      setPaymentPlanConfig(paymentPlanConfig)
-      setPaymentPlanUseSavedCard(!!paymentPlanConfig.saved_card?.stripe_payment_method_id)
-      if (isBrowser) {
-        const sessionData = window.localStorage.getItem('paymentConfiguration')
-        const session = sessionData ? JSON.parse(sessionData) : {}
-        if (!!session && session?.orderId == reviewData.order_details?.id) {
-          setPaymentPlanUseSavedCard(session.paymentPlanUseSavedCard ?? false)
-          setShowPaymentPlanSection(session.showPaymentPlanSection ?? false)
-        }
-      }
-    }
-  }, [enablePaymentPlan, reviewData])
-
-  useEffect(() => {
-    if (isBrowser && !!orderData?.id) {
-      window.localStorage.setItem(
-        'paymentConfiguration',
-        JSON.stringify({
-          paymentPlanUseSavedCard,
-          showPaymentPlanSection,
-          orderId: orderData?.id,
-        })
-      )
-    }
-  }, [showPaymentPlanSection, paymentPlanUseSavedCard, orderData?.id])
-
-  return (
-    <ThemeProvider theme={themeMui}>
-      <div
-        className={`payment_page ${isSinglePageCheckout ? 'payment_page_single' : ''}`}
-      >
-        {enableTimer && (
-          <TimerWidget
-            expires_at={_get(reviewData, 'expires_at', 0)}
-            buyLoading={paymentIsLoading}
-            onCountdownFinish={onCountdownFinish}
-          />
-        )}
-        {isSinglePageCheckout
-          ? null
-          : error && (
-              <Alert severity="error" onClose={onErrorClose} variant="filled">
-                {error}
-              </Alert>
-            )}
-        {paymentDataIsLoading && <Loader />}
-        {!paymentDataIsLoading && (
-          <Container maxWidth="md">
-            {showFormTitle && <h1>{isTable ? 'Get Your Tables' : formTitle}</h1>}
-            <div className="order_info_text">{orderInfoLabel}</div>
-            {!hideFieldsBlock && (
-              <div
-                className="order_info_section"
-                style={{ display: hasTableTypes ? 'block' : 'grid' }}
-              >
-                {_map(paymentFieldsData, field => {
-                  const { id, label, className = '', normalizer = _identity } = field
-                  let value = orderData[id as keyof IOrderData] || ''
-                  let component = null
-
-                  if (field.id === 'add_ons' && _isEmpty(value)) {
-                    return false
-                  }
-
-                  if (
-                    field.id === 'total' &&
-                    paymentPlanIsAvailable &&
-                    showPaymentPlanSection
-                  ) {
-                    value = '' + paymentPlanConfig.total
-                  }
-
-                  if (field.id === 'tableTypes') {
-                    const valueArray = value as Array<any>
-
-                    component = (
-                      <div
-                        key={id}
-                        className="order_info_block"
-                        style={{
-                          display: 'flex',
-                          flexDirection: 'column',
-                        }}
-                      >
-                        {_map(valueArray, tableTypeItem => (
-                          <div
-                            key={tableTypeItem.id}
-                            style={{
-                              display: 'grid',
-                              gridTemplateColumns: '33% 33% 33%',
-                              gridColumnGap: '10%',
-                            }}
-                          >
-                            <div className="order_info_block">
-                              <div className="order_info_title">Table Type</div>
-                              <div className={`${className} order_info_text`}>
-                                {tableTypeItem.ticketType}
-                              </div>
-                            </div>
-                            <div className="order_info_block">
-                              <div className="order_info_title">Number of Tables</div>
-                              <div className={`${className} order_info_text`}>
-                                {tableTypeItem.count}
-                              </div>
-                            </div>
-                            <div className="order_info_block">
-                              <div className="order_info_title">Guest Count</div>
-                              <div className={`${className} order_info_text`}>
-                                {tableTypeItem.quantity}
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    )
-                  }
-
-                  return (
-                    component || (
-                      <div key={id} className={`order_info_block ${className}`}>
-                        <div className="order_info_title">{label}</div>
-                        <div className={`${className} order_info_text`}>
-                          {typeof value === 'string' || typeof value === 'number'
-                            ? normalizer(value, currency, orderData)
-                            : _map(value, item => (
-                                <div>
-                                  <div key={item.id} className="add-on-container">
-                                    <span>{item.quantity}</span>
-                                    <span className="add-on-x">{' x '}</span>
-                                    <span>
-                                      {item.groupName ? item.groupName + ' - ' : ''}
-                                    </span>
-                                    <span>{item.name}</span>
-                                    <span>{' - '}</span>
-                                    <span>
-                                      {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-                                        currencyNormalizerCreator(
-                                          createFixedFloatNormalizer(2)(
-                                            parseFloat(item.price)
-                                          ),
-                                          currency
-                                        ) + ' (incl. fees)'}
-                                      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-                                        currencyNormalizerCreator(
-                                          createFixedFloatNormalizer(2)(
-                                            parseFloat(item.cost)
-                                          ),
-                                          currency
-                                        )}
-                                      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-                                        currencyNormalizerCreator(
-                                          createFixedFloatNormalizer(2)(
-                                            parseFloat(item.price)
-                                          ),
-                                          currency
-                                        )}
-                                    </span>
-                                    <span className="add-on-each">{' each'}</span>
-                                  </div>
-                                  {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
-                                    <p className="fees">
-                                      {`(${currencyNormalizerCreator(
-                                        createFixedFloatNormalizer(2)(
-                                          parseFloat(String(item.price))
-                                        ),
-                                        currency
-                                      )} with fees)`}
-                                    </p>
-                                  )}
-                                  {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
-                                    <p className="fees">
-                                      {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
-                                    </p>
-                                  )}
-                                </div>
-                              ))}
-                        </div>
-                      </div>
-                    )
-                  )
-                })}
-              </div>
-            )}
-            {!isFreeTickets && paymentPlanIsAvailable && (
-              <div className="payment_toggle">
-                <Checkbox
-                  label={
-                    <span className="payment_plan_toggle_label">
-                      Click to checkout using Payment Plan
-                    </span>
-                  }
-                  required={true}
-                  onChange={() => {
-                    setShowPaymentPlanSection(!showPaymentPlanSection)
-                  }}
-                  checked={showPaymentPlanSection}
-                />
-              </div>
-            )}
-            {showPaymentPlanSection && (
-              <PaymentPlanSection
-                paymentPlanConfig={paymentPlanConfig}
-                currency={currency}
-                paymentPlanUseSavedCard={paymentPlanUseSavedCard}
-                setPaymentPlanUseSavedCard={setPaymentPlanUseSavedCard}
-              />
-            )}
-            {showPaymentForm() && !!getPublishableKey() ? (
-              <div className="payment_info">
-                <div className="payment_info_label">{paymentInfoLabel}</div>
-                {showErrorText && <p className="payment_info__error">{errorText}</p>}
-                <div>
-                  {elementsOptions && (
-                    <Elements stripe={getStripePromise()} options={elementsOptions}>
-                      <StripeWrapper
-                        onStripeReady={onStripeReady}
-                        options={paymentElementOptions}
-                        onPaymentElementChange={onPaymentElementChange}
-                      />
-                    </Elements>
-                  )}
-                </div>
-              </div>
-            ) : displayPaymentButton ? (
-              <div
-                className={`payment_button ${
-                  paymentIsLoading ? 'disabled-payment-button' : ''
-                }`}
-              >
-                <button
-                  disabled={paymentIsLoading}
-                  type="button"
-                  onClick={() => {
-                    setPaymentIsLoading(true)
-
-                    let data
-
-                    if (
-                      paymentPlanIsAvailable &&
-                      showPaymentPlanSection &&
-                      paymentPlanUseSavedCard
-                    ) {
-                      data = {
-                        paymentMethodId:
-                          paymentPlanConfig.saved_card?.stripe_payment_method_id,
-                      }
-                    }
-
-                    handlePaymentMiddleWare(
-                      data,
-                      {},
-                      {
-                        reviewData,
-                        isFreeTickets,
-                        paymentPlanIsAvailable,
-                        showPaymentPlanSection,
-                        handlePayment,
-                        setPaymentIsLoading,
-                        setError,
-                        orderData,
-                        eventId,
-                        isBrowser,
-                        onPaymentError,
-                      }
-                    )
-                  }}
-                >
-                  {paymentIsLoading ? (
-                    <CircularProgress size={26} />
-                  ) : isFreeTickets ? (
-                    'Complete Registration'
-                  ) : (
-                    'Confirm Payment Plan'
-                  )}
-                </button>
-              </div>
-            ) : null}
-          </Container>
-        )}
-      </div>
-    </ThemeProvider>
-  )
-}