tf-checkout-react 1.5.9 → 1.6.0

package/src/components/common/index.tsx

@@ -1,4 +1,5 @@
 export { CheckboxField } from './CheckboxField'
+export { Checkbox } from './Checkbox'
 export { CustomField } from './CustomField'
 export { FormikPhoneNumberField } from './FormikPhoneNumberField'
 export { PhoneNumberField } from './PhoneNumberField'

package/src/components/orderDetailsContainer/CustomFieldsForm.tsx

@@ -0,0 +1,75 @@
+import { Field, Form, Formik, FormikProps } from 'formik'
+import _identity from 'lodash/identity'
+import React from 'react'
+
+import { fieldDataAdapter } from '../../adapters/customFields'
+import {
+  getFieldComponent,
+  getFieldLabel,
+  getValidateFunctions,
+} from '../billing-info-container/utils'
+import { CustomFieldTypes } from './index'
+
+interface HolderCustomFieldsProps {
+  initialValues: { [key: string]: any };
+  fields: Array<CustomFieldTypes>;
+  handleFormSubmit?: (values: Record<string, any>) => void;
+  handleFormClose?: () => void;
+}
+
+const CustomFieldsForm = ({
+  initialValues = {},
+  fields = [],
+  handleFormSubmit = _identity,
+  handleFormClose = _identity,
+}: HolderCustomFieldsProps) => (
+  <Formik
+    initialValues={initialValues}
+    onSubmit={values => handleFormSubmit(values)}
+    enableReinitialize={true}
+  >
+    {(props: FormikProps<any>) => (
+      <Form>
+        <div className="updatable-custom-fields">
+          {fields.map((customField: CustomFieldTypes) => {
+            const adaptedCustomField = fieldDataAdapter(customField)
+            return (
+              <Field
+                key={customField.id}
+                name={customField.name}
+                label={getFieldLabel(customField)}
+                component={getFieldComponent(adaptedCustomField)}
+                validate={getValidateFunctions(
+                  customField,
+                  [],
+                  props.values,
+                  props.errors
+                )}
+                isMultiple={adaptedCustomField.isMultiple}
+                radios={adaptedCustomField.radios}
+                options={adaptedCustomField.options}
+              />
+            )
+          })}
+        </div>
+        <div className="buttons-block">
+          <button
+            className="cancel-btn"
+            type="button"
+            onClick={() => {
+              props.resetForm()
+              handleFormClose()
+            }}
+          >
+            Cancel
+          </button>
+          <button className="submit-btn" type="submit">
+            Update ticket
+          </button>
+        </div>
+      </Form>
+    )}
+  </Formik>
+)
+
+export { CustomFieldsForm }

package/src/components/orderDetailsContainer/TicketHolderCustomFields.tsx

