tf-checkout-react 1.0.101 → 1.0.102

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,84 @@
-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,
+}: 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>
+  )
+}

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/SelectField.tsx

@@ -1,80 +1,80 @@
-import React from 'react'
-import Select from '@mui/material/Select'
-import _map from 'lodash/map'
-import _get from 'lodash/get'
-
-import { FieldInputProps, FormikProps } from 'formik'
-import { FormControl, InputLabel, FormHelperText } from '@mui/material'
-import { useTheme } from '@mui/styles'
-
-export interface ISelectOption {
-  label: string | number;
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ISelectField {
-  label: string;
-
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  theme: 'dark' | 'light';
-
-  // optional
-  type?: string;
-  selectOptions?: ISelectOption[];
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const SelectField = ({
-  label,
-  type = 'text',
-  field,
-  selectOptions = [] as ISelectOption[],
-  form: { touched, errors },
-  theme,
-}: ISelectField & IOtherProps) => {
-  const isTouched = Boolean(_get(touched, field.name))
-  const error = _get(errors, field.name)
-
-  const customTheme: any = useTheme()
-
-  return (
-    <FormControl fullWidth={true}>
-      <InputLabel style={customTheme?.input} htmlFor={field.name} error={!!error && isTouched} shrink={true}>
-        {label}
-      </InputLabel>
-      <Select
-        id={field.name}
-        label={label}
-        type={type}
-        fullWidth={true}
-        error={!!error && isTouched}
-        inputProps={{
-          id: field.name,
-        }}
-        native={true}
-        className={theme}
-        MenuProps={{ className: theme }}
-        {...field}
-        style={customTheme?.input}
-      >
-        {_map(selectOptions, option => (
-          <option
-            key={option.value}
-            value={option.value}
-            disabled={option.disabled}
-          >
-            {option.label}
-          </option>
-        ))}
-      </Select>
-      {isTouched && error ? (
-        <FormHelperText error={!!error && isTouched}>{error}</FormHelperText>
-      ) : null}
-    </FormControl>
-  )
-}
+import React from 'react'
+import Select from '@mui/material/Select'
+import _map from 'lodash/map'
+import _get from 'lodash/get'
+
+import { FieldInputProps, FormikProps } from 'formik'
+import { FormControl, InputLabel, FormHelperText } from '@mui/material'
+import { useTheme } from '@mui/styles'
+
+export interface ISelectOption {
+  label: string | number;
+  value?: string | number;
+  [key: string]: any;
+}
+
+export interface ISelectField {
+  label: string;
+
+  field: FieldInputProps<any>;
+  form: FormikProps<any>;
+  theme: 'dark' | 'light';
+
+  // optional
+  type?: string;
+  selectOptions?: ISelectOption[];
+}
+
+interface IOtherProps {
+  [key: string]: any;
+}
+
+export const SelectField = ({
+  label,
+  type = 'text',
+  field,
+  selectOptions = [] as ISelectOption[],
+  form: { touched, errors },
+  theme,
+}: ISelectField & IOtherProps) => {
+  const isTouched = Boolean(_get(touched, field.name))
+  const error = _get(errors, field.name)
+
+  const customTheme: any = useTheme()
+
+  return (
+    <FormControl fullWidth={true}>
+      <InputLabel style={customTheme?.input} htmlFor={field.name} error={!!error && isTouched} shrink={true}>
+        {label}
+      </InputLabel>
+      <Select
+        id={field.name}
+        label={label}
+        type={type}
+        fullWidth={true}
+        error={!!error && isTouched}
+        inputProps={{
+          id: field.name,
+        }}
+        native={true}
+        className={theme}
+        MenuProps={{ className: theme }}
+        {...field}
+        style={customTheme?.input}
+      >
+        {_map(selectOptions, option => (
+          <option
+            key={option.value}
+            value={option.value}
+            disabled={option.disabled}
+          >
+            {option.label}
+          </option>
+        ))}
+      </Select>
+      {isTouched && error ? (
+        <FormHelperText error={!!error && isTouched}>{error}</FormHelperText>
+      ) : null}
+    </FormControl>
+  )
+}

package/src/components/common/SnackbarAlert.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Alert, AlertColor, Snackbar, SnackbarOrigin } from '@mui/material'
+
+interface ISnackbarAlertProps {
+  isOpen: boolean
+  message: string
+  type: AlertColor
+  position?: SnackbarOrigin
+  autoHideDuration?: number
+  variant?: 'filled' | 'standard' | 'outlined'
+
+  onClose: () => void
+}
+
+const SnackbarAlert = ({
+  isOpen,
+  message,
+  type,
+  position,
+  autoHideDuration = 3000,
+  variant,
+  onClose,
+}: ISnackbarAlertProps) => {
+  return (
+    <div className="snackbar-alert-container">
+      <Snackbar
+        autoHideDuration={autoHideDuration}
+        open={isOpen}
+        anchorOrigin={position || { vertical: 'top', horizontal: 'center' }}
+        onClose={onClose}
+        classes={{
+          root: 'snackbar-alert-snackbar-root',
+        }}
+      >
+        <Alert
+          severity={type}
+          onClose={onClose}
+          variant={variant || 'filled'}
+          classes={{
+            icon: 'snackbar-alert-icon',
+            root: 'snackbar-alert-alert-root',
+            action: 'snackbar-alert-action',
+            message: 'snackbar-alert-message',
+            filled: 'snackbar-alert-filled',
+          }}
+        >
+          {message}
+        </Alert>
+      </Snackbar>
+    </div>
+  )
+}
+
+export default SnackbarAlert

package/src/components/common/index.tsx

@@ -1,5 +1,5 @@
-export { CheckboxField } from './CheckboxField'
-export { CustomField } from './CustomField'
-export { FormikPhoneNumberField } from './FormikPhoneNumberField'
-export { Loader } from './Loader'
+export { CheckboxField } from './CheckboxField'
+export { CustomField } from './CustomField'
+export { FormikPhoneNumberField } from './FormikPhoneNumberField'
+export { Loader } from './Loader'
 export { SelectField } from './SelectField'