tf-checkout-react 1.6.6 → 1.7.2

package/src/components/addonsContainer/SimpleAddonsContainer.tsx

@@ -0,0 +1,420 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { CircularProgress } from '@mui/material'
+import { Form, Formik } from 'formik'
+import _identity from 'lodash/identity'
+import _map from 'lodash/map'
+import React, { useEffect, useMemo, useState } from 'react'
+import { Tooltip } from 'react-tooltip'
+
+import { getAddons, getCart } from '../../api'
+import { FEES_STYLES } from '../../constants'
+import { currencyNormalizerCreator } from '../../normalizers'
+import { CONFIGS, createMarkup } from '../../utils'
+import InfoIcon from '../ticketsContainer/InfoIcon'
+import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
+import AddonComponent from './AddonComponent'
+import { getNormalizedPrice } from './normalizers'
+import {
+  generateSelectOptions,
+  getAddonSelectOptions,
+  getSortedAddons,
+  getTicketRelatedAddons,
+} from './utils'
+
+export interface ISimpleAddonContainerProps {
+  classNamePrefix?: string;
+  onGetAddonsPageInfoSuccess?: (res: any) => void;
+  onGetAddonsPageInfoError?: (error: any) => void;
+  descriptionTrigger?: 'click' | 'hover' | 'always';
+  addOnDataWithCustomFields: any;
+  configs: any;
+  eventId: string;
+  onAddOnSelect?: (id: string, value: string, addon: any, fieldUpdates: any) => void;
+  handleConfirm?: (values: any) => void;
+}
+
+export interface ObjectLiteral {
+  [key: string]: any;
+}
+
+export const SimpleAddonsContainer = ({
+  classNamePrefix = 'add_on',
+  onGetAddonsPageInfoSuccess = _identity,
+  onGetAddonsPageInfoError = _identity,
+  descriptionTrigger = 'click',
+  addOnDataWithCustomFields,
+  configs,
+  eventId,
+  onAddOnSelect = _identity,
+  handleConfirm = _identity,
+}: ISimpleAddonContainerProps) => {
+  const [addons, setAddons] = useState<any>(null)
+  const [addonsOptions, setAddonsOptions] = useState<any>({})
+  const [groupsWithSelectedVariants, setGroupsWithSelectedVariants] = useState<any>({})
+  const [groupsWithInitialVariantsValues, setGroupsWithInitialVariantsValues] =
+    useState<any>({})
+  const [loading, setLoading] = useState(true)
+
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
+  // build { [fieldName]: value } for one addon from current Formik values
+  const collectAddonFieldUpdates = (addon: any, allValues: Record<string, any>) => {
+    const out: Record<string, any> = {}
+    if (!addOnDataWithCustomFields?.fields?.length) return out
+    addOnDataWithCustomFields.fields.forEach((group: any) => {
+      group.groupItems.forEach((item: any) => {
+        const k = `${addon.id}-${group.id}-${item.name}`
+        if (k in allValues) out[item.name] = allValues[k]
+      })
+    })
+    return out
+  }
+
+  // live-sync a single custom field change into localStorage.add_on_data_capture
+  const handleCustomFieldChange = (
+    addon: any,
+    _groupId: string | number,
+    fieldName: string,
+    value: any
+  ) => {
+    const existing = JSON.parse(localStorage.getItem('add_on_data_capture') || '{}')
+    const addonId = String(addon.id)
+    const next = {
+      ...existing,
+      [addonId]: { ...(existing[addonId] || {}), [fieldName]: value },
+    }
+    localStorage.setItem('add_on_data_capture', JSON.stringify(next))
+  }
+
+  useEffect(() => {
+    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 } = cartAdapter(cart)
+          const choosedTicketCount = Number(quantity)
+
+          // 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()
+  }, [eventId, onGetAddonsPageInfoError, onGetAddonsPageInfoSuccess])
+
+  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 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 || !addons) {
+    return (
+      <div className={`${classNamePrefix}_loader`}>
+        <CircularProgress size={50} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={`${classNamePrefix}_container`}>
+      <div className={`${classNamePrefix}_block`}>
+        <div className={`${classNamePrefix}_line_block`}>
+          {addons?.length > 0 && (
+            <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>
+          )}
+        </div>
+        {addons?.length > 0 && (
+          <div className={`${classNamePrefix}_subtitle`}>
+            PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+          </div>
+        )}
+        <Formik
+          initialValues={initialValues}
+          onSubmit={values => {
+            handleConfirm(values)
+          }}
+          validate={() => {
+            // Real-time validation can be handled here if needed
+          }}
+        >
+          {({ values, errors, setFieldTouched }) => (
+            <Form autoComplete="off" className="form_holder">
+              <>
+                {addons.map((addon: any) => {
+                  const price = addon.feeIncluded ? addon.price : addon.cost
+                  const isAddonFree = Number(addon?.price) === 0
+
+                  const addOnNormalizedCost = isAddonFree
+                    ? 'FREE'
+                    : currencyNormalizerCreator(
+                        getNormalizedPrice(addon?.cost ?? 0),
+                        addon.currency
+                      )
+
+                  const addonNormalizedPrice = isAddonFree
+                    ? 'FREE'
+                    : currencyNormalizerCreator(
+                        getNormalizedPrice(
+                          CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+                            ? addon?.price ?? price
+                            : price
+                        ),
+                        addon.currency
+                      )
+
+                  return (
+                    <div key={addon.id} className={`${classNamePrefix}_product_block`}>
+                      <div className={`${classNamePrefix}_product_images`}>
+                        {addon.imageUrl && (
+                          <div className={`${classNamePrefix}_product_image_block`}>
+                            <img src={addon.imageUrl} alt="No Data" />
+                          </div>
+                        )}
+                      </div>
+                      <div className={`${classNamePrefix}_product_info_block`}>
+                        <div className={`${classNamePrefix}_product_title`}>
+                          {addon.name}
+                          {addon.description && descriptionTrigger !== 'always' && (
+                            <>
+                              <span
+                                aria-hidden
+                                className="info-icon"
+                                onClick={
+                                  descriptionTrigger === 'click'
+                                    ? () => handleDescriptionToggle(addon.id)
+                                    : undefined
+                                }
+                                onMouseEnter={
+                                  descriptionTrigger === 'hover'
+                                    ? () => setVisibleDescription(addon.id)
+                                    : undefined
+                                }
+                                onMouseLeave={
+                                  descriptionTrigger === 'hover'
+                                    ? () => setVisibleDescription(null)
+                                    : undefined
+                                }
+                                style={{
+                                  marginLeft: 8,
+                                  cursor: 'pointer',
+                                  display: 'flex',
+                                }}
+                                data-tooltip-id={`tooltip-${addon.id}`}
+                                data-tooltip-content="View Add-On info"
+                              >
+                                <InfoIcon size={14} />
+                              </span>
+                              <Tooltip id={`tooltip-${addon.id}`} place="top">
+                                {addon.description || 'No description available'}
+                              </Tooltip>
+                            </>
+                          )}
+                        </div>
+                        <div className={`${classNamePrefix}_product_price`}>
+                          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL
+                            ? addonNormalizedPrice
+                            : addOnNormalizedCost}
+                          {!isAddonFree &&
+                            CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL && (
+                              <span className={`${classNamePrefix}_product_fee`}>
+                                {addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
+                              </span>
+                            )}
+                          {!isAddonFree &&
+                            CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
+                              <>
+                                <span className={`${classNamePrefix}_product_fee`}>
+                                  {`(${addonNormalizedPrice} with fees)`}
+                                </span>
+                              </>
+                            )}
+                        </div>
+                      </div>
+                      {(visibleDescription === addon.id ||
+                        descriptionTrigger === 'always') && (
+                        <div
+                          className={`${classNamePrefix}_product_desc`}
+                          dangerouslySetInnerHTML={createMarkup(addon.description)}
+                        />
+                      )}
+                      <div className={`${classNamePrefix}_product_select_container`}>
+                        {addon.variants ? (
+                          addon.variants.map((variant: any) => (
+                            // Group Variants
+                            <AddonComponent
+                              key={variant.id}
+                              data={variant}
+                              selectOptions={addonsOptions[variant.id]}
+                              classNamePrefix={classNamePrefix}
+                              handleAddonChange={(id, value) => {
+                                console.log('handleAddonChange', id, value)
+                                onFieldChange(id, value, addon)
+                                const fieldUpdates = collectAddonFieldUpdates(
+                                  addon,
+                                  values
+                                )
+                                onAddOnSelect(id, value, addon, fieldUpdates)
+                              }}
+                              onCustomFieldChange={handleCustomFieldChange}
+                              addOnDataWithCustomFields={addOnDataWithCustomFields}
+                              configs={configs}
+                              values={values}
+                              errors={errors}
+                            />
+                          ))
+                        ) : (
+                          // Simple Addon
+                          <AddonComponent
+                            key={addon.id}
+                            data={addon}
+                            selectOptions={addonsOptions[addon.id]}
+                            classNamePrefix={classNamePrefix}
+                            handleAddonChange={(id, value) => {
+                              onFieldChange(id, value, addon)
+                              const fieldUpdates = collectAddonFieldUpdates(addon, values)
+                              onAddOnSelect(id, value, addon, fieldUpdates)
+                              _map(addOnDataWithCustomFields.fields, fieldGroup => {
+                                const { id, groupItems } = fieldGroup
+                                _map(groupItems, field => {
+                                  setFieldTouched(
+                                    `${addon.id}-${id}-${field.name}`,
+                                    true,
+                                    true
+                                  )
+                                })
+                              })
+                            }}
+                            onCustomFieldChange={handleCustomFieldChange}
+                            addOnDataWithCustomFields={addOnDataWithCustomFields}
+                            configs={configs}
+                            values={values}
+                            errors={errors}
+                          />
+                        )}
+                      </div>
+                    </div>
+                  )
+                })}
+              </>
+            </Form>
+          )}
+        </Formik>
+      </div>
+    </div>
+  )
+}
+
+export default SimpleAddonsContainer