tf-checkout-react 1.7.30 → 2.0.0-beta.0

package/src/components/common/CopyMessageModal.tsx

@@ -1,34 +0,0 @@
-import Modal from '@mui/material/Modal'
-import React from 'react'
-
-interface ICopyMessageModalProps {
-  showCopyModal: boolean;
-  onClose: () => void;
-}
-
-export const CopyMessageModal = (props: ICopyMessageModalProps) => {
-  const { showCopyModal = false, onClose } = props
-  return (
-    <Modal
-      open={showCopyModal}
-      onClose={onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className="success-copy-modal"
-    >
-      <div className="message-copy-success-box">
-        <div className="message-copy-success">
-          <span>
-            Copied to your clipboard! Now paste your link in a Snapchat message,
-          </span>
-          <span>your Instagram bio, Whatsapp, Facebook or a text :)</span>
-        </div>
-        <div className="footer">
-          <button className="footer-button" type="button" onClick={onClose}>
-            OK
-          </button>
-        </div>
-      </div>
-    </Modal>
-  )
-}

package/src/components/common/CustomField.tsx

@@ -1,168 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-/* eslint-disable import/no-unresolved */
-import Visibility from '@mui/icons-material/Visibility'
-import VisibilityOff from '@mui/icons-material/VisibilityOff'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-import MenuItem from '@mui/material/MenuItem'
-import TextField from '@mui/material/TextField'
-import { useTheme } from '@mui/styles'
-import { FieldInputProps, FormikProps } from 'formik'
-import _get from 'lodash/get'
-import _includes from 'lodash/includes'
-import _isFunction from 'lodash/isFunction'
-import _isObject from 'lodash/isObject'
-import _map from 'lodash/map'
-import React, { useEffect, useRef, useState } from 'react'
-
-export interface ISelectOption {
-  label: string | number;
-  value?: string | number;
-  [key: string]: any;
-}
-
-export interface ICustomField {
-  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-  label: string;
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  theme: 'dark' | 'light';
-  // optional
-  type?: string;
-  selectOptions?: ISelectOption[];
-  inputRef?:
-    | { current: HTMLInputElement | null }
-    | ((node: HTMLInputElement | null) => void);
-  multiline?: boolean;
-  minRows?: string | number;
-  maxRows?: string | number;
-}
-
-export interface IOtherProps {
-  [key: string]: any;
-}
-
-export const CustomField = ({
-  label,
-  type = 'text',
-  field,
-  selectOptions = [] as ISelectOption[],
-  form: { touched, errors, submitCount },
-  theme,
-  inputProps: pInputProps = {},
-  InputProps = {},
-  inputRef,
-  onChange,
-  multiline = false,
-  minRows = 3,
-  maxRows,
-  disabled,
-}: ICustomField & IOtherProps) => {
-  const [isShrinked, setIsShrinked] = useState(Boolean(field.value))
-  const [showPassword, setShowPassword] = useState(false)
-  const _ref = useRef<HTMLInputElement>(null)
-  const isAutoFilled = _ref.current?.matches ? _ref.current?.matches(':-webkit-autofill') : false
-  const isSelectField = type === 'select'
-  const isPasswordField = type === 'password'
-  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 }
-
-  const handleClickShowPassword = () => {
-    setShowPassword(!showPassword)
-  }
-
-  const handleMouseDownPassword = (event: React.MouseEvent<HTMLButtonElement>) => {
-    event.preventDefault()
-  }
-
-  const finalInputProps = isPasswordField
-    ? {
-        ...InputProps,
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton
-              aria-label="toggle password visibility"
-              onClick={handleClickShowPassword}
-              onMouseDown={handleMouseDownPassword}
-              edge="end"
-              size="small"
-              sx={{ color: customTheme?.input?.color || 'inherit' }}
-            >
-              {showPassword ? <VisibilityOff /> : <Visibility />}
-            </IconButton>
-          </InputAdornment>
-        ),
-      }
-    : InputProps
-
-  useEffect(() => {
-    if (_isFunction(inputRef)) {
-      inputRef(_ref.current)
-    } else if (_isObject(inputRef)) {
-      inputRef.current = _ref.current
-    }
-  })
-
-  return (
-    <TextField
-      disabled={disabled}
-      placeholder=""
-      id={field.name}
-      label={label}
-      type={isPasswordField ? (showPassword ? 'text' : 'password') : type}
-      select={isSelectField}
-      fullWidth={true}
-      error={!!error && isTouched}
-      helperText={isTouched && error}
-      onFocus={() => {
-        setIsShrinked(true)
-      }}
-      SelectProps={{
-        native: false,
-        className: theme,
-        MenuProps: {
-          className: theme,
-          PaperProps: {
-            sx: {
-              '& .MuiMenuItem-root': {
-                paddingLeft: '16px',
-                paddingRight: '16px',
-              },
-            },
-          },
-        },
-      }}
-      InputLabelProps={{
-        sx: customTheme?.input,
-        shrink: isSelectField || isShrinked || Boolean(field.value) || isAutoFilled,
-      }}
-      InputProps={finalInputProps}
-      inputProps={{ ...inputProps, ...pInputProps }}
-      inputRef={_ref}
-      multiline={multiline}
-      minRows={minRows}
-      maxRows={maxRows}
-      {...field}
-      onBlur={(e: React.FocusEvent<any, Element>) => {
-        setIsShrinked(Boolean(field.value))
-        if (field.onBlur) {
-          field.onBlur(e)
-        }
-      }}
-      onChange={onChange ?? field.onChange}
-    >
-      {isSelectField
-        ? _map(selectOptions, option => (
-            <MenuItem key={option.value} value={option.value} disabled={option.disabled}>
-              {option.label}
-            </MenuItem>
-          ))
-        : null}
-    </TextField>
-  )
-}

