Adds fixes for #80, #82. Implements #94, #95.

- Adds fixes for adding and editing payments (#80, #82)
- Adds working period data reloading after adding and editing payments (#94)
- Makes toastr messages always stay withing the viewport (#95)

Author: MadOPcode

src/components/ActionsMenu/index.jsx

@@ -3,6 +3,7 @@ import PT from "prop-types";
 import cn from "classnames";
 import { usePopper } from "react-popper";
 import Button from "components/Button";
+import Tooltip from "components/Tooltip";
 import IconArrowDown from "../../assets/images/icon-arrow-down-narrow.svg";
 import { useClickOutside } from "utils/hooks";
 import { negate, stopPropagation } from "utils/misc";
@@ -39,48 +40,6 @@ const ActionsMenu = ({
     setIsOpen(negate);
   }, []);
 
-  const onItemClick = useCallback(
-    (event) => {
-      let index = +event.target.dataset.actionIndex;
-      let item = items[index];
-      if (!item || item.disabled || item.separator) {
-        return;
-      }
-      closeMenu();
-      item.action?.();
-    },
-    [items, closeMenu]
-  );
-
-  const menuItems = useMemo(
-    () =>
-      items.map((item, index) => {
-        if (item.hidden) {
-          return null;
-        } else if (item.separator) {
-          return <div key={index} className={compStyles.separator} />;
-        } else {
-          return (
-            <div
-              key={index}
-              data-action-index={index}
-              onClick={onItemClick}
-              role="button"
-              tabIndex={0}
-              className={cn(
-                compStyles.item,
-                { [compStyles.itemDisabled]: item.disabled },
-                item.className
-              )}
-            >
-              {item.label}
-            </div>
-          );
-        }
-      }),
-    [items, onItemClick]
-  );
-
   return (
     <div
       className={compStyles.container}
@@ -104,8 +63,8 @@ const ActionsMenu = ({
       </Button>
       {isOpen && (
         <Menu
-          items={menuItems}
-          onClickOutside={closeMenu}
+          close={closeMenu}
+          items={items}
           referenceElement={referenceElement}
           strategy={popupStrategy}
         />
@@ -123,6 +82,7 @@ ActionsMenu.propTypes = {
       label: PT.string,
       action: PT.func,
       separator: PT.bool,
+      disabled: PT.bool,
       hidden: PT.bool,
     })
   ),
@@ -138,7 +98,7 @@ export default ActionsMenu;
  * @param {Object} props component properties
  * @returns {JSX.Element}
  */
-const Menu = ({ items, onClickOutside, referenceElement, strategy }) => {
+const Menu = ({ close, items, referenceElement, strategy }) => {
   const [popperElement, setPopperElement] = useState(null);
   const [arrowElement, setArrowElement] = useState(null);
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -180,7 +140,73 @@ const Menu = ({ items, onClickOutside, referenceElement, strategy }) => {
     ],
   });
 
-  useClickOutside(popperElement, onClickOutside, []);
+  const onClickItem = useCallback(
+    (event) => {
+      let targetData = event.target.dataset;
+      let index = +targetData.actionIndex;
+      let item = items[index];
+      if (!item || targetData.disabled || item.separator) {
+        return;
+      }
+      close();
+      item.action?.();
+    },
+    [close, items]
+  );
+
+  useClickOutside(popperElement, close, []);
+
+  const menuItems = useMemo(() => {
+    return items.map((item, index) => {
+      if (item.hidden) {
+        return null;
+      } else if (item.separator) {
+        return <div key={index} className={compStyles.separator} />;
+      } else {
+        let reasonsDisabled = item.checkDisabled?.();
+        let disabled = !!item.disabled || !!reasonsDisabled;
+        let attrs = {
+          key: index,
+          "data-action-index": index,
+          onClick: onClickItem,
+          role: "button",
+          tabIndex: 0,
+          className: cn(
+            compStyles.item,
+            { [compStyles.itemDisabled]: disabled },
+            item.className
+          ),
+        };
+        if (disabled) {
+          attrs["data-disabled"] = true;
+        }
+        return (
+          <div {...attrs}>
+            {reasonsDisabled ? (
+              <Tooltip
+                content={
+                  reasonsDisabled.length === 1 ? (
+                    reasonsDisabled[0]
+                  ) : (
+                    <ul>
+                      {reasonsDisabled.map((text, index) => (
+                        <li key={index}>{text}</li>
+                      ))}
+                    </ul>
+                  )
+                }
+                strategy="fixed"
+              >
+                {item.label}
+              </Tooltip>
+            ) : (
+              item.label
+            )}
+          </div>
+        );
+      }
+    });
+  }, [items, onClickItem]);
 
   return (
     <div
@@ -189,7 +215,7 @@ const Menu = ({ items, onClickOutside, referenceElement, strategy }) => {
       style={styles.popper}
       {...attributes.popper}
     >
-      <div className={compStyles.items}>{items}</div>
+      <div className={compStyles.items}>{menuItems}</div>
       <div
         ref={setArrowElement}
         style={styles.arrow}
@@ -200,8 +226,17 @@ const Menu = ({ items, onClickOutside, referenceElement, strategy }) => {
 };
 
 Menu.propTypes = {
-  items: PT.array.isRequired,
-  onClickOutside: PT.func.isRequired,
+  close: PT.func.isRequired,
+  items: PT.arrayOf(
+    PT.shape({
+      label: PT.string,
+      action: PT.func,
+      checkDisabled: PT.func,
+      disabled: PT.bool,
+      separator: PT.bool,
+      hidden: PT.bool,
+    })
+  ),
   referenceElement: PT.object,
   strategy: PT.oneOf(["absolute", "fixed"]),
 };

src/components/ActionsMenu/styles.module.scss

@@ -71,9 +71,8 @@
 }
 
 .itemDisabled {
-  color: gray;
-  opacity: 0.6;
-  pointer-events: none;
+  color: #bbb;
+  cursor: default;
 }
 
 .hidden {

src/components/CurrencyField/index.jsx

@@ -0,0 +1,63 @@
+import React, { useCallback } from "react";
+import PT from "prop-types";
+import TextField from "components/TextField";
+
+/**
+ * Displays text field with optional label.
+ *
+ * @param {Object} props component properties
+ * @returns {JSX.Element}
+ */
+const CurrencyField = (props) => {
+  const { onChange } = props;
+
+  const onChangeValue = useCallback(
+    (value) => {
+      onChange(normalizeValue(value));
+    },
+    [onChange]
+  );
+
+  return <TextField {...props} onChange={onChangeValue} />;
+};
+
+CurrencyField.propTypes = {
+  className: PT.string,
+  error: PT.string,
+  id: PT.string,
+  isDisabled: PT.bool,
+  isTouched: PT.bool,
+  label: PT.string,
+  name: PT.string.isRequired,
+  onBlur: PT.func,
+  onChange: PT.func,
+  onFocus: PT.func,
+  size: PT.oneOf(["small", "medium"]),
+  value: PT.oneOfType([PT.number, PT.string]).isRequired,
+};
+
+export default CurrencyField;
+
+/**
+ * Returns normalized payment amount.
+ *
+ * @param {string} value peyment amount
+ * @returns {string}
+ */
+function normalizeValue(value) {
+  if (!value) {
+    return value;
+  }
+  value = value.trim();
+  let dotIndex = value.lastIndexOf(".");
+  if (isNaN(+value) || dotIndex < 0) {
+    return value;
+  }
+  if (dotIndex === 0) {
+    return "0" + value;
+  }
+  if (value.length - dotIndex > 3) {
+    return value.slice(0, dotIndex + 3);
+  }
+  return value;
+}

src/components/CurrencyField/styles.module.scss

@@ -15,7 +15,6 @@ import styles from "./styles.module.scss";
  */
 const Page = ({ className, children }) => (
   <div className={cn(styles.container, className)}>
-    {children}
     <ReduxToastr
       timeOut={TOAST_DEFAULT_TIMEOUT}
       position="top-right"
@@ -26,6 +25,7 @@ const Page = ({ className, children }) => (
       transitionIn="fadeIn"
       transitionOut="fadeOut"
     />
+    {children}
   </div>
 );
 

src/components/Page/index.jsx

@@ -14,6 +14,7 @@
 
   @include desktop {
     flex-direction: row;
+    flex-wrap: wrap;
   }
 
   *,

src/components/Page/styles.module.scss

@@ -1,6 +1,7 @@
 import React, { useCallback } from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import ValidationError from "components/ValidationError";
 import styles from "./styles.module.scss";
 
 /**
@@ -11,9 +12,12 @@ import styles from "./styles.module.scss";
  */
 const TextField = ({
   className,
+  error,
+  errorClassName,
   id,
+  inputRef,
   isDisabled = false,
-  isValid = true,
+  isTouched = false,
   label,
   name,
   onBlur,
@@ -39,7 +43,7 @@ const TextField = ({
         {
           [styles.hasLabel]: !!label,
           [styles.disabled]: isDisabled,
-          [styles.invalid]: !isValid,
+          [styles.invalid]: !!error,
         },
         className
       )}
@@ -50,21 +54,30 @@ const TextField = ({
         disabled={isDisabled}
         id={id}
         name={name}
-        type="text"
-        value={value}
         onBlur={onBlur}
         onChange={onInputChange}
         onFocus={onFocus}
+        ref={inputRef}
+        type="text"
+        value={value}
       />
+      {isTouched && error && (
+        <ValidationError className={cn(styles.error, errorClassName)}>
+          {error}
+        </ValidationError>
+      )}
     </div>
   );
 };
 
 TextField.propTypes = {
   className: PT.string,
+  error: PT.string,
+  errorClassName: PT.string,
   id: PT.string,
+  inputRef: PT.oneOfType([PT.object, PT.func]),
   isDisabled: PT.bool,
-  isValid: PT.bool,
+  isTouched: PT.bool,
   label: PT.string,
   name: PT.string.isRequired,
   onBlur: PT.func,

src/components/TextField/index.jsx

@@ -38,8 +38,8 @@
   }
 
   &.invalid {
-    input,
-    input:hover {
+    input.input,
+    input.input:hover {
       border-color: $error-color;
       color: $error-text-color;
     }

src/components/TextField/styles.module.scss

@@ -1,3 +1,5 @@
+@import "styles/variables";
+
 .container {
   position: relative;
   display: inline-flex;
@@ -14,8 +16,12 @@
   border-radius: 8px;
   padding: 10px 15px;
   line-height: 22px;
-  box-shadow: 0px 5px 25px #c6c6c6;
+  font-size: $font-size-px;
+  font-weight: normal;
+  text-transform: none;
+  color: $text-color;
   background: #fff;
+  box-shadow: 0px 5px 25px #c6c6c6;
 
   ul {
     margin: 0;

src/components/Tooltip/styles.module.scss

@@ -1,5 +1,5 @@
 .container {
-  margin: 10px 0;
+  margin: 10px 0 0;
   border: 1px solid #ffd5d1;
   padding: 9px 10px;
   min-height: 40px;