tf-checkout-react 1.0.99 → 1.0.100-beta.2

package/src/components/common/CheckboxField.tsx

@@ -1,41 +1,41 @@
-import React from 'react'
-import FormGroup from '@mui/material/FormGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Checkbox from '@mui/material/Checkbox'
-import { FieldInputProps } from 'formik'
-import { useTheme } from '@mui/styles'
-import { FormControl, FormHelperText } from '@mui/material'
-
-export interface ICheckboxField {
-  label: string | number | JSX.Element;
-  field?: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const CheckboxField = ({
-  label,
-  field,
-  selectOptions,
-  theme,
-  setFieldValue,
-  ...rest
-}: ICheckboxField & IOtherProps) => {
-  const customTheme: any = useTheme()
-  return (
-    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""])}>
-      <FormGroup>
-        <FormControlLabel
-          control={<Checkbox {...field} {...rest} />}
-          label={label}
-          componentsProps={{
-            typography: customTheme?.checkbox
-          }}
-        />
-      </FormGroup>
-      {!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""]) ? <FormHelperText>Required</FormHelperText> : null}
-    </FormControl>
-  )
-}
+import React from 'react'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Checkbox from '@mui/material/Checkbox'
+import { FieldInputProps } from 'formik'
+import { useTheme } from '@mui/styles'
+import { FormControl, FormHelperText } from '@mui/material'
+
+export interface ICheckboxField {
+  label: string | number | JSX.Element;
+  field?: FieldInputProps<any>;
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const CheckboxField = ({
+  label,
+  field,
+  selectOptions,
+  theme,
+  setFieldValue,
+  ...rest
+}: ICheckboxField & IOtherProps) => {
+  const customTheme: any = useTheme()
+  return (
+    <FormControl error={!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""])}>
+      <FormGroup>
+        <FormControlLabel
+          control={<Checkbox {...field} {...rest} />}
+          label={label}
+          componentsProps={{
+            typography: customTheme?.checkbox
+          }}
+        />
+      </FormGroup>
+      {!!(rest?.form?.errors && rest.form.errors[field?.name ?? ""]) ? <FormHelperText>Required</FormHelperText> : null}
+    </FormControl>
+  )
+}

package/src/components/common/CustomField.tsx

