tf-checkout-react 1.5.9 → 1.6.0

package/src/components/paymentContainer/PaymentPlanSection.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import {createFixedFloatNormalizer, currencyNormalizerCreator} from '../../normalizers'
-import {IPaymentPlanConfig} from '../../types/payment-plan-configuration'
-import {CheckboxField} from '../common'
+import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
+import { IPaymentPlanConfig } from '../../types/payment-plan-configuration'
+import { Checkbox } from '../common'
 
 interface PaymentPlanSectionProps {
   paymentPlanConfig: IPaymentPlanConfig;
@@ -26,55 +26,67 @@ export const PaymentPlanSection = (props: PaymentPlanSectionProps) => {
         <div className="payment_plan_text">
           By clicking on the “Confirm Payment Plan” button, you are starting your payment
           plan of{' '}
-          <span className="payment_plan_highlight">{paymentPlanConfig.total_installments}</span>
-          {' '}payments of{' '}
-          <span className="payment_plan_highlight">{currencyNormalizerCreator(
-            createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
-            currency
-          )}</span>
+          <span className="payment_plan_highlight">
+            {paymentPlanConfig.total_installments}
+          </span>{' '}
+          payments of{' '}
+          <span className="payment_plan_highlight">
+            {currencyNormalizerCreator(
+              createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
+              currency
+            )}
+          </span>
           , which will be drawn from your account every {paymentPlanConfig.interval} days,
           with the first payment taken later today.
         </div>
         {paymentPlanConfig.has_admin_fee && (
           <div className="payment_plan_text">
             This includes a non-refundable admin fee of{' '}
-            <span className="payment_plan_highlight">{currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
-              currency
-            )}</span>{' '}
+            <span className="payment_plan_highlight">
+              {currencyNormalizerCreator(
+                createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
+                currency
+              )}
+            </span>{' '}
             per payment.
           </div>
         )}
         {paymentPlanConfig.requires_deposit && (
           <div className="payment_plan_text">
             You will also be charged a single, non-refundable deposit of{' '}
-            <span className="payment_plan_highlight">{currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(paymentPlanConfig.deposit),
-              currency
-            )}</span>
+            <span className="payment_plan_highlight">
+              {currencyNormalizerCreator(
+                createFixedFloatNormalizer(2)(paymentPlanConfig.deposit),
+                currency
+              )}
+            </span>
             .
           </div>
         )}
         <div className="payment_plan_text payment_plan_note payment_plan_highlight">
