tf-checkout-react 1.0.103 → 1.0.106

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

@@ -1,54 +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>
-  )
-}
-
+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'

package/src/components/confirmModal/index.tsx

@@ -1,51 +1,51 @@
-import React, { FC } from 'react'
-import Modal from '@mui/material/Modal'
-import Box from '@mui/material/Box'
-import Button from '@mui/material/Button';
-import './style.css'
-
-interface Props {
-  message: string;
-  onClose: () => void;
-  onConfirm: () => void;
-}
-
-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 ConfirmModal: FC<Props> = ({
-  message = '',
-  onClose = () => {},
-  onConfirm = () => {},
-}) => {
-  return (
-    <Modal
-      open={true}
-      onClose={onClose}
-      aria-labelledby="modal-modal-title"
-      aria-describedby="modal-modal-description"
-      className='confirm-modal'
-    >
-      <Box style={style}>
-        <p>{message}</p>
-        <div className='footer'>
-          <Button onClick={onClose}>Cancel</Button>
-          <Button onClick={onConfirm}>OK</Button>
-        </div>
-      </Box>
-    </Modal>
-  )
-}
-
-export default ConfirmModal
+import React, { FC } from 'react'
+import Modal from '@mui/material/Modal'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button';
+import './style.css'
+
+interface Props {
+  message: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+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 ConfirmModal: FC<Props> = ({
+  message = '',
+  onClose = () => {},
+  onConfirm = () => {},
+}) => {
+  return (
+    <Modal
+      open={true}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      className='confirm-modal'
+    >
+      <Box style={style}>
+        <p>{message}</p>
+        <div className='footer'>
+          <Button onClick={onClose}>Cancel</Button>
+          <Button onClick={onConfirm}>OK</Button>
+        </div>
+      </Box>
+    </Modal>
+  )
+}
+
+export default ConfirmModal

package/src/components/confirmModal/style.css

@@ -1,21 +1,21 @@
-.confirm-modal .footer {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-  border-top: 1px solid rgb(192, 191, 191);
-}
-.confirm-modal .footer button {
-  width: max-content;
-  padding: 12px 8px;
-  font-size: 12px;
-  min-height: unset;
-  text-transform: unset;
-}
-.confirm-modal .footer button:hover {
-  width: max-content;
-  padding: 12px 8px;
-  font-size: 12px;
-  background: #505050;
-  min-height: unset;
-  text-transform: unset;
-}
+.confirm-modal .footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  border-top: 1px solid rgb(192, 191, 191);
+}
+.confirm-modal .footer button {
+  width: max-content;
+  padding: 12px 8px;
+  font-size: 12px;
+  min-height: unset;
+  text-transform: unset;
+}
+.confirm-modal .footer button:hover {
+  width: max-content;
+  padding: 12px 8px;
+  font-size: 12px;
+  background: #505050;
+  min-height: unset;
+  text-transform: unset;
+}

package/src/components/confirmationContainer/config.ts

