add form
Tags: webdev
Published: 2023-10-23 19:35:15

```
"use client";
import * as z from "zod";
import { Heading } from "@/components/common/heading";
import { ShoppingBag } from "lucide-react";
import React, { useEffect, useState } from "react";
import { set, useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import MultiSelect from "@/components/common/react-select";
import Select from "react-select";

interface SizeOptionsI {
  value: string;
  label: string;
}

const sizeOptions = [
  { value: "S", label: "Small" },
  { value: "M", label: "Medium" },
  { value: "L", label: "Large" },
  { value: "XL", label: "Xtra Large" },
];

const categoryOptions = [
  { value: "Tshirt", label: "Tshirt" },
  { value: "Men collection", label: "Men collection" },
];
const isReturnOptions = [
  { value: false, label: "No" },
  { value: true, label: "Yes" },
];
const isCancelableOptions = [
  { value: false, label: "No" },
  { value: true, label: "Yes" },
];

export interface ProductI {
  images: string[];
  size: any;
  title: string;
  price: string;
  originalPrice: string;
  description: string;
  category: string;
  discount: string;
  staus: boolean;
  madeIn: string;
  manufacturer: string;
  isReturnable: boolean;
  isCancelable: boolean;
}

const ProductPage = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: "",
    },
  });
  let isMulti: any;
  const [selectedOption, setSelectedOption] = useState<any>(null);
  const [isReturnable, setIsReturnable] = useState<any>(false);
  const [isCancelable, setIsCancelable] = useState<any>(false);
  const [selectedCategoryOption, setSelectedCategoryOption] =
    useState<any>(null);
  const transFormSize: any = selectedOption?.map((el: any) => {
    return el.value;
  });

  // const transFormCategory: any = selectedCategoryOption?.map((el: any) => {
  //   return el.value;
  // });
  console.log("isReturnable", isReturnable);

  const defaultValue: ProductI = {
    images: [],
    size: transFormSize,
    title: "",
    price: "",
    originalPrice: "",
    description: "",
    category: "",
    discount: "0",
    staus: true,
    madeIn: "",
    manufacturer: "",
    isReturnable: false,
    isCancelable: isCancelable,
  };

  const [formData, setFormData] = useState<any>(defaultValue);
  const [finalPrice, setFinalPrice] = useState<any>("");

  const isLoading = form.formState.isSubmitting;

  const handleOnChange = (e: any) => {
    const { name, value } = e.target;
    setFormData((pre: ProductI) => ({
      ...pre,
      [name]: value,
    }));
  };

  const calculateFinalPrice = (mrp: any, percentage: any) => {
    return (mrp * percentage) / 100;
  };

  const discountPrice = calculateFinalPrice(
    formData.originalPrice,
    formData.discount
  );

  const onSubmitHandle = (e: any) => {
    e.preventDefault();
    if (defaultValue?.size === undefined) {
      return alert("Please select size");
    }
    if (defaultValue?.category === undefined) {
      return alert("Please select category");
    }
    formData.size = transFormSize;
    formData.category = selectedCategoryOption?.value;
    formData.price = finalPrice;
    formData.isReturnable = isReturnable.value;
    formData.isCancelable = isCancelable.value;
    console.log("formData", formData);
  };

  useEffect(() => {
    if (formData.originalPrice) {
      setFinalPrice(formData.originalPrice - discountPrice);
    }
  }, [discountPrice]);

  return (
    <div>
      <Heading
        title="Product"
        description="Our most all product listed here"
        icon={ShoppingBag}
        iconColor="text-violet-500"
        bgColor="bg-violet-500/10"
      />
      <div className="px-4 lg:px-8">
        <div>
          <Form {...form}>
            <form
              onSubmit={onSubmitHandle}
              className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-6 gap-2"
            >
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    name="title"
                    value={formData.title}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    disabled={isLoading}
                    placeholder="Enter product name"
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <div>
                    <label
                      htmlFor="message"
                      className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Enter product description
                    </label>
                    <textarea
                      id="description"
                      rows={4}
                      name="description"
                      value={formData.description}
                      onChange={handleOnChange}
                      className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Product description here..."
                      defaultValue={""}
                    />
                  </div>

                  {/* <Input
                    type="texarea"
                    name="description"
                    value={formData.description}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    disabled={isLoading}
                    placeholder="Enter product description"
                  /> */}
                </FormControl>
              </FormItem>
              <FormControl className="m-0 p-0">
                <Input
                  type="number"
                  name="originalPrice"
                  value={formData.originalPrice}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  placeholder="M.R.P."
                />
              </FormControl>
              <FormControl className="m-0 p-0">
                <Input
                  name="discount"
                  value={`${formData.discount}`}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  placeholder="Enter discount %"
                />
              </FormControl>
              <FormControl className="m-0 p-0">
                <Input
                  name="price"
                  value={finalPrice || 0}
                  onChange={() =>
                    setFinalPrice(formData.originalPrice - discountPrice)
                  }
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  disabled={true}
                  placeholder="Final price"
                />
              </FormControl>

              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <MultiSelect
                    // instanceId="long-value-select"
                    sizeOptions={sizeOptions}
                    selectedOption={selectedOption}
                    setSelectedOption={setSelectedOption}
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Select
                    defaultValue={selectedCategoryOption}
                    onChange={setSelectedCategoryOption}
                    options={categoryOptions}
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <Input
                  name="manufacturer"
                  value={formData.manufacturer}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  disabled={isLoading}
                  placeholder="Enter manufacturer name"
                />
              </FormItem>
              <label>Is Returnable</label>
              <FormItem className="col-span-12 lg:col-span-10">
                <Select
                  defaultValue={isReturnable}
                  onChange={setIsReturnable}
                  options={isReturnOptions}
                />
              </FormItem>

              <FormItem className="col-span-12 lg:col-span-10">
                <label
                  htmlFor="cancel"
                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                >
                  Is Cancellable
                </label>
                <Select
                  defaultValue={isCancelable}
                  onChange={setIsCancelable}
                  options={isCancelableOptions}
                />
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    name="madeIn"
                    value={formData.madeIn}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    placeholder="Enter made in name"
                  />
                </FormControl>
              </FormItem>
              {/* <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    name="manufacturer"
                    value={formData.manufacturer}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    placeholder="Enter manufacturer/brand name"
                  />
                </FormControl>
              </FormItem> */}

              <Button
                className="col-span-3 lg:col-span-1 w-full"
                disabled={isLoading}
              >
                Add Product
              </Button>
              <Button
                onClick={() => setFormData(defaultValue)}
                className="col-span-3 lg:col-span-1 w-full bg-red-500"
                disabled={isLoading}
              >
                Reset
              </Button>
            </form>
          </Form>

          {/* <ProductAddForm /> */}
        </div>
        <div className="space-y-4 mt-4">Message conent</div>
      </div>
    </div>
  );
};

export default ProductPage;

```

