tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/orderDetailsContainer/ticketsTable.tsx

@@ -1,246 +0,0 @@
-import CircularProgress from '@mui/material/CircularProgress'
-import Paper from '@mui/material/Paper'
-import Table from '@mui/material/Table'
-import TableBody from '@mui/material/TableBody'
-import TableCell from '@mui/material/TableCell'
-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;
-  ticket_type: string;
-  holder_name: string;
-  status: string;
-  pdf_link: string;
-  is_sellable: boolean;
-  is_on_sale?: boolean;
-  event_name: string;
-  currency: string;
-  ticket_type_hash: string;
-  ticket_type_is_active?: boolean;
-  canSellTicket?: boolean;
-  retain_amount_on_sale: number | string;
-  ticketsTitle: string;
-}
-
-export interface IActionColumns {
-  download?: boolean;
-  sell_ticket?: boolean;
-}
-
-interface TicketsTableTypes {
-  canSellTicket?: boolean;
-  tickets: ITicketTypes[];
-  columns: Array<{
-    id?: string | number;
-    key: keyof ITicketTypes & keyof IActionColumns;
-    label: string | number | null | undefined;
-  }>;
-  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 = {
-  hash: string;
-  loading: boolean;
-}
-
-const TicketsTable = ({
-  tickets = [],
-  columns = [],
-  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>({
-    hash: '',
-    loading: false,
-  })
-
-  const getRow = (ticket: ITicketTypes) =>
-    _map(columns, (column, columnIndex) => {
-      if (column.key === 'download') {
-        const ticketIsDownloading =
-          pdfDownload.loading && pdfDownload.hash === ticket.hash
-
-        if (!ticket.pdf_link || ticket.status === 'Sold' || ticket.is_on_sale)
-          return <TableCell key={columnIndex}>{null}</TableCell>
-
-        return (
-          <TableCell key={columnIndex}>
-            {Boolean(icon) && <img src={icon} alt="nodata" />}
-            <span
-              aria-hidden={true}
-              className="action-button"
-              onClick={async () => {
-                if (ticketIsDownloading) {
-                  return
-                }
-
-                setPdfDownload({ hash: ticket.hash, loading: true })
-                try {
-                  const pdfDownloadError = await downloadPDF(ticket.pdf_link)
-                  if (pdfDownloadError) {
-                    setPdfError(pdfDownloadError?.message)
-                  }
-                } catch (err) {
-                  if (err && typeof err === 'string') {
-                    setPdfError(err)
-                  }
-                } finally {
-                  setPdfDownload({ hash: '', loading: false })
-                }
-              }}
-            >
-              {ticketIsDownloading ? <CircularProgress size="22px" /> : 'Download'}
-            </span>
-          </TableCell>
-        )
-      }
-
-      if (column.key === 'sell_ticket') {
-        return (
-          <TableCell key={columnIndex}>
-            {ticket.is_sellable && canSellTicket && (
-              <span
-                aria-hidden={true}
-                className="action-button"
-                onClick={() => handleSellTicket(ticket)}
-              >
-                Sell Ticket
-              </span>
-            )}
-            {ticket.is_on_sale && (
-              <span
-                aria-hidden={true}
-                className="action-button"
-                onClick={() => handleRemoveFromResale(ticket)}
-              >
-                Remove from Resale
-              </span>
-            )}
-          </TableCell>
-        )
-      }
-
-      return displayColumnNameInRow ? (
-        <TableCell key={columnIndex}>
-          <div className="cell-block">
-            <span>{column.label}</span>
-            <span>{ticket[column.key]}</span>
-          </div>
-        </TableCell>
-      ) : (
-        <TableCell key={columnIndex}>
-          <div className="cell-block">
-            <span>{ticket[column.key]}</span>
-          </div>
-        </TableCell>
-      )
-    })
-
-  return (
-    <div className="tickets-box">
-      <SnackbarAlert
-        type="error"
-        isOpen={!!pdfError}
-        message={pdfError || ''}
-        onClose={() => setPdfError(null)}
-      />
-      <h4 className="sub-title tickets-title">{ticketsTitle}</h4>
-      <TableContainer component={Paper}>
-        <Table aria-label="collapsible table">
-          {displayColumnNameInRow ? null : (
-            <TableHead>
-              <TableRow>
-                {_map(columns, item => (
-                  <TableCell key={item.key}>{item.label || ''}</TableCell>
-                ))}
-              </TableRow>
-            </TableHead>
-          )}
-          <TableBody>
-            {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.status}</TableCell>
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </Fragment>
-              )
-            })}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  )
-}
-
-export default TicketsTable

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