@@ -1,84 +1,87 @@
-import React from 'react'
-import TextField from '@mui/material/TextField'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-import _includes from 'lodash/includes'
-
-import { FieldInputProps, FormikProps } from 'formik'
-import { useTheme } from '@mui/styles'
-
-export interface ISelectOption {
-  label: string | number;
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ICustomField {
-  label: string;
-
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  theme: 'dark' | 'light';
-
-  // optional
-  type?: string;
-  selectOptions?: ISelectOption[];
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const CustomField = ({
-  label,
-  type = 'text',
-  field,
-  selectOptions = [] as ISelectOption[],
-  form: { touched, errors, submitCount },
-  theme,
-}: ICustomField & IOtherProps) => {
-  const isSelectField = type === 'select'
-  const error = _get(errors, field.name)
-  const isTouched =
-    Boolean(_get(touched, field.name)) ||
-    (_includes(field.name, 'holder') && !!error && !!submitCount)
-
-  const customTheme: any = useTheme()
-
-  return (
-    <TextField
-      id={field.name}
-      label={label}
-      type={type}
-      select={isSelectField}
-      fullWidth={true}
-      error={!!error && isTouched}
-      helperText={isTouched && error}
-      SelectProps={{
-        native: true,
-        className: theme,
-        MenuProps: { className: theme },
-      }}
-      InputLabelProps={{
-        sx: customTheme?.input,
-        shrink: field.name === 'holderAge' ? true : undefined,
-      }}
-      inputProps={{
-        sx: customTheme?.input,
-      }}
-      {...field}
-    >
-      {isSelectField
-        ? _map(selectOptions, option => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-          >
-            {option.label}
-          </option>
-        ))
-        : null}
-    </TextField>
-  )
-}
+import React from 'react'
+import TextField from '@mui/material/TextField'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+import _includes from 'lodash/includes'
+
+import { FieldInputProps, FormikProps } from 'formik'
+import { useTheme } from '@mui/styles'
+
+export interface ISelectOption {
+  label: string | number;
+  value?: string | number;
+  [key: string]: any;
+}
+
+export interface ICustomField {
+  label: string;
+
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+  theme: 'dark' | 'light';
+
+  // optional
+  type?: string;
+  selectOptions?: ISelectOption[];
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const CustomField = ({
+  label,
+  type = 'text',
+  field,
+  selectOptions = [] as ISelectOption[],
+  form: { touched, errors, submitCount },
+  theme,
+  inputProps: pInputProps = {},
+  InputProps = {},
+  inputRef,
+}: ICustomField & IOtherProps) => {
+  const isSelectField = type === 'select'
+  const error = _get(errors, field.name)
+  const isTouched =
+    Boolean(_get(touched, field.name)) ||
+    (_includes(field.name, 'holder') && !!error && !!submitCount)
+
+  const customTheme: any = useTheme()
+  const inputProps: any = { sx: customTheme?.input }
+
+  return (
+    <TextField
+      id={field.name}
+      label={label}
+      type={type}
+      select={isSelectField}
+      fullWidth={true}
+      error={!!error && isTouched}
+      helperText={isTouched && error}
+      SelectProps={{
+        native: true,
+        className: theme,
+        MenuProps: { className: theme },
+      }}
+      InputLabelProps={{
+        sx: customTheme?.input,
+      }}
+      InputProps={InputProps}
+      inputProps={{ ...inputProps, ...pInputProps }}
+      inputRef={inputRef}
+      {...field}
+    >
+      {isSelectField
+        ? _map(selectOptions, option => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))
+        : null}
+    </TextField>
+  )
+}

package/src/components/common/DatePickerField.tsx

@@ -0,0 +1,98 @@
+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}
+          inputFormat="DD/MM/YYYY"
+          mask="__/__/____" 
+          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/common/FormikPhoneNumberField.tsx