@@ -0,0 +1,100 @@
+import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
+import React, { useMemo, useState } from 'react'
+import SVG from 'react-inlinesvg'
+
+import EditSvg from '../../assets/images/edit.svg'
+import { CustomFieldsForm } from './CustomFieldsForm'
+import { CustomFieldTypes } from './index'
+import { ITicketTypes } from './ticketsTable'
+import {
+  createCustomFieldsUpdateBody,
+  isFieldUpdatable,
+  renderCustomFieldValue,
+} from './utils'
+
+interface HolderCustomFieldsProps {
+  ticket: ITicketTypes;
+  holderCustomFields: CustomFieldTypes[];
+  handleTicketHoldersUpdate: (values: Record<string, any>, ticketHash: string) => void;
+}
+
+const TicketHolderCustomFields = ({
+  ticket,
+  holderCustomFields,
+  handleTicketHoldersUpdate = _identity,
+}: HolderCustomFieldsProps) => {
+  const [showHolderCustomFieldsSection, setShowHolderCustomFieldsSection] =
+    useState(false)
+
+  const [allowedHolderCustomFields, notAllowedHolderCustomFields] = useMemo(() => {
+    const allowedFields: CustomFieldTypes[] = []
+    const notAllowedFields: CustomFieldTypes[] = []
+
+    holderCustomFields.forEach((field: CustomFieldTypes) => {
+      if (isFieldUpdatable(field)) {
+        allowedFields.push(field)
+      } else {
+        notAllowedFields.push(field)
+      }
+    })
+    return [allowedFields, notAllowedFields]
+  }, [holderCustomFields])
+
+  const holderEditableFieldsFormInitialValues = useMemo(
+    () => getHolderCustomFieldsInitialValues(holderCustomFields),
+    [holderCustomFields]
+  )
+
+  const handleFormClose = () => {
+    setShowHolderCustomFieldsSection(false)
+  }
+
+  const handleForSubmit = (values: Record<string, any>) => {
+    // Collect all updatable and non updatable values for bulk update
+    const fullUpdatableValues = createCustomFieldsUpdateBody(
+      values,
+      notAllowedHolderCustomFields
+    )
+    setShowHolderCustomFieldsSection(false)
+    handleTicketHoldersUpdate(fullUpdatableValues, ticket.hash)
+  }
+
+  function getHolderCustomFieldsInitialValues(fields: Array<CustomFieldTypes>) {
+    const initialValues: { [key: string]: string | boolean | string[] } = {}
+
+    for (const field of fields) {
+      if (isFieldUpdatable(field)) {
+        initialValues[field.name] =
+          field.type === 'checkbox' ? Boolean(field.value) : field.value || ''
+      }
+    }
+    return initialValues
+  }
+
+  return (
+    <>
+      <div className="holder-custom-fields">
+        {!_isEmpty(allowedHolderCustomFields) && <SVG src={EditSvg} onClick={() => setShowHolderCustomFieldsSection(true)} />}
+        {holderCustomFields.map((customField: CustomFieldTypes) => (
+          <div className="info-item" key={customField.id}>
+            <b>{customField.label} :</b> {renderCustomFieldValue(customField)}
+          </div>
+        ))}
+      </div>
+      {showHolderCustomFieldsSection && (
+        <div className="custom-fields-block show">
+          <p className="editable-ticket-id">Edit ticket {ticket.hash}</p>
+          <CustomFieldsForm
+            initialValues={holderEditableFieldsFormInitialValues}
+            fields={allowedHolderCustomFields}
+            handleFormSubmit={handleForSubmit}
+            handleFormClose={handleFormClose}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export { TicketHolderCustomFields }

package/src/components/orderDetailsContainer/index.tsx

@@ -11,15 +11,26 @@ import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
 import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import moment from 'moment-timezone'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import SVG from 'react-inlinesvg'
 
-import { getOrderDetails, removeFromResale, resaleTicket } from '../../api'
+import {
+  getOrderDetails,
+  removeFromResale,
+  resaleTicket,
+  updateOrderCustomFields,
+  updateTicketHoldersCustomFields,
+} from '../../api'
+import EditSvg from '../../assets/images/edit.svg'
 import { isBrowser } from '../../utils'
 import ConfirmModal from '../confirmModal'
 import { InitialValuesTypes, TicketResaleModal } from '../ticketResaleModal'
+import { CustomFieldsForm } from './CustomFieldsForm'
 import TicketsTable, { IActionColumns, ITicketTypes } from './ticketsTable'
+import { isFieldUpdatable, renderCustomFieldValue } from './utils'
 
 interface TicketTypes {
   currency: string;
@@ -43,6 +54,10 @@ interface OrderDetailsTypes {
   onRemoveFromResaleError: (err: any) => void;
   onResaleTicketSuccess: () => void;
   onResaleTicketError: (err: any) => void;
+  onUpdateOrderCustomFieldsSuccess: (val: any) => void;
+  onUpdateOrderCustomFieldsError: (err: any) => void;
+  onUpdateTicketHolderCustomFieldsSuccess: (val: any) => void;
+  onUpdateTicketHolderCustomFieldsError: (err: any) => void;
   personalLinkIcon?: string;
   displayColumnNameInRow?: boolean;
   canSellTicket?: boolean;
@@ -58,6 +73,33 @@ interface OrderDetailsTypes {
   ticketsTitle?: string;
 }
 
+export interface CustomFieldOption {
+  id: string;
+  name: string;
+  value: string;
+  order: string;
+}
+
+export interface CustomFieldTypes {
+  description: string;
+  enabled: string;
+  id: string;
+  label: string;
+  name: string;
+  orderId: string;
+  required: boolean;
+  settings: {
+    showOnMyTickets: boolean;
+    allowUpdate: boolean;
+    className: string;
+  };
+  type: string;
+  value: string | Array<string>;
+
+  ticketHash?: string;
+  options?: CustomFieldOption[];
+}
+
 const getTotal = (data: any) => {
   if (data?.total && data?.tickets && data.tickets[0]?.currency)
     return data.tickets[0].currency + data.total
@@ -74,6 +116,10 @@ export const OrderDetailsContainer = ({
   onRemoveFromResaleError = _identity,
   onResaleTicketSuccess = _identity,
   onResaleTicketError = _identity,
+  onUpdateOrderCustomFieldsSuccess = _identity,
+  onUpdateOrderCustomFieldsError = _identity,
+  onUpdateTicketHolderCustomFieldsSuccess = _identity,
+  onUpdateTicketHolderCustomFieldsError = _identity,
   onReturnButtonClick,
   personalLinkIcon = '',
   displayColumnNameInRow = false,
@@ -91,12 +137,54 @@ export const OrderDetailsContainer = ({
   const [showResaleModal, setShowResaleModal] = useState(false)
   const [showRemoveResaleModal, setShowRemoveResaleModal] = useState(false)
   const [activeTicket, setActiveTicket] = useState<any>(null)
+  const [showOrderCustomFieldsSection, setShowOrderCustomFieldsSection] = useState(false)
+
+  const isTable = _get(data, 'tickets[0].is_table', false)
+  const columnsProps = isTable
+    ? [
+        { label: 'Items' },
+        { label: 'Price' },
+        { label: 'Guests count' },
+        { label: 'Deposit paid' },
+        { label: 'Remaining' },
+      ]
+    : columns
+  const ticketHoldersCustomFields = _get(data, 'ticket_data_capture', [])
+
+  const orderCustomFields = _get(data, 'data_capture', [])
+  const [orderUpdatableCustomFields, orderNotUpdatableCustomFields] = useMemo(() => {
+    const allowedFields: CustomFieldTypes[] = []
+    const notAllowedFields: CustomFieldTypes[] = []
+
+    orderCustomFields.forEach((field: CustomFieldTypes) => {
+      if (isFieldUpdatable(field)) {
+        allowedFields.push(field)
+      } else {
+        notAllowedFields.push(field)
+      }
+    })
+    return [allowedFields, notAllowedFields]
+  }, [orderCustomFields])
+  const orderEditableFieldsFormInitialValues = useMemo(() => {
+    const initialValues = orderUpdatableCustomFields.map((field: CustomFieldTypes) => [
+      field.name,
+      field.type === 'checkbox' ? Boolean(field.value) : field.value || '',
+    ])
+    return Object.fromEntries(initialValues)
+  }, [orderUpdatableCustomFields])
+
   let orderId = String(pOrderId) || ''
   if (isBrowser && !pOrderId) {
     const params: URLSearchParams = new URL(`${window.location}`).searchParams
     orderId = params.get('o') || ''
   }
 
+  let orderSummery = `ID ${data.id}, placed`
+  if (data.date && data.timezone) {
+    const date = moment.tz(data.date, data.timezone).format('dddd, DD MMMM YYYY')
+    orderSummery += ` ${date}`
+  }
+
   useEffect(() => {
     (async () => {
       try {
@@ -213,25 +301,65 @@ export const OrderDetailsContainer = ({
     }
   }
 
-  let orderSummery = `ID ${data.id}, placed`
-  if (data.date && data.timezone) {
-    const date = moment.tz(data.date, data.timezone).format('dddd, DD MMMM YYYY')
-    orderSummery += ` ${date}`
+  const handleOrderCustomFieldsUpdate = async (values: Record<string, any>) => {
+    setShowOrderCustomFieldsSection(false)
+    try {
+      // Collect all updatable and non updatable values for bulk update
+      const fullUpdatableValues = orderNotUpdatableCustomFields.reduce(
+        (acc, customField) => {
+          acc[customField.name] = customField.value
+          return acc
+        },
+        { ...values }
+      )
+      const eventId = _get(data, 'event_id')
+      const response = await updateOrderCustomFields(
+        eventId,
+        orderId,
+        fullUpdatableValues
+      )
+      const updatedCustomFields = _get(response, 'data.data.attributes', [])
+
+      setData((prevState: Record<string, any>) => ({
+        ...prevState,
+        data_capture: updatedCustomFields,
+      }))
+      onUpdateOrderCustomFieldsSuccess(response)
+    } catch (error) {
+      onUpdateOrderCustomFieldsError(error)
+    }
+  }
+
+  const handleTicketHoldersUpdate = async (
+    values: Record<string, any>,
+    ticketHash: string
+  ) => {
+    try {
+      const eventId = _get(data, 'event_id')
+      const response = await updateTicketHoldersCustomFields(eventId, values, ticketHash)
+      const updatedFields = _get(response, 'data.data.attributes', [])
+      const notUpdatedFields = ticketHoldersCustomFields.filter(
+        (field: CustomFieldTypes) => field.ticketHash !== ticketHash
+      )
+
+      setData((prevState: Record<string, any>) => ({
+        ...prevState,
+        ticket_data_capture: [...updatedFields, ...notUpdatedFields],
+      }))
+      onUpdateTicketHolderCustomFieldsSuccess(response)
+    } catch (error) {
+      onUpdateTicketHolderCustomFieldsError(error)
+    }
   }
-  const isTable = _get(data, 'tickets[0].is_table', false)
-  const columnsProps = isTable
-    ? [
-        { label: 'Items' },
-        { label: 'Price' },
-        { label: 'Guests count' },
-        { label: 'Deposit paid' },
-        { label: 'Remaining' },
-      ]
-    : columns
 
   return (
     <div className="order-details">
-      <h1 className="layout-title">Order Details</h1>
+      <div className="layout-block">
+        <h1 className="layout-title">Order Details</h1>
+        {!_isEmpty(orderUpdatableCustomFields) && (
+          <SVG src={EditSvg} onClick={() => setShowOrderCustomFieldsSection(true)} />
+        )}
+      </div>
       <div className="order-summary-box">
         <div className="summary-block">
           <div className="summary-item">
@@ -244,7 +372,7 @@ export const OrderDetailsContainer = ({
                 type="button"
                 className="return-button"
                 onClick={() => {
-                  if (typeof window !== 'undefined') {
+                  if (isBrowser) {
                     window.location.assign(ordersPath ?? '/orders')
                   }
                 }}
@@ -254,6 +382,32 @@ export const OrderDetailsContainer = ({
             </div>
           </div>
         </div>
+        {!_isEmpty(orderCustomFields) && (
+          <>
+            <div className="custom-field-value-container">
+              {orderCustomFields.map((customField: CustomFieldTypes) => (
+                <div className="info-item" key={customField.id}>
+                  <b>{customField.label} :</b> {renderCustomFieldValue(customField)}
+                </div>
+              ))}
+            </div>
+            {!_isEmpty(orderUpdatableCustomFields) && (
+              <div
+                className={`custom-fields-block ${
+                  showOrderCustomFieldsSection ? 'show' : ''
+                }`}
+              >
+                <p className="title">Aditional Information Request</p>
+                <CustomFieldsForm
+                  initialValues={orderEditableFieldsFormInitialValues}
+                  fields={orderUpdatableCustomFields}
+                  handleFormSubmit={handleOrderCustomFieldsUpdate}
+                  handleFormClose={() => setShowOrderCustomFieldsSection(false)}
+                />
+              </div>
+            )}
+          </>
+        )}
         {!data?.disable_referral && (
           <>
             {referralTitle && (
@@ -352,6 +506,8 @@ export const OrderDetailsContainer = ({
         handleRemoveFromResale={handleRemoveFromResale}
         displayColumnNameInRow={displayColumnNameInRow}
         canSellTicket={canSellTicket}
+        ticketHoldersCustomFields={ticketHoldersCustomFields}
+        handleTicketHoldersUpdate={handleTicketHoldersUpdate}
       />
       <div className="return-button-container">
         <button
@@ -360,7 +516,7 @@ export const OrderDetailsContainer = ({
           onClick={() => {
             if (onReturnButtonClick) {
               onReturnButtonClick(data)
-            } else if (typeof window !== 'undefined') {
+            } else if (isBrowser) {
               window.location.assign(ordersPath ?? '/orders')
             }
           }}
@@ -368,7 +524,6 @@ export const OrderDetailsContainer = ({
           Return to Order History
         </button>
       </div>
-
       {showResaleModal && (
         <TicketResaleModal
           ticket={activeTicket}

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -7,17 +7,21 @@ import TableContainer from '@mui/material/TableContainer'
 import TableHead from '@mui/material/TableHead'
 import TableRow from '@mui/material/TableRow'
 import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
 import _map from 'lodash/map'
 import React, { Fragment, useState } from 'react'
 
 import { downloadPDF } from '../../utils'
 import SnackbarAlert from '../common/SnackbarAlert'
+import { CustomFieldTypes } from './index'
+import { TicketHolderCustomFields } from './TicketHolderCustomFields'
 
 interface IAddOnTypes {
   name: string;
   groupName: string;
   status: string;
 }
+
 export interface ITicketTypes {
   add_ons?: IAddOnTypes[];
   hash: string;
@@ -51,10 +55,12 @@ interface TicketsTableTypes {
   }>;
   handleSellTicket: (ticket: ITicketTypes) => void;
   handleRemoveFromResale: (ticket: ITicketTypes) => void;
+  handleTicketHoldersUpdate: (values: Record<string, any>, ticketHash: string) => void;
 
   icon?: string;
   displayColumnNameInRow?: boolean;
   ticketsTitle?: string;
+  ticketHoldersCustomFields?: Array<CustomFieldTypes>;
 }
 
 type PdfDownload = {
@@ -65,12 +71,14 @@ type PdfDownload = {
 const TicketsTable = ({
   tickets = [],
   columns = [],
-  handleSellTicket = _identity,
-  handleRemoveFromResale = _identity,
   icon = '',
   displayColumnNameInRow = false,
   canSellTicket = true,
   ticketsTitle = 'Your Tickets',
+  ticketHoldersCustomFields = [],
+  handleSellTicket = _identity,
+  handleRemoveFromResale = _identity,
+  handleTicketHoldersUpdate = _identity,
 }: TicketsTableTypes) => {
   const [pdfError, setPdfError] = useState<string | null>(null)
   const [pdfDownload, setPdfDownload] = useState<PdfDownload>({
@@ -113,11 +121,7 @@ const TicketsTable = ({
                 }
               }}
             >
-              {ticketIsDownloading ? (
-                <CircularProgress size="22px" />
-              ) : (
-                'Download'
-              )}
+              {ticketIsDownloading ? <CircularProgress size="22px" /> : 'Download'}
             </span>
           </TableCell>
         )
@@ -185,35 +189,53 @@ const TicketsTable = ({
             </TableHead>
           )}
           <TableBody>
-            {tickets.map((ticket: ITicketTypes, index: number) => (
-              <Fragment key={index}>
-                <TableRow>{getRow(ticket)}</TableRow>
-                {!!ticket.add_ons?.length && (
-                  <TableRow>
-                    <TableCell colSpan={6}>
-                      <Table className="ticket-add-on-table">
-                        <TableHead>
-                          <TableRow>
-                            <TableCell>Add-On</TableCell>
-                            <TableCell>Status</TableCell>
-                          </TableRow>
-                        </TableHead>
-                        <TableBody>
-                          {ticket.add_ons.map(
-                            (add_on: IAddOnTypes, index: number) => (
+            {tickets.map((ticket: ITicketTypes, index: number) => {
+              const holderCustomFields = ticketHoldersCustomFields.filter(
+                (field: CustomFieldTypes) => field?.ticketHash === ticket?.hash
+              )
+
+              return (
+                <Fragment key={index}>
+                  <TableRow>{getRow(ticket)}</TableRow>
+                  {!_isEmpty(holderCustomFields) && (
+                    <TableRow>
+                      <TableCell colSpan={columns.length}>
+                        <TicketHolderCustomFields
+                          ticket={ticket}
+                          holderCustomFields={holderCustomFields}
+                          handleTicketHoldersUpdate={handleTicketHoldersUpdate}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  )}
+                  {!!ticket.add_ons?.length && (
+                    <TableRow>
+                      <TableCell colSpan={6}>
+                        <Table className="ticket-add-on-table">
+                          <TableHead>
+                            <TableRow>
+                              <TableCell>Add-On</TableCell>
+                              <TableCell>Status</TableCell>
+                            </TableRow>
+                          </TableHead>
+                          <TableBody>
+                            {ticket.add_ons.map((add_on: IAddOnTypes, index: number) => (
                               <TableRow key={index}>
-                                <TableCell>{add_on.groupName && `${add_on.groupName}: `} {add_on.name}</TableCell>
+                                <TableCell>
+                                  {add_on.groupName && `${add_on.groupName}: `}{' '}
+                                  {add_on.name}
+                                </TableCell>
                                 <TableCell>{add_on.status}</TableCell>
                               </TableRow>
-                            )
-                          )}
-                        </TableBody>
-                      </Table>
-                    </TableCell>
-                  </TableRow>
-                )}
-              </Fragment>
-            ))}
+                            ))}
+                          </TableBody>
+                        </Table>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </Fragment>
+              )
+            })}
           </TableBody>
         </Table>
       </TableContainer>

package/src/components/orderDetailsContainer/utils/index.tsx

@@ -0,0 +1,55 @@
+import _isArray from 'lodash/isArray'
+import _isEmpty from 'lodash/isEmpty'
+
+import { CustomFieldOption, CustomFieldTypes } from '../index'
+
+const getLabelForValue = (options: CustomFieldOption[], value: string | string[]): string => {
+  const getLabel = (singleValue: string) => {
+    const option = options.find(option => option.value === singleValue)
+    return option ? option.name : ''
+  }
+
+  if (_isArray(value)) {
+    const labels = value.map(getLabel)
+    return labels.join(', ')
+  }
+
+  return getLabel(value as string)
+}
+
+export const renderCustomFieldValue = (customField: CustomFieldTypes) => {
+  if (customField.type === 'checkbox') {
+    return customField.value ? 'Checked' : 'Unchecked'
+  }
+
+  if (_isEmpty(customField.value)) {
+    return 'N/A'
+  }
+
+  if (customField.type === 'select' || customField.type === 'select_multi' || customField.type === 'radio') {
+    return getLabelForValue(customField.options as CustomFieldOption[], customField.value)
+  }
+
+  return customField.value
+}
+
+export const isFieldUpdatable = (field: CustomFieldTypes): boolean => {
+  if (!field?.settings?.allowUpdate || (field?.type === 'checkbox' && field?.required)) {
+    return false
+  }
+  return true
+}
+
+export const createCustomFieldsUpdateBody = (
+  updatedValues: Record<string, any>,
+  notUpdatableCustomFieldsValues: Array<CustomFieldTypes> = []
+) =>
+  notUpdatableCustomFieldsValues.reduce(
+    (acc, customField) => {
+      if (!isFieldUpdatable(customField)) {
+        acc[customField.name] = customField.value
+      }
+      return acc
+    },
+    { ...updatedValues }
+  )