tf-checkout-react 1.7.13 → 1.7.15

package/package.json

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

package/src/components/addonsContainer/AddonComponent.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Field } from 'formik'
+import { Field, useFormikContext } from 'formik'
 import _identity from 'lodash/identity'
 import _isEmpty from 'lodash/isEmpty'
 import _isNull from 'lodash/isNull'
@@ -13,10 +13,6 @@ import {
 } from '../billing-info-container/utils'
 import { NativeSelectField } from '../common'
 
-// TO DO:
-// - Need to add custom fields validations
-// - Need to apply correct styles
-
 interface IAddonComponentProps {
   classNamePrefix: string;
   data: any;
@@ -26,6 +22,7 @@ interface IAddonComponentProps {
   configs: any;
   values: any;
   errors: any;
+  useStepperQty?: boolean;
   onCustomFieldChange?: (
     addon: any,
     groupId: string | number,
@@ -34,6 +31,41 @@ interface IAddonComponentProps {
   ) => void;
 }
 
+const AddonStepper = ({ id, selectOptions, handleAddonChange, classNamePrefix }: any) => {
+  const { values, setFieldValue } = useFormikContext<any>()
+  const qty = Number(values[id] ?? 0)
+  const max = selectOptions?.length > 0 ? selectOptions[selectOptions.length - 1].value : 0
+
+  const change = (next: number) => {
+    setFieldValue(id, next)
+    handleAddonChange(id, next)
+  }
+
+  return (
+    <div className={`${classNamePrefix}_stepper`}>
+      <button
+        type="button"
+        className={`${classNamePrefix}_stepper__btn`}
+        onClick={() => change(qty - 1)}
+        disabled={qty <= 0}
+        aria-label="Decrease quantity"
+      >
+        −
+      </button>
+      <span className={`${classNamePrefix}_stepper__count`}>{qty}</span>
+      <button
+        type="button"
+        className={`${classNamePrefix}_stepper__btn`}
+        onClick={() => change(qty + 1)}
+        disabled={qty >= max}
+        aria-label="Increase quantity"
+      >
+        +
+      </button>
+    </div>
+  )
+}
+
 const AddonComponent = ({
   classNamePrefix = '',
   data,
@@ -43,6 +75,7 @@ const AddonComponent = ({
   configs,
   values,
   errors,
+  useStepperQty = false,
   onCustomFieldChange = _identity,
 }: IAddonComponentProps) => {
   const { id, name, active, stock } = data
@@ -57,15 +90,24 @@ const AddonComponent = ({
           ) : (
             <>
               <div className={`${classNamePrefix}_product_qty_select`}>
-                <Field
-                  name={id}
-                  selectOptions={selectOptions}
-                  component={NativeSelectField}
-                  onChange={(e: any) => {
-                    const { value } = e.target
-                    handleAddonChange(id, value)
-                  }}
-                />
+                {useStepperQty ? (
+                  <AddonStepper
+                    id={id}
+                    selectOptions={selectOptions}
+                    handleAddonChange={handleAddonChange}
+                    classNamePrefix={classNamePrefix}
+                  />
+                ) : (
+                  <Field
+                    name={id}
+                    selectOptions={selectOptions}
+                    component={NativeSelectField}
+                    onChange={(e: any) => {
+                      const { value } = e.target
+                      handleAddonChange(id, value)
+                    }}
+                  />
+                )}
               </div>
               {!_isEmpty(addOnDataWithCustomFields?.fields) && values[id] > 0 && (
                 <div className="add-on-fields">

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -30,6 +30,7 @@ export interface ISimpleAddonContainerProps {
   addOnDataWithCustomFields: any;
   configs: any;
   eventId: string;
+  useStepperQty?: boolean;
   onAddOnSelect?: (id: string, value: string, addon: any, fieldUpdates: any) => void;
   handleConfirm?: (values: any) => void;
 }
@@ -46,6 +47,7 @@ export const SimpleAddonsContainer = ({
   addOnDataWithCustomFields,
   configs,
   eventId,
+  useStepperQty = false,
   onAddOnSelect = _identity,
   handleConfirm = _identity,
 }: ISimpleAddonContainerProps) => {
@@ -373,6 +375,7 @@ export const SimpleAddonsContainer = ({
                               configs={configs}
                               values={values}
                               errors={errors}
+                              useStepperQty={useStepperQty}
                             />
                           ))
                         ) : (

package/src/components/addonsContainer/index.tsx

@@ -3,36 +3,21 @@
 
 import { CircularProgress } from '@mui/material'
 import { Form, Formik } from 'formik'
-import _get from 'lodash/get'
 import _identity from 'lodash/identity'
 import _map from 'lodash/map'
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { Tooltip } from 'react-tooltip'
 
-import { getAddons, getCart, getCheckoutPageConfigs, postOnCheckout } from '../../api'
 import { FEES_STYLES } from '../../constants'
 import { currencyNormalizerCreator } from '../../normalizers'
-import { ICheckoutPageConfigs } from '../../types'
-import {
-  CONFIGS,
-  createCheckoutDataBodyWithDefaultHolder,
-  createMarkup,
-  getQueryVariable,
-  isBrowser,
-} from '../../utils'
+import { CONFIGS, createMarkup, getQueryVariable, isBrowser } from '../../utils'
 import { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
 import InfoIcon from '../ticketsContainer/InfoIcon'
 import TimerWidget from '../timerWidget'
-import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
 import AddonComponent from './AddonComponent'
 import { getNormalizedPrice } from './normalizers'
-import {
-  generateSelectOptions,
-  getAddonSelectOptions,
-  getSortedAddons,
-  getTicketRelatedAddons,
-  isAtLeastOneAddonSelected,
-} from './utils'
+import { isAtLeastOneAddonSelected } from './utils'
+import { useAddons } from './useAddons'
 
 export interface IAddonContainterProps {
   classNamePrefix?: string;
@@ -52,11 +37,9 @@ export interface IAddonContainterProps {
   configs: any;
 
   onAddOnSelect?: (id: string, value: string, addon: any) => void;
+  useStepperQty?: boolean;
 }
 
-export interface ObjectLiteral {
-  [key: string]: any;
-}
 
 export const AddonsContainter = ({
   classNamePrefix = 'add_on',
@@ -75,16 +58,30 @@ export const AddonsContainter = ({
   addOnDataWithCustomFields,
   configs,
   onAddOnSelect = _identity,
+  useStepperQty = false,
 }: IAddonContainterProps) => {
-  const eventId = getQueryVariable('event_id')
-  const [addons, setAddons] = useState<any>([])
-  const [addonsOptions, setAddonsOptions] = useState<any>({})
-  const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
-  const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] =
-    useState<any>({})
-  const [loading, setLoading] = useState(true)
-  const [cartExpirationTime, setCartExpirationTime] = useState(0)
-  const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
+  const eventId = getQueryVariable('event_id') || null
+
+  const {
+    addons,
+    addonsOptions,
+    loading,
+    cartExpirationTime,
+    pendingVerificationMessage,
+    initialValues,
+    onFieldChange,
+    handleConfirm,
+    handleClearAddons,
+  } = useAddons(eventId, {
+    enableBillingInfoAutoCreate,
+    addOnDataWithCustomFields,
+    onGetAddonsPageInfoSuccess,
+    onGetAddonsPageInfoError,
+    onPostCheckoutSuccess,
+    onPostCheckoutError,
+    onConfirmSelectionSuccess,
+    onConfirmSelectionError,
+  })
 
   const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
 
@@ -96,207 +93,8 @@ export const AddonsContainter = ({
     if (samePage) {
       window.localStorage.removeItem('add_ons')
     }
-    const getAddonsPageInfo = async () => {
-      try {
-        if (eventId) {
-          setLoading(true)
-
-          // Get choosed ticket info (id, count) from Cart request for addons options calculations
-          const cart = await getCart()
-          const { id: choosedTicketID, quantity, expiresAt } = cartAdapter(cart)
-          const choosedTicketCount = Number(quantity)
-          setCartExpirationTime(expiresAt)
-
-          // Get and collect addons data
-          const addonsData = await getAddons(eventId)
-          const adaptedAddons = addonsWithGroupsAdapter(addonsData)
-          const ticketRelatedAddons = getTicketRelatedAddons(
-            adaptedAddons,
-            choosedTicketID
-          )
-          const sortedTicketAddons = getSortedAddons(ticketRelatedAddons)
-
-          setAddons(sortedTicketAddons)
-
-          // Collect addons and addon group options
-          const {
-            addonsWithOptions,
-            groupsWithSelectedVariantsInfo,
-            groupsWithVariants,
-          } = getAddonSelectOptions(adaptedAddons, choosedTicketCount)
-
-          setAddonsOptions(addonsWithOptions)
-          setGroupsWithSelectedVariants(groupsWithSelectedVariantsInfo)
-          setGroupsWithInitialVariantsValues(groupsWithVariants)
-
-          // Success callback props
-          onGetAddonsPageInfoSuccess(addonsData)
-        }
-      } catch (e) {
-        // Callback error props
-        onGetAddonsPageInfoError(e)
-      } finally {
-        setLoading(false)
-      }
-    }
-
-    getAddonsPageInfo()
   }, [])
 
-  const recreateGroupVariantsSelectOptions = (groupId: any, changedGroupd: any) => {
-    const { choosedVariants, limit, selectedCount } = changedGroupd
-    const remainingGroupStock = limit - selectedCount
-    const recreatedVariantsOptions: ObjectLiteral = {}
-
-    // Regenerate variants allowed stock counts
-    for (const variant in choosedVariants) {
-      const variantId = variant
-      const variantCurrSelectedValue = choosedVariants[variant]
-      let allowedOptionCount
-
-      // Formula for regenerating
-      if (
-        remainingGroupStock >=
-        groupsWithInitialVariantsValues[groupId][variantId] - variantCurrSelectedValue
-      ) {
-        allowedOptionCount = groupsWithInitialVariantsValues[groupId][variantId]
-      } else {
-        allowedOptionCount = remainingGroupStock + variantCurrSelectedValue
-      }
-
-      recreatedVariantsOptions[variantId] = generateSelectOptions(0, allowedOptionCount)
-    }
-
-    setAddonsOptions((prevState: any) =>
-      Object.assign({}, prevState, recreatedVariantsOptions)
-    )
-  }
-
-  const onFieldChange = (id: any, value: any, addon: any) => {
-    // If changeableGroup exsists it means that group with limitation variant was changed
-    const changeableGroup = groupsWithSelectedVariants[addon.id]
-
-    if (changeableGroup) {
-      const currGroupId = addon.id
-      const currSelectedVariantId = id
-      const currSelectedVariantCount = Number(value)
-      const currSelectedVariantPrevCount =
-        groupsWithSelectedVariants[currGroupId].choosedVariants[currSelectedVariantId]
-
-      const currSelectedGroupCount =
-        changeableGroup.selectedCount +
-        (currSelectedVariantCount - currSelectedVariantPrevCount)
-
-      // Update Group info
-      const updatedGroupsWithSelectedVariants = {
-        ...groupsWithSelectedVariants,
-        [currGroupId]: {
-          ...groupsWithSelectedVariants[currGroupId],
-          selectedCount: currSelectedGroupCount,
-          choosedVariants: {
-            ...groupsWithSelectedVariants[currGroupId].choosedVariants,
-            [currSelectedVariantId]: currSelectedVariantCount,
-          },
-        },
-      }
-      setGroupsWithSelectedVariants(updatedGroupsWithSelectedVariants)
-
-      // Recreate Select Options for Addon Group Variants
-      recreateGroupVariantsSelectOptions(
-        currGroupId,
-        updatedGroupsWithSelectedVariants[currGroupId]
-      )
-    }
-  }
-
-  const handleConfirm = async (values: any, skipAddonPage?: boolean) => {
-    try {
-      const pageConfigsDataResponse = await getCheckoutPageConfigs()
-      const pageConfigsData: ICheckoutPageConfigs =
-        _get(pageConfigsDataResponse, 'data.attributes') || {}
-
-      const skipBillingPage = pageConfigsData.skip_billing_page ?? false
-
-      if (skipBillingPage && enableBillingInfoAutoCreate) {
-        const ticketsQuantity = window.localStorage.getItem('quantity')
-        const userData = JSON.parse(window.localStorage.getItem('user_data') || '{}')
-
-        const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
-          Number(ticketsQuantity) || 0,
-          userData
-        )
-
-        try {
-          const checkoutResponse = await postOnCheckout({
-            ...checkoutBody,
-            attributes: {
-              ...checkoutBody.attributes,
-              ...(!skipAddonPage && { add_ons: values }),
-            },
-          })
-          const hash = checkoutResponse?.data?.attributes?.hash || ''
-          const total = checkoutResponse?.data?.attributes?.total || ''
-
-          isBrowser && window.localStorage.removeItem('quantity')
-          isBrowser && window.localStorage.removeItem('add_ons')
-
-          onPostCheckoutSuccess(checkoutResponse?.data.attributes)
-          onConfirmSelectionSuccess({
-            skip_billing_page: skipBillingPage,
-            event_id: String(eventId),
-            hash,
-            total,
-          })
-        } catch (error) {
-          if ((error as any).response?.data?.data?.hasUnverifiedOrder) {
-            setPendingVerificationMessage((error as any).response?.data?.message)
-          } else {
-            onPostCheckoutError(error)
-            onConfirmSelectionError(error)
-          }
-        }
-      } else {
-        if (isBrowser) {
-          if (!skipAddonPage) {
-            window.localStorage.setItem('add_ons', JSON.stringify(values))
-          }
-
-          onConfirmSelectionSuccess({
-            skip_billing_page: skipBillingPage && enableBillingInfoAutoCreate,
-            event_id: String(eventId),
-          })
-        } else {
-          onConfirmSelectionError({
-            error: true,
-            message: 'Window is not defined',
-          })
-        }
-      }
-    } catch (e) {
-      onConfirmSelectionError(e)
-    }
-  }
-
-  const handleClearAddons = () => {
-    window.localStorage.removeItem('add_ons')
-  }
-
-  const initialValues = useMemo(() => {
-    const addOnsData: any = {}
-    if (addons?.length > 0 && addOnDataWithCustomFields?.fields?.length > 0) {
-      _map(addons, addon => {
-        _map(addOnDataWithCustomFields.fields, field => {
-          const { id, groupItems } = field
-          _map(groupItems, item => {
-            addOnsData[`${addon.id}-${id}-${item.name}`] = item.value
-          })
-        })
-      })
-    }
-
-    return addOnsData
-  }, [addons, addOnDataWithCustomFields])
-
   if (loading) {
     return (
       <div className={`${classNamePrefix}_loader`}>
@@ -489,6 +287,7 @@ export const AddonsContainter = ({
                                   configs={configs}
                                   values={values}
                                   errors={errors}
+                                  useStepperQty={useStepperQty}
                                 />
                               ))
                             ) : (

package/src/components/addonsContainer/useAddons.ts

@@ -0,0 +1,248 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _get from 'lodash/get'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import { useEffect, useMemo, useState } from 'react'
+
+import { getAddons, getCart, getCheckoutPageConfigs, postOnCheckout } from '../../api'
+import { ICheckoutPageConfigs } from '../../types'
+import { createCheckoutDataBodyWithDefaultHolder, isBrowser } from '../../utils'
+import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
+import {
+  generateSelectOptions,
+  getAddonSelectOptions,
+  getSortedAddons,
+  getTicketRelatedAddons,
+} from './utils'
+
+interface ObjectLiteral {
+  [key: string]: any;
+}
+
+export interface IUseAddonsOptions {
+  enableBillingInfoAutoCreate?: boolean;
+  addOnDataWithCustomFields?: any;
+  onGetAddonsPageInfoSuccess?: (res: any) => void;
+  onGetAddonsPageInfoError?: (error: any) => void;
+  onPostCheckoutSuccess?: (res: any) => void;
+  onPostCheckoutError?: (error: any) => void;
+  onConfirmSelectionSuccess?: (res: any) => void;
+  onConfirmSelectionError?: (error: any) => void;
+}
+
+export const useAddons = (eventId: string | null, options: IUseAddonsOptions = {}) => {
+  const {
+    enableBillingInfoAutoCreate = true,
+    addOnDataWithCustomFields,
+    onGetAddonsPageInfoSuccess = _identity,
+    onGetAddonsPageInfoError = _identity,
+    onPostCheckoutSuccess = _identity,
+    onPostCheckoutError = _identity,
+    onConfirmSelectionSuccess = _identity,
+    onConfirmSelectionError = _identity,
+  } = options
+
+  const [addons, setAddons] = useState<any>([])
+  const [addonsOptions, setAddonsOptions] = useState<any>({})
+  const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
+  const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] = useState<any>({})
+  const [loading, setLoading] = useState(true)
+  const [cartExpirationTime, setCartExpirationTime] = useState(0)
+  const [pendingVerificationMessage, setPendingVerificationMessage] = useState<any>()
+
+  useEffect(() => {
+    const getAddonsPageInfo = async () => {
+      try {
+        if (eventId) {
+          setLoading(true)
+
+          const cart = await getCart()
+          const { id: choosedTicketID, quantity, expiresAt } = cartAdapter(cart)
+          const choosedTicketCount = Number(quantity)
+          setCartExpirationTime(expiresAt)
+
+          const addonsData = await getAddons(eventId)
+          const adaptedAddons = addonsWithGroupsAdapter(addonsData)
+          const ticketRelatedAddons = getTicketRelatedAddons(adaptedAddons, choosedTicketID)
+          const sortedTicketAddons = getSortedAddons(ticketRelatedAddons)
+
+          setAddons(sortedTicketAddons)
+
+          const {
+            addonsWithOptions,
+            groupsWithSelectedVariantsInfo,
+            groupsWithVariants,
+          } = getAddonSelectOptions(adaptedAddons, choosedTicketCount)
+
+          setAddonsOptions(addonsWithOptions)
+          setGroupsWithSelectedVariants(groupsWithSelectedVariantsInfo)
+          setGroupsWithInitialVariantsValues(groupsWithVariants)
+
+          onGetAddonsPageInfoSuccess(addonsData)
+        }
+      } catch (e) {
+        onGetAddonsPageInfoError(e)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    getAddonsPageInfo()
+  }, [eventId])
+
+  const recreateGroupVariantsSelectOptions = (groupId: any, changedGroup: any) => {
+    const { choosedVariants, limit, selectedCount } = changedGroup
+    const remainingGroupStock = limit - selectedCount
+    const recreatedVariantsOptions: ObjectLiteral = {}
+
+    for (const variant in choosedVariants) {
+      const variantId = variant
+      const variantCurrSelectedValue = choosedVariants[variant]
+      let allowedOptionCount
+
+      if (
+        remainingGroupStock >=
+        groupsWithInitialVariantsValues[groupId][variantId] - variantCurrSelectedValue
+      ) {
+        allowedOptionCount = groupsWithInitialVariantsValues[groupId][variantId]
+      } else {
+        allowedOptionCount = remainingGroupStock + variantCurrSelectedValue
+      }
+
+      recreatedVariantsOptions[variantId] = generateSelectOptions(0, allowedOptionCount)
+    }
+
+    setAddonsOptions((prevState: any) => Object.assign({}, prevState, recreatedVariantsOptions))
+  }
+
+  const onFieldChange = (id: any, value: any, addon: any) => {
+    const changeableGroup = groupsWithSelectedVariants[addon.id]
+
+    if (changeableGroup) {
+      const currGroupId = addon.id
+      const currSelectedVariantId = id
+      const currSelectedVariantCount = Number(value)
+      const currSelectedVariantPrevCount =
+        groupsWithSelectedVariants[currGroupId].choosedVariants[currSelectedVariantId]
+
+      const currSelectedGroupCount =
+        changeableGroup.selectedCount +
+        (currSelectedVariantCount - currSelectedVariantPrevCount)
+
+      const updatedGroupsWithSelectedVariants = {
+        ...groupsWithSelectedVariants,
+        [currGroupId]: {
+          ...groupsWithSelectedVariants[currGroupId],
+          selectedCount: currSelectedGroupCount,
+          choosedVariants: {
+            ...groupsWithSelectedVariants[currGroupId].choosedVariants,
+            [currSelectedVariantId]: currSelectedVariantCount,
+          },
+        },
+      }
+      setGroupsWithSelectedVariants(updatedGroupsWithSelectedVariants)
+
+      recreateGroupVariantsSelectOptions(
+        currGroupId,
+        updatedGroupsWithSelectedVariants[currGroupId]
+      )
+    }
+  }
+
+  const handleConfirm = async (values: any, skipAddonPage?: boolean) => {
+    try {
+      const pageConfigsDataResponse = await getCheckoutPageConfigs()
+      const pageConfigsData: ICheckoutPageConfigs =
+        _get(pageConfigsDataResponse, 'data.attributes') || {}
+
+      const skipBillingPage = pageConfigsData.skip_billing_page ?? false
+
+      if (skipBillingPage && enableBillingInfoAutoCreate) {
+        const ticketsQuantity = window.localStorage.getItem('quantity')
+        const userData = JSON.parse(window.localStorage.getItem('user_data') || '{}')
+
+        const checkoutBody = createCheckoutDataBodyWithDefaultHolder(
+          Number(ticketsQuantity) || 0,
+          userData
+        )
+
+        try {
+          const checkoutResponse = await postOnCheckout({
+            ...checkoutBody,
+            attributes: {
+              ...checkoutBody.attributes,
+              ...(!skipAddonPage && { add_ons: values }),
+            },
+          })
+          const hash = checkoutResponse?.data?.attributes?.hash || ''
+          const total = checkoutResponse?.data?.attributes?.total || ''
+
+          isBrowser && window.localStorage.removeItem('quantity')
+          isBrowser && window.localStorage.removeItem('add_ons')
+
+          onPostCheckoutSuccess(checkoutResponse?.data.attributes)
+          onConfirmSelectionSuccess({
+            skip_billing_page: skipBillingPage,
+            event_id: String(eventId),
+            hash,
+            total,
+          })
+        } catch (error) {
+          if ((error as any).response?.data?.data?.hasUnverifiedOrder) {
+            setPendingVerificationMessage((error as any).response?.data?.message)
+          } else {
+            onPostCheckoutError(error)
+            onConfirmSelectionError(error)
+          }
+        }
+      } else {
+        if (isBrowser) {
+          if (!skipAddonPage) {
+            window.localStorage.setItem('add_ons', JSON.stringify(values))
+          }
+
+          onConfirmSelectionSuccess({
+            skip_billing_page: skipBillingPage && enableBillingInfoAutoCreate,
+            event_id: String(eventId),
+          })
+        } else {
+          onConfirmSelectionError({ error: true, message: 'Window is not defined' })
+        }
+      }
+    } catch (e) {
+      onConfirmSelectionError(e)
+    }
+  }
+
+  const handleClearAddons = () => {
+    window.localStorage.removeItem('add_ons')
+  }
+
+  const initialValues = useMemo(() => {
+    const addOnsData: any = {}
+    if (addons?.length > 0 && addOnDataWithCustomFields?.fields?.length > 0) {
+      _map(addons, addon => {
+        _map(addOnDataWithCustomFields.fields, field => {
+          const { id, groupItems } = field
+          _map(groupItems, item => {
+            addOnsData[`${addon.id}-${id}-${item.name}`] = item.value
+          })
+        })
+      })
+    }
+    return addOnsData
+  }, [addons, addOnDataWithCustomFields])
+
+  return {
+    addons,
+    addonsOptions,
+    loading,
+    cartExpirationTime,
+    pendingVerificationMessage,
+    setPendingVerificationMessage,
+    initialValues,
+    onFieldChange,
+    handleConfirm,
+    handleClearAddons,
+  }
+}