tf-checkout-react 1.0.99-beta.20 → 1.0.99-beta.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.99-beta.20",
+  "version": "1.0.99-beta.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/api/index.ts

@@ -305,5 +305,9 @@ export const processTicket = (hash: string) => {
   return publicRequest.post(`v1/ticket/${hash}/process/`)
 }
 
+export const declineInvitation = (hash: string) => {
+  return publicRequest.post(`v1/ticket/${hash}/decline`)
+}
+
 export const sendRSVPInfo = (eventId: number, data: any) =>
   publicRequest.post(`v1/event/${eventId}/send-rsvp-info`, data)

package/src/components/billing-info-container/index.tsx

@@ -50,6 +50,7 @@ import { CSSProperties } from '@mui/styles'
 import Backdrop from '@mui/material/Backdrop'
 import TimerWidget from '../timerWidget'
 import SnackbarAlert from '../common/SnackbarAlert'
+import { DatePickerField } from '../common/DatePickerField'
 
 export interface IBillingInfoPage {
   data?: IBillingInfoData[];
@@ -680,6 +681,8 @@ export const BillingInfoContainer = ({
                                               ? SelectField
                                               : element.type === 'phone'
                                               ? FormikPhoneNumberField
+                                              : element.type === 'date'
+                                              ? DatePickerField
                                               : CustomField
                                           }
                                           selectOptions={

package/src/components/billing-info-container/utils.ts

@@ -63,6 +63,7 @@ export const createRegisterFormData = (
     'client_secret',
     CONFIGS.CLIENT_SECRET || 'b89c191eff22fdcf84ac9bfd88d005355a151ec2c83b26b9'
   )
+  bodyFormData.append('check_cart_expiration', 'true')
 
   _forEach(checkoutBody.attributes, (item: any, key: string) => {
     bodyFormData.append(key, item)

package/src/components/common/CustomField.tsx

@@ -3,7 +3,6 @@ import TextField from '@mui/material/TextField'
 import _map from 'lodash/map'
 import _get from 'lodash/get'
 import _includes from 'lodash/includes'
-import moment from 'moment-timezone'
 
 import { FieldInputProps, FormikProps } from 'formik'
 import { useTheme } from '@mui/styles'
@@ -37,6 +36,9 @@ export const CustomField = ({
   selectOptions = [] as ISelectOption[],
   form: { touched, errors, submitCount },
   theme,
+  inputProps: pInputProps = {},
+  InputProps = {},
+  inputRef,
 }: ICustomField & IOtherProps) => {
   const isSelectField = type === 'select'
   const error = _get(errors, field.name)
@@ -46,9 +48,6 @@ export const CustomField = ({
 
   const customTheme: any = useTheme()
   const inputProps: any = { sx: customTheme?.input }
-  if (type === 'date') {
-    inputProps.max  = moment().format('YYYY-MM-DD')
-  }
 
   return (
     <TextField
@@ -66,9 +65,10 @@ export const CustomField = ({
       }}
       InputLabelProps={{
         sx: customTheme?.input,
-        shrink: field.name === 'holderAge' ? true : undefined,
       }}
-      inputProps={inputProps}
+      InputProps={InputProps}
+      inputProps={{ ...inputProps, ...pInputProps }}
+      inputRef={inputRef}
       {...field}
     >
       {isSelectField

package/src/components/common/DatePickerField.tsx

@@ -0,0 +1,96 @@
+import React from 'react'
+import DatePicker from '@mui/lab/DatePicker'
+import AdapterMoment from '@mui/lab/AdapterMoment'
+import LocalizationProvider from '@mui/lab/LocalizationProvider'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { FieldInputProps, FormikProps } from 'formik'
+import _get from 'lodash/get'
+import { CustomField } from './CustomField'
+
+const DATE_SIZE = 32
+const compactStyles = {
+  '& > div': {
+    minWidth: 256,
+  },
+  '& > div > div, & > div > div > div, & .MuiCalendarPicker-root': {
+    width: 256,
+  },
+  '& .MuiTypography-caption': {
+    width: DATE_SIZE,
+    margin: 0,
+  },
+  '& .PrivatePickersSlideTransition-root': {
+    minHeight: DATE_SIZE * 6,
+  },
+  '& .PrivatePickersSlideTransition-root [role="row"]': {
+    margin: 0,
+  },
+  '& .MuiPickersDay-dayWithMargin': {
+    margin: 0,
+  },
+  '& .MuiPickersDay-root': {
+    width: DATE_SIZE,
+    height: DATE_SIZE,
+  },
+}
+
+const compactStyleTheme = createTheme({
+  components: {
+    MuiPaper: {
+      defaultProps: {
+        sx: compactStyles
+      },
+    }
+  },
+})
+
+export interface IDatePickerFieldProps {
+  label: string
+
+  field: FieldInputProps<any>
+  form: FormikProps<any>
+  theme: 'dark' | 'light'
+
+  useCompact?: boolean
+}
+
+interface IOtherProps {
+  [key: string]: any
+}
+
+export const DatePickerField = ({
+  label,
+  field,
+  form,
+  theme,
+  useCompact = true,
+}: IDatePickerFieldProps & IOtherProps) => {
+  return (
+    <ThemeProvider theme={useCompact ? compactStyleTheme : {}}>
+      <LocalizationProvider dateAdapter={AdapterMoment}>
+        <DatePicker
+          value={field.value || ''}
+          onChange={value => form.setFieldValue(field.name, value)}
+          PopperProps={{
+            placement: 'bottom-start',
+          }}
+          showDaysOutsideCurrentMonth={true}
+          disableFuture={true}
+          renderInput={params => {
+            return (
+              <CustomField
+                {...params}
+                inputProps={{ ...params.inputProps, placeholder: 'dd/mm/yyyy' }}
+                theme={theme}
+                field={field}
+                form={form}
+                label={label}
+                type="tel"
+              />
+            )
+          }}
+        />
+      </LocalizationProvider>
+    </ThemeProvider>
+  )
+}

package/src/components/ticketResale/index.tsx

@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from 'react'
 import _get from 'lodash/get'
-import { processTicket } from '../../api'
+import { processTicket, declineInvitation } from '../../api'
 import { AxiosError } from 'axios'
 
 export interface ITicketResaleContainer {
   onProcessTicketSuccess: (res: any) => void
   onProcessTicketError: (e: AxiosError) => void
+  onDeclineTicketPurchaseSuccess: (res: any) => void
+  onDeclineTicketPurchaseError: (e: AxiosError) => void
   orderHash?: string
 }
 
 export const TicketResaleContainer = ({
   onProcessTicketSuccess = () => {},
   onProcessTicketError = () => {},
+  onDeclineTicketPurchaseSuccess = () => {},
+  onDeclineTicketPurchaseError = () => {},
   orderHash,
 }: ITicketResaleContainer) => {
   const isWindowDefined = typeof window !== 'undefined'
-  const [error, setError] = useState(null)
+  const [error, setError] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
 
   useEffect(() => {
     (async () => {
@@ -23,8 +28,22 @@ export const TicketResaleContainer = ({
         const params: URLSearchParams = new URL(`${window.location}`)
           .searchParams
         const hash = params.get('invitation_hash') || orderHash || null
+        const isDeclined = params.get('decline') || false
 
         if (hash) {
+          // Process of declining ticket purchase invitation
+          if (isDeclined) {
+            try {
+              const response = await declineInvitation(hash)
+              onDeclineTicketPurchaseSuccess(response)
+              setSuccessMessage("Thanks for letting us know! We'll offer this ticket to someone else!")
+            } catch (error) {
+              setError(error?.response?.data?.message)
+              onDeclineTicketPurchaseError(error.response)
+            }
+            return
+          }
+
           try {
             const response = await processTicket(hash)
             const data = _get(response, 'data.data.attributes')
@@ -47,8 +66,8 @@ export const TicketResaleContainer = ({
 
   return (
     <div className="ticket-resale-page">
-      <div className="error-block">
-        <h3>{error}</h3>
+      <div className={`${successMessage ? 'success-block': 'error-block'}`}>
+        <h3>{successMessage ? successMessage : error}</h3>
       </div>
     </div>
   )

package/src/components/ticketsContainer/index.tsx

@@ -389,7 +389,8 @@ export const TicketsContainer = ({
     Object.values(selectedTickets)[0] === 0
 
   const wrappedActionsSectionComponent = React.isValidElement(ActionsSectionComponent) ? React.cloneElement(ActionsSectionComponent as React.ReactElement<any>, { 
-    handleGetTicketClick
+    handleGetTicketClick,
+    isTicketOnSale
   }) : null
 
   const externalUrl = event?.redirectUrl