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

package/src/components/orderDetailsContainer/index.tsx

@@ -1,12 +1,16 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import './style.css'
 
+import { ThemeOptions } from '@mui/material'
 import Paper from '@mui/material/Paper'
+import { createTheme, ThemeProvider } from '@mui/material/styles'
 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 { CSSProperties } from '@mui/styles'
 import _find from 'lodash/find'
 import _get from 'lodash/get'
 import _has from 'lodash/has'
@@ -61,6 +65,10 @@ interface OrderDetailsTypes {
   personalLinkIcon?: string;
   displayColumnNameInRow?: boolean;
   canSellTicket?: boolean;
+  themeOptions?: ThemeOptions & {
+    input?: CSSProperties;
+    checkbox?: CSSProperties;
+  };
   ticketsTableColumns?: Array<{
     id?: string | number;
     key: keyof ITicketTypes & keyof IActionColumns;
@@ -130,6 +138,7 @@ export const OrderDetailsContainer = ({
   referralTitle = '',
   itemsTitle = '',
   ticketsTitle = 'Your Tickets',
+  themeOptions,
 }: OrderDetailsTypes) => {
   const [data, setData] = useState<any>({})
   const [removeFromResaleLoading, setRemoveFromResaleLoading] = useState(false)
@@ -352,194 +361,200 @@ export const OrderDetailsContainer = ({
     }
   }
 
+  const theme = createTheme(themeOptions ?? {})
+
   return (
-    <div className="order-details">
-      <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">
-            <h6 className="sub-title">Order Summary</h6>
-            <p className="order-summary-date">{orderSummery}</p>
-          </div>
-          <div className="summary-item">
-            <div className="return-button-container">
-              <button
-                type="button"
-                className="return-button"
-                onClick={() => {
-                  if (isBrowser) {
-                    window.location.assign(ordersPath ?? '/orders')
-                  }
-                }}
-              >
-                Back to Orders
-              </button>
-            </div>
-          </div>
+    <ThemeProvider theme={theme}>
+      <div className="order-details">
+        <div className="layout-block">
+          <h1 className="layout-title">Order Details</h1>
+          {!_isEmpty(orderUpdatableCustomFields) && (
+            <SVG src={EditSvg} onClick={() => setShowOrderCustomFieldsSection(true)} />
+          )}
         </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 className="order-summary-box">
+          <div className="summary-block">
+            <div className="summary-item">
+              <h6 className="sub-title">Order Summary</h6>
+              <p className="order-summary-date">{orderSummery}</p>
             </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 className="summary-item">
+              <div className="return-button-container">
+                <button
+                  type="button"
+                  className="return-button"
+                  onClick={() => {
+                    if (isBrowser) {
+                      window.location.assign(ordersPath ?? '/orders')
+                    }
+                  }}
+                >
+                  Back to Orders
+                </button>
               </div>
-            )}
-          </>
-        )}
-        {!data?.disable_referral && (
-          <>
-            {referralTitle && (
-              <h4 className="referral-title sub-title">{referralTitle}</h4>
-            )}
-            <div className="personal-link">
-              <div className="link-item">
-                <span>Personal Share Link: </span>
-                <a href={data?.personal_share_link} target="_blank" rel="noreferrer">
-                  {Boolean(personalLinkIcon) && <img src={personalLinkIcon} alt="Icon" />}
-                  {data?.personal_share_link}
-                </a>
+            </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>
-              {data?.sales_referred ? (
+              {!_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 && (
+                <h4 className="referral-title sub-title">{referralTitle}</h4>
+              )}
+              <div className="personal-link">
                 <div className="link-item">
-                  <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                  <span>Personal Share Link: </span>
+                  <a href={data?.personal_share_link} target="_blank" rel="noreferrer">
+                    {Boolean(personalLinkIcon) && (
+                      <img src={personalLinkIcon} alt="Icon" />
+                    )}
+                    {data?.personal_share_link}
+                  </a>
                 </div>
-              ) : null}
-            </div>
-          </>
-        )}
-        {itemsTitle && <h4 className="items-title sub-title">{itemsTitle}</h4>}
-        <TableContainer component={Paper}>
-          <Table className="tt-type" aria-label="collapsible table">
-            <TableHead>
-              <TableRow>
-                {_map(columnsProps, item => (
-                  <TableCell>{item.label || ''}</TableCell>
-                ))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {data?.items?.ticket_types?.map((ticket: TicketTypes, index: number) =>
-                data?.tickets && !data?.tickets[0].is_table ? (
+                {data?.sales_referred ? (
+                  <div className="link-item">
+                    <p className="total-referrer">{`So far, you’ve referred ${data.sales_referred} tickets`}</p>
+                  </div>
+                ) : null}
+              </div>
+            </>
+          )}
+          {itemsTitle && <h4 className="items-title sub-title">{itemsTitle}</h4>}
+          <TableContainer component={Paper}>
+            <Table className="tt-type" aria-label="collapsible table">
+              <TableHead>
+                <TableRow>
+                  {_map(columnsProps, item => (
+                    <TableCell>{item.label || ''}</TableCell>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {data?.items?.ticket_types?.map((ticket: TicketTypes, index: number) =>
+                  data?.tickets && !data?.tickets[0].is_table ? (
+                    <TableRow key={index}>
+                      <TableCell>
+                        <b>Ticket Type:</b> {ticket.name}
+                      </TableCell>
+                      <TableCell>{ticket.currency + ticket.price}</TableCell>
+                      <TableCell>{ticket.quantity}</TableCell>
+                      <TableCell>{ticket.currency + ticket.total}</TableCell>
+                    </TableRow>
+                  ) : (
+                    <TableRow key={index}>
+                      <TableCell>
+                        <b>Ticket Type:</b> {ticket.name}
+                      </TableCell>
+                      <TableCell>{ticket.currency + ticket.price}</TableCell>
+                      <TableCell>{ticket.guests_count}</TableCell>
+                      <TableCell>{ticket.deposit_paid}</TableCell>
+                      <TableCell>{ticket.remaining}</TableCell>
+                    </TableRow>
+                  )
+                )}
+                {data?.items?.add_ons?.map((ticket: TicketTypes, index: number) => (
                   <TableRow key={index}>
                     <TableCell>
-                      <b>Ticket Type:</b> {ticket.name}
+                      <div>
+                        <b>Add-On</b>
+                        <div>
+                          {ticket.groupName && `${ticket.groupName}: `} {ticket.name}
+                        </div>
+                      </div>
                     </TableCell>
                     <TableCell>{ticket.currency + ticket.price}</TableCell>
                     <TableCell>{ticket.quantity}</TableCell>
                     <TableCell>{ticket.currency + ticket.total}</TableCell>
                   </TableRow>
-                ) : (
-                  <TableRow key={index}>
-                    <TableCell>
-                      <b>Ticket Type:</b> {ticket.name}
-                    </TableCell>
-                    <TableCell>{ticket.currency + ticket.price}</TableCell>
-                    <TableCell>{ticket.guests_count}</TableCell>
-                    <TableCell>{ticket.deposit_paid}</TableCell>
-                    <TableCell>{ticket.remaining}</TableCell>
-                  </TableRow>
-                )
-              )}
-              {data?.items?.add_ons?.map((ticket: TicketTypes, index: number) => (
-                <TableRow key={index}>
-                  <TableCell>
-                    <div>
-                      <b>Add-On</b>
-                      <div>
-                        {ticket.groupName && `${ticket.groupName}: `} {ticket.name}
-                      </div>
-                    </div>
-                  </TableCell>
-                  <TableCell>{ticket.currency + ticket.price}</TableCell>
-                  <TableCell>{ticket.quantity}</TableCell>
-                  <TableCell>{ticket.currency + ticket.total}</TableCell>
+                ))}
+                <TableRow className="total-row">
+                  <TableCell />
+                  <TableCell />
+                  <TableCell>Total</TableCell>
+                  <TableCell>{getTotal(data)}</TableCell>
                 </TableRow>
-              ))}
-              <TableRow className="total-row">
-                <TableCell />
-                <TableCell />
-                <TableCell>Total</TableCell>
-                <TableCell>{getTotal(data)}</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </div>
-      <TicketsTable
-        ticketsTitle={ticketsTitle}
-        tickets={data.tickets}
-        columns={
-          ticketsTableColumns?.length
-            ? ticketsTableColumns
-            : [
-                { key: 'hash' as never, label: 'Ticket ID' },
-                { key: 'ticket_type' as never, label: 'Ticket Type' },
-                { key: 'holder_name' as never, label: 'Ticket Holder' },
-                { key: 'status' as never, label: 'Status' },
-                { key: 'download' as never, label: '' },
-                { key: 'sell_ticket' as never, label: '' },
-              ]
-        }
-        handleSellTicket={handleSellTicket}
-        handleRemoveFromResale={handleRemoveFromResale}
-        displayColumnNameInRow={displayColumnNameInRow}
-        canSellTicket={canSellTicket}
-        ticketHoldersCustomFields={ticketHoldersCustomFields}
-        handleTicketHoldersUpdate={handleTicketHoldersUpdate}
-      />
-      <div className="return-button-container">
-        <button
-          type="button"
-          className="return-button"
-          onClick={() => {
-            if (onReturnButtonClick) {
-              onReturnButtonClick(data)
-            } else if (isBrowser) {
-              window.location.assign(ordersPath ?? '/orders')
-            }
-          }}
-        >
-          Return to Order History
-        </button>
-      </div>
-      {showResaleModal && (
-        <TicketResaleModal
-          ticket={activeTicket}
-          onClose={handleOnClose}
-          onSubmit={handleOnSubmit}
-          loading={resaleTicketLoading}
-        />
-      )}
-      {showRemoveResaleModal && (
-        <ConfirmModal
-          message="Are you sure you want to withdraw your ticket from resale?"
-          onClose={onCloseRemoveResale}
-          onConfirm={onConfirmRemoveResale}
-          loading={removeFromResaleLoading}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </div>
+        <TicketsTable
+          ticketsTitle={ticketsTitle}
+          tickets={data.tickets}
+          columns={
+            ticketsTableColumns?.length
+              ? ticketsTableColumns
+              : [
+                  { key: 'hash' as never, label: 'Ticket ID' },
+                  { key: 'ticket_type' as never, label: 'Ticket Type' },
+                  { key: 'holder_name' as never, label: 'Ticket Holder' },
+                  { key: 'status' as never, label: 'Status' },
+                  { key: 'download' as never, label: '' },
+                  { key: 'sell_ticket' as never, label: '' },
+                ]
+          }
+          handleSellTicket={handleSellTicket}
+          handleRemoveFromResale={handleRemoveFromResale}
+          displayColumnNameInRow={displayColumnNameInRow}
+          canSellTicket={canSellTicket}
+          ticketHoldersCustomFields={ticketHoldersCustomFields}
+          handleTicketHoldersUpdate={handleTicketHoldersUpdate}
         />
-      )}
-    </div>
+        <div className="return-button-container">
+          <button
+            type="button"
+            className="return-button"
+            onClick={() => {
+              if (onReturnButtonClick) {
+                onReturnButtonClick(data)
+              } else if (isBrowser) {
+                window.location.assign(ordersPath ?? '/orders')
+              }
+            }}
+          >
+            Return to Order History
+          </button>
+        </div>
+        {showResaleModal && (
+          <TicketResaleModal
+            ticket={activeTicket}
+            onClose={handleOnClose}
+            onSubmit={handleOnSubmit}
+            loading={resaleTicketLoading}
+          />
+        )}
+        {showRemoveResaleModal && (
+          <ConfirmModal
+            message="Are you sure you want to withdraw your ticket from resale?"
+            onClose={onCloseRemoveResale}
+            onConfirm={onConfirmRemoveResale}
+            loading={removeFromResaleLoading}
+          />
+        )}
+      </div>
+    </ThemeProvider>
   )
 }