package/src/components/common/DatePickerField.tsx

@@ -1,126 +0,0 @@
-import { ThemeOptions } from '@mui/material'
-import { createTheme, ThemeProvider } from '@mui/material/styles'
-import { CSSProperties } from '@mui/styles'
-import { DatePicker } from '@mui/x-date-pickers'
-import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { FieldInputProps, FormikProps } from 'formik'
-import React from 'react'
-
-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,
-  },
-  '& .MuiPickersArrowSwitcher-spacer': {
-    width: 0,
-  },
-  '& [role="presentation"] .PrivatePickersFadeTransitionGroup-root': {
-    marginRight: -1,
-  },
-}
-
-const getTheme = (isCompact: boolean, baseThemeOptions?: object | null) => {
-  if (isCompact) {
-    return createTheme(
-      Object.assign(baseThemeOptions ?? {}, {
-        components: {
-          MuiPaper: {
-            defaultProps: {
-              sx: compactStyles,
-            },
-          },
-        },
-      })
-    )
-  }
-
-  return createTheme(baseThemeOptions ?? {})
-}
-
-export interface IDatePickerFieldProps {
-  label: string;
-
-  field: FieldInputProps<any>;
-  form: FormikProps<any>;
-  theme: 'dark' | 'light';
-  themeOptions?: ThemeOptions & {
-    input?: CSSProperties;
-    checkbox?: CSSProperties;
-  };
-
-  useCompact?: boolean;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const DatePickerField = ({
-  label,
-  field,
-  form,
-  theme,
-  useCompact = true,
-  themeOptions,
-  dateFormat = 'DD/MM/YYYY',
-  placeholder = 'dd/mm/yyyy',
-}: IDatePickerFieldProps & IOtherProps) => (
-  <ThemeProvider theme={getTheme(useCompact, themeOptions ?? null)}>
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-      <DatePicker
-        value={field.value || ''}
-        onChange={value => form.setFieldValue(field.name, value)}
-        PopperProps={{
-          placement: 'bottom-start',
-        }}
-        showDaysOutsideCurrentMonth={true}
-        disableFuture={true}
-        inputFormat={dateFormat}
-        mask="__/__/____"
-        renderInput={(params: any) => (
-          <CustomField
-            {...params}
-            inputProps={{ ...params.inputProps, placeholder }}
-            theme={theme}
-            field={{
-              ...field,
-              onChange: (
-                evt: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>
-              ) => {
-                if (params.inputProps && params.inputProps.onChange) {
-                  params.inputProps.onChange(evt)
-                }
-              },
-            }}
-            form={form}
-            label={label}
-            type="tel"
-          />
-        )}
-      />
-    </LocalizationProvider>
-  </ThemeProvider>
-)

package/src/components/common/FieldSection/index.tsx

@@ -1,141 +0,0 @@
-import { Field, FormikValues } from 'formik'
-import _identity from 'lodash/identity'
-import _map from 'lodash/map'
-import React, { FC } from 'react'
-
-import { replaceVarInString } from '../../../utils'
-import {
-  CheckboxField,
-  CustomField,
-  DatePickerField,
-  PhoneNumberField,
-  SelectField,
-} from '../index'
-import { getFieldClassNames, getValidateFunctions, insertHTML } from './utils'
-
-export interface IFieldsSectionProps {
-  formFields?: IFormFieldsSection[];
-  values: FormikValues;
-  setFieldValue: (
-    field: string,
-    value: FormikValues | string | number,
-    shouldValidate?: boolean | undefined
-  ) => void;
-  disableField?: string;
-  countries?: { [key: string]: string | number }[];
-  states?: { [key: string]: string | number }[];
-  theme?: 'dark' | 'light';
-  containerClass?: string;
-  setPhoneValidationIsLoading?: (isLoading: boolean) => void;
-  onFieldChange?: (name: string, value: string | number) => void;
-}
-
-const SectionContainer: FC<{ className: string }> = ({
-  children,
-  className,
-}) => <div className={className}>{children}</div>
-
-export const FieldsSection = ({
-  formFields = [],
-  countries = [],
-  states = [],
-  values,
-  setFieldValue,
-  theme,
-  containerClass = '',
-  setPhoneValidationIsLoading = _identity,
-  onFieldChange = _identity,
-  disableField,
-}: IFieldsSectionProps) => (
-  <>
-    {_map(formFields, (item, index) => {
-      const {
-        name,
-        groupLabel,
-        groupLabelVars = [],
-        groupLabelClassName,
-        groupClassName = '',
-        fields,
-      } = item
-      return (
-        <SectionContainer key={name} className={groupClassName}>
-          <span id={`group_label_${index}`} className={groupLabelClassName}>
-            {typeof groupLabel === 'string'
-              ? insertHTML(
-                  `group_label_${index}`,
-                  replaceVarInString(groupLabel, groupLabelVars)
-                )
-              : groupLabel}
-          </span>
-          <div className={`fields-container ${groupClassName}`}>
-            {_map(fields, (fieldData, fieldIndex) => {
-              const {
-                name,
-                label,
-                className = 'full-width',
-                type,
-                component,
-                options = [],
-                required,
-              } = fieldData
-              const id = `${name}-${fieldIndex}`
-              const classNames = `${containerClass}-container__field ${className}`
-              return (
-                component || (
-                  <div
-                    key={name}
-                    id={id}
-                    className={getFieldClassNames(id, classNames)}
-                  >
-                    <Field
-                      disabled={name === disableField || name === 'state' && !states.length}
-                      name={name}
-                      label={`${label}${required ? '' : ' (optional)'}`}
-                      type={type}
-                      validate={name === 'state' && !states.length ? false : getValidateFunctions({
-                        element: fieldData,
-                        values,
-                      })}
-                      setFieldValue={setFieldValue}
-                      component={
-                        type === 'checkbox'
-                          ? CheckboxField
-                          : type === 'select'
-                          ? SelectField
-                          : type === 'phone'
-                          ? PhoneNumberField
-                          : type === 'date'
-                          ? DatePickerField
-                          : CustomField
-                      }
-                      options={
-                        name === 'country'
-                          ? countries
-                          : name === 'state'
-                          ? states
-                          : options
-                      }
-                      theme={theme}
-                      setPhoneValidationIsLoading={
-                        type === 'phone'
-                          ? setPhoneValidationIsLoading
-                          : undefined
-                      }
-                      onChange={(e: React.FormEvent<EventTarget>) => {
-                        const element = e.target as HTMLInputElement
-                        const { value } = element
-                        setFieldValue(name, value)
-                        onFieldChange(name, value)
-                      }}
-                      disableDropdown={fieldData.disableDropdown}
-                    />
-                  </div>
-                )
-              )
-            })}
-          </div>
-        </SectionContainer>
-      )
-    })}
-  </>
-)

package/src/components/common/FieldSection/utils/index.tsx

@@ -1,92 +0,0 @@
-import { FormikValues } from 'formik'
-import _isEmpty from 'lodash/isEmpty'
-import _map from 'lodash/map'
-
-import { isBrowser } from '../../../../utils'
-import { combineValidators, requiredValidator } from '../../../../validators'
-
-export const getValidateFunctions = ({
-  element,
-  values,
-}: {
-  element: IFormField;
-  values: FormikValues;
-}) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const validationFunctions: any[] = []
-  if (element.required) {
-    validationFunctions.push(requiredValidator)
-  }
-
-  if (element.onValidate) {
-    validationFunctions.push(element.onValidate)
-  }
-
-  if (element.name === 'confirmEmail') {
-    const isSameEmail = (confirmEmail?: string) =>
-      values.email !== confirmEmail
-        ? 'Please confirm your email address correctly'
-        : null
-    validationFunctions.push(isSameEmail)
-  }
-
-  if (element.name === 'confirmPassword') {
-    const isSame = (confirmPassword?: string) =>
-      values.password !== confirmPassword
-        ? 'Password confirmation does not match'
-        : null
-
-    validationFunctions.push(isSame)
-  }
-
-  return combineValidators(...validationFunctions)
-}
-
-export const updateFormFieldsAttributes = (
-  formFields: IFormFieldsSection[],
-  attributes?: IFieldAttribute
-) => {
-  if (attributes && !_isEmpty(attributes)) {
-    const updatedFormFields = _map(formFields, fieldSection => {
-      const fieldSectionAttributes = attributes[fieldSection.name] || {}
-
-      const updatedFields = _map(fieldSection.fields, fieldItem => {
-        const fieldItemAttributes = attributes[fieldItem.name] || {}
-        return { ...fieldItem, ...fieldItemAttributes }
-      })
-
-      return {
-        ...fieldSection,
-        ...fieldSectionAttributes,
-        fields: updatedFields,
-      }
-    })
-
-    return updatedFormFields
-  }
-  return formFields
-}
-
-export const getFieldClassNames = (id: string, existingClassNames: string) => {
-  if (isBrowser) {
-    const elem = document && document.getElementById(id)
-
-    if ((elem?.parentElement?.clientWidth || 0) < 375) {
-      return existingClassNames + ' full-width'
-    }
-  }
-
-  return existingClassNames
-}
-
-export const insertHTML = (elementId: string, text = '') => {
-  if (isBrowser) {
-    const elem = document && document.getElementById(elementId)
-
-    if (!elem?.childNodes.length) {
-      elem?.insertAdjacentHTML('afterbegin', text)
-    }
-  }
-
-  return null
-}

