OpenSign/microfrontends/SignDocuments/src/Component/component/fieldsComponent.js

import React, { useState } from "react";
import ModalUi from "../../premitives/ModalUi";
import RecipientList from "../../premitives/RecipientList";

function FieldsComponent({
  pdfUrl,
  sign,
  stamp,
  dragSignature,
  signRef,
  handleDivClick,
  handleMouseLeave,
  isDragSign,
  themeColor,
  dragStamp,
  dragRef,
  isDragStamp,
  dragSignatureSS,
  dragStampSS,
  isDragSignatureSS,
  isSignYourself,
  addPositionOfSignature,
  signersdata,
  isSelectListId,
  setSignerObjId,
  setIsSelectId,
  setContractName,
  isSigners,
  dataTut,
  dataTut2,
  isMailSend,
  handleAddSigner,
  setUniqueId,
  setRoleName,
  handleDeleteUser,
  signerPos,
  handleRoleChange,
  handleOnBlur
}) {
  const [isSignersModal, setIsSignersModal] = useState(false);
  const signStyle = pdfUrl ? "disableSign" : "signatureBtn";

  const isMobile = window.innerWidth < 767;

  const color = [
    "#93a3db",
    "#e6c3db",
    "#c0e3bc",
    "#bce3db",
    "#b8ccdb",
    "#ceb8db",
    "#ffccff",
    "#99ffcc",
    "#cc99ff",
    "#ffcc99",
    "#66ccff",
    "#ffffcc"
  ];

  const handleModal = () => {
    setIsSignersModal(!isSignersModal);
  };
  return (
    <>
      {isMobile && isSignYourself ? (
        !isMailSend && (
          <div
            data-tut={dataTut}
            id="navbar"
            className="stickyfooter"
            style={{ width: window.innerWidth + "px" }}
          >
            {isSigners && (
              <div
                data-tut={dataTut}
                style={{
                  background: isSelectListId
                    ? color[isSelectListId % color.length]
                    : color[0],
                  padding: "10px 20px",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
                }}
                onClick={() => {
                  if (signersdata?.length) {
                    handleModal();
                  }
                }}
              >
                <span style={{ fontSize: "13px", fontWeight: "700" }}>
                  Recipient
                </span>
                <span style={{ fontSize: "13px", fontWeight: "700" }}>
                  {signersdata[isSelectListId]?.Role && (
                    <div>
                      {signersdata[isSelectListId]?.Name
                        ? ` : ${signersdata[isSelectListId]?.Name}`
                        : ` : ${signersdata[isSelectListId]?.Role}`}
                    </div>
                  )}
                </span>
              </div>
            )}
            {handleAddSigner && (
              <div
                data-tut="reactourAddbtn"
                style={{
                  margin: "5px 0 5px 0",
                  backgroundColor: themeColor(),
                  color: "white"
                }}
                className="addSignerBtn"
                onClick={() => handleAddSigner()}
              >
                <i className="fa-solid fa-plus"></i>
                <span style={{ marginLeft: 2 }}>Add role</span>
              </div>
            )}
            <div
              data-tut={dataTut2}
              className="signLayoutContainer2"
              style={{ backgroundColor: themeColor() }}
            >
              <div
                onClick={() => addPositionOfSignature("onclick", false)}
                ref={(element) => {
                  dragSignatureSS(element);
                  if (element) {
                    signRef.current = element;
                    // const height = signRef && signRef.current.offsetHeight;
                    // const width = signRef && signRef.current.offsetWidth;
                  }
                }}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  userSelect: "none",
                  opacity: isDragSignatureSS ? 0.5 : 1,
                  backgroundImage: `url(${sign})`,
                  backgroundSize: "70% 70%",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "center center",
                  paddingBottom: "2.2rem"
                }}
              >
                <span
                  style={{
                    color: "white",
                    fontSize: "12px",
                    position: "relative",
                    top: "2.6rem"
                  }}
                >
                  Signature
                </span>
              </div>
              <div
                onClick={() => addPositionOfSignature("onclick", true)}
                ref={(element) => {
                  dragStampSS(element);
                  dragRef.current = element;
                }}
                onMouseMove={handleDivClick}
                onMouseDown={handleMouseLeave}
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  userSelect: "none",
                  backgroundImage: `url(${stamp})`,
                  backgroundSize: "32px 33px",
                  backgroundRepeat: "no-repeat",
                  backgroundPosition: "center center",
                  paddingBottom: "2.2rem"
                }}
              >
                <span
                  style={{
                    color: "white",
                    fontSize: "12px",
                    position: "relative",
                    top: "2.6rem"
                  }}
                >
                  Stamp
                </span>
              </div>
            </div>
          </div>
        )
      ) : (
        <div data-tut={dataTut} className="signerComponent">
          <div
            style={{
              background: themeColor(),
              padding: "5px"
            }}
          >
            <span className="signedStyle">Fields</span>
          </div>

          <div className="signLayoutContainer1">
            {pdfUrl ? (
              <>
                <button className={signStyle} disabled={true}>
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 20px 0px 20px",
                      color: "#bfbfbf"
                    }}
                  >
                    Signature
                  </span>

                  <img
                    alt="sign img"
                    style={{
                      width: "30px",
                      height: "28px",
                      background: "#d3edeb"
                    }}
                    src={sign}
                  />
                </button>
                <button className={signStyle} disabled={true}>
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 0px 0px 35px",
                      color: "#bfbfbf"
                    }}
                  >
                    Stamp
                  </span>

                  <img
                    alt="stamp img"
                    style={{
                      width: "25px",
                      height: "28px",
                      background: "#d3edeb"
                    }}
                    src={stamp}
                  />
                </button>
              </>
            ) : (
              <>
                <div
                  ref={(element) => {
                    dragSignature(element);
                    if (element) {
                      signRef.current = element;
                      // const height = signRef && signRef.current.offsetHeight;
                      // const width = signRef && signRef.current.offsetWidth;
                    }
                  }}
                  className={signStyle}
                  onMouseMove={handleDivClick}
                  onMouseDown={handleMouseLeave}
                  style={{
                    opacity: isDragSign ? 0.5 : 1,
                    boxShadow:
                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                  }}
                >
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 20px 0px 20px",
                      color: "black"
                    }}
                  >
                    Signature
                  </span>
                  <img
                    alt="sign img"
                    style={{
                      width: "30px",
                      height: "28px",
                      background: themeColor()
                    }}
                    src={sign}
                  />
                </div>
                <div
                  ref={(element) => {
                    dragStamp(element);
                    dragRef.current = element;
                    if (isDragStamp) {
                      // setIsStamp(true);
                    }
                  }}
                  className={!pdfUrl ? signStyle : "disableSign"}
                  disabled={pdfUrl && true}
                  onMouseMove={handleDivClick}
                  onMouseDown={handleMouseLeave}
                  style={{
                    opacity: isDragStamp ? 0.5 : 1,
                    boxShadow:
                      "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)"
                  }}
                >
                  <span
                    style={{
                      fontWeight: "400",
                      fontSize: "15px",
                      padding: "3px 0px 0px 35px",
                      color: !pdfUrl ? "black" : "#bfbfbf"
                    }}
                  >
                    Stamp
                  </span>

                  <img
                    alt="stamp img"
                    style={{
                      width: "25px",
                      height: "28px",
                      background: themeColor()
                    }}
                    src={stamp}
                  />
                </div>
              </>
            )}
          </div>
        </div>
      )}
      <ModalUi
        title={"Recipients"}
        isOpen={isSignersModal}
        handleClose={handleModal}
      >
        <RecipientList
          signerPos={signerPos}
          signersdata={signersdata}
          isSelectListId={isSelectListId}
          setSignerObjId={setSignerObjId}
          setIsSelectId={setIsSelectId}
          setContractName={setContractName}
          setUniqueId={setUniqueId}
          setRoleName={setRoleName}
          handleDeleteUser={handleDeleteUser}
          handleRoleChange={handleRoleChange}
          handleOnBlur={handleOnBlur}
        />
      </ModalUi>
    </>
  );
}

export default FieldsComponent;