From 725bb867bf156cd73a07703396f3c93e4684cbe3 Mon Sep 17 00:00:00 2001
From: insvrgent <zaditgans671555@gmail.com>
Date: Fri, 14 Feb 2025 17:43:22 +0700
Subject: [PATCH] ok

---
 src/App.css                       |   2 +-
 src/App.js                        |  26 +++---
 src/components/Item.js            |  34 ++++++--
 src/components/Item.module.css    |   8 +-
 src/components/ItemLister.js      |   6 +-
 src/components/MusicPlayer.css    |   2 +-
 src/helpers/cartHelpers.js        |   7 +-
 src/pages/CafePage.js             | 129 ++++++++++++++++++------------
 src/pages/LinktreePage.module.css |   4 +-
 9 files changed, 136 insertions(+), 82 deletions(-)

diff --git a/src/App.css b/src/App.css
index f70efc5..5576ee1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,7 +8,7 @@ body {
 }
 
 .App {
-  overflow-x: hidden;
+  /* overflow-x: hidden; */
 }
 
 .App-logo {
diff --git a/src/App.js b/src/App.js
index 37de452..a9f209c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -55,6 +55,7 @@ function App() {
   const [shopIdentifier, setShopIdentifier] = useState("");
   const [table, setTable] = useState([]);
   const [totalItemsCount, setTotalItemsCount] = useState(0);
+  const [totalPrice, setTotalPrice] = useState(0);
   const [deviceType, setDeviceType] = useState("");
   const [shop, setShop] = useState([]);
   const [shopItems, setShopItems] = useState([]);
@@ -78,8 +79,9 @@ function App() {
 
   useEffect(() => {
     const calculateTotalsFromLocalStorage = () => {
-      const { totalCount } = calculateTotals(shopId);
+      const { totalCount, totalPrice } = calculateTotals(shopId);
       setTotalItemsCount(totalCount);
+      setTotalPrice(totalPrice);
     };
 
     calculateTotalsFromLocalStorage();
@@ -563,14 +565,16 @@ function App() {
                   setModal={setModal} // Pass the function to open modal
                   loading={shop.name == null}
                   queue={queue}
+                  cartItemsLength={totalItemsCount}
+                  totalPrice={totalPrice}
                 />
-                <Footer
+                {/* <Footer
                   showTable={true}
                   shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={0}
-                />
+                /> */}
               </>
             }
           />
@@ -588,12 +592,12 @@ function App() {
                   removeConnectedGuestSides={rmConnectedGuestSides}
                   setModal={setModal} // Pass the function to open modal
                 />
-                <Footer
+                {/* <Footer
                   shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={1}
-                />
+                /> */}
               </>
             }
           />
@@ -609,12 +613,12 @@ function App() {
                   totalItemsCount={totalItemsCount}
                   deviceType={deviceType}
                 />
-                <Footer
+                {/* <Footer
                   shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={2}
-                />
+                /> */}
               </>
             }
           />
@@ -629,12 +633,12 @@ function App() {
                   socket={socket}
                   deviceType={deviceType}
                 />
-                <Footer
+                {/* <Footer
                   shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={2}
-                />
+                /> */}
               </>
             }
           />
@@ -647,12 +651,12 @@ function App() {
                   sendParam={handleSetParam}
                   deviceType={deviceType}
                 />
-                <Footer
+                {/* <Footer
                   shopId={shopIdentifier}
                   table={table}
                   cartItemsLength={totalItemsCount}
                   selectedPage={3}
-                />
+                /> */}
               </>
             }
           />
diff --git a/src/components/Item.js b/src/components/Item.js
index 94c3800..c38e60f 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -93,7 +93,7 @@ const Item = ({
     <div className={`${!last ? styles.notLast : ""}`}>
       <div className={`${styles.item} ${forInvoice ? styles.itemInvoice : ""} `}>
         {!forInvoice && (
-          <div className={styles.imageContainer}>
+          // <div className={styles.imageContainer}>
             <img
               src={
                 previewUrl
@@ -107,9 +107,9 @@ const Item = ({
               style={{
                 filter: !isAvailable ? "grayscale(100%)" : "none",
               }}
-              className={styles.itemImage}
+              className={styles.imageContainer}
             />
-          </div>
+          // </div>
         )}
         <div className={styles.itemDetails}>
           {forInvoice &&
@@ -141,7 +141,18 @@ const Item = ({
           onChange={handleNameChange}
           disabled={!blank && !isBeingEdit}
         /> */}
-          <h3 style={{ textTransform: 'capitalize', margin: '5px 0px 10px 10px', fontSize: '17px' }}>{itemName}</h3>
+          <h3 style={{
+  textTransform: 'capitalize',
+  margin: '5px 0px 10px 10px',
+  fontSize: '16px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis'
+}}>
+  {itemName}
+</h3>
           {forInvoice && (
             <>
               <p className={styles.multiplySymbol}>x</p>
@@ -175,16 +186,17 @@ const Item = ({
                     position: 'relative',
                     marginTop: '0.125rem',
                     display: 'flex',
-                    width: 'max-content',
+                    width: '87px',
                     alignItems: 'center',
                     whiteSpace: 'nowrap',
                     borderRadius: '9999px',
                     backgroundImage: 'linear-gradient(to right, #e52535, #eb525e)',
-                    padding: '0.25rem 0.75rem',
+                    padding: '0.25rem 0rem',
                     color: 'rgb(255, 255, 255)',
                     fontSize: '0.75rem',
                     fontWeight: 600,
-                    lineHeight: '1rem'
+                    lineHeight: '1rem',
+                    justifyContent: 'center'
                   }}>
                     Promo {(((initialPrice - promoPrice) / initialPrice) * 100).toFixed(0)}%
                   </div>
@@ -304,7 +316,13 @@ const Item = ({
       </div>
       {itemDescription && itemDescription != 'undefined' && itemDescription?.length &&
         <div>
-          <p style={{ color: '#5f5f5f', fontSize: '3.2vw', padding: '5px', margin: 0 }}>{itemDescription}</p>
+          <p style={{ 
+            maxHeight: '34px',
+  display: '-webkit-box',
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  WebkitLineClamp: 2,
+  textOverflow: 'ellipsis', color: '#5f5f5f', fontSize: '14px', padding: '5px', margin: 0 }}>{itemDescription}</p>
         </div>
       }
     </div>
diff --git a/src/components/Item.module.css b/src/components/Item.module.css
index 669c163..3c6b497 100644
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -46,16 +46,16 @@
 .itemImage {
   width: 100%;
   height: 100%;
-  border-radius: 10px;
-  margin-right: 10px;
-  object-fit: cover;
-  position: relative;
 }
 
 .imageContainer {
   position: relative;
   width: 26vw;
   height: 26vw;
+  border-radius: 10px;
+  margin-right: 10px;
+  object-fit: cover;
+  position: relative;
 }
 
 .overlay {
diff --git a/src/components/ItemLister.js b/src/components/ItemLister.js
index 1ec35c0..7c899cc 100644
--- a/src/components/ItemLister.js
+++ b/src/components/ItemLister.js
@@ -77,7 +77,8 @@ const ItemLister = ({
     const updatedItems = items.map((item) => {
       if (item.itemId === itemId) {
         const newQty = item.qty + 1;
-        updateItemQtyInCart(shopId, itemId, newQty);
+        const nowPrice = item.promoPrice > 0 ? item.promoPrice : item.price
+        updateItemQtyInCart(shopId, itemId, newQty, nowPrice);
 
         if (forCart) refreshTotal();
 
@@ -93,7 +94,8 @@ const ItemLister = ({
       .map((item) => {
         if (item.itemId === itemId && item.qty > 0) {
           const newQty = item.qty - 1;
-          updateItemQtyInCart(shopId, itemId, newQty);
+          const nowPrice = item.promoPrice > 0 ? item.promoPrice : item.price
+          updateItemQtyInCart(shopId, itemId, newQty, nowPrice);
 
           if (forCart) {
             refreshTotal();
diff --git a/src/components/MusicPlayer.css b/src/components/MusicPlayer.css
index 8ad26cd..a2c16cf 100644
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -25,7 +25,7 @@
   /* filter: blur(1.5px);
   -webkit-filter: blur(1.5px); */
   /* border-radius: 13px 13px 0 0; */
-  background-color: rgb(95 121 89);
+  background-color: #8ec781;
   /* Rounded corners at the top */
   text-align: right;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
diff --git a/src/helpers/cartHelpers.js b/src/helpers/cartHelpers.js
index 57d7255..3252e3f 100644
--- a/src/helpers/cartHelpers.js
+++ b/src/helpers/cartHelpers.js
@@ -18,7 +18,7 @@ export const getItemsByCafeId = (cafeId) => {
 };
 
 // Update quantity in localStorage for a specific cafeId and itemId
-export const updateItemQtyInCart = (cafeId, itemId, qty) => {
+export const updateItemQtyInCart = (cafeId, itemId, qty, price) => {
   let cart = JSON.parse(getLocalStorage('cart')) || [];
   const cafeIndex = cart.findIndex(cafeItem => cafeItem.cafeId === cafeId);
 
@@ -27,14 +27,15 @@ export const updateItemQtyInCart = (cafeId, itemId, qty) => {
     if (itemIndex > -1) {
       if (qty > 0) {
         cart[cafeIndex].items[itemIndex].qty = qty; // Update qty if item exists
+        cart[cafeIndex].items[itemIndex].price = price; // Update qty if item exists
       } else {
         cart[cafeIndex].items.splice(itemIndex, 1); // Remove item if qty is 0
       }
     } else if (qty > 0) {
-      cart[cafeIndex].items.push({ itemId, qty }); // Add new item
+      cart[cafeIndex].items.push({ itemId, qty, price }); // Add new item
     }
   } else if (qty > 0) {
-    cart.push({ cafeId, items: [{ itemId, qty }] }); // Add new cafeId and item
+    cart.push({ cafeId, items: [{ itemId, qty, price }] }); // Add new cafeId and item
   }
 
   updateLocalStorage('cart', JSON.stringify(cart));
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index a3ea60b..214932e 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -22,6 +22,7 @@ import { ThreeDots } from "react-loader-spinner";
 import { getLocalStorage, updateLocalStorage, removeLocalStorage } from "../helpers/localStorageHelpers";
 import { unsubscribeUser } from "../helpers/subscribeHelpers.js";
 import WelcomePage from "./WelcomePage.js";
+import { useNavigationHelpers } from "../helpers/navigationHelpers";
 
 function CafePage({
   shopId,
@@ -40,14 +41,22 @@ function CafePage({
   removeConnectedGuestSides,
   setModal,
   loading,
-  queue
+  queue,
+  cartItemsLength,
+  totalPrice
 }) {
+
+
+  const {
+    goToCart
+  } = useNavigationHelpers(shopId, table.tableCode);
+
   const location = useLocation();
   const [searchParams] = useSearchParams();
   const token = searchParams.get("token");
   const { shopIdentifier, tableCode } = useParams();
   sendParam({ shopIdentifier, tableCode });
-  
+
   const navigate = useNavigate();
 
   const [screenMessage, setScreenMessage] = useState("");
@@ -140,10 +149,10 @@ function CafePage({
 
   const moveItemTypeHandler = async (itemTypeId, direction, index) => {
     const previousItems = [...shopItems];
-    
+
     // Update local state immediately
     const newItems = [...shopItems];
-  
+
     let targetIndex;
     if (direction === 'up' && index > 0) {
       targetIndex = index - 1;
@@ -157,9 +166,9 @@ function CafePage({
       [newItems[index], newItems[targetIndex]] = [newItems[targetIndex], newItems[index]];
       newItems[index].order = targetIndex;
       newItems[targetIndex].order = index;
-    
+
       setShopItems(newItems);
-  
+
       // Call the API to move the item type
       try {
         await moveItemType(itemTypeId, previousItems[targetIndex].itemTypeId, index, targetIndex);
@@ -170,7 +179,7 @@ function CafePage({
       }
     }
   };
-  
+
   if (loading)
     return (
       <div className="Loader">
@@ -235,54 +244,74 @@ function CafePage({
                   beingEditedType={beingEditedType}
                   setBeingEditedType={setBeingEditedType}
                 />
-
                 {/* <div style={{ marginTop: "15px" }}></div> */}
-                {shopItems
-                  .filter(
-                    (itemType) =>
-                      filterId == 0 || itemType.itemTypeId === filterId
-                  )
-                  .map((itemType, index) => (
-                    <ItemLister
-                      index={index}
-                      indexTotal={shopItems.length}
-                      shopId={shopId}
-                      shopOwnerId={shopOwnerId}
-                      user={user}
-                      key={itemType.itemTypeId}
-                      itemTypeId={itemType.itemTypeId}
-                      typeName={itemType.name}
-                      typeImage={itemType.image}
-                      setShopItems={setShopItems}
-                      itemList={itemType.itemList}
-                      typeVisibility={itemType.visibility}
-                      moveItemTypeUp={(e)=>moveItemTypeHandler(e,'up', index)}
-                      moveItemTypeDown={(e)=>moveItemTypeHandler(e, 'down', index)}
-                      isEditMode={isEditMode}
-                      beingEditedType={beingEditedType}
-                      setBeingEditedType={setBeingEditedType}
-                      raw={isEditMode || filterId == 0 ? false : true}
-                      handleCreateItem={(
-                        itemTypeID,
-                        name,
-                        price,
-                        selectedImage,
-                        description
-                      ) =>
-                        createItem(
-                          shopId,
+                <div>
+                  {shopItems
+                    .filter(
+                      (itemType) =>
+                        filterId == 0 || itemType.itemTypeId === filterId
+                    )
+                    .map((itemType, index) => (
+                      <ItemLister
+                        index={index}
+                        indexTotal={shopItems.length}
+                        shopId={shopId}
+                        shopOwnerId={shopOwnerId}
+                        user={user}
+                        key={itemType.itemTypeId}
+                        itemTypeId={itemType.itemTypeId}
+                        typeName={itemType.name}
+                        typeImage={itemType.image}
+                        setShopItems={setShopItems}
+                        itemList={itemType.itemList}
+                        typeVisibility={itemType.visibility}
+                        moveItemTypeUp={(e) => moveItemTypeHandler(e, 'up', index)}
+                        moveItemTypeDown={(e) => moveItemTypeHandler(e, 'down', index)}
+                        isEditMode={isEditMode}
+                        beingEditedType={beingEditedType}
+                        setBeingEditedType={setBeingEditedType}
+                        raw={isEditMode || filterId == 0 ? false : true}
+                        handleCreateItem={(
+                          itemTypeID,
                           name,
                           price,
                           selectedImage,
-                          itemTypeID,
                           description
-                        )
-                      }
-                      handleUpdateItem={(itemId, name, price, selectedImage, description, promoPrice) =>
-                        updateItem(itemId, name, price, selectedImage, description, promoPrice)
-                      }
-                    />
-                  ))}
+                        ) =>
+                          createItem(
+                            shopId,
+                            name,
+                            price,
+                            selectedImage,
+                            itemTypeID,
+                            description
+                          )
+                        }
+                        handleUpdateItem={(itemId, name, price, selectedImage, description, promoPrice) =>
+                          updateItem(itemId, name, price, selectedImage, description, promoPrice)
+                        }
+                      />
+                    ))}
+                  { }
+                  {cartItemsLength > 0 &&
+                    <div style={{ marginTop: '10px', height: '40px', position: 'sticky', bottom: '40px', display: 'flex', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
+
+                      <div onClick={goToCart} style={{ backgroundColor: 'rgb(142, 199, 129)', width: '70vw', height: '40px', borderRadius: '30px', display: 'flex', justifyContent: 'space-between', padding: '0 20px' }}>
+                        <div style={{ display: 'flex', flexWrap: 'wrap', alignContent: 'center' }}>{cartItemsLength} item</div>
+                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', width: '130px' }}>
+                          <span style={{ whiteSpace: 'nowrap' }}>Rp{totalPrice}</span>
+                          <div style={{ display: 'flex', alignItems: 'center', marginLeft: '5px', width: '30px' }}>
+                            <svg viewBox="0 0 34 34" style={{ fill: 'white', marginTop: '4px' }}>
+                              <path d="M9.79175 24.75C8.09591 24.75 6.72383 26.1375 6.72383 27.8333C6.72383 29.5292 8.09591 30.9167 9.79175 30.9167C11.4876 30.9167 12.8751 29.5292 12.8751 27.8333C12.8751 26.1375 11.4876 24.75 9.79175 24.75ZM0.541748 0.0833435V3.16668H3.62508L9.17508 14.8679L7.09383 18.645C6.84717 19.0767 6.70842 19.5854 6.70842 20.125C6.70842 21.8208 8.09591 23.2083 9.79175 23.2083H28.2917V20.125H10.4392C10.2234 20.125 10.0538 19.9554 10.0538 19.7396L10.1001 19.5546L11.4876 17.0417H22.973C24.1292 17.0417 25.1467 16.4096 25.6709 15.4538L31.1901 5.44834C31.3134 5.23251 31.3751 4.97043 31.3751 4.70834C31.3751 3.86043 30.6813 3.16668 29.8334 3.16668H7.03217L5.583 0.0833435H0.541748ZM25.2084 24.75C23.5126 24.75 22.1405 26.1375 22.1405 27.8333C22.1405 29.5292 23.5126 30.9167 25.2084 30.9167C26.9042 30.9167 28.2917 29.5292 28.2917 27.8333C28.2917 26.1375 26.9042 24.75 25.2084 24.75Z"></path>
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+
+                    </div>
+                  }
+                </div>
+                <div style={{ marginTop: '30px', height: '68px', backgroundColor: 'rgb(222 237 100)', fontWeight: 700, fontSize: '25px', lineHeight: '2.25rem', letterSpacing: '-1px', color: 'rgb(37, 79, 26)', padding: '10px' }}><div>KEDAIMASTER</div></div>
               </body>
             </div>
           )
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index f90c4c9..b0025be 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background-color: rgb(210, 232, 35);
+  background-color: rgb(222 237 100);
 }
 
 .nonCenteredLinktreePage {
@@ -26,7 +26,7 @@
 }
 
 .dashboardContainer {
-  background-color: rgb(210, 232, 35);
+  background-color: inherit;
   z-index: 6;
   padding: 0 1rem;
   padding-top: 40px;