ok

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}

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 [isVisible, setIsVisible] = useState(typeVisibility);
-  const [onEditItem, setOnEditItem] = useState(0);
+  const [isEdit, setIsEditing] = useState(alwaysEdit);
-  const [isAddingNewItem, setIsAddingNewItem] = useState(false);
+  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 {
+    if (isEdit) {
-      // Wait for the updateItemAvailability response
+      // If isEdit, add item to the list of items to update
-      const response = await updateItemAvalilability(itemId, newAvailability);
+      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);
-
+      updatedItems[itemIndex].availability = !newAvailability; // revert back
-      // Optionally revert to the previous availability if needed
-      updatedItems[itemIndex].availability = item.availability; // revert back
       setItems(updatedItems);
     }
   };
-  const onCreateItem = (itemName, itemPrice, selectedImage, previewUrl) => {
+
-    handleCreateItem(itemName, itemPrice, selectedImage, previewUrl);
+  const handleSaveType = async () => {
-    setIsAddingNewItem(false);
+    try {
-  };
+      console.log(isVisible);
-  console.log(getImageUrl(typeImage));
+      if (itemTypeId) {
-  const [selectedImage, setSelectedImage] = useState(null);
+        await updateItemType(
-  const [previewUrl, setPreviewUrl] = useState("");
+          shopId,
-  useEffect(() => {
+          itemTypeId,
-    if (selectedImage) {
+          typeNameInputRef.current.value,
-      setPreviewUrl(selectedImage);
+          previewUrl,
-    } else {
+          selectedImage,
-      setPreviewUrl(getImageUrl(typeImage));
+          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"]}>
-            <div className={styles["title-container"]}>
+            {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
-              {isEdit && <ItemType blank={true} imageUrl={previewUrl} />}
+            <input
-              <input
+              ref={typeNameInputRef}
-                ref={typeNameInputRef}
+              className={`${styles.title} ${
-                className={`${styles.title} ${
+                isEdit ? styles.border : styles.noborder
-                  isEdit ? styles.border : styles.noborder
+              }`}
-                }`}
+              value={editedTypeName}
-                value={editedTypeName}
+              onChange={(e) => setEditedTypeName(e.target.value)}
-                onChange={(e) => setEditedTypeName(e.target.value)}
+              disabled={!isEdit}
-                disabled={!isEdit}
+            />
-              />
+            {isEditMode && !isEdit && (
-              {isEditMode && !isEdit && (
+              <>
-                <>
+                <button
-                  <button
+                  className={styles["edit-typeItem-button"]}
-                    className={styles["edit-typeItem-button"]}
+                  onClick={toggleEditTypeItem}
-                    onClick={toggleEditTypeItem}
+                >
-                  >
+                  Edit
-                    Edit
+                </button>
-                  </button>
+              </>
-                </>
+            )}
-              )}
+          </div>
-            </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">
+                <span></span>
-  <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>
-
               </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
+              <div className={styles.Pay2Button} onClick={resetItems}>
-                className={styles.Pay2Button}
-                onClick={() => setIsEditing(false)}
-              >
                 Kembali
               </div>
             </div>

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;

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}`}

src/components/ItemTypeLister.js

@@ -112,141 +112,19 @@ const ItemTypeLister = ({
           user.userId === shopOwnerId &&
           isAddingNewItem && (
             <>
-              <div style={{ display: "flex", alignItems: "center" }}>
+              <ItemLister
-                <ItemType
+                shopId={shopId}
-                  blank={true}
+                shopOwnerId={shopOwnerId}
-                  imageUrl={previewUrl}
+                user={user}
-                  name={"‎ "}
+                typeName={"add new"}
-                  onCreate={handleCreate}
+                itemList={items}
-                />
+                isEditMode={true}
-                <input
+                handleCreateItem={handleCreateItem}
-                  className="item-type-name"
+                beingEditedType={beingEditedType}
-                  value={itemTypeName}
+                setBeingEditedType={setBeingEditedType}
-                  onChange={(e) => setItemTypeName(e.target.value)}
+                alwaysEdit={true}
-                  placeholder="type name"
+                handleUnEdit={toggleAddNewItem}
-                  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>
             </>
           )}
         {itemTypes && itemTypes.length > 0 && (

src/components/RouletteWheel.js

@@ -88,7 +88,6 @@ const RouletteWheel = ({ isForRegister, onSignIn, onSignUp }) => {
   };
 
   const handleTouchEnd = (e) => {
-    e.preventDefault();
     handleEnd();
   };
 

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;

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(
-export async function updateItemType(shopId, itemTypeId, newName) {
+  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,
       }
     );
 

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) =>