ok

2024-10-11 23:40:48 +00:00
parent 30f53e8d97
commit 4dd12f3835
9 changed files with 416 additions and 264 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -423,7 +423,7 @@ function App() {
                <CafePage
                  table={table}
                  sendParam={handleSetParam}
-                  welcomePageConfig={shop.welcomePageConfig}
+                  welcomePageConfig={shop.welcomePageConfig || false}
                  shopName={shop.name}
                  shopOwnerId={shop.ownerId}
                  shopItems={shopItems}
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -15,9 +15,11 @@ import {
  deleteItemType,
 } from "../helpers/itemHelper.js";
 import ItemType from "./ItemType.js";
+import { createItemType } from "../helpers/itemHelper.js";

 const ItemLister = ({
  itemTypeId,
+  typeVisibility=true,
  refreshTotal,
  shopId,
  shopOwnerId,
@@ -28,11 +30,12 @@ const ItemLister = ({
  forCart,
  forInvoice,
  isEditMode,
-  raw,
  handleCreateItem,
  handleUpdateItem,
+  handleUnEdit,
  beingEditedType,
  setBeingEditedType,
+  alwaysEdit,
 }) => {
  const [items, setItems] = useState(
    itemList.map((item) => ({
@@ -50,11 +53,14 @@ const ItemLister = ({
    );
  }, [itemList]);

-  const [isEdit, setIsEditing] = useState(false);
-  const [onEditItem, setOnEditItem] = useState(0);
-  const [isAddingNewItem, setIsAddingNewItem] = useState(false);
+  const [isVisible, setIsVisible] = useState(typeVisibility);
+  const [isEdit, setIsEditing] = useState(alwaysEdit);
+  const [isEditItem, setisEditItem] = useState(0);
+  const [isAddingNewItem, setIsAddingNewItem] = useState(alwaysEdit);
  const [editedTypeName, setEditedTypeName] = useState(typeName);
  const typeNameInputRef = useRef(null);
+  const [itemsToCreate, setItemsToCreate] = useState([]);
+  const [itemsToUpdate, setItemsToUpdate] = useState([]);

  const handlePlusClick = (itemId) => {
    const updatedItems = items.map((item) => {
@@ -103,15 +109,6 @@ const ItemLister = ({
    setIsEditing((prev) => !prev);
  };

-  const handleSaveType = async () => {
-    try {
-      await updateItemType(shopId, itemTypeId, typeNameInputRef.current.value);
-      setIsEditing(false);
-    } catch (error) {
-      console.error("Failed to save item type:", error);
-    }
-  };
-
  const handleRemoveType = async () => {
    try {
      await deleteItemType(shopId, itemTypeId);
@@ -125,22 +122,80 @@ const ItemLister = ({
  useEffect(() => {
    if (beingEditedType == itemTypeId) return;

-    setOnEditItem(0);
+    setisEditItem(0);
    setIsAddingNewItem(false);
  }, [beingEditedType]);

  const toggleAddNewItem = () => {
    setBeingEditedType(itemTypeId);
    setIsAddingNewItem((prev) => !prev);
-    setOnEditItem(0);
+    setisEditItem(0);
  };
  const editItem = (itemId) => {
    setBeingEditedType(itemTypeId);
    setIsAddingNewItem(false);
-    setOnEditItem(itemId);
+    setisEditItem(itemId);
  };
-  const handleChange = async (itemId) => {
-    // Find the item in the current items array
+
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(getImageUrl(typeImage));
+  // useEffect(() => {
+  //   if (!selectedImage) {
+  //     setPreviewUrl(getImageUrl(typeImage));
+  //   } else {
+  //     setPreviewUrl(selectedImage);
+  //   }
+  //   console.log(selectedImage);
+  // }, [selectedImage]);
+
+  const handleImageChange = (previewUrl, selectedImage) => {
+    setSelectedImage(selectedImage);
+    console.log(selectedImage);
+    setPreviewUrl(previewUrl);
+  };
+
+  const onCreateItem = (itemName, itemPrice, selectedImage, previewUrl) => {
+    if (isEdit)
+      setItemsToCreate((prevItems) => [
+        ...prevItems,
+        {
+          itemId: -(prevItems.length + 1),
+          name: itemName,
+          price: itemPrice,
+          selectedImage,
+          image: previewUrl,
+        },
+      ]);
+    else handleCreateItem(itemTypeId, itemName, itemPrice, selectedImage);
+
+    console.log(items);
+    console.log(itemsToCreate);
+
+    setIsAddingNewItem(false);
+  };
+  const updateItemInCreate = (
+    itemId,
+    name,
+    price,
+    selectedImage,
+    previewUrl
+  ) => {
+    setItemsToCreate((prevItems) =>
+      prevItems.map((item) =>
+        item.itemId === itemId
+          ? { ...item, name, price, selectedImage, image: previewUrl }
+          : item
+      )
+    );
+  };
+  const onUpdateItem = (itemId, name, price, image) => {
+    if (isEdit)
+      setItemsToUpdate((prev) => [...prev, { itemId, name, price, image }]);
+    else handleUpdateItem(itemId, name, price, image);
+    console.log(itemsToUpdate);
+  };
+
+  const handleChange = (itemId) => {
    console.log(itemId);
    const itemIndex = items.findIndex((item) => item.itemId === itemId);
    if (itemIndex === -1) return; // Item not found
@@ -159,13 +214,33 @@ const ItemLister = ({
    // Update the state with the local change
    setItems(updatedItems);

-    try {
-      // Wait for the updateItemAvailability response
-      const response = await updateItemAvalilability(itemId, newAvailability);
+    if (isEdit) {
+      // If isEdit, add item to the list of items to update
+      setItemsToUpdate((prev) => [...prev, { itemId, newAvailability }]);
+    } else {
+      // If not isEdit, immediately execute the update
+      executeUpdateAvailability(
+        itemId,
+        newAvailability,
+        updatedItems,
+        itemIndex
+      );
+    }
+    console.log(itemsToUpdate);
+  };

-      // Assuming response contains the updated item data
+  const executeUpdateAvailability = async (
+    itemId,
+    newAvailability,
+    updatedItems,
+    itemIndex
+  ) => {
+    try {
+      console.log(itemId + newAvailability);
+      const response = await updateItemAvalilability(itemId, newAvailability);
      const updatedItem = response;
      console.log(updatedItem);
+
      // Update only the specified item in the state
      setItems((prevItems) =>
        prevItems.map((prevItem) =>
@@ -173,31 +248,85 @@ const ItemLister = ({
        )
      );
    } catch (error) {
-      // Handle error (e.g., revert the change or show an error message)
      console.error("Error updating item availability:", error);
-
-      // Optionally revert to the previous availability if needed
-      updatedItems[itemIndex].availability = item.availability; // revert back
+      updatedItems[itemIndex].availability = !newAvailability; // revert back
      setItems(updatedItems);
    }
  };
-  const onCreateItem = (itemName, itemPrice, selectedImage, previewUrl) => {
-    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
-    setIsAddingNewItem(false);
-  };
-  console.log(getImageUrl(typeImage));
-  const [selectedImage, setSelectedImage] = useState(null);
-  const [previewUrl, setPreviewUrl] = useState("");
-  useEffect(() => {
-    if (selectedImage) {
-      setPreviewUrl(selectedImage);
-    } else {
-      setPreviewUrl(getImageUrl(typeImage));
+
+  const handleSaveType = async () => {
+    try {
+      console.log(isVisible);
+      if (itemTypeId) {
+        await updateItemType(
+          shopId,
+          itemTypeId,
+          typeNameInputRef.current.value,
+          previewUrl,
+          selectedImage,
+          isVisible
+        );
+
+        // Iterate through itemsToUpdate and call the API
+        for (const {
+          itemId,
+          newAvailability,
+          name,
+          price,
+          image,
+        } of itemsToUpdate) {
+          if (newAvailability != undefined)
+            await executeUpdateAvailability(
+              itemId,
+              newAvailability,
+              items,
+              items.findIndex((item) => item.itemId === itemId)
+            );
+          else await handleUpdateItem(itemId, name, price, image);
+        }
+        for (const { name, price, selectedImage } of itemsToCreate) {
+          handleCreateItem(itemTypeId, name, price, selectedImage);
+        }
+      } else {
+        const itemType = await createItemType(
+          shopId,
+          editedTypeName,
+          selectedImage
+        );
+        console.log(itemType);
+        for (const { name, price, selectedImage } of itemsToCreate) {
+          handleCreateItem(itemType.itemTypeId, name, price, selectedImage);
+        }
+      }
+      // Clear the itemsToUpdate after saving
+      setItemsToUpdate([]);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Failed to save item type:", error);
    }
-  }, [selectedImage]);
-  const handleImageChange = (e) => {
-    setSelectedImage(e);
  };
+
+  const resetItems = () => {
+    // Create a copy of the current items to revert
+    const updatedItems = [...items];
+
+    // Iterate over itemsToUpdate and reset the availability
+    itemsToUpdate.forEach(({ itemId, newAvailability }) => {
+      const itemIndex = updatedItems.findIndex(
+        (item) => item.itemId === itemId
+      );
+      if (itemIndex !== -1) {
+        updatedItems[itemIndex].availability = !newAvailability; // revert back to original
+      }
+    });
+
+    // Update the items state and clear itemsToUpdate
+    setItems(updatedItems);
+    setItemsToUpdate([]);
+    setIsEditing(false);
+    if (handleUnEdit) handleUnEdit();
+  };
+
  return (
    <>
      {(items.length > 0 ||
@@ -206,117 +335,168 @@ const ItemLister = ({
          className={`${styles["item-lister"]} ${
            isEdit ? styles["fullscreen"] : ""
          }`}
-          style={{ paddingBottom: isEdit ? "25vh" : "" }}
+          style={{ paddingBottom: isEdit ? "28vh" : "" }}
        >
-          {!raw && (
-            <div className={styles["title-container"]}>
-              {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
-              <input
-                ref={typeNameInputRef}
-                className={`${styles.title} ${
-                  isEdit ? styles.border : styles.noborder
-                }`}
-                value={editedTypeName}
-                onChange={(e) => setEditedTypeName(e.target.value)}
-                disabled={!isEdit}
-              />
-              {isEditMode && !isEdit && (
-                <>
-                  <button
-                    className={styles["edit-typeItem-button"]}
-                    onClick={toggleEditTypeItem}
-                  >
-                    Edit
-                  </button>
-                </>
-              )}
-            </div>
-          )}
+          <div className={styles["title-container"]}>
+            {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
+            <input
+              ref={typeNameInputRef}
+              className={`${styles.title} ${
+                isEdit ? styles.border : styles.noborder
+              }`}
+              value={editedTypeName}
+              onChange={(e) => setEditedTypeName(e.target.value)}
+              disabled={!isEdit}
+            />
+            {isEditMode && !isEdit && (
+              <>
+                <button
+                  className={styles["edit-typeItem-button"]}
+                  onClick={toggleEditTypeItem}
+                >
+                  Edit
+                </button>
+              </>
+            )}
+          </div>
          {isEdit && (
            <div className={styles["grid-container"]}>
              <ItemType
                rectangular={true}
                blank={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/addnew.png")}
              />
-              {typeImage != null && !previewUrl.includes(typeImage) && (
+              {/* {typeImage != null && !previewUrl.includes(typeImage) && (
                <ItemType
                  rectangular={true}
-                  onClick={(e) => handleImageChange(e)}
+                  onClick={(previewUrl, selectedImage) =>
+                    handleImageChange(previewUrl, selectedImage)
+                  }
                  imageUrl={getImageUrl(typeImage)}
                />
-              )}
+              )} */}

              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
+                imageUrl={getImageUrl("uploads/beverage4.jpg")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/beverage1.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/beverage2.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/beverage3.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
+                imageUrl={getImageUrl("uploads/snack5.jpg")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/dessert1.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/dessert2.jpg")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
+                imageUrl={getImageUrl("uploads/food4.jpg")}
+              />
+              <ItemType
+                rectangular={true}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/food1.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/food2.jpg")}
              />

              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/food3.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/packet1.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/packet2.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/snack1.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/snack2.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/snack3.png")}
              />
              <ItemType
                rectangular={true}
-                onClick={(e) => handleImageChange(e)}
+                onClick={(previewUrl, selectedImage) =>
+                  handleImageChange(previewUrl, selectedImage)
+                }
                imageUrl={getImageUrl("uploads/snack4.png")}
              />
            </div>
@@ -355,10 +535,11 @@ const ItemLister = ({
                  )}
                </>
              )}
-            {items.map((item) => {
+
+            {itemsToCreate.map((item) => {
              return !forCart || (forCart && item.qty > 0) ? (
                <>
-                  {onEditItem == item.itemId && (
+                  {isEditItem == item.itemId && (
                    <button
                      className={styles["add-item-button"]}
                      onClick={() => editItem(0)}
@@ -368,7 +549,59 @@ const ItemLister = ({
                    </button>
                  )}
                  <div className={styles["itemWrapper"]}>
-                    {isEditMode && onEditItem != item.itemId && (
+                    {isEditMode && isEditItem != item.itemId && (
+                      <div className={styles["editModeLayout"]}>
+                        {isEditMode && (
+                          <Switch
+                            onChange={() => handleChange(item.itemId)}
+                            checked={item.availability}
+                          />
+                        )}
+                        <h3>
+                          {item.availability ? "available" : "unavailable"}
+                        </h3>
+                        <button onClick={() => editItem(item.itemId)}>
+                          edit
+                        </button>
+                      </div>
+                    )}
+
+                    <Item
+                      key={item.itemId}
+                      forCart={forCart}
+                      forInvoice={forInvoice}
+                      name={item.name}
+                      price={item.price}
+                      qty={item.qty}
+                      imageUrl={item.image}
+                      onPlusClick={() => handlePlusClick(item.itemId)}
+                      onNegativeClick={() => handleNegativeClick(item.itemId)}
+                      onRemoveClick={() => handleRemoveClick(item.itemId)}
+                      isBeingEdit={isEditItem == item.itemId}
+                      isAvailable={item.availability}
+                      handleUpdateItem={(name, price, image) =>
+                        updateItemInCreate(item.itemId, name, price, image)
+                      }
+                    />
+                  </div>
+                </>
+              ) : null;
+            })}
+
+            {items.map((item) => {
+              return !forCart || (forCart && item.qty > 0) ? (
+                <>
+                  {isEditItem == item.itemId && (
+                    <button
+                      className={styles["add-item-button"]}
+                      onClick={() => editItem(0)}
+                      style={{ display: "inline-block" }}
+                    >
+                      ↩
+                    </button>
+                  )}
+                  <div className={styles["itemWrapper"]}>
+                    {isEditMode && isEditItem != item.itemId && (
                      <div className={styles["editModeLayout"]}>
                        {isEditMode && (
                          <Switch
@@ -398,10 +631,10 @@ const ItemLister = ({
                      onPlusClick={() => handlePlusClick(item.itemId)}
                      onNegativeClick={() => handleNegativeClick(item.itemId)}
                      onRemoveClick={() => handleRemoveClick(item.itemId)}
-                      isBeingEdit={onEditItem == item.itemId}
+                      isBeingEdit={isEditItem == item.itemId}
                      isAvailable={item.availability}
                      handleUpdateItem={(name, price, image) =>
-                        handleUpdateItem(item.itemId, name, price, image)
+                        onUpdateItem(item.itemId, name, price, image)
                      }
                    />
                  </div>
@@ -427,34 +660,25 @@ const ItemLister = ({
            <div className={styles.PaymentOption}>
              <div className={styles.TotalContainer}>
                <span>Pengaturan</span>
-                <span className="svg-container">
-  <svg 
-    enable-background="new 0 0 91 91" 
-    height="91px" 
-    id="Layer_1" 
-    version="1.1" 
-    viewBox="0 0 91 91" 
-    width="40px" 
-  >
-    <g>
-      <path d="M45.574,38.253c-5.443,0-9.871,4.428-9.871,9.871s4.428,9.871,9.871,9.871s9.871-4.428,9.871-9.871 S51.018,38.253,45.574,38.253z M45.574,54.595c-3.568,0-6.471-2.904-6.471-6.471c0-3.568,2.902-6.471,6.471-6.471 c3.566,0,6.471,2.902,6.471,6.471C52.045,51.69,49.141,54.595,45.574,54.595z"/>
-      <path d="M64.057,27.726l-6.975,4.029c-0.971-0.686-2.004-1.281-3.086-1.781v-8.061H37.152v8.061 c-1.008,0.467-1.979,1.021-2.898,1.654l-6.936-4.111l-8.586,14.488l6.936,4.109c-0.078,0.709-0.115,1.373-0.115,2.01 c0,0.574,0.029,1.158,0.092,1.785l-6.98,4.031l8.422,14.584l6.979-4.031c0.973,0.686,2.004,1.281,3.088,1.781v8.061h16.844v-8.061 c1.008-0.467,1.977-1.021,2.896-1.654l6.936,4.111l8.586-14.488l-6.934-4.109c0.078-0.705,0.115-1.371,0.115-2.01 c0-0.576-0.029-1.158-0.092-1.785l6.98-4.031L64.057,27.726z M61.824,44.538l0.17,1.143c0.137,0.928,0.203,1.703,0.203,2.443 c0,0.797-0.076,1.656-0.232,2.631l-0.182,1.141l5.973,3.539l-5.119,8.639l-5.973-3.541l-0.914,0.713 c-1.244,0.969-2.617,1.754-4.078,2.33l-1.076,0.424v6.936H40.551v-6.934l-1.074-0.426c-1.533-0.605-2.955-1.428-4.23-2.443 l-0.906-0.723l-6.01,3.471l-5.021-8.695l6.016-3.475l-0.17-1.143c-0.137-0.928-0.203-1.703-0.203-2.443 c0-0.801,0.074-1.639,0.232-2.635l0.178-1.139l-5.971-3.537l5.119-8.639l5.973,3.543l0.914-0.713 c1.248-0.971,2.621-1.756,4.08-2.332l1.074-0.424v-6.936h10.045v6.934l1.076,0.426c1.529,0.605,2.953,1.428,4.229,2.443 l0.908,0.723l6.008-3.469l5.023,8.693L61.824,44.538z"/>
-    </g>
-  </svg>
-</span>
-
+                <span></span>
              </div>
-              <button className={styles.PayButton}>
+              <div className={styles.OptionContainer}>
+                <span>sembunyikan semua</span>
+                <span>
+                  <Switch
+                    onChange={() => setIsVisible(!isVisible)}
+                    checked={!isVisible}
+                  />
+                </span>
+              </div>
+              <button onClick={handleSaveType} className={styles.PayButton}>
                {false ? (
                  <ColorRing height="50" width="50" color="white" />
                ) : (
                  "Simpan"
                )}
              </button>
-              <div
-                className={styles.Pay2Button}
-                onClick={() => setIsEditing(false)}
-              >
+              <div className={styles.Pay2Button} onClick={resetItems}>
                Kembali
              </div>
            </div>
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -102,7 +102,7 @@

 .PaymentOption {
  overflow-x: hidden;
-  background-color: white;
+  background-color: #e9e9e9;
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -130,7 +130,18 @@
  padding: 10px 0;
  margin-bottom: 17px;
 }
-
+.OptionContainer {
+  display: flex;
+  justify-content: space-between;
+  width: 80vw;
+  margin: 0 auto;
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  font-size: 0.9em;
+  padding: 10px 0;
+  margin-bottom: 17px;
+}
 .PayButton {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
--- a/src/components/ItemType.js
+++ b/src/components/ItemType.js
@@ -25,7 +25,7 @@ export default function ItemType({
    if (selectedImage) {
      const reader = new FileReader();
      reader.onloadend = () => {
-        onClick(reader.result);
+        onClick(reader.result, selectedImage);
        // setPreviewUrl(reader.result);
      };
      reader.readAsDataURL(selectedImage);
@@ -37,6 +37,8 @@ export default function ItemType({

  const handleImageChange = (e) => {
    setSelectedImage(e.target.files[0]);
+    console.log(e.target.files[0]);
+    e.target.value = null; // This clears the input
  };

  const handleNameChange = (e) => {
@@ -83,7 +85,7 @@ export default function ItemType({
          <div className={styles["item-type-image-container"]}>
            <input
              type="file"
-              accept="image/*"
+              accept=".png, .jpg, .jpeg"
              className={styles["item-type-image-input"]}
              onChange={handleImageChange}
              id="image-input"
@@ -91,7 +93,7 @@ export default function ItemType({
          </div>
        )}
      </div>
-      {(!rectangular && !blank) && (
+      {!rectangular && !blank && (
        <input
          ref={inputRef}
          className={`${styles["item-type-name"]} ${styles.noborder}`}
--- a/src/components/ItemTypeLister.js
+++ b/src/components/ItemTypeLister.js
@@ -112,141 +112,19 @@ const ItemTypeLister = ({
          user.userId === shopOwnerId &&
          isAddingNewItem && (
            <>
-              <div style={{ display: "flex", alignItems: "center" }}>
-                <ItemType
-                  blank={true}
-                  imageUrl={previewUrl}
-                  name={"‎ "}
-                  onCreate={handleCreate}
-                />
-                <input
-                  className="item-type-name"
-                  value={itemTypeName}
-                  onChange={(e) => setItemTypeName(e.target.value)}
-                  placeholder="type name"
-                  style={{ marginLeft: "10px" }} // Adjust spacing as needed
-                />
-              </div>
-              <div className="rect-creator">
-                <div
-                  className="inline-container"
-                  style={{ overflowX: "hidden", visibility: "hidden" }}
-                >
-                  <ItemType
-                    onClick={() => onFilterChange(0)}
-                    imageUrl={getImageUrl("uploads/1718732420960.png")}
-                  />
-                  {/* <ItemType
-                    onClick={() => onFilterChange(0)}
-                    imageUrl={getImageUrl("uploads/1718732420960.png")}
-                  />
-                  <ItemType
-                    onClick={() => onFilterChange(0)}
-                    imageUrl={getImageUrl("uploads/1718732420960.png")}
-                  />
-                  <ItemType
-                    onClick={() => onFilterChange(0)}
-                    imageUrl={getImageUrl("uploads/1718732420960.png")}
-                  /> */}
-                </div>
-                <div className="grid-container" style={{ paddingTop: "15px" }}>
-                  <ItemType
-                    rectangular={true}
-                    blank={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/addnew.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/beverage1.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/beverage2.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/beverage3.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/dessert1.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/dessert2.jpg")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/food1.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/food2.jpg")}
-                  />
-
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/food3.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/packet1.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/packet2.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/snack1.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/snack2.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/snack3.png")}
-                  />
-                  <ItemType
-                    rectangular={true}
-                    onClick={(e) => handleImageChange(e)}
-                    imageUrl={getImageUrl("uploads/snack4.png")}
-                  />
-                </div>
-
-                <ItemLister
-                  shopId={shopId}
-                  shopOwnerId={shopOwnerId}
-                  user={user}
-                  typeName={"add new"}
-                  itemList={items}
-                  isEditMode={true}
-                  raw={true}
-                  handleCreateItem={handleCreateItem}
-                  beingEditedType={beingEditedType}
-                  setBeingEditedType={setBeingEditedType}
-                />
-                <button onClick={toggleAddNewItem} className="add-button">
-                  back
-                </button>
-              </div>
-
-              <h1>please select the icon</h1>
+              <ItemLister
+                shopId={shopId}
+                shopOwnerId={shopOwnerId}
+                user={user}
+                typeName={"add new"}
+                itemList={items}
+                isEditMode={true}
+                handleCreateItem={handleCreateItem}
+                beingEditedType={beingEditedType}
+                setBeingEditedType={setBeingEditedType}
+                alwaysEdit={true}
+                handleUnEdit={toggleAddNewItem}
+              />
            </>
          )}
        {itemTypes && itemTypes.length > 0 && (
--- a/src/components/RouletteWheel.js
+++ b/src/components/RouletteWheel.js
@@ -88,7 +88,6 @@ const RouletteWheel = ({ isForRegister, onSignIn, onSignUp }) => {
  };

  const handleTouchEnd = (e) => {
-    e.preventDefault();
    handleEnd();
  };

--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js

-const API_BASE_URL = "https://3nvnzs-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://wxf6vz-5000.csb.app"; // Replace with your actual backend URL

 export default API_BASE_URL;
--- a/src/helpers/itemHelper.js
+++ b/src/helpers/itemHelper.js
@@ -4,10 +4,17 @@ import { getItemsByCafeId } from "./cartHelpers.js";
 export async function getItemTypesWithItems(shopId) {
  try {
    const response = await fetch(
-      `${API_BASE_URL}/item/get-cafe-items/` + shopId
+      `${API_BASE_URL}/item/get-cafe-items/` + shopId,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getAuthToken()}`,
+        },
+      }
    );
-
    const data = await response.json();
+    console.log(data);
    return { response, cafe: data.cafe, data: data.data }; // Return an object with response and data
  } catch (error) {
    console.error("Failed to fetch item types with items:", error);
@@ -96,13 +103,20 @@ export async function createItem(
  }
 }

-export async function updateItem(itemId, name, price, selectedImage) {
+export async function updateItem(
+  itemId,
+  name,
+  price,
+  selectedImage,
+  isVisible
+) {
  try {
    console.log(selectedImage);
    const formData = new FormData();
    formData.append("name", name);
    formData.append("price", price);
    formData.append("image", selectedImage);
+    formData.append("isVisible", isVisible);

    const response = await fetch(`${API_BASE_URL}/item/set-item/${itemId}`, {
      method: "PUT",
@@ -178,18 +192,36 @@ export async function createItemType(shopId, name, selectedImage) {
    throw error;
  }
 }
-
-export async function updateItemType(shopId, itemTypeId, newName) {
+export async function updateItemType(
+  shopId,
+  itemTypeId,
+  newName,
+  previewUrl,
+  selectedImage,
+  isVisible
+) {
  try {
+    const formData = new FormData();
+    formData.append("name", newName);
+    console.log(selectedImage);
+    console.log(previewUrl);
+    // Check if selectedImage contains API_BASE_URL
+    if (selectedImage == null) {
+      // Remove the API_BASE_URL and any leading slashes
+      previewUrl = previewUrl.replace(API_BASE_URL, "").replace(/^\/+/, "");
+      formData.append("sampleImage", previewUrl);
+    } else formData.append("image", selectedImage);
+    console.log(selectedImage);
+    formData.append("isVisible", isVisible);
+
    const response = await fetch(
-      `${API_BASE_URL}/item/updateType/` + shopId + "/" + itemTypeId,
+      `${API_BASE_URL}/item/updateType/${shopId}/${itemTypeId}`,
      {
        method: "PUT",
        headers: {
-          "Content-Type": "application/json",
          Authorization: `Bearer ${getAuthToken()}`,
        },
-        body: JSON.stringify({ newName }),
+        body: formData,
      }
    );

--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -84,8 +84,8 @@ function CafePage({
        textColor: parsedConfig.textColor || "#000000",
        isActive: parsedConfig.isWelcomePageActive === "true",
      });
-      checkWelcomePageConfig();
    }
+    checkWelcomePageConfig();
  }, [welcomePageConfig]);
  useEffect(() => {
    if (user.cafeId != null && user.cafeId !== shopId) {
@@ -217,17 +217,23 @@ function CafePage({
                      typeName={itemType.name}
                      typeImage={itemType.image}
                      itemList={itemType.itemList}
+                      typeVisibility={itemType.visibility}
                      isEditMode={isEditMode}
                      beingEditedType={beingEditedType}
                      setBeingEditedType={setBeingEditedType}
                      raw={isEditMode || filterId == 0 ? false : true}
-                      handleCreateItem={(name, price, selectedImage) =>
+                      handleCreateItem={(
+                        itemTypeID,
+                        name,
+                        price,
+                        selectedImage
+                      ) =>
                        createItem(
                          shopId,
                          name,
                          price,
                          selectedImage,
-                          itemType.itemTypeId
+                          itemTypeID
                        )
                      }
                      handleUpdateItem={(itemId, name, price, selectedImage) =>