-          NOTE: If today’s payment fails, your plan will not activate. Your
-          tickets will not be issued until you complete your final payment.
+          NOTE: If today’s payment fails, your plan will not activate. Your tickets will
+          not be issued until you complete your final payment.
         </div>
         {!paymentPlanConfig.non_refundable_type && (
           <div className="payment_plan_text">
             If you do not complete your payments, your order will be canceled. Your{' '}
-            <span className="payment_plan_highlight">first payment of{' '}
-            {currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
-              currency
-            )}</span>
+            <span className="payment_plan_highlight">
+              first payment of{' '}
+              {currencyNormalizerCreator(
+                createFixedFloatNormalizer(2)(paymentPlanConfig.price_per_installment),
+                currency
+              )}
+            </span>
             {paymentPlanConfig.has_admin_fee && (
               <>
                 , plus the{' '}
-                <span className="payment_plan_highlight">non-refundable admin-fee of{' '}
-                {currencyNormalizerCreator(
-                  createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
-                  currency
-                )}</span>
+                <span className="payment_plan_highlight">
+                  non-refundable admin-fee of{' '}
+                  {currencyNormalizerCreator(
+                    createFixedFloatNormalizer(2)(paymentPlanConfig.admin_fee),
+                    currency
+                  )}
+                </span>
               </>
             )}{' '}
             will not be refunded.
@@ -84,9 +96,12 @@ export const PaymentPlanSection = (props: PaymentPlanSectionProps) => {
           <div className="payment_plan_text">
             If you do not complete your payments, you will receive{' '}
             <span className="payment_plan_highlight">
-              {createFixedFloatNormalizer(0)(100 - paymentPlanConfig.non_refundable_amount)}%
-            </span>
-            {' '}of your money back
+              {createFixedFloatNormalizer(0)(
+                100 - paymentPlanConfig.non_refundable_amount
+              )}
+              %
+            </span>{' '}
+            of your money back
             {paymentPlanConfig.requires_deposit && (
               <>
                 , excluding your{' '}
@@ -131,12 +146,14 @@ export const PaymentPlanSection = (props: PaymentPlanSectionProps) => {
               <div className="payment_plan_text">
                 {' '}
                 Your payment will proceed with the card ending in ****{' '}
-                <span className="payment_plan_highlight">{'' + paymentPlanConfig.saved_card.last_4_digits}</span>
+                <span className="payment_plan_highlight">
+                  {'' + paymentPlanConfig.saved_card.last_4_digits}
+                </span>
               </div>
             )}
             <div>
-              <CheckboxField
-                label={<span className='payment_plan_toggle_label'>Use this card</span>}
+              <Checkbox
+                label={<span className="payment_plan_toggle_label">Use this card</span>}
                 required={true}
                 onChange={() => {
                   setPaymentPlanUseSavedCard(!paymentPlanUseSavedCard)

package/src/components/paymentContainer/index.tsx

@@ -38,7 +38,7 @@ import {
 } from '../../types/payment-plan-configuration'
 import { CONFIGS, isBrowser } from '../../utils'
 import { getQueryVariable } from '../../utils/getQueryVariable'
-import { CheckboxField, Loader } from '../common/index'
+import { Checkbox, Loader } from '../common/index'
 import StripePayment from '../stripePayment'
 import TimerWidget from '../timerWidget'
 import { PaymentPlanSection } from './PaymentPlanSection'
@@ -514,7 +514,7 @@ export const PaymentContainer = ({
             </div>
             {!isFreeTickets && paymentPlanIsAvailable && (
               <div className="payment_toggle">
-                <CheckboxField
+                <Checkbox
                   label={
                     <span className="payment_plan_toggle_label">
                       Click to checkout using Payment Plan

package/src/components/stripePayment/index.tsx

@@ -17,7 +17,7 @@ import { refreshSeatReservation } from '../../api'
 import { getCurrencySymbolByCurrency } from '../../normalizers'
 import { getQueryVariable } from '../../utils'
 import { adaptStripeError } from '../../utils/adaptStripeErrors'
-import { CheckboxField } from '../common/index'
+import { Checkbox } from '../common/index'
 import ConfirmModal from '../confirmModal'
 
 const options: StripeCardNumberElementOptions = {
@@ -249,7 +249,7 @@ const CheckoutForm = ({
         {checkboxes?.map((checkbox: any) => (
           <div className={'billing-info-container__singleField'} key={checkbox.id}>
             <div className="conditions-block">
-              <CheckboxField
+              <Checkbox
                 name={checkbox.id}
                 label={checkbox.text}
                 required={true}

package/src/components/ticketResale/index.tsx

@@ -1,4 +1,5 @@
 import { AxiosError } from 'axios'
+import _get from 'lodash/get'
 import React, { useEffect, useState } from 'react'
 
 import { declineInvitation, processTicket } from '../../api'
@@ -49,8 +50,10 @@ export const TicketResaleContainer = ({
 
           try {
             const response = await processTicket(hash)
+            const event_id = _get(response.data.data.attributes, 'event_id')
+
             onProcessTicketSuccess(response.data)
-            window.location.href = `${billingPath ?? '/billing/billing-info/'}`
+            window.location.href = `${billingPath ?? '/billing/billing-info'}?event_id=${event_id}`
           } catch (error) {
             setError(error?.response?.data?.message)
             onProcessTicketError(error.response)

package/src/components/ticketsContainer/index.tsx

@@ -306,6 +306,7 @@ export const TicketsContainer = ({
   }
 
   const handleTicketSelect = (key: string, value: number | string, isTable = false) => {
+    localStorage.setItem('selectedTicketsQuantity', value.toString())
     setSelectedTickets(prevState => {
       if (Object.keys(prevState)[0] !== key && !value) {
         return prevState

package/src/hoc/CustomFields/index.tsx

@@ -0,0 +1,77 @@
+import { CircularProgress } from '@mui/material'
+import _get from 'lodash/get'
+import _identity from 'lodash/identity'
+import React, { useEffect, useState } from 'react'
+
+import { getCustomFields } from '../../api'
+import {
+  getDataWithCustomFields,
+  getFieldsKeys,
+  getQueryVariable,
+} from '../../utils'
+
+const withCustomFields = (Children: any) => (props: any) => {
+  const {
+    data = [],
+    ticketHoldersFields = {
+      id: 1,
+      fields: [],
+    },
+    skipCustomFields = true,
+    onGetCustomFieldsError = _identity,
+    onGetCustomFieldsSuccess = _identity,
+    ...args
+  } = props
+
+  const [lodaing, setLoading] = useState(!skipCustomFields)
+  const [customFieldsData, setCustomFieldsData] = useState({} as any)
+  const [customFieldsOrderKeys, setCustomFieldsOrderKeys] = useState([] as any)
+  const [customFieldsTicketHolderKeys, setCustomFieldsTicketHolderKeys] = useState([] as any)
+
+  const getFields = async () => {
+    try {
+      const eventId = getQueryVariable('event_id') || ''
+      const customFields = await getCustomFields(eventId)
+
+      const orderFieldsKeys = getFieldsKeys(_get(customFields, 'orderFields', []))
+      const ticketHoldersFieldsKeys = getFieldsKeys(_get(customFields, 'ticketsFields', []))
+
+      setCustomFieldsTicketHolderKeys(ticketHoldersFieldsKeys)
+      setCustomFieldsOrderKeys(orderFieldsKeys)
+      setCustomFieldsData(customFields)
+
+      onGetCustomFieldsSuccess(customFields)
+    } catch (e) {
+      onGetCustomFieldsError(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!skipCustomFields) {
+      getFields()
+    }
+  }, [])
+
+  const {
+    dataWithCustomFields,
+    ticketHoldersWithCustomFields,
+  } = getDataWithCustomFields(data, ticketHoldersFields, customFieldsData)
+
+  if (lodaing) {
+    return <CircularProgress size={50} />
+  }
+
+  return (
+    <Children
+      {...args}
+      data={dataWithCustomFields}
+      ticketHoldersFields={ticketHoldersWithCustomFields}
+      customFieldsOrderKeys={customFieldsOrderKeys}
+      customFieldsTicketHolderKeys={customFieldsTicketHolderKeys}
+    />
+  )
+}
+
+export { withCustomFields }

package/src/hoc/index.ts

@@ -0,0 +1 @@
+export { withCustomFields } from './CustomFields'

package/src/types/billing-info-data.ts

@@ -23,14 +23,14 @@ export interface IFieldData {
   groupClassname?: string;
   groupLabel?: string | JSX.Element | HTMLElement;
   groupLabelClassName?: string;
-  id: number;
+  id?: number;
   uniqueId?: string;
 }
 export interface IBillingInfoData {
-  id: number | string;
   fields: IFieldData[];
 
   // optional
+  id?: number | string;
   label?: string | JSX.Element;
   labelClassName?: string;
   uniqueId?: string;

package/src/utils/createCheckoutDataBodyWithDefaultHolder.ts

@@ -8,6 +8,9 @@ interface ICheckoutBody {
       | Record<string | number, Type1>
       | Array<Type1 | IticketHolder>;
   };
+  data_capture?: {
+    [key: string]: any;
+  };
 }
 
 interface IticketHolder {

package/src/utils/customFields.ts

@@ -0,0 +1,58 @@
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+
+import { IBillingInfoData } from '../types'
+
+export const getDataWithCustomFields = (
+  initialData: IBillingInfoData[],
+  ticketHoldersFields: IBillingInfoData,
+  customFields: any
+) => {
+  // Custom Fields are not specified case
+  if (_isEmpty(customFields)) {
+    const dataWithCustomFields = { ...initialData }
+    const ticketHoldersWithCustomFields = { ...ticketHoldersFields }
+    return { dataWithCustomFields, ticketHoldersWithCustomFields }
+  }
+
+  // Add Custom Fields for Order
+  const orderWithCustomFields = {
+    groupClassname: 'billing-info-container__customFields',
+    groupItems: [...customFields.orderFields],
+  }
+  const initialDataFields = [...initialData[0].fields]
+
+  // Add Custom Fields to penultimate position
+  initialDataFields.splice(initialDataFields.length - 1, 0, {
+    ...orderWithCustomFields,
+  })
+
+  const dataWithCustomFields = [
+    {
+      ...initialData[0],
+      fields: initialDataFields,
+    },
+  ]
+
+  // Add Custom Fields for Ticket Holders
+  const ticketHoldersFieldsArr = ticketHoldersFields.fields || []
+
+  const ticketHoldersCustomFieldsBlueprint = {
+    id: ticketHoldersFieldsArr.length + 1,
+    customFields: true,
+    groupClassname: 'billing-info-container__customFields',
+    groupItems: [...customFields.ticketsFields],
+  }
+
+  const ticketHoldersWithCustomFields = {
+    ...ticketHoldersFields,
+    fields: _isEmpty(ticketHoldersFieldsArr)
+      ? []
+      : [...ticketHoldersFieldsArr, ticketHoldersCustomFieldsBlueprint],
+  }
+
+  return { dataWithCustomFields, ticketHoldersWithCustomFields }
+}
+
+export const getFieldsKeys = (customFields: any) =>
+  _map(customFields, field => field.name)

package/src/utils/index.ts

@@ -10,5 +10,6 @@ export { replaceVarInString } from './replaceVarInString'
 export { isBrowser } from './isBrowser'
 export { getFormInitialValues } from './form'
 export { setLoggedUserData } from './auth'
+export { getDataWithCustomFields, getFieldsKeys } from './customFields'
 export { createElementFromHTML } from './htmlNodeFromString'
 export { isJson } from './jsonUtils'

package/dist/components/common/CheckboxField.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-import { FieldInputProps } from 'formik';
-export interface ICheckboxField {
-    label: string | number | JSX.Element;
-    field?: FieldInputProps<any>;
-}
-interface IOtherProps {
-    [key: string]: any;
-}
-export declare const CheckboxField: ({ label, field, selectOptions, theme, setFieldValue, disableDropdown, setPhoneValidationIsLoading, defaultCountry, required, uniqueId, dateFormat, datePlaceholder, isCountryCodeEditable, ...rest }: ICheckboxField & IOtherProps) => JSX.Element;
-export {};