@@ -1,72 +1,72 @@
-import {
-  FacebookShareButton,
-  FacebookMessengerShareButton,
-  TwitterShareButton,
-  LinkedinShareButton,
-  PinterestShareButton,
-  VKShareButton,
-  OKShareButton,
-  TelegramShareButton,
-  WhatsappShareButton,
-  RedditShareButton,
-  TumblrShareButton,
-  MailruShareButton,
-  EmailShareButton,
-  LivejournalShareButton,
-  ViberShareButton,
-  WorkplaceShareButton,
-  LineShareButton,
-  PocketShareButton,
-  InstapaperShareButton,
-  WeiboShareButton,
-  HatenaShareButton,
-  FacebookIcon,
-  FacebookMessengerIcon,
-  TwitterIcon,
-  LinkedinIcon,
-  PinterestIcon,
-  VKIcon,
-  OKIcon,
-  TelegramIcon,
-  WhatsappIcon,
-  RedditIcon,
-  TumblrIcon,
-  MailruIcon,
-  EmailIcon,
-  LivejournalIcon,
-  ViberIcon,
-  WorkplaceIcon,
-  LineIcon,
-  PocketIcon,
-  InstapaperIcon,
-  WeiboIcon,
-  HatenaIcon,
-} from 'react-share'
-
-const config: any = {
-  facebook:    { component: FacebookShareButton,          icon: FacebookIcon },
-  messenger:   { component: FacebookMessengerShareButton, icon: FacebookMessengerIcon },
-  twitter:     { component: TwitterShareButton,           icon: TwitterIcon },
-  linkedin:    { component: LinkedinShareButton,          icon: LinkedinIcon },
-  pinterest:   { component: PinterestShareButton,         icon: PinterestIcon },
-  vk:          { component: VKShareButton,                icon: VKIcon },
-  ok:          { component: OKShareButton,                icon: OKIcon },
-  telegram:    { component: TelegramShareButton,          icon: TelegramIcon },
-  whatsapp:    { component: WhatsappShareButton,          icon: WhatsappIcon },
-  reddit:      { component: RedditShareButton,            icon: RedditIcon },
-  tumblr:      { component: TumblrShareButton,            icon: TumblrIcon },
-  mailru:      { component: MailruShareButton,            icon: MailruIcon },
-  email:       { component: EmailShareButton,             icon: EmailIcon },
-  livejournal: { component: LivejournalShareButton,       icon: LivejournalIcon },
-  viber:       { component: ViberShareButton,             icon: ViberIcon },
-  workplace:   { component: WorkplaceShareButton,         icon: WorkplaceIcon },
-  line:        { component: LineShareButton,              icon: LineIcon },
-  pocket:      { component: PocketShareButton,            icon: PocketIcon },
-  instapaper:  { component: InstapaperShareButton,        icon: InstapaperIcon },
-  weibo:       { component: WeiboShareButton,             icon: WeiboIcon },
-  hatena:      { component: HatenaShareButton,            icon: HatenaIcon },
-}
-
-export default function (key: string) {
-  return config[key]
-}
+import {
+  FacebookShareButton,
+  FacebookMessengerShareButton,
+  TwitterShareButton,
+  LinkedinShareButton,
+  PinterestShareButton,
+  VKShareButton,
+  OKShareButton,
+  TelegramShareButton,
+  WhatsappShareButton,
+  RedditShareButton,
+  TumblrShareButton,
+  MailruShareButton,
+  EmailShareButton,
+  LivejournalShareButton,
+  ViberShareButton,
+  WorkplaceShareButton,
+  LineShareButton,
+  PocketShareButton,
+  InstapaperShareButton,
+  WeiboShareButton,
+  HatenaShareButton,
+  FacebookIcon,
+  FacebookMessengerIcon,
+  TwitterIcon,
+  LinkedinIcon,
+  PinterestIcon,
+  VKIcon,
+  OKIcon,
+  TelegramIcon,
+  WhatsappIcon,
+  RedditIcon,
+  TumblrIcon,
+  MailruIcon,
+  EmailIcon,
+  LivejournalIcon,
+  ViberIcon,
+  WorkplaceIcon,
+  LineIcon,
+  PocketIcon,
+  InstapaperIcon,
+  WeiboIcon,
+  HatenaIcon,
+} from 'react-share'
+
+const config: any = {
+  facebook:    { component: FacebookShareButton,          icon: FacebookIcon },
+  messenger:   { component: FacebookMessengerShareButton, icon: FacebookMessengerIcon },
+  twitter:     { component: TwitterShareButton,           icon: TwitterIcon },
+  linkedin:    { component: LinkedinShareButton,          icon: LinkedinIcon },
+  pinterest:   { component: PinterestShareButton,         icon: PinterestIcon },
+  vk:          { component: VKShareButton,                icon: VKIcon },
+  ok:          { component: OKShareButton,                icon: OKIcon },
+  telegram:    { component: TelegramShareButton,          icon: TelegramIcon },
+  whatsapp:    { component: WhatsappShareButton,          icon: WhatsappIcon },
+  reddit:      { component: RedditShareButton,            icon: RedditIcon },
+  tumblr:      { component: TumblrShareButton,            icon: TumblrIcon },
+  mailru:      { component: MailruShareButton,            icon: MailruIcon },
+  email:       { component: EmailShareButton,             icon: EmailIcon },
+  livejournal: { component: LivejournalShareButton,       icon: LivejournalIcon },
+  viber:       { component: ViberShareButton,             icon: ViberIcon },
+  workplace:   { component: WorkplaceShareButton,         icon: WorkplaceIcon },
+  line:        { component: LineShareButton,              icon: LineIcon },
+  pocket:      { component: PocketShareButton,            icon: PocketIcon },
+  instapaper:  { component: InstapaperShareButton,        icon: InstapaperIcon },
+  weibo:       { component: WeiboShareButton,             icon: WeiboIcon },
+  hatena:      { component: HatenaShareButton,            icon: HatenaIcon },
+}
+
+export default function (key: string) {
+  return config[key]
+}