package/src/components/paymentContainer/OrderDetails.tsx

@@ -0,0 +1,170 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import _identity from 'lodash/identity'
+import _isEmpty from 'lodash/isEmpty'
+import _map from 'lodash/map'
+import React, { useState } from 'react'
+
+import { FEES_STYLES } from '../../constants'
+import { createFixedFloatNormalizer, currencyNormalizerCreator } from '../../normalizers'
+import { IOrderData } from '../../types'
+import { CONFIGS } from '../../utils'
+
+interface OrderDetailsProps {
+  orderData: any;
+  paymentFieldsData: any[];
+  customMobileText?: string;
+}
+
+export const OrderDetails = ({
+  orderData = {},
+  paymentFieldsData = [],
+  customMobileText = 'Your order total',
+}: 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)
+  }
+
+  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>
+            {!isExpanded && (
+              <div className="mobile-order-info-container order-info-container-right">
+                <div className="mobile-order-total">{totalValue}</div>
+              </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 => (
+                        <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
+                                )}
+                            </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>
+                          )}
+                        </div>
+                      ))}
+                </div>
+              </div>
+            )
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/components/paymentContainer/handlePayment.ts

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { AxiosError } from 'axios'
+import _get from 'lodash/get'
+
+import { createPaymentPlan, handleFreeSuccess, handlePaymentSuccess } from '../../api'
+
+interface Options {
+  reviewData: any;
+  isFreeTickets: boolean;
+  paymentPlanIsAvailable: boolean;
+  showPaymentPlanSection: boolean;
+  handlePayment: any;
+  setPaymentIsLoading: any;
+  setError: any;
+  orderData: any;
+  eventId: any;
+  isBrowser: boolean;
+  onPaymentError: any;
+}
+
+export const handlePaymentMiddleWare = async (
+  error: any,
+  data: object,
+  {
+    reviewData,
+    isFreeTickets,
+    paymentPlanIsAvailable,
+    showPaymentPlanSection,
+    handlePayment,
+    setPaymentIsLoading,
+    setError,
+    orderData,
+    eventId,
+    isBrowser,
+    onPaymentError,
+  }: Options
+) => {
+  try {
+    if (error) {
+      throw error
+    }
+    const {
+      order_details: { order_hash },
+    } = reviewData
+
+    let paymentSuccessResponse
+
+    if (isFreeTickets) {
+      paymentSuccessResponse = await handleFreeSuccess(order_hash)
+    } else if (paymentPlanIsAvailable && showPaymentPlanSection) {
+      paymentSuccessResponse = await createPaymentPlan(
+        order_hash,
+        _get(data, 'paymentMethodId', '')
+      )
+    } else {
+      paymentSuccessResponse = await handlePaymentSuccess(order_hash)
+    }
+
+    if (paymentSuccessResponse.status === 200) {
+      handlePayment(paymentSuccessResponse)
+      setPaymentIsLoading(false)
+
+      // clear seat-map related data from localStorage
+      localStorage.removeItem('reservationData')
+      localStorage.removeItem(`reservationStart-${eventId}`)
+      localStorage.removeItem('ownReservations')
+      localStorage.removeItem('tierId')
+
+      if (isBrowser) {
+        (window as any)?.dataLayer?.push({
+          event: 'Purchase',
+          orderValue: orderData.total,
+          orderCurrency: orderData.currency,
+          orderId: orderData.id,
+        })
+      }
+    }
+  } catch (e) {
+    setError(_get(e, 'response.data.message', null))
+    setPaymentIsLoading(false)
+    onPaymentError(
+      ((e as Record<string, unknown>).response as AxiosError) || e,
+      reviewData.event_details.slug
+    )
+  }
+}