@@ -1,55 +0,0 @@
-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 }
-  )

package/src/components/paymentContainer/OrderDetails.tsx

@@ -1,277 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import _identity from 'lodash/identity'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-import React, { memo, useState } from 'react'
-
-import { FEES_STYLES } from '../../constants'
-import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
-import { IOrderData } from '../../types'
-import { CONFIGS } from '../../utils'
-import Countdown from 'react-countdown'
-import { showZero } from '../../utils/showZero'
-import { IRenderer } from '../timerWidget'
-
-interface OrderDetailsProps {
-  orderData: any;
-  paymentFieldsData: any[];
-  customMobileText?: string;
-  handleCountdownFinish?: () => void;
-}
-
-interface CountdownI {
-  expiresAt: number;
-  handleCountdownFinish: () => void;
-}
-
-const SimpleCountdown = memo(({ expiresAt, handleCountdownFinish }: CountdownI) => {
-  const renderer = ({
-                      minutes,
-                      seconds,
-                      completed,
-                      handleCountdownFinish,
-                    }: IRenderer) => {
-    if (completed) {
-      handleCountdownFinish()
-      return null
-    }
-    return (
-      <span>
-        {showZero(minutes)}:{showZero(seconds)}
-      </span>
-    )
-  }
-
-  return (<div className="mobile-order-timer">
-    {expiresAt && (
-      <Countdown
-        date={Date.now() + expiresAt * 1000}
-        renderer={(props: any) =>
-          renderer({
-            ...props,
-            handleCountdownFinish,
-          })
-        }
-      />
-    )}
-  </div>)
-})
-
-export const OrderDetails = ({
-  orderData = {},
-  paymentFieldsData = [],
-  customMobileText = 'Your order total',
-  handleCountdownFinish = _identity
-}: OrderDetailsProps) => {
-  const { currency, guest_count } = orderData || {}
-  const hasTableTypes = Boolean(Number(guest_count))
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  // Find the total field to display in the mobile view
-  const totalField = paymentFieldsData.find(field => field.id === 'total')
-  const totalValue =
-    totalField && orderData.total
-      ? totalField.normalizer
-        ? totalField.normalizer(orderData.total, currency, orderData)
-        : orderData.total
-      : ''
-
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded)
-  }
-
-  const defaultItemRenderer = (item: any) => {
-    return (<div>
-      <div key={item.id} className="add-on-container">
-        <span>{item.quantity}</span>
-        <span className="add-on-x">{' x '}</span>
-        <span>{item.groupName ? item.groupName + ' - ' : ''}</span>
-        <span>{item.name}</span>
-        <span>{' - '}</span>
-        <span>
-          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.price)),
-              currency,
-            ) + ' (incl. fees)'}
-          {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.cost)),
-              currency,
-            )}
-          {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.price)),
-              currency,
-            )}
-                            </span>
-        <span className="add-on-each">{' each'}</span>
-      </div>
-      {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
-        <p className="fees">
-          {`(${currencyNormalizerCreator(
-            createFixedFloatNormalizer(2)(
-              parseFloat(String(item.price)),
-            ),
-            currency,
-          )} with fees)`}
-        </p>
-      )}
-      {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
-        <p className="fees">
-          {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
-        </p>
-      )}
-    </div>)
-  }
-
-  const defaultTableRenderer = (item: any) => {
-    return (<div>
-      <div key={item.id} className="table-type-container">
-        <span>{item.groupName ? item.groupName + ' - ' : ''}</span>
-        <span>{item.name}</span>
-        <span>{' - '}</span>
-        <span>Guest Count{': '}</span>
-        <span>{item.guestCount}</span>
-      </div>
-      <div>
-        <span>
-          {CONFIGS.FEES_STYLE === FEES_STYLES.TRADITIONAL &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.price)),
-              currency,
-            ) + ' (incl. fees)'}
-          {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.cost)),
-              currency,
-            )}
-          {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN &&
-            currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(parseFloat(item.price)),
-              currency,
-            )}
-        </span>
-        <br/>
-        {CONFIGS.FEES_STYLE === FEES_STYLES.DISPLAY_BOTH && (
-          <p className="fees">
-            {`(${currencyNormalizerCreator(
-              createFixedFloatNormalizer(2)(
-                parseFloat(String(item.price)),
-              ),
-              currency,
-            )} with fees)`}
-          </p>
-        )}
-        {CONFIGS.FEES_STYLE === FEES_STYLES.FINAL_WITH_BREAKDOWN && parseFloat(item.price) - parseFloat(item.cost) > 0 && (
-          <p className="fees">
-            {`(${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.cost)), currency)} + ${currencyNormalizerCreator(createFixedFloatNormalizer(2)(parseFloat(item.price) - parseFloat(item.cost)), currency)} fee)`}
-          </p>
-        )}
-      </div>
-    </div>)
-  }
-
-  return (
-    <div className="payment_page payment_page_single">
-      {/* Mobile view summary */}
-      <div className="mobile-order-summary">
-        <div className="mobile-order-summary-content" onClick={toggleExpand}>
-          <div className="mobile-order-info">
-            <div
-              className={`mobile-order-info-container order-info-container-left ${
-                isExpanded ? 'open' : ''
-              }`}
-            >
-              <div className="mobile-order-text">{customMobileText}</div>
-            </div>
-            <div className="mobile-order-info-container order-info-container-right">
-              {!isExpanded && (
-                <div className="mobile-order-total">{totalValue}</div>
-              )}
-              {orderData?.expires_at && (
-                <SimpleCountdown expiresAt={orderData?.expires_at} handleCountdownFinish={handleCountdownFinish} />
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Original content - will be hidden on mobile when collapsed */}
-      <div
-        className={`order_info_section ${isExpanded ? 'expanded' : 'collapsed'}`}
-        style={{ display: hasTableTypes ? 'block' : 'grid' }}
-      >
-        {_map(paymentFieldsData, field => {
-          const { id, label, className = '', normalizer = _identity } = field
-          const value = orderData[id as keyof IOrderData] || ''
-          let component = null
-
-          if (field.id === 'add_ons' && _isEmpty(value)) {
-            return false
-          }
-
-          if (field.id === 'tableTypes') {
-            const valueArray = value as Array<any>
-
-            component = (
-              <div
-                key={id}
-                className="order_info_block"
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                }}
-              >
-                {_map(valueArray, tableTypeItem => (
-                  <div
-                    key={tableTypeItem.id}
-                    style={{
-                      display: 'grid',
-                      gridTemplateColumns: '33% 33% 33%',
-                      gridColumnGap: '10%',
-                    }}
-                  >
-                    <div className="order_info_block">
-                      <div className="order_info_title">Table Type</div>
-                      <div className={`${className} order_info_text`}>
-                        {tableTypeItem.ticketType}
-                      </div>
-                    </div>
-                    <div className="order_info_block">
-                      <div className="order_info_title">Number of Tables</div>
-                      <div className={`${className} order_info_text`}>
-                        {tableTypeItem.count}
-                      </div>
-                    </div>
-                    <div className="order_info_block">
-                      <div className="order_info_title">Guest Count</div>
-                      <div className={`${className} order_info_text`}>
-                        {tableTypeItem.quantity}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            )
-          }
-
-          return (
-            component || (
-              <div key={id} className={`order_info_block ${className}`}>
-                <div className="order_info_title">{label}</div>
-                <div className={`${className} order_info_text`}>
-                  {typeof value === 'string' || typeof value === 'number'
-                    ? normalizer(value, currency, orderData)
-                    : _map(value, item => (
-                      item.isTable ? defaultTableRenderer(item) : defaultItemRenderer(item)
-                    ))}
-                </div>
-              </div>
-            )
-          )
-        })}
-      </div>
-    </div>
-  )
-}