@@ -1,52 +1,52 @@
-import React from 'react'
-import { FieldInputProps } from 'formik'
-import MuiPhoneNumber from 'material-ui-phone-number'
-import _get from 'lodash/get'
-import { removePlusSign } from '../../normalizers'
-import { useTheme } from '@mui/styles'
-
-export interface INumberInField {
-  label: string | number | JSX.Element;
-  field: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const FormikPhoneNumberField = ({
-  label,
-  field,
-  form: { touched, errors, initialValues },
-  setFieldValue,
-  selectOptions,
-  ...rest
-}: INumberInField & IOtherProps) => {
-  const error = _get(errors, field.name)
-  const isTouched = Boolean(_get(touched, field.name))
-
-  const customTheme: any = useTheme()
-
-  return (
-    <MuiPhoneNumber
-      name='phone'
-      value={initialValues.phone}
-      onChange={(e: any) => setFieldValue("phone", removePlusSign(e))}
-      variant="outlined" 
-      defaultCountry='us'
-      disableDropdown={true}
-      label={label}
-      error={!!error && isTouched}
-      helperText={isTouched && error}
-      fullWidth
-      InputLabelProps={{
-        sx: customTheme?.input
-      }}
-      InputProps={{
-        sx: customTheme?.input
-      }}
-      autoFormat={false}
-      {...rest} 
-    />
-  )
+import React from 'react'
+import { FieldInputProps } from 'formik'
+import MuiPhoneNumber from 'material-ui-phone-number'
+import _get from 'lodash/get'
+import { removePlusSign } from '../../normalizers'
+import { useTheme } from '@mui/styles'
+
+export interface INumberInField {
+  label: string | number | JSX.Element;
+  field: FieldInputProps<any>;
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const FormikPhoneNumberField = ({
+  label,
+  field,
+  form: { touched, errors, initialValues },
+  setFieldValue,
+  selectOptions,
+  ...rest
+}: INumberInField & IOtherProps) => {
+  const error = _get(errors, field.name)
+  const isTouched = Boolean(_get(touched, field.name))
+
+  const customTheme: any = useTheme()
+
+  return (
+    <MuiPhoneNumber
+      name='phone'
+      value={initialValues.phone}
+      onChange={(e: any) => setFieldValue("phone", removePlusSign(e))}
+      variant="outlined" 
+      defaultCountry='us'
+      disableDropdown={true}
+      label={label}
+      error={!!error && isTouched}
+      helperText={isTouched && error}
+      fullWidth
+      InputLabelProps={{
+        sx: customTheme?.input
+      }}
+      InputProps={{
+        sx: customTheme?.input
+      }}
+      autoFormat={false}
+      {...rest} 
+    />
+  )
 }

package/src/components/common/Loader.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import CircularProgress from '@mui/material/CircularProgress'
-
-export function Loader() {
-  return (
-    <div className="loader-container">
-      <CircularProgress />
-    </div>
-  )
+import React from 'react'
+import CircularProgress from '@mui/material/CircularProgress'
+
+export function Loader() {
+  return (
+    <div className="loader-container">
+      <CircularProgress />
+    </div>
+  )
 }

package/src/components/common/RadioField.tsx

@@ -1,35 +1,35 @@
-import React from 'react'
-import FormGroup from '@mui/material/FormGroup'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Radio from '@mui/material/Radio';
-import { FieldInputProps } from 'formik'
-import { useTheme } from '@mui/styles'
-
-export interface IRadioField {
-  label: string | number | JSX.Element;
-  field?: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const RadioField = ({
-  label,
-  field,
-  theme,
-  ...rest
-}: IRadioField & IOtherProps) => {
-  const customTheme: any = useTheme()
-  return (
-    <FormGroup>
-      <FormControlLabel
-        control={<Radio {...field} {...rest} />}
-        label={label}
-        componentsProps={{
-          typography: customTheme?.checkbox
-        }}
-      />
-    </FormGroup>
-  )
-}
+import React from 'react'
+import FormGroup from '@mui/material/FormGroup'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio';
+import { FieldInputProps } from 'formik'
+import { useTheme } from '@mui/styles'
+
+export interface IRadioField {
+  label: string | number | JSX.Element;
+  field?: FieldInputProps<any>;
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const RadioField = ({
+  label,
+  field,
+  theme,
+  ...rest
+}: IRadioField & IOtherProps) => {
+  const customTheme: any = useTheme()
+  return (
+    <FormGroup>
+      <FormControlLabel
+        control={<Radio {...field} {...rest} />}
+        label={label}
+        componentsProps={{
+          typography: customTheme?.checkbox
+        }}
+      />
+    </FormGroup>
+  )
+}

package/src/components/common/RedirectModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+
+interface IRedirectModal {
+  message: string
+  onClickOk: () => void
+}
+
+const style: React.CSSProperties = {
+  position: 'absolute',
+  top: '10%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  minWidth: 480,
+  backgroundColor: '#e3e3e3',
+  border: '1px solid white',
+  outline: 'none',
+  padding: '14px',
+  maxHeight: '85vh',
+  overflow: 'auto',
+}
+
+export const RedirectModal = ({
+  message = 'Your cart has expired. Please click on "OK" to return to the ticket selection page.',
+  onClickOk = () => {},
+}: IRedirectModal) => {
+  return (
+    <Modal
+      open={true}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className="redirect-modal"
+    >
+      <Box style={style}>
+        <p>{message}</p>
+        <div className="footer">
+          <button onClick={onClickOk}>OK</button>
+        </div>
+      </Box>
+    </Modal>
+  )
+}