tf-checkout-react 1.6.6-beta.3 → 1.6.6-beta.31

package/src/components/addonsContainer/index.tsx

@@ -1,21 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/no-unescaped-entities */
 
 import { CircularProgress } from '@mui/material'
 import { Form, Formik } from 'formik'
 import _get from 'lodash/get'
 import _identity from 'lodash/identity'
-import React, { useEffect, useState } from 'react'
+import _map from 'lodash/map'
+import React, { useEffect, useMemo, 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 { VerificationPendingModal } from '../idVerificationContainer/VerificationPendingModal'
+import InfoIcon from '../ticketsContainer/InfoIcon'
 import TimerWidget from '../timerWidget'
 import { addonsWithGroupsAdapter, cartAdapter } from './adapters'
 import AddonComponent from './AddonComponent'
@@ -41,6 +47,11 @@ export interface IAddonContainterProps {
   onCountdownFinish?: () => void;
   onPendingVerification?: () => void;
   samePage?: boolean;
+  descriptionTrigger?: 'click' | 'hover' | 'always';
+  addOnDataWithCustomFields: any;
+  configs: any;
+
+  onAddOnSelect?: (id: string, value: string, addon: any) => void;
 }
 
 export interface ObjectLiteral {
@@ -60,6 +71,10 @@ export const AddonsContainter = ({
   onCountdownFinish = _identity,
   onPendingVerification = _identity,
   samePage,
+  descriptionTrigger = 'click',
+  addOnDataWithCustomFields,
+  configs,
+  onAddOnSelect = _identity,
 }: IAddonContainterProps) => {
   const eventId = getQueryVariable('event_id')
   const [addons, setAddons] = useState<any>([])
@@ -71,6 +86,12 @@ export const AddonsContainter = ({
   const [cartExpirationTime, setCartExpirationTime] = useState(0)
   const [pendingVerificationMessage, setPendingVerificationMessage] = useState()
 
+  const [visibleDescription, setVisibleDescription] = useState<string | null>(null)
+
+  const handleDescriptionToggle = (ticketId: string) => {
+    setVisibleDescription(current => (current === ticketId ? null : ticketId))
+  }
+
   useEffect(() => {
     if (samePage) {
       window.localStorage.removeItem('add_ons')
@@ -227,8 +248,8 @@ export const AddonsContainter = ({
             total,
           })
         } catch (error) {
-          if (error.response?.data?.data?.hasUnverifiedOrder) {
-            setPendingVerificationMessage(error.response?.data?.message)
+          if ((error as any).response?.data?.data?.hasUnverifiedOrder) {
+            setPendingVerificationMessage((error as any).response?.data?.message)
           } else {
             onPostCheckoutError(error)
             onConfirmSelectionError(error)
@@ -260,6 +281,22 @@ export const AddonsContainter = ({
     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`}>
@@ -268,9 +305,13 @@ export const AddonsContainter = ({
     )
   }
 
+  if (addons?.length === 0) {
+    return null
+  }
+
   const params = new URL(`${window.location}`).searchParams
-  const addOnIsIncluded = params.get("include_add_on") === "true"
-  const isResale = params.get("resale") === 'true'
+  const addOnIsIncluded = params.get('include_add_on') === 'true'
+  const isResale = params.get('resale') === 'true'
 
   return (
     <>
@@ -286,40 +327,46 @@ export const AddonsContainter = ({
       <div className={`${classNamePrefix}_container`}>
         <div className={`${classNamePrefix}_block`}>
           <div className={`${classNamePrefix}_line_block`}>
-            {samePage ? null : <p className={`${classNamePrefix}_info_title`}>Get Your Tickets</p>}
-            {(
-              !addons?.length ||
-              (isResale && addOnIsIncluded)
-            ) && samePage ? null : <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>}
-            {samePage ? null : <button
-              type="button"
-              className={`${classNamePrefix}_skip`}
-              onClick={() => {
-                handleClearAddons()
-                handleConfirm({}, true)
-              }}
-            >
-              Skip
-            </button>}
+            {samePage ? null : (
+              <p className={`${classNamePrefix}_info_title`}>Get Your Tickets</p>
+            )}
+            {(!addons?.length || (isResale && addOnIsIncluded)) && samePage ? null : (
+              <div className={`${classNamePrefix}_title`}>UPGRADES & ADD-ONS</div>
+            )}
+            {samePage ? null : (
+              <button
+                type="button"
+                className={`${classNamePrefix}_skip`}
+                onClick={() => {
+                  handleClearAddons()
+                  handleConfirm({}, true)
+                }}
+              >
+                Skip
+              </button>
+            )}
           </div>
-          {(
-            !addons?.length ||
-            (isResale && addOnIsIncluded)
-          ) && samePage ? null : <div className={`${classNamePrefix}_subtitle`}>
-            PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
-          </div>}
+          {(!addons?.length || (isResale && addOnIsIncluded)) && samePage ? null : (
+            <div className={`${classNamePrefix}_subtitle`}>
+              PLEASE SELECT FROM THE OPTIONAL ADD-ONS BELOW
+            </div>
+          )}
           <Formik
-            initialValues={{}}
+            initialValues={initialValues}
             onSubmit={values => {
               handleConfirm(values)
             }}
-            validate={samePage ? values => {
-              if (isBrowser) {
-                window.localStorage.setItem('add_ons', JSON.stringify(values))
-              }
-            } : undefined}
+            validate={
+              samePage
+                ? values => {
+                    if (isBrowser) {
+                      window.localStorage.setItem('add_ons', JSON.stringify(values))
+                    }
+                  }
+                : undefined
+            }
           >
-            {({ values }) => {
+            {({ values, errors, setFieldTouched }) => {
               const isConfirmDisabled = !isAtLeastOneAddonSelected(values)
 
               return (
@@ -327,14 +374,25 @@ export const AddonsContainter = ({
                   <>
                     {(isResale && addOnIsIncluded ? [] : addons).map((addon: any) => {
                       const price = addon.feeIncluded ? addon.price : addon.cost
-                      const isAddonFree = Number(price) === 0
+                      const isAddonFree = Number(addon?.price) === 0
+
+                      const addOnNormalizedCost = isAddonFree
+                        ? 'FREE'
+                        : currencyNormalizerCreator(
+                            getNormalizedPrice(addon?.cost ?? 0),
+                            addon.currency
+                          )
 
                       const addonNormalizedPrice = isAddonFree
                         ? 'FREE'
                         : currencyNormalizerCreator(
-                          getNormalizedPrice(price),
-                          addon.currency
-                        )
+                            getNormalizedPrice(
+                              CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH
+                                ? addon?.price ?? price
+                                : price
+                            ),
+                            addon.currency
+                          )
 
                       return (
                         <div
@@ -351,20 +409,69 @@ export const AddonsContainter = ({
                           <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`}>
-                              {addonNormalizedPrice}
-                              {!isAddonFree && (
-                                <span className={`${classNamePrefix}_product_fee`}>
-                                  {addon.feeIncluded ? '(incl. Fees)' : '(excl. Fees)'}
-                                </span>
-                              )}
+                              {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>
-                          <div
-                            className={`${classNamePrefix}_product_desc`}
-                            dangerouslySetInnerHTML={createMarkup(addon.description)}
-                          />
+                          {(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) => (
@@ -374,9 +481,14 @@ export const AddonsContainter = ({
                                   data={variant}
                                   selectOptions={addonsOptions[variant.id]}
                                   classNamePrefix={classNamePrefix}
-                                  handleAddonChange={(id, value) =>
+                                  handleAddonChange={(id, value) => {
+                                    onAddOnSelect(id, value, addon)
                                     onFieldChange(id, value, addon)
-                                  }
+                                  }}
+                                  addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                  configs={configs}
+                                  values={values}
+                                  errors={errors}
                                 />
                               ))
                             ) : (
@@ -386,23 +498,42 @@ export const AddonsContainter = ({
                                 data={addon}
                                 selectOptions={addonsOptions[addon.id]}
                                 classNamePrefix={classNamePrefix}
-                                handleAddonChange={(id, value) =>
+                                handleAddonChange={(id, value) => {
+                                  onAddOnSelect(id, value, addon)
                                   onFieldChange(id, value, addon)
-                                }
+
+                                  _map(addOnDataWithCustomFields.fields, fieldGroup => {
+                                    const { id, groupItems } = fieldGroup
+                                    _map(groupItems, field => {
+                                      setFieldTouched(
+                                        `${addon.id}-${id}-${field.name}`,
+                                        true,
+                                        true
+                                      )
+                                    })
+                                  })
+                                }}
+                                addOnDataWithCustomFields={addOnDataWithCustomFields}
+                                configs={configs}
+                                values={values}
+                                errors={errors}
                               />
                             )}
                           </div>
                         </div>
                       )
                     })}
-                    {samePage ? null : <button
-                      type="submit"
-                      className={`${isConfirmDisabled ? `${classNamePrefix}_is_disabled` : ''
+                    {samePage ? null : (
+                      <button
+                        type="submit"
+                        className={`${
+                          isConfirmDisabled ? `${classNamePrefix}_is_disabled` : ''
                         } ${classNamePrefix}_submit_button`}
-                      disabled={isConfirmDisabled}
-                    >
-                      CONFIRM SELECTION
-                    </button>}
+                        disabled={isConfirmDisabled}
+                      >
+                        CONFIRM SELECTION
+                      </button>
+                    )}
                   </>
                 </Form>
               )