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

package/package.json

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

package/src/api/index.ts

@@ -304,3 +304,10 @@ export const logout = () => publicRequest.delete('/auth')
 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/rsvpContainer/index.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react'
+import { Field, Form, Formik } from 'formik'
+import Button from '@mui/material/Button'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import { CustomField, Loader } from '../common/index'
+import { combineValidators, requiredValidator, emailValidator } from '../../validators'
+import { sendRSVPInfo } from '../../api'
+
+interface IRsvpContainerPage {
+  showSection?: boolean;
+  eventId: number;
+}
+
+interface IRSVPValuesTypes {
+  email: string;
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto'
+}
+
+export const RsvpContainer = ({ showSection = false, eventId }: IRsvpContainerPage) => {
+  const userDataEncoded =
+    typeof window !== 'undefined' ? window.localStorage.getItem('user_data') : ''
+  const parsedData = JSON.parse(userDataEncoded || '{}')
+
+  const [loading, setLoading] = useState(false)
+  const [modal, setModal] = useState({ isOpen: false, text: '' })
+
+  const handleModalClose = () => {
+    setModal({ isOpen: false, text: '' })
+  }
+
+  const handleSubmit = async (values: IRSVPValuesTypes) => {
+    try {
+      setLoading(true)
+
+      const requestData = {
+        data: {
+          email: values.email
+        }
+      }
+      const { data } = await sendRSVPInfo(eventId, requestData)
+
+      setModal({ isOpen: true, text: data.message })
+    } catch (error) {
+      if (error.response.status === 403) {
+        setModal({ isOpen: true, text: error.response.data?.message })
+      }
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!showSection) {
+    return null
+  }
+
+  return (
+    <>
+      <Modal
+        open={modal.isOpen}
+        onClose={handleModalClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        className="rsvp-modal"
+      >
+        <Box style={style} className="rsvp-modal-box">
+          <div className="rsvp-modal-container">
+            <div className="rsvp-modal-header">{modal.text}</div>
+            <div className="rsvp-modal-button">
+              <button onClick={handleModalClose}>OK</button>
+            </div>
+          </div>
+        </Box>
+      </Modal>
+      <div className="rsvp-container">
+        {loading ? (
+          <Loader />
+        ) : (
+          <>
+            <div className="rsvp-header">RSVP</div>
+            <div className="rsvp-email-container">
+              <Formik
+                initialValues={{
+                  email: parsedData?.email || ''
+                }}
+                onSubmit={handleSubmit}
+                enableReinitialize
+              >
+                <Form>
+                  <div className="rsvp-email-input-container">
+                    <Field
+                      name="email"
+                      label="EMAIL ADDRESS"
+                      type="email"
+                      validate={combineValidators(
+                        (value: string) => requiredValidator(value, 'Please enter your Email'),
+                        (value: string) => emailValidator(value)
+                      )}
+                      component={CustomField}
+                    />
+                  </div>
+                  <div className="rsvp-button-container">
+                    <Button type="submit">RSVP</Button>
+                  </div>
+                </Form>
+              </Formik>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  )
+}

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
@@ -450,8 +451,8 @@ export const TicketsContainer = ({
                 />
               ) : null
             }
-            {wrappedActionsSectionComponent} 
-            {!wrappedActionsSectionComponent && !eventSaleIsNotStarted && (isTicketOnSale || !event?.salesEnded) && !externalUrl && (
+            {wrappedActionsSectionComponent}
+            {!wrappedActionsSectionComponent && !eventSaleIsNotStarted && isTicketOnSale && !event?.salesEnded && !externalUrl && (
               <Button
                 aria-hidden={true}
                 className={`book-button 

package/src/components/timerWidget/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, memo } from 'react'
 import Countdown from 'react-countdown'
 import { showZero } from '../../utils/showZero'
 import { getImage } from '../../utils/getImage'
@@ -84,4 +84,4 @@ const TimerWidget = ({
   ) : null
 }
 
-export default TimerWidget
+export default memo(TimerWidget)

package/src/index.ts

@@ -12,3 +12,4 @@ export { OrderDetailsContainer } from './components/orderDetailsContainer'
 export { setConfigs } from './utils/setConfigs'
 export { TicketResaleContainer } from './components'
 export { RedirectModal } from './components/common/RedirectModal'
+export { RsvpContainer } from './components/rsvpContainer'