package/src/components/common/FormikPhoneNumberField.tsx

@@ -1,51 +0,0 @@
-import { useTheme } from '@mui/styles'
-import { FieldInputProps } from 'formik'
-import _get from 'lodash/get'
-import MuiPhoneNumber from 'material-ui-phone-number'
-import React from 'react'
-
-export interface INumberInField {
-  label: string | number | JSX.Element;
-  field: FieldInputProps<any>;
-}
-
-interface IOtherProps {
-  [key: string]: any;
-}
-
-export const FormikPhoneNumberField = ({
-  label,
-  field,
-  form: { touched, errors, values },
-  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={values.phone}
-      onChange={(e: any) => setFieldValue('phone', 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,8 +0,0 @@
-import CircularProgress from '@mui/material/CircularProgress'
-import React from 'react'
-
-export const Loader = () => (
-  <div className="loader-container">
-    <CircularProgress />
-  </div>
-)

package/src/components/common/ModalComponent/index.tsx

@@ -1,68 +0,0 @@
-import { Modal as MuiModal } from '@mui/material'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button'
-import CircularProgress from '@mui/material/CircularProgress'
-import _map from 'lodash/map'
-import React, { FC } from 'react'
-
-export interface Action {
-  id: string;
-  label: string;
-  onClick: () => void;
-  disabled?: boolean;
-  loading?: boolean;
-  variant?: "text" | "contained" | "outlined";
-}
-
-interface Props {
-  onClose?: () => void;
-  actions: Action[];
-  modalClassName?: 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',
-}
-
-const Modal: FC<Props> = ({
-  onClose,
-  actions = [],
-  children,
-  modalClassName = '',
-}) => (
-  <MuiModal
-    open={true}
-    onClose={onClose}
-    aria-labelledby="modal-modal-title"
-    aria-describedby="modal-modal-description"
-    className={`confirm-modal ${modalClassName}`}
-  >
-    <Box style={style}>
-      <div className="modal-body">{children}</div>
-      <div className="footer">
-        {_map(actions, (action: Action) => (
-          <Button
-            key={action.id}
-            onClick={action.onClick}
-            disabled={action.disabled || action.loading}
-            variant={action.variant || "text"}
-          >
-            {action.loading ? <CircularProgress size="22px" /> : action.label}
-          </Button>
-        ))}
-      </div>
-    </Box>
-  </MuiModal>
-)
-
-export default Modal