admin/src/views/Products/Productcomponents/ProductDetails.js

import axios from "axios";
import React from "react";
import swal from "sweetalert";
import { isAutheticated } from "src/auth";

const ProductDetails = (props) => {
  const token = isAutheticated();
  const { data, setData } = props.data;
  const { productId, setProductId } = props.ProductId;
  const { loading, setLoading } = props.loading;
  const taxes = props.taxes;

  const categories = props?.categories || [];

  const handleChange = (e) => {
    if (e.target.id === "master_price" && /^\D+$/.test(e.target.value)) return;
    if (e.target.id === "discontinue_on") {
      if (new Date(e.target.value) < new Date()) {
        return setData((prev) => ({
          ...prev,
          [e.target.id]: new Date().toISOString().slice(0, 10),
        }));
      }
    }
    setData((prev) => ({ ...prev, [e.target.id]: e.target.value }));
  };

  const handleSubmit = () => {
    if (
      data.name.trim() === "" ||
      data.master_price === "" ||
      data.master_GST === "" ||
      data.category === "" ||
      data.description === "" ||
      data.product_Status === ""
      //   data.sku === "" ||
      //   data.hsn_code === ""
    ) {
      swal({
        title: "Warning",
        text: "Fill all mandatory fields",
        icon: "warning",
        button: "Return",
      });
      return;
    }
    setLoading(true);
    axios
      .post(
        `/api/product/create/`,
        { ...data, product_id: productId },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`,
          },
        }
      )
      .then((res) => {
        swal({
          title: "Saved",
          text: "Product details saved successfully!",
          icon: "success",
          button: "Close",
        });
        setProductId(res.data.product_id);
        setLoading(false);
      })
      .catch((err) => {
        const msg = err?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Warning",
          text: msg,
          icon: "warning",
          button: "Close",
        });
        setLoading(false);
      });
  };

  return (
    <>
      <div className="d-flex justify-content-between">
        <h5>Product Details</h5>
        <button
          className="btn btn-primary btn-sm"
          type="button"
          onClick={() => handleSubmit()}
          disabled={loading}
        >
          {loading ? "Loading" : "Save Details"}
        </button>
      </div>
      <div className="mb-3">
        <label htmlFor="product" className="form-label">
          Product Name*
        </label>
        <input
          type="text"
          className="form-control"
          id="name"
          value={data.name}
          maxLength="50"
          onChange={(e) => handleChange(e)}
        />
      </div>
      <div className="mb-3 row">
        <div className="col-lg-6 ">
          <label htmlFor="product" className="form-label">
            Category *
          </label>
          <select
            id="category"
            onChange={(e) => handleChange(e)}
            className="form-control"
            value={data.category}
          >
            <option value="">---select---</option>
            {categories ? (
              categories.map((item, index) => (
                <option value={item._id} key={index}>
                  {item.categoryName}
                </option>
              ))
            ) : (
              <option value="" disabled>
                Add Category to select
              </option>
            )}
          </select>
        </div>

        <div className="col-lg-6">
          <label htmlFor="title" className="form-label">
            Product Status *
          </label>{" "}
          <select
            className="form-control"
            name="product_Status"
            id="product_Status"
            value={data.product_Status}
            onChange={(e) => handleChange(e)}
          >
            <option value="">--Select--</option>
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        </div>
      </div>
      <div className="mb-3 row">
        <div className="col-lg-6">
          <label htmlFor="product" className="form-label">
            Master Price*
          </label>
          <input
            type="text"
            className="form-control"
            placeholder=""
            id="master_price"
            name="master_price"
            value={data.master_price}
            maxLength="6"
            onChange={(e) => handleChange(e)}
          />
        </div>
        <div className="col-lg-6 ">
          <label htmlFor="product" className="form-label">
            Master GST *
          </label>
          <select
            name="master_GST"
            // value={r.gst_Id?._id ? r.gst_Id?._id : r.gst_Id}
            value={data?.master_GST}
            onChange={(e) => handleChange(e)}
            id="master_GST"
            className="form-control"
          >
            <option value="">---select---</option>
            {taxes &&
              taxes.map((item, index) => (
                <option value={item._id} key={index}>
                  {item.tax} %{item.name}
                </option>
              ))}
          </select>
        </div>
      </div>
      <div className="mb-3">
        <label htmlFor="product" className="form-label">
          Description*
        </label>
        <textarea
          className="form-control"
          id="description"
          placeholder="Text..."
          value={data.description}
          onChange={(e) => handleChange(e)}
        />
      </div>
      {/* <div className="mb-3 row">
        <div className="col-6">
          <label htmlFor="hsc_code" className="form-label">
            HSN Code*
          </label>
          <input
            type="text"
            className="form-control"
            id="hsn_code"
            value={data.hsn_code}
            maxLength="50"
            onChange={(e) => handleChange(e)}
          />
        </div>
      </div> */}
      <div className="mb-3">
        <label htmlFor="product" className="form-label">
          Special Instructions
        </label>
        <textarea
          className="form-control"
          placeholder="Text..."
          style={{
            whiteSpace: "pre-wrap",
            minHeight: "100px",
            overflowWrap: "break-word",
          }}
          value={data.special_instructions}
          onChange={handleChange}
          id="special_instructions"
        />
      </div>
      {/* <div className="mb-3">
        <label>Discontinue On*</label>
        <input
          type="date"
          value={data.discontinue_on}
          id="discontinue_on"
          onChange={(e) => handleChange(e)}
          className="form-control"
          min={new Date().toISOString().slice(0, 10)}
        />
      </div> */}

      {/* <div className=" mb-3">
        <label htmlFor="title" className="form-label">
          Product Status *
        </label>{" "}
        <select
          className="form-control"
          name="product_Status"
          id="product_Status"
          value={data.product_Status}
          onChange={(e) => handleChange(e)}
        >
          <option value="">--Select--</option>
          <option value="Active">Active</option>
          <option value="Inactive">Inactive</option>
        </select>
      </div> */}
    </>
  );
};

export default ProductDetails;