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

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/dist/PhoneNumberField.js

@@ -0,0 +1,96 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.PhoneNumberField = void 0;
+var TextField_1 = require("@mui/material/TextField");
+var debounce_1 = require("lodash/debounce");
+var get_1 = require("lodash/get");
+var react_1 = require("react");
+var api_1 = require("../../api");
+exports.PhoneNumberField = function (_a) {
+    var label = _a.label, _b = _a.type, type = _b === void 0 ? 'text' : _b, field = _a.field, _c = _a.form, errors = _c.errors, setFieldError = _c.setFieldError, setStatus = _c.setStatus;
+    var error = get_1["default"](errors, field.name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    var debounceCb = react_1.useCallback(debounce_1["default"](function (cb) { return void cb(); }, 1000), []);
+    react_1.useEffect(function () {
+        var _a;
+        if (field.value) {
+            setStatus((_a = {}, _a[field.name] = true, _a));
+        }
+        debounceCb(function () { return __awaiter(void 0, void 0, void 0, function () {
+            var error_1, message;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 3, 4, 5]);
+                        if (!field.value) return [3 /*break*/, 2];
+                        return [4 /*yield*/, api_1.validatePhoneNumber(field.value)];
+                    case 1:
+                        _b.sent();
+                        _b.label = 2;
+                    case 2:
+                        setFieldError(field.name, '');
+                        return [3 /*break*/, 5];
+                    case 3:
+                        error_1 = _b.sent();
+                        message = get_1["default"](error_1, 'response.data.message', 'Invalid phone number');
+                        setFieldError(field.name, message);
+                        return [3 /*break*/, 5];
+                    case 4:
+                        setStatus((_a = {}, _a[field.name] = false, _a));
+                        return [7 /*endfinally*/];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        }); });
+        // eslint-disable-next-line
+    }, [field.value]);
+    return (react_1["default"].createElement(TextField_1["default"], __assign({}, field, { id: field.name, label: label, type: type, fullWidth: true, error: !!error, helperText: error, value: field.value || '', inputProps: { pattern: '[+0-9]/d+' } })));
+};

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]
+}