## 2

```
"use client";
import * as z from "zod";
import { Heading } from "@/components/common/heading";
import { ShoppingBag } from "lucide-react";
import React, { useEffect, useState } from "react";
import { set, useForm } from "react-hook-form";
import { formSchema } from "./constants";
import { zodResolver } from "@hookform/resolvers/zod";
import { Form, FormControl, FormField, FormItem } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import MultiSelect from "@/components/common/react-select";
import Select from "react-select";
import { addProductAPI } from "@/utils";

interface SizeOptionsI {
  value: string;
  label: string;
}

const sizeOptions = [
  { value: "S", label: "Small" },
  { value: "M", label: "Medium" },
  { value: "L", label: "Large" },
  { value: "XL", label: "Xtra Large" },
  { value: "XXL", label: "Xtra Xtra Large" },
];

const categoryOptions = [
  { value: "Tshirt", label: "Tshirt" },
  { value: "Men collection", label: "Men collection" },
];
const isReturnOptions = [
  { value: false, label: "No" },
  { value: true, label: "Yes" },
];
const isCancelableOptions = [
  { value: false, label: "No" },
  { value: true, label: "Yes" },
];

export interface ProductI {
  images: string[];
  size: any;
  stock: any;
  color: any;
  title: string;
  price: string;
  originalPrice: string;
  description: string;
  category: string;
  discount: string;
  staus: boolean;
  madeIn: string;
  manufacturer: string;
  isReturnable: boolean;
  isCancelable: boolean;
}

const ProductPage = () => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      prompt: "",
    },
  });

  const [selectedOption, setSelectedOption] = useState<any>(null);
  const [isReturnable, setIsReturnable] = useState<any>(false);
  const [isCancelable, setIsCancelable] = useState<any>(false);
  const [img, setImg] = useState<any>([]);
  const [colors, setColors] = useState<any>([]);
  const [stocks, setStocks] = useState<any>([]);
  const [selectedCategoryOption, setSelectedCategoryOption] =
    useState<any>(null);
  const transFormSize: any = selectedOption?.map((el: any) => {
    return el.value;
  });

  // const transFormCategory: any = selectedCategoryOption?.map((el: any) => {
  //   return el.value;
  // });

  const defaultValue: ProductI = {
    images: [],
    size: transFormSize,
    stock: [],
    color: [],
    title: "",
    price: "",
    originalPrice: "",
    description: "",
    category: "",
    discount: "0",
    staus: true,
    madeIn: "",
    manufacturer: "",
    isReturnable: false,
    isCancelable: isCancelable,
  };

  const [formData, setFormData] = useState<any>(defaultValue);
  const [finalPrice, setFinalPrice] = useState<any>("");

  const isLoading = form.formState.isSubmitting;

  const handleOnChange = (e: any) => {
    const { name, value } = e.target;
    setFormData((pre: ProductI) => ({
      ...pre,
      [name]: value,
    }));
  };

  const calculateFinalPrice = (mrp: any, percentage: any) => {
    return (mrp * percentage) / 100;
  };

  const discountPrice = calculateFinalPrice(
    formData.originalPrice,
    formData.discount
  );

  const handleOnChangeIMG = (e: any) => {
    const imgString = e.target.value;
    setImg(imgString ? imgString.split(" ") : []);
  };
  const handleOnChangeClr = (e: any) => {
    const clrString = e.target.value;
    setColors(clrString ? clrString.split(" ") : []);
  };

  const ss: any = [];

  // const handleOnChangeStock = (e: any) => {
  //   const v = e.target.value;
  //   const stC = stocks.map((stock: any) => {
  //     console.log("ss: ", stock);

  //     if (stock === stock) {
  //       return stock;
  //     }
  //   });
  //   console.log("stC", stC);

  //   setStocks((pre: any) => [...pre, v]);
  // };

  const handleOnChangeStock = (e: any) => {
    const v = e.target.value;
    selectedOption.map((size: SizeOptionsI) => {
      if (size.value === "S") {
        return stocks.push(v);
      }
      if (size.value === "M") {
        return stocks.push(v);
      }
      if (size.value === "L") {
        return stocks.push(v);
      }
    });
  };

  console.log("handleOnChangeStock", stocks);

  const onSubmitHandle = async (e: any) => {
    e.preventDefault();
    if (defaultValue?.size === undefined) {
      return alert("Please select size");
    }
    if (defaultValue?.category === undefined) {
      return alert("Please select category");
    }
    formData.size = transFormSize;
    formData.category = selectedCategoryOption?.value;
    formData.price = finalPrice;
    formData.isReturnable = isReturnable.value;
    formData.isCancelable = isCancelable.value;
    formData.images = img;
    formData.color = colors && colors;
    // formData.stock = stocks;

    console.log("formData", formData);

    return;
    const result = await addProductAPI(formData);
    if (result) {
      alert(result.message);
    } else {
      alert("something went wrong!");
    }
    // console.log("formData", formData);
  };

  useEffect(() => {
    if (formData.originalPrice) {
      setFinalPrice(formData.originalPrice - discountPrice);
    }
  }, [discountPrice]);

  return (
    <div>
      <Heading
        title="Add Product"
        description="Add product here"
        icon={ShoppingBag}
        iconColor="text-violet-500"
        bgColor="bg-violet-500/10"
      />
      <div className="px-4 lg:px-8">
        <div>
          <Form {...form}>
            <form
              onSubmit={onSubmitHandle}
              className="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-6 gap-2"
            >
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    name="title"
                    value={formData.title}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    disabled={isLoading}
                    placeholder="Enter product name"
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <div>
                    <label
                      htmlFor="message"
                      className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Enter product description
                    </label>
                    <textarea
                      id="description"
                      rows={4}
                      name="description"
                      value={formData.description}
                      onChange={handleOnChange}
                      className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Product description here..."
                      defaultValue={""}
                    />
                  </div>

                  {/* <Input
                    type="texarea"
                    name="description"
                    value={formData.description}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    disabled={isLoading}
                    placeholder="Enter product description"
                  /> */}
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <div>
                    <label
                      htmlFor="message"
                      className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Enter color by space: eg: white red blue
                    </label>
                    <textarea
                      id="clr"
                      rows={2}
                      name="color"
                      // value={formData.images}
                      onChange={handleOnChangeClr}
                      className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Color eg: white red blue"
                      defaultValue={""}
                    />
                  </div>
                </FormControl>
              </FormItem>
              <FormControl className="m-0 p-0">
                <Input
                  type="number"
                  name="originalPrice"
                  value={formData.originalPrice}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  placeholder="M.R.P."
                  maxLength={5}
                />
              </FormControl>
              <FormControl className="m-0 p-0">
                <Input
                  name="discount"
                  value={`${formData.discount}`}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  placeholder="Enter discount %"
                  maxLength={2}
                />
              </FormControl>
              <FormControl className="m-0 p-0">
                <Input
                  name="price"
                  value={finalPrice || 0}
                  onChange={() =>
                    setFinalPrice(formData.originalPrice - discountPrice)
                  }
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  disabled={true}
                  placeholder="Final price"
                />
              </FormControl>
              <FormItem className="col-span-12 lg:col-span-10">
                <label
                  htmlFor="message"
                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                >
                  Select size
                </label>
                <FormControl className="m-0 p-0">
                  <MultiSelect
                    // instanceId="long-value-select"
                    sizeOptions={sizeOptions}
                    selectedOption={selectedOption}
                    setSelectedOption={setSelectedOption}
                  />
                </FormControl>
              </FormItem>

              {/* stock */}

              {selectedOption?.map((sizeOption: SizeOptionsI) => {
                if (sizeOption.value === "S") {
                  return (
                    <FormControl className="m-0 p-0">
                      <Input
                        name="stock"
                        // value={formData.stock}
                        onChange={handleOnChangeStock}
                        className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        placeholder="Small stock eg: 1"
                        maxLength={2}
                      />
                    </FormControl>
                  );
                }
                if (sizeOption.value === "M") {
                  return (
                    <FormControl className="m-0 p-0">
                      <Input
                        name="stock"
                        // value={formData.stock}
                        onChange={handleOnChangeStock}
                        className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        placeholder="Medium stock eg: 2"
                        maxLength={2}
                      />
                    </FormControl>
                  );
                }
                if (sizeOption.value === "L") {
                  return (
                    <FormControl className="m-0 p-0">
                      <Input
                        name="stock"
                        // value={formData.stock}
                        onChange={handleOnChangeStock}
                        className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        placeholder="Large stock eg: 3"
                        maxLength={2}
                      />
                    </FormControl>
                  );
                }
                if (sizeOption.value === "XL") {
                  return (
                    <FormControl className="m-0 p-0">
                      <Input
                        name="stock"
                        // value={formData.stock}
                        onChange={handleOnChangeStock}
                        className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        placeholder="Xtra Large stock eg: 4"
                        maxLength={2}
                      />
                    </FormControl>
                  );
                }
                if (sizeOption.value === "XXL") {
                  return (
                    <FormControl className="m-0 p-0">
                      <Input
                        name="stock"
                        // value={formData.stock}
                        onChange={handleOnChangeStock}
                        className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                        placeholder="Xtra Xtra Large stock eg: 5"
                        maxLength={2}
                      />
                    </FormControl>
                  );
                }
              })}

              <FormItem className="col-span-12 lg:col-span-10">
                <label
                  htmlFor="message"
                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                >
                  Select Category
                </label>
                <FormControl className="m-0 p-0">
                  <Select
                    defaultValue={selectedCategoryOption}
                    onChange={setSelectedCategoryOption}
                    options={categoryOptions}
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <Input
                  name="manufacturer"
                  value={formData.manufacturer}
                  onChange={handleOnChange}
                  className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                  disabled={isLoading}
                  placeholder="Enter manufacturer name"
                />
              </FormItem>
              <label>Is Returnable</label>
              <FormItem className="col-span-12 lg:col-span-10">
                <Select
                  defaultValue={isReturnable}
                  onChange={setIsReturnable}
                  options={isReturnOptions}
                />
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <label
                  htmlFor="cancel"
                  className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                >
                  Is Cancellable
                </label>
                <Select
                  defaultValue={isCancelable}
                  onChange={setIsCancelable}
                  options={isCancelableOptions}
                />
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <Input
                    name="madeIn"
                    value={formData.madeIn}
                    onChange={handleOnChange}
                    className="border-1 border p-6 outline-none focus-visible:ring-0 focus-visible:ring-transparent"
                    placeholder="Enter made in name"
                  />
                </FormControl>
              </FormItem>
              <FormItem className="col-span-12 lg:col-span-10">
                <FormControl className="m-0 p-0">
                  <div>
                    <label
                      htmlFor="message"
                      className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
                    >
                      Paste product image
                    </label>
                    <textarea
                      id="img"
                      rows={4}
                      name="images"
                      // value={formData.images}
                      onChange={handleOnChangeIMG}
                      className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                      placeholder="Product description here..."
                      defaultValue={""}
                    />
                  </div>
                </FormControl>
              </FormItem>
              <Button
                className="col-span-3 lg:col-span-1 w-full"
                disabled={isLoading}
              >
                Add Product
              </Button>
              <Button
                onClick={() => setFormData(defaultValue)}
                className="col-span-3 lg:col-span-1 w-full bg-red-500"
                disabled={isLoading}
              >
                Reset
              </Button>
            </form>
          </Form>

          {/* <ProductAddForm /> */}
        </div>
        <div className="space-y-4 mt-4">Message conent</div>
      </div>
    </div>
  );
};

export default ProductPage;

```

## 3 apicall

```
export const addProductAPI = async (data: any) => {
  const endPoint = "http://fashionneedles.in/api/product"
  try {
    const res = await fetch(endPoint, {
      method: "POST",
      mode: "cors",
      cache: "no-cache",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data)
    });
    const result = await res.json();
    console.log('utils', result);
    return result;

  } catch (err) {
    console.log('error fetching products==>', err);

  }
};
```