tf-checkout-react 1.4.18 → 1.4.20

package/src/components/paymentContainer/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import './style.css'
 
 import { ThemeOptions } from '@mui/material'
@@ -22,32 +23,32 @@ import { nanoid } from 'nanoid'
 import React, { useEffect, useState } from 'react'
 
 import {
+  createPaymentPlan,
   getConditions,
   getPaymentData,
   handleFreeSuccess,
   handlePaymentSuccess,
 } from '../../api'
 import { usePixel } from '../../hooks/usePixel'
-import {
-  createFixedFloatNormalizer,
-  currencyNormalizerCreator,
-} from '../../normalizers'
+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 { Loader } from '../common/index'
+import { CheckboxField, Loader } from '../common/index'
 import StripePayment from '../stripePayment'
 import TimerWidget from '../timerWidget'
+import { PaymentPlanSection } from './PaymentPlanSection'
 
 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 stripeAccount = _get(reviewData, 'payment_method.stripe_connected_account')
 
   const options: StripeConstructorOptions = {}
   if (stripeAccount) {
@@ -81,6 +82,24 @@ export interface IPaymentPage {
   orderInfoLabel?: string;
 }
 
+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: '',
@@ -96,10 +115,13 @@ const initialOrderValues: IOrderData = {
 
 const initialReviewValues = {
   order_details: {
+    id: '',
     order_hash: '',
   },
   payment_method: {
     stripe_client_secret: '',
+    stripe_payment_plan_enabled: false,
+    stripe_payment_plan_configuration: null,
   },
   billing_info: {},
 }
@@ -120,7 +142,7 @@ export const PaymentContainer = ({
   elementsOptions,
   onCountdownFinish = _identity,
   enableTimer = false,
-  enablePaymentPlan = false,
+  enablePaymentPlan = true,
   paymentButtonText,
   orderInfoLabel = 'Order Review',
   paymentInfoLabel = 'Order Confirmation',
@@ -131,9 +153,13 @@ export const PaymentContainer = ({
   const [showPaymentPlanSection, setShowPaymentPlanSection] = useState(false)
   const [paymentIsLoading, setPaymentIsLoading] = useState(false)
   const [paymentDataIsLoading, setPaymentDataIsLoading] = useState(true)
-  const [conditions, setConditions] = useState<{ id: string, text: string }[]>(
-    []
+  const [conditions, setConditions] = useState<{ id: string, text: string }[]>([])
+  const [paymentPlanIsAvailable, setPaymentPlanIsAvailable] = useState(false)
+  const [paymentPlanConfig, setPaymentPlanConfig] = useState(
+    initialPaymentPlanConfiguration
   )
+  const [paymentPlanUseSavedCard, setPaymentPlanUseSavedCard] = useState(true)
+  const [currency, setCurrency] = useState('')
 
   const showFormTitle = Boolean(formTitle)
   const showErrorText = Boolean(errorText)
@@ -147,6 +173,32 @@ export const PaymentContainer = ({
   const pageUrl = isBrowser ? window.location.href.split('?')[0] : ''
   usePixel(eventId, { page: 'review', pageUrl })
 
+  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 (typeof window !== 'undefined') {
+        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(() => {
+    updateSessionInformation()
+  }, [showPaymentPlanSection, paymentPlanUseSavedCard])
+
   useEffect(() => {
     (async () => {
       try {
@@ -183,6 +235,7 @@ export const PaymentContainer = ({
             tableTypes: orderDataArray,
           }
           setOrderData(orderData)
+          setCurrency(order_details?.currency)
           onGetPaymentDataSuccess(response.data)
         }
       } catch (e) {
@@ -204,10 +257,10 @@ export const PaymentContainer = ({
         setConditions(
           conditionsInfo
             ? conditionsInfo.map((item: string) => ({
-              id: nanoid(),
-              text: item,
-              checked: false,
-            }))
+                id: nanoid(),
+                text: item,
+                checked: false,
+              }))
             : []
         )
       }
@@ -218,7 +271,7 @@ export const PaymentContainer = ({
   // 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) => {
+  const handlePaymentMiddleWare = async (error: any, data?: object) => {
     try {
       if (error) {
         throw error
@@ -226,9 +279,20 @@ export const PaymentContainer = ({
       const {
         order_details: { order_hash },
       } = reviewData
-      const paymentSuccessResponse = isFreeTickets
-        ? await handleFreeSuccess(order_hash)
-        : await handlePaymentSuccess(order_hash)
+
+      let paymentSuccessResponse
+
+      if (isFreeTickets) {
+        paymentSuccessResponse = await handleFreeSuccess(order_hash)
+      } else if (paymentPlanIsAvailable && showPaymentPlanSection) {
+        paymentSuccessResponse = await createPaymentPlan(
+          order_hash,
+          _get(data, 'paymentMethodId', '')
+        )
+      } else {
+        paymentSuccessResponse = await handlePaymentSuccess(order_hash)
+      }
+
       if (paymentSuccessResponse.status === 200) {
         handlePayment(paymentSuccessResponse)
         setPaymentIsLoading(false)
@@ -239,13 +303,13 @@ export const PaymentContainer = ({
         localStorage.removeItem('ownReservations')
         localStorage.removeItem('tierId')
 
-        const isWindowDefined = typeof window !== "undefined"
+        const isWindowDefined = typeof window !== 'undefined'
         if (isWindowDefined) {
           (window as any)?.dataLayer.push({
-            'event': 'Purchase',
-            'orderValue': orderData.total,
-            'orderCurrency': orderData.currency,
-            'orderId': orderData.id
+            event: 'Purchase',
+            orderValue: orderData.total,
+            orderCurrency: orderData.currency,
+            orderId: orderData.id,
           })
         }
       }
@@ -256,46 +320,72 @@ export const PaymentContainer = ({
     }
   }
 
+  const showPaymentForm = () => {
+    let showPaymentForm = !isFreeTickets
+
+    if (
+      paymentPlanIsAvailable &&
+      showPaymentPlanSection &&
+      !!paymentPlanConfig.saved_card?.stripe_payment_method_id
+    ) {
+      showPaymentForm = !paymentPlanUseSavedCard
+    }
+
+    return showPaymentForm
+  }
+  const updateSessionInformation = () => {
+    if (typeof window !== 'undefined' && !!orderData?.id) {
+      window.localStorage.setItem(
+        'paymentConfiguration',
+        JSON.stringify({
+          paymentPlanUseSavedCard,
+          showPaymentPlanSection,
+          orderId: orderData?.id,
+        })
+      )
+    }
+  }
+
   const themeMui = createTheme(themeOptions)
   const hasTableTypes = Boolean(Number(orderData.guest_count))
   const paymentFieldsData = hasTableTypes
     ? [
-      {
-        label: 'Event',
-        id: 'product_name',
-      },
-      {
-        label: '',
-        id: 'tableTypes',
-      },
-      {
-        label: 'Total (incl. fees, card processing and taxes)',
-        id: 'total',
-        normalizer: (value: string, currency: any) =>
-          currencyNormalizerCreator(
-            createFixedFloatNormalizer(2)(parseFloat(value)),
-            currency
-          ),
-      },
-      {
-        label: 'Pay Now',
-        id: 'pay_now',
-        normalizer: (value: string, currency: any) =>
-          currencyNormalizerCreator(
-            createFixedFloatNormalizer(2)(parseFloat(value)),
-            currency
-          ),
-      },
-      {
-        label: 'Pay On Check-in',
-        id: 'debt',
-        normalizer: (value: string, currency: any) =>
-          currencyNormalizerCreator(
-            createFixedFloatNormalizer(2)(parseFloat(value)),
-            currency
-          ),
-      },
-    ]
+        {
+          label: 'Event',
+          id: 'product_name',
+        },
+        {
+          label: '',
+          id: 'tableTypes',
+        },
+        {
+          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
   return (
@@ -316,29 +406,29 @@ export const PaymentContainer = ({
         {paymentDataIsLoading && <Loader />}
         {!paymentDataIsLoading && (
           <Container maxWidth="md">
-            {showFormTitle && (
-              <h1>{isTable ? 'Get Your Tables' : formTitle}</h1>
-            )}
+            {showFormTitle && <h1>{isTable ? 'Get Your Tables' : formTitle}</h1>}
             <div className="order_info_text">{orderInfoLabel}</div>
             <div
               className="order_info_section"
               style={{ display: hasTableTypes ? 'block' : 'grid' }}
             >
               {_map(paymentFieldsData, field => {
-                const {
-                  id,
-                  label,
-                  className = '',
-                  normalizer = _identity,
-                } = field
-                const { currency } = orderData
-                const value = orderData[id as keyof IOrderData]
+                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>
 
@@ -367,9 +457,7 @@ export const PaymentContainer = ({
                             </div>
                           </div>
                           <div className="order_info_block">
-                            <div className="order_info_title">
-                              Number of Tables
-                            </div>
+                            <div className="order_info_title">Number of Tables</div>
                             <div className={`${className} order_info_text`}>
                               {tableTypeItem.count}
                             </div>
@@ -394,101 +482,65 @@ export const PaymentContainer = ({
                         {typeof value === 'string'
                           ? normalizer(value, currency)
                           : _map(value, item => (
-                            <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>
-                                {currencyNormalizerCreator(
-                                  createFixedFloatNormalizer(2)(
-                                    parseFloat(item.price)
-                                  ),
-                                  currency
-                                )}
-                              </span>
-                              <span className="add-on-each">{' each'}</span>
-                            </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>
+                                  {currencyNormalizerCreator(
+                                    createFixedFloatNormalizer(2)(parseFloat(item.price)),
+                                    currency
+                                  )}
+                                </span>
+                                <span className="add-on-each">{' each'}</span>
+                              </div>
+                            ))}
                       </div>
                     </div>
                   )
                 )
               })}
             </div>
-            {enablePaymentPlan && (
+            {!isFreeTickets && paymentPlanIsAvailable && (
               <div className="payment_toggle">
-                <label htmlFor="togBtn" className="switch">
-                  <input
-                    type="checkbox"
-                    id="togBtn"
-                    disabled={true}
-                    onChange={() =>
-                      setShowPaymentPlanSection(!showPaymentPlanSection)
-                    }
-                  />
-                  <div className="slider round" />
-                  <span className="tog_text">
-                    Click to checkout using Payment Plan
-                  </span>
-                </label>
+                <CheckboxField
+                  label={<span className='payment_plan_toggle_label'>Click to checkout using Payment Plan</span>}
+                  required={true}
+                  onChange={(_: any) => {
+                    setShowPaymentPlanSection(!showPaymentPlanSection)
+                  }}
+                  checked={showPaymentPlanSection}
+                />
               </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>
+              <PaymentPlanSection
+                paymentPlanConfig={paymentPlanConfig}
+                currency={currency}
+                paymentPlanUseSavedCard={paymentPlanUseSavedCard}
+                setPaymentPlanUseSavedCard={setPaymentPlanUseSavedCard}
+              />
             )}
-            {!isFreeTickets ? (
+            {showPaymentForm() ? (
               <div className="payment_info">
                 <div className="payment_info_label">{paymentInfoLabel}</div>
-                {showErrorText && (
-                  <p className="payment_info__error">{errorText}</p>
-                )}
+                {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.guest_count
-                          ? orderData.pay_now
-                          : orderData.total
+                      stripe_client_secret={
+                        paymentPlanIsAvailable && showPaymentPlanSection
+                          ? paymentPlanConfig.stripe_setup_intent_secret
+                          : _get(reviewData, 'payment_method.stripe_client_secret')
                       }
+                      total={orderData.guest_count ? orderData.pay_now : orderData.total}
                       onSubmit={handlePaymentMiddleWare}
                       error={error}
                       currency={orderData.currency}
@@ -499,27 +551,44 @@ export const PaymentContainer = ({
                       stripeCardOptions={stripeCardOptions}
                       disableZipSection={disableZipSection}
                       paymentButtonText={paymentButtonText}
+                      forPaymentPlan={paymentPlanIsAvailable && showPaymentPlanSection}
                     />
                   </Elements>
                 </div>
               </div>
             ) : (
               <div
-                className={`payment_button ${paymentIsLoading ? 'disabled-payment-button' : ''
-                  }`}
+                className={`payment_button ${
+                  paymentIsLoading ? 'disabled-payment-button' : ''
+                }`}
               >
                 <button
                   disabled={paymentIsLoading}
                   type="button"
                   onClick={() => {
                     setPaymentIsLoading(true)
-                    handlePaymentMiddleWare(null)
+                    let data
+
+                    if (
+                      paymentPlanIsAvailable &&
+                      showPaymentPlanSection &&
+                      paymentPlanUseSavedCard
+                    ) {
+                      data = {
+                        paymentMethodId:
+                          paymentPlanConfig.saved_card?.stripe_payment_method_id,
+                      }
+                    }
+
+                    handlePaymentMiddleWare(null, data)
                   }}
                 >
                   {paymentIsLoading ? (
                     <CircularProgress size={26} />
-                  ) : (
+                  ) : isFreeTickets ? (
                     'Complete Registration'
+                  ) : (
+                    'Confirm Payment Plan'
                   )}
                 </button>
               </div>

package/src/components/paymentContainer/style.css

@@ -45,3 +45,11 @@
   padding-top: 20px;
   text-align: center;
 }
+
+.payment_page .payment_plan .payment_plan_block .payment_plan_text {
+  padding-bottom: 10px;
+}
+
+.payment_page .payment_plan .payment_plan_highlight {
+  font-weight: bold;
+}

package/src/components/seatMapContainer/SeatMapComponent.tsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react'
 import ReactDom from 'react-dom'
 import SeatMapView from 'tf-seat-map-view'
 
+import { Loader } from '../common'
 import { getTierRelationsArray } from './utils'
 
 const CONTAINER_DEFAULT_ID = 'seat_map_default_container'
@@ -26,35 +27,38 @@ export const SeatMapComponent = (props: ISeatMapContainerProps) => {
     tierPrices,
     isReserving,
     predefinedSeats,
+    isLoadingSeatMapData,
   } = seatMapProps
 
   useEffect(() => {
-    const parentElement = document.getElementById(
-      mapContainerId || CONTAINER_DEFAULT_ID
-    )
+    const parentElement = document.getElementById(mapContainerId || CONTAINER_DEFAULT_ID)
 
     // Temp solution
     window.tierPrices = tierPrices
 
-    if (Boolean(parentElement)) {
-      const mapComponent = (
-        <SeatMapView
-          disabled={isReserving}
-          loading={isReserving}
-          events={seatMapEvents}
-          isSelectionOn={false}
-          seatData={seatData}
-          statuses={statuses}
-          ticketTypeTireRelationsArray={getTierRelationsArray(
-            ticketTypeTierRelations
-          )}
-          width={Math.min(parentElement?.clientWidth || 800, 800)}
-          height={Math.min(parentElement?.clientWidth || 800, 800)}
-          isBlockMap={seatMapType === 'block'}
-          isTableMap={seatMapType === 'table'}
-          predefinedSeats={predefinedSeats}
-        />
-      )
+    if (parentElement) {
+      let mapComponent = null
+
+      if (!(seatData && statuses) || isLoadingSeatMapData) {
+        mapComponent = <Loader />
+      } else {
+        mapComponent = (
+          <SeatMapView
+            disabled={isReserving}
+            loading={isReserving}
+            events={seatMapEvents}
+            isSelectionOn={false}
+            seatData={seatData}
+            statuses={statuses}
+            ticketTypeTireRelationsArray={getTierRelationsArray(ticketTypeTierRelations)}
+            width={Math.min(parentElement?.clientWidth || 800, 800)}
+            height={Math.min(parentElement?.clientWidth || 800, 800)}
+            isBlockMap={seatMapType === 'block'}
+            isTableMap={seatMapType === 'table'}
+            predefinedSeats={predefinedSeats}
+          />
+        )
+      }
 
       ReactDom.render(mapComponent, parentElement)
     }