Untitled

 const handleUpdatePriceTag = async (e) => {
    e.preventDefault();

    const updateData = {
      id: selectedBoId,
      confermation: isNaN(Number(pricing.confermation))
        ? 0
        : Number(pricing.confermation),
      reservation: isNaN(Number(pricing.reservation))
        ? 0
        : Number(pricing.reservation),
      sold: isNaN(Number(pricing.sold)) ? 0 : Number(pricing.sold),
      followUp: isNaN(Number(pricing.followUp)) ? 0 : Number(pricing.followUp),
      aftersail: isNaN(Number(pricing.aftersail))
        ? 0
        : Number(pricing.aftersail),
      leadCost: isNaN(Number(pricing.leadCost)) ? 0 : Number(pricing.leadCost),
      maxCCAs: isNaN(Number(pricing.maxCCAs)) ? 0 : Number(pricing.maxCCAs),
    };

    try {
      // UPDATE
      const response = await axios.post(
        `${PARAMS.API_URL}/admin/payment/edit`,
        updateData,
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      setPricing(response.data);

      setActive(false);
    } catch (error) {
      console.error("Error updating pricing data:", error);
    }
  };

  const handlePriceTagClick = (boId) => {
    setSelectedBoId(boId);
    setActive(true);

    axios
      .get(`${PARAMS.API_URL}/admin/payment/${boId}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        setPricing({
          confermation: res.data.confermation || 0,
          reservation: res.data.reservation || 0,
          sold: res.data.sold || 0,
          followUp: res.data.followUp || 0,
          aftersail: res.data.aftersail || 0,
          leadCost: res.data.leadCost || 0,
          maxCCAs: res.data.maxCCAs || 2, // Defaulting to 2 if undefined
        });
      })
      .catch((err) => {
        console.log(err);
      });
  };

  <div className="dashboard">
      {active && selectedBoId && (
        <div className="popup">
          <div className="model">
            <span>Pricing edit</span>
            <svg
              className="x-edit"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 30"
              width="30px"
              height="30px"
              onClick={handleCloseModal}
            >
              {" "}
              <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z" />
            </svg>
            <div className="inputs">
              <span>Confermation</span>
              <label>
                <input
                  type="number"
                  value={pricing?.confermation || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, confermation: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <span>Reservation</span>
              <label>
                <input
                  type="number"
                  value={pricing?.reservation || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, reservation: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <span>Solde</span>
              <label>
                <input
                  type="number"
                  value={pricing?.sold || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, sold: e.target.value })
                  }
                />{" "}
                <i className="line"></i> %
              </label>
              <div className="line"></div> <span>Followed up</span>
              <label>
                <input
                  type="number"
                  value={pricing?.followUp || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, followUp: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <div className="line"></div> <span>After sell done</span>
              <label>
                <input
                  type="number"
                  value={pricing?.aftersail || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, aftersail: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <div className="line"></div> <span>Lead Cost</span>
              <label>
                <input
                  type="number"
                  value={pricing?.leadCost || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, leadCost: e.target.value })
                  }
                />{" "}
                <i className="line"></i> $
              </label>
              <div className="line"></div> <span>Max CCAs</span>
              <label>
                <input
                  type="number"
                  value={pricing?.maxCCAs || 0}
                  onChange={(e) =>
                    setPricing({ ...pricing, maxCCAs: e.target.value })
                  }
                />
                <i className="line"></i>
              </label>
            </div>

            <button
              type="submit"
              onClick={(e) => {
                handleUpdatePriceTag(e);
                navigate("/bo");
              }}
            >
              Update
            </button>
          </div>
        </div>
      )}