Implemented Modal component and payment cancelling.

Author: MadOPcode

src/assets/images/icon-cross-light.svg

@@ -9,11 +9,12 @@ import styles from "./styles.module.scss";
  * @param {Object} props component properties
  * @param {Object} props.children button text
  * @param {string} [props.className] class name added to root element
- * @param {'primary'|'primary-dark'|'primary-light'} [props.color] button color
+ * @param {'primary'|'primary-dark'|'primary-light'|'error'|'warning'} [props.color]
+ * button color
  * @param {boolean} [props.isDisabled] if button is disabled
  * @param {boolean} [props.isSelected] if button is selected
  * @param {string} [props.name] button name
- * @param {(e: any) => void} props.onClick function called when button is clicked
+ * @param {(e: any) => void} [props.onClick] function called when button is clicked
  * @param {'medium'|'small'} [props.size] button size
  * @param {'circle'|'rounded'} [props.style] button style
  * @param {'button'|'submit'|'reset'} [props.type] button type
@@ -42,13 +43,11 @@ const Button = ({
     type={type}
     className={cn(
       styles.button,
-      {
-        [styles.selected]: isSelected,
-        [styles[color]]: true,
-        [styles[size]]: true,
-        [styles[style]]: true,
-        [styles[variant]]: true,
-      },
+      styles[color],
+      styles[size],
+      styles[style],
+      styles[variant],
+      { [styles.selected]: isSelected },
       className
     )}
     onClick={onClick}
@@ -60,7 +59,13 @@ const Button = ({
 Button.propTypes = {
   children: PT.node,
   className: PT.string,
-  color: PT.oneOf(["primary"]),
+  color: PT.oneOf([
+    "primary",
+    "primary-dark",
+    "primary-light",
+    "error",
+    "warning",
+  ]),
   isDisabled: PT.bool,
   isSelected: PT.bool,
   name: PT.string,

src/components/Button/index.jsx

@@ -7,6 +7,7 @@
   align-items: center;
   @include roboto-bold;
   letter-spacing: 0.8px;
+  white-space: nowrap;
   text-transform: uppercase;
   outline: none;
   cursor: pointer;
@@ -61,6 +62,16 @@
     color: $primary-dark-text-color;
   }
 
+  &.error {
+    border-color: $error-color;
+    color: $error-text-color;
+  }
+
+  &.warning {
+    border-color: $warning-color;
+    color: $warning-text-color;
+  }
+
   &:disabled {
     border-color: $control-disabled-border-color;
     background-color: $control-disabled-bg-color;
@@ -88,6 +99,16 @@
     background-color: $primary-dark-color;
   }
 
+  &.error {
+    border-color: $error-color;
+    background-color: $error-color;
+  }
+
+  &.warning {
+    border-color: $warning-color;
+    background-color: $warning-color;
+  }
+
   &:disabled {
     border-color: $control-disabled-border-color;
     background-color: $control-disabled-bg-color;

src/components/Button/styles.module.scss

@@ -0,0 +1,78 @@
+import React from "react";
+import PT from "prop-types";
+import { Modal as ReactModal } from "react-responsive-modal";
+import Button from "components/Button";
+import IconCross from "../../assets/images/icon-cross-light.svg";
+import { stopImmediatePropagation } from "utils/misc";
+import styles from "./styles.module.scss";
+import "react-responsive-modal/styles.css";
+
+const classNames = {
+  modal: styles.modal,
+  modalContainer: styles.modalContainer,
+};
+const closeIcon = <IconCross />;
+
+const Modal = ({
+  approveText = "Apply",
+  children,
+  controls,
+  dismissText = "Cancel",
+  isOpen,
+  onApprove,
+  onDismiss,
+  title,
+}) => (
+  <ReactModal
+    center
+    classNames={classNames}
+    onClose={onDismiss}
+    open={isOpen}
+    onOverlayClick={stopImmediatePropagation}
+    showCloseIcon={false}
+  >
+    <div
+      className={styles.wrapper}
+      onClick={stopImmediatePropagation}
+      role="button"
+      tabIndex={0}
+    >
+      {title && <div className={styles.title}>{title}</div>}
+      <div className={styles.content}>{children}</div>
+      {controls || controls === null ? (
+        controls
+      ) : (
+        <div className={styles.controls}>
+          <Button
+            className={styles.button}
+            color="warning"
+            variant="contained"
+            onClick={onApprove}
+          >
+            {approveText}
+          </Button>
+          <Button className={styles.button} onClick={onDismiss}>
+            {dismissText}
+          </Button>
+        </div>
+      )}
+      <button className={styles.closeButton} type="button" onClick={onDismiss}>
+        {closeIcon}
+      </button>
+    </div>
+  </ReactModal>
+);
+
+Modal.propTypes = {
+  approveText: PT.string,
+  children: PT.node,
+  container: PT.element,
+  controls: PT.node,
+  dismissText: PT.string,
+  isOpen: PT.bool.isRequired,
+  onApprove: PT.func,
+  onDismiss: PT.func.isRequired,
+  title: PT.string,
+};
+
+export default Modal;

src/components/Modal/index.jsx

@@ -0,0 +1,69 @@
+@import "styles/mixins";
+
+div.modalContainer {
+  padding: 20px;
+}
+
+div.modal {
+  margin: 0;
+  border-radius: 8px;
+  border: none;
+  padding: 0;
+  width: 640px;
+  max-width: 100%;
+}
+
+.wrapper {
+  padding: 32px 32px 22px;
+}
+
+button.closeButton {
+  display: inline-block;
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  border: none;
+  padding: 0;
+  width: 15px;
+  background: transparent;
+  outline: none !important;
+  box-shadow: none !important;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+
+.title {
+  margin: 0 0 24px;
+  font-size: 34px;
+  line-height: 38px;
+  text-transform: uppercase;
+  @include barlow-condensed;
+}
+
+.content {
+  margin: 0 0 10px;
+  font-size: 16px;
+  line-height: 22px;
+  @include roboto-regular;
+
+  + .controls {
+    margin-top: 24px;
+  }
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.button {
+  margin: 0 10px 10px 0;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}

src/components/Modal/styles.module.scss

@@ -1,25 +1,39 @@
 import React from "react";
 import PT from "prop-types";
 import cn from "classnames";
+import Loader from "react-loader-spinner";
 import styles from "./styles.module.scss";
 
 /**
  * Displays spinning incomplete circle.
  *
  * @param {Object} props component props
  * @param {string} [props.className] class name added to root element
- * @param {string} [props.spinnerClassName] class name added to spinner element
+ * @param {string} [props.color] spinner color in HEX format
+ * @param {any} [props.type] spinner type as defined in
+ * react-loader-spinner documentation
+ * @param {number} [props.width] spinner width
+ * @param {number} [props.height] spinner height
  * @returns {JSX.Element}
  */
-const Spinner = ({ className, spinnerClassName }) => (
+const Spinner = ({
+  className,
+  color = "#00BFFF",
+  type = "TailSpin",
+  width = 80,
+  height = 0,
+}) => (
   <div className={cn(styles.container, className)}>
-    <span className={cn(styles.spinner, spinnerClassName)}>Loading...</span>
+    <Loader color={color} type={type} width={width} height={height || width} />
   </div>
 );
 
 Spinner.propTypes = {
   className: PT.string,
-  spinnerClassName: PT.string,
+  color: PT.string,
+  type: PT.string,
+  width: PT.number,
+  height: PT.number,
 };
 
 export default Spinner;

src/components/Spinner/index.jsx

@@ -1,43 +1,7 @@
-@import 'styles/variables';
+@import "styles/variables";
 
 .container {
-  position: relative;
-  padding-bottom: 100%;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-}
-
-.spinner {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  margin: auto;
-  padding-bottom: 50%;
-  width: 50%;
-  height: 0;
-  color: transparent;
-  user-select: none;
-
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    border: 10px solid $control-border-color;
-    border-right-color: transparent;
-    border-radius: 9999px;
-    animation: loading-indicator 0.75s linear infinite;
-  }
-}
-
-@keyframes loading-indicator {
-  to {
-    transform: rotate(360deg);
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }

src/components/Spinner/styles.module.scss

@@ -56,6 +56,7 @@ export const API_REQUIRED_FIELDS = [
   "workPeriods.payments.memberRate",
   "workPeriods.payments.status",
   "workPeriods.payments.statusDetails",
+  "workPeriods.payments.workPeriodId",
 ];
 
 // Valid parameter names for requests.