rap-react/src/components/common/feedbackBox/index.js

To make it easy for you to get started with GitLab, here's a list of recommended next steps.

import React, { useContext } from "react";
import showMessage from "../message";
import { SendFeedback } from "../../../services/commonService";
import { GetBrandName } from "../../../services/brandService";
import { SendEmail } from "../../../services/emailService";
import { UserContext } from "../../../context/user/userContext";
export const FeedbackBox = (props) => {
  const { state } = useContext(UserContext);
  const [feedbackValue, setFeedbackValue] = React.useState("");
  const [isClicked, setClicked] = React.useState(false);
  const [valid, setValid] = React.useState(false);
  const maxLength = 2000;

  const handleKeyPress = (e) => {
    let count = e.target.value;
    let length = count.length;
    if (length > maxLength) {
      count = count.substring(0, count - 1);
      e.target.value = count;
    }

    setFeedbackValue(count);
    if (count.length > 0) {
      setValid(true);
    } else {
      setValid(false);
    }
  };

  const handleSendFeedback = (e) => {
    setClicked(true);
    if (valid) {
      const validResponse = "Feedback Received!".toUpperCase();
      let brandID = state?.user?.userProfile?.brandID;
      let brandName = GetBrandName(brandID);
      let email = state?.user?.userProfile?.email;
      const input = { Feedback: feedbackValue, Email: email };
      SendFeedback(input, brandID).then(
        (res) => {
          if (
            res !== null &&
            res !== undefined &&
            res.toUpperCase() === validResponse
          ) {
            SendEmail({
              Email: email,
              Comments: feedbackValue,
              BrandName: brandName,
            });
            showMessage("We have received your feedback successfully.");
          } else {
            showMessage("Could not send feedback", -2);
          }
        },
        (err) => {
          showMessage("Could not send feedback", -2);
        }
      );
      props.callOpen(false);
    }
    e.preventDefault();
  };
  const handleClose = (e) => {
    props.callOpen(false);
    e.preventDefault();
  };

  const getMainClassName = () => {
    let cls = "modal-wrapper";

    if (props.open === true) {
      cls += " show-modal-wrapper";
    }
    cls += " feedback";
    return cls;
  };

  return (
    <React.Fragment>
      <div className={getMainClassName()}>
        <div className="modal-block">
          <div className="feedback-heading-container">
            <span>Please report any issues or provide feedback below.</span>
          </div>
          <div className="confirmation-content-wrapper">
            <div className="feedback-container">
              <textarea
                onChange={handleKeyPress}
                className="empty-comments"
                rows="7"
                maxLength={maxLength}
              ></textarea>
              <div className="counter-placeholder">
                <div>
                  <span className="current-counter">
                    {feedbackValue.length}
                  </span>
                  <span data-val={maxLength} className="maximum-counter">
                    / {maxLength}
                  </span>
                </div>
              </div>
            </div>
            <div
              className={`error-message ${
                isClicked === false
                  ? "hide"
                  : feedbackValue.length === 0
                  ? ""
                  : "hide"
              } `}
            >
              <span>Please enter feedback</span>
            </div>
          </div>
          <div className="confirmation-button-block">
            <button
              className="confirmation-button w-button yes"
              onClick={(event) => {
                handleSendFeedback(event);
              }}
            >
              Submit
            </button>

            <button
              onClick={(event) => {
                handleClose(event);
              }}
              className="confirmation-button w-button no"
            >
              Cancel
